/* -------------------------------- */
/* Estilos Generales del Contenedor */
/* -------------------------------- */
#obamacare-calculator {
    color: #1a202c; /* Color de texto principal */
}

#obamacare-calculator .form-subtitle{
    font-size: 12px;
    font-style: italic;
    line-height: 18px;
    margin-bottom: 10px;
}

#obamacare-calculator .household{
    margin-bottom: 0;
}

#obamacare-calculator .error-message {
    color: red;
    font-size: 0.85rem;
    margin-top: 5px;
    display: none;
}

#obamacare-calculator input[data-touched="true"]:invalid {
    border-color: red;
}

#obamacare-calculator input:not([data-touched]) {
    border-color: lightgray;
}


#obamacare-calculator ::placeholder {
    color: #666; /* Cambia el color del texto del placeholder */
    opacity: 0.5; /* Asegúrate de que sea completamente visible */
    font-style: italic;
}

#obamacare-calculator ::-webkit-input-placeholder { /* Chrome, Safari, Edge */
    color: #666;
}
#obamacare-calculator :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #666;
}
#obamacare-calculator ::-ms-input-placeholder { /* Microsoft Edge */
    color: #666;
}


#obamacare-calculator .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
    @media (max-width: 768px) {
        margin: 0 !important;
    }
}

#obamacare-calculator .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#obamacare-calculator .col-12 {
    width: 100%;
}

#obamacare-calculator img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ----------------------------- */
/* Tipografía y Encabezados (h1) */
/* ----------------------------- */
#obamacare-calculator h1 {
    color: var(--Primary-900, #1F448D);
    font-family: Lato;
    font-size: 50px;
    font-style: normal;
    font-weight: 900;
    line-height: 60px;
    letter-spacing: -1.2px;
    margin-bottom: 1.5rem;
    @media (max-width: 768px) {
        font-size: 36px;
        line-height: 44px; /* 122.222% */
    }
}
#obamacare-calculator h3 {
    color: var(--Gray-700, #344054);
    text-align: center;
    font-family: Lato;
    font-size: 36px;
    font-style: normal;
    font-weight: 900;
    line-height: 44px; /* 122.222% */
    letter-spacing: -0.72px;
}

/* ----------------------------- */
/* Botones Generales (btn)       */
/* ----------------------------- */
#obamacare-calculator .btn {
    background-color: #2b6cb0; /* Azul primario */
    color: #ffffff; /* Texto blanco */
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#obamacare-calculator .btn:hover {
    background-color: #2c5282; /* Azul más oscuro al pasar el ratón */
}

#obamacare-calculator .btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}

#obamacare-calculator .btn-primary {
    background-color: #3182ce;
    color: #fff;
    border-radius: 0.25rem;
}

#obamacare-calculator .btn-primary:hover {
    background-color: #2b6cb0;
}

#obamacare-calculator #back-global.btn {
    position: absolute;
    display: flex;
    padding: 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: 1px solid var(--Gray-300, #D0D5DD);
    background: var(--Base-White, #FFF);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    @media (max-width: 768px) {
        position: relative;
    }
}
#obamacare-calculator #back-global.btn:hover{
    border: 1px solid var(--Gray-300, #D0D5DD);
    background: var(--Gray-50, #F9FAFB);
}

/* -------------------------------------- */
/* Botón Específico: Compare Button       */
/* -------------------------------------- */
#obamacare-calculator #compare-button {
    display: inline-flex;
    padding: 16px 28px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    border-radius: 8px;
    border: 1px solid var(--Primary-800, #2A61AD);
    background: var(--Primary-700, #3071BF);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

#obamacare-calculator #compare-button:hover {
    border-radius: 8px;
    border: 1px solid var(--Primary-900, #1F448D);
    background: var(--Primary-800, #2A61AD);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

#obamacare-calculator #compare-button .button-content {
    display: flex;
    align-items: center;
    gap: 8px; /* Espaciado entre íconos y texto */
    color: var(--Base-White, #FFF);
    /* Text lg/Heavy */
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px; /* 155.556% */
}

#obamacare-calculator #compare-button .icon-cart,
#obamacare-calculator #compare-button .icon-arrow {
    width: 16px;
    height: 16px;
    stroke: #fff;
}

/* -------------------------------- */
/* Estilos del Indicador de Progreso */
/* -------------------------------- */
#obamacare-calculator .header-container{
    @media (max-width: 768px) {
        display: flex;
    }
}
#obamacare-calculator #progress-container{
    @media (max-width: 768px) {
        flex: 10;
    }
}
#obamacare-calculator .progress-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    padding-bottom: 4px;
    padding-top: 10px;
    border: none;
    @media (max-width: 768px) {
        padding: 10px;
    }
}

#obamacare-calculator .progress-steps {
    list-style: none;
    display: flex;
    justify-content: space-between;
    width: 100%; /* Línea de progreso ocupa todo el contenedor */
    max-width: 600px;
    position: relative;
    padding: 0;
    margin: 0;
}

#obamacare-calculator .progress-steps .step {
    position: relative;
    width: 24px; /* Tamaño del círculo */
    height: 24px;
    border-radius: 50%;
    background-color: var(--Neutral-200, #FFF); /* Fondo gris claro */
    border: 2px solid var(--Neutral-200, #EAECF0);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Línea de progreso (background) */
#obamacare-calculator .progress-steps::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 12px; /* Alinear con el borde izquierdo del primer paso */
    right: 12px; /* Alinear con el borde derecho del último paso */
    height: 2px;
    background: linear-gradient(
        to right,
        var(--Neutral-200, #EAECF0) 0%, /* Línea gris al inicio */
        var(--Neutral-200, #EAECF0) 100% /* Resto sin completar */
    );
    z-index: 1;
    transform: translateY(-50%);
    transition: background 0.3s ease; /* Transición suave para cambios dinámicos */
}


/* Puntos pequeños entre pasos */
#obamacare-calculator .progress-steps .connector {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px; /* Tamaño del punto pequeño */
    height: 8px;
    border-radius: 50%;
    background-color: var(--Neutral-200, #EAECF0); /* Fondo gris claro */
    z-index: 1;
    transition: background-color 0.3s ease;
}

/* Paso activo */
#obamacare-calculator .progress-steps .step.active {
    background-color: var(--Primary-500, #E4F1FB); /* Fondo azul */
    border-color: var(--Primary-500, #3783D1);
    box-shadow: 0px 0px 0px 4px #BCDCF5;
}

/* Conector activo */
#obamacare-calculator .progress-steps .step.active + .connector {
    background-color: var(--Primary-500, #3783D1);
}

/* Paso completado */
#obamacare-calculator .progress-steps .step.completed {
    background-color: var(--Success-500, #E4F1FB); /* Fondo verde */
    border-color: var(--Success-500, #3783D1);
    color: #FFFFFF; /* Texto blanco */
}
#obamacare-calculator .progress-steps .step.completed .connector{
    display: none;
}

#obamacare-calculator .progress-steps .step.active .connector{
    background-color: var(--Success-500, #3783D1);
}

/* Reemplazar puntico por un check (✔) para pasos completados */
#obamacare-calculator .progress-steps .step.completed::after {
    content: "✔"; /* Ícono de check */
    font-size: 14px; /* Tamaño del ícono */
    color: #3783D1; /* Color del check */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    font-family: 'Lato';
}

/* Conector completado */
#obamacare-calculator .progress-steps .step.completed + .connector {
    background-color: var(--Success-500, #48BB78); /* Punto pequeño verde */
}

/* Texto dinámico */
#obamacare-calculator .progress-text {
    color: var(--Primary-700, #3071BF);
    text-align: center;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
    line-height: 28px; /* 155.556% */
}



/* -------------------------------- */
/* Estilos para la Pantalla 1       */
/* -------------------------------- */
#obamacare-calculator .first-screen {
    padding: 2rem;
    border-radius: 1rem;
    text-align: center;
    background: var(--Primary-100, #BCDCF5);
}

@media (max-width: 576px) {
    #obamacare-calculator .first-screen {
        padding: 1.5rem;
    }

    #obamacare-calculator .first-screen .col-md-7{
        height: 240px !important;
    }

    #obamacare-calculator .btn {
        width: 100%; /* Botón ocupa todo el ancho en móviles */
    }
}

/* -------------------------------- */
/* Estilos para la Pantalla 2       */
/* -------------------------------- */
#obamacare-calculator .second-screen.screen {
    width: 384px;
    margin: auto;
}

@media (max-width: 768px) {
    #obamacare-calculator .second-screen.screen {
        width: auto;
    }
}

#obamacare-calculator .second-screen .list-group,
#obamacare-calculator .second-screen #state-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 500px;
}

#obamacare-calculator .second-screen #state-list .list-group-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    margin-bottom: 8px;
    border-radius: 8px;
    border: 1px solid var(--Gray-300, #D0D5DD);
    background-color: var(--Gray-50, #F9FAFB);
    transition: background-color 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
}

#obamacare-calculator .second-screen #state-list .list-group-item.selected {
    border-color: var(--Primary-500, #3071BF);
    background-color: var(--Primary-50, #EAF4FD);
}

#obamacare-calculator .second-screen #state-list .list-group-item label {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 600;
    color: var(--Gray-700, #344054);
    cursor: pointer;
    flex-grow: 1;
}

#obamacare-calculator .second-screen #state-list .list-group-item input[type="radio"] {
    display: none;
}

#obamacare-calculator .second-screen #state-list .list-group-item input[type="radio"] + label::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--Gray-300, #D0D5DD);
    background-color: var(--Base-White, #FFF);
    transition: all 0.3s ease;
    margin-left: 8px;
}

#obamacare-calculator .second-screen #state-list .list-group-item input[type="radio"]:checked + label::after {
    content: "✔";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 14px;
    font-weight: bold;
    color: var(--Base-White, #FFF);
    background-color: var(--Primary-500, #3071BF);
    border: 2px solid var(--Primary-500, #3071BF);
    font-family: lato;
}

#obamacare-calculator .second-screen .btn-success {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 28px;
    gap: 12px;
    border-radius: 8px;
    border: 1px solid var(--Primary-800, #2A61AD);
    background: var(--Primary-700, #3071BF);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    margin: auto;
    width: 100%;
    color: var(--Base-White, #FFF);
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    cursor: pointer;
}

#obamacare-calculator .second-screen .btn-success:hover {
    background-color: var(--Primary-600, #2C5282);
}

/* -------------------------------- */
/* Estilos para la Pantalla 3       */
/* -------------------------------- */
#obamacare-calculator .third-screen.screen {
    width: 384px;
    margin: auto;
    @media (max-width: 768px) {
        width: auto;
    }
}

#obamacare-calculator .third-screen .btn-success {
    display: flex;
    padding: 16px 28px;
    align-items: center;
    gap: 12px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Primary-800, #2A61AD);
    background: var(--Primary-700, #3071BF);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    justify-content: center;
    margin: auto;
    width: 100%;
}

#obamacare-calculator .third-screen .btn-success:hover {
    background-color: var(--Primary-600, #2C5282);
}

#obamacare-calculator .third-screen #personal-info-form label{
    color: var(--Gray-700, #344054);
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 142.857% */
}

#obamacare-calculator .third-screen #personal-info-form input{
    display: flex;
    padding: 10px 14px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Gray-300, #D0D5DD);
    background: var(--Base-White, #FFF);
    /* Shadow/xs */
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

#obamacare-calculator .third-screen #personal-info-form .btn-primary {
    display: flex;
    padding: 16px 28px;
    align-items: center;
    gap: 12px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Primary-800, #2A61AD);
    background: var(--Primary-700, #3071BF);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    justify-content: center;
    margin: auto;
    width: 100%;
}

#obamacare-calculator .third-screen #personal-info-form .btn-primary:hover {
    background-color: var(--Primary-600, #2C5282);
}

/* -------------------------------- */
/* Estilos para la Pantalla 4       */
/* -------------------------------- */
#obamacare-calculator .fourth-screen.screen {
    width: 384px;
    margin: auto;
    @media (max-width: 768px) {
        width: auto;
    }
}

#obamacare-calculator .fourth-screen .btn-success {
    display: flex;
    padding: 16px 28px;
    align-items: center;
    gap: 12px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Primary-800, #2A61AD);
    background: var(--Primary-700, #3071BF);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    justify-content: center;
    margin: auto;
    width: 100%;
}

#obamacare-calculator .fourth-screen .btn-success:hover {
    background-color: var(--Primary-600, #2C5282);
}

#obamacare-calculator .fourth-screen #address-info-form label{
    color: var(--Gray-700, #344054);
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 142.857% */
}

#obamacare-calculator .fourth-screen #address-info-form input{
    display: flex;
    padding: 10px 14px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Gray-300, #D0D5DD);
    background: var(--Base-White, #FFF);
    /* Shadow/xs */
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

#obamacare-calculator .fourth-screen #address-info-form .btn-primary {
    display: flex;
    padding: 16px 28px;
    align-items: center;
    gap: 12px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Primary-800, #2A61AD);
    background: var(--Primary-700, #3071BF);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    justify-content: center;
    margin: auto;
    width: 100%;
}

#obamacare-calculator .fourth-screen #address-info-form .btn-primary:hover {
    background-color: var(--Primary-600, #2C5282);
}

/* -------------------------------- */
/* Estilos para la Pantalla 5       */
/* -------------------------------- */
#obamacare-calculator .fifth-screen.screen {
    width: 384px;
    margin: auto;
    @media (max-width: 768px) {
        width: auto;
    }
}

#obamacare-calculator .fifth-screen .btn-success {
    display: flex;
    padding: 16px 28px;
    align-items: center;
    gap: 12px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Primary-800, #2A61AD);
    background: var(--Primary-700, #3071BF);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    justify-content: center;
    margin: auto;
    width: 100%;
}

#obamacare-calculator .fifth-screen .btn-success:hover {
    background-color: var(--Primary-600, #2C5282);
}

#obamacare-calculator .fifth-screen #tax-info-form label{
    color: var(--Gray-700, #344054);
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 142.857% */
}

#obamacare-calculator .fifth-screen #tax-info-form input{
    display: flex;
    padding: 10px 14px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Gray-300, #D0D5DD);
    background: var(--Base-White, #FFF);
    /* Shadow/xs */
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

#obamacare-calculator .fifth-screen #tax-info-form input#household-income{
    border-radius: 0 8px 8px 0;
}

.input-group input#household-income::-webkit-inner-spin-button, 
.input-group input#household-income::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#obamacare-calculator .fifth-screen #tax-info-form input#birthdate{
    display: block;
}

#obamacare-calculator .fifth-screen #tax-info-form select{
    display: flex;
    padding: 10px 14px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Gray-300, #D0D5DD);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

#obamacare-calculator .fifth-screen #tax-info-form .btn-primary {
    display: flex;
    padding: 16px 28px;
    align-items: center;
    gap: 12px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Primary-800, #2A61AD);
    background: var(--Primary-700, #3071BF);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    justify-content: center;
    margin: auto;
    width: 100%;
}

#obamacare-calculator .fifth-screen #tax-info-form .btn-primary:hover {
    background-color: var(--Primary-600, #2C5282);
}

/* -------------------------------- */
/* Estilos para la Pantalla 6       */
/* -------------------------------- */
#obamacare-calculator .sixth-screen.screen {
    width: 592px;
    margin: auto;
    @media (max-width: 768px) {
        width: auto;
    }
}

#obamacare-calculator .sixth-screen .btn-primary {
    display: flex;
    padding: 16px 28px;
    align-items: center;
    gap: 12px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Primary-800, #2A61AD);
    background: var(--Primary-700, #3071BF);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    justify-content: center;
    margin: auto;
    width: 100%;
}

#obamacare-calculator .sixth-screen .btn-primary:hover {
    background-color: var(--Primary-600, #2C5282);
}

#obamacare-calculator .sixth-screen #review-data{
    border-radius: 0 0 12px 12px;
    border: 1px solid var(--Gray-200, #EAECF0);
    background: var(--Gray-25, #FCFCFD);
    padding: 16px;
}

#obamacare-calculator .sixth-screen #review-data table{
    border: none;
}

#obamacare-calculator .sixth-screen #review-data p{
    margin-bottom: 1rem;
}

#obamacare-calculator .sixth-screen #review-data-card .review-data-card-header{
    display: flex;
    padding: 16px 20px 16px 16px;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    border-radius: 12px 12px 0px 0px;
    border: 1px solid var(--Gray-200, #EAECF0);
    background: var(--Gray-50, #F9FAFB);
}

#obamacare-calculator .sixth-screen #review-data-card .review-data-card-header .icon{
    display: flex;
    width: 40px;
    height: 40px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid var(--Gray-200, #EAECF0);
    background: var(--Base-White, #FFF);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

#obamacare-calculator .sixth-screen #review-data-card .review-data-card-header strong{
    color: var(--Gray-700, #344054);
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
    line-height: 28px; /* 155.556% */
}

/* -------------------------------- */
/* Estilos para la Pantalla 7       */
/* -------------------------------- */
#obamacare-calculator .seventh-screen.screen {
    width: 592px;
    margin: auto;
    @media (max-width: 768px) {
        width: auto;
    }
}

#obamacare-calculator .seventh-screen .best-rates-header {
    width: fit-content !important;
    display: flex;
    padding: 4px 14px 4px 14px;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    border: 1px solid var(--Error-500, #ABEFC6);
    background: var(--Error-50, #ECFDF3);
    mix-blend-mode: multiply;
    margin: auto;
}
#obamacare-calculator .seventh-screen .best-rates-header p{
    color: var(--Secondary-700, #067647);
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

#obamacare-calculator .seventh-screen .best-rates-header p .copy-quoteid{
    padding: 2px 6px 2px 10px;
    align-items: center;
    gap: 8px;
    border-radius: 16px;
    border: 1px solid var(--Success-200, #ABEFC6);
    background: var(--Base-White, #FFF);
    margin-left: 2px;
    color: var(--Success-700, #067647);
    text-align: center;
    font-family: Tahoma;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

#obamacare-calculator .seventh-screen #rate-list{
    padding: 0;
}

#obamacare-calculator .seventh-screen #rate-list .list-group-item{
    margin-bottom: 16px !important;
    margin-top: 16px !important;
    border: none;
}

#obamacare-calculator .seventh-screen #rate-list .list-group-item .plan-header{
    display: flex;
    padding: 16px 20px 16px 16px;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    border-radius: 12px 12px 0px 0px;
    border: 1px solid var(--Gray-200, #EAECF0);
    background: var(--Gray-25, #FCFCFD);
}

#obamacare-calculator .seventh-screen #rate-list .list-group-item:hover .plan-header{
    border: 1px solid var(--Primary-200, #94C6EF);
    background: var(--Primary-25, #F6FBFF);
}

#obamacare-calculator .seventh-screen #rate-list .list-group-item .plan-header h5{
    color: var(--Gray-700, #344054);
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
    margin: 0;
    line-height: 28px; /* 155.556% */
}

#obamacare-calculator .seventh-screen #rate-list .list-group-item .plan-body{
    display: flex;
    padding: 16px 20px 16px 16px;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    border-radius: 0px;
    border: 1px solid var(--Gray-200, #EAECF0);
    background: var(--Gray-25, #FCFCFD);
    border-bottom: none;
}

#obamacare-calculator .seventh-screen #rate-list .list-group-item:hover .plan-body{
    border: 1px solid var(--Primary-200, #94C6EF);
    background: var(--Primary-25, #F6FBFF);
    border-bottom: none;
}

#obamacare-calculator .seventh-screen #rate-list .list-group-item .plan-body table{
    border: none;
    margin: 0;
}

#obamacare-calculator .seventh-screen #rate-list .list-group-item .plan-footer{
    display: flex;
    padding: 16px 20px 16px 16px;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    border-radius: 0px 0px 12px 12px;
    border: 1px solid var(--Gray-200, #EAECF0);
    background: var(--Gray-25, #FCFCFD);
    border-top: none;
}

#obamacare-calculator .seventh-screen #rate-list .list-group-item:hover .plan-footer{
    border: 1px solid var(--Primary-200, #94C6EF);
    background: var(--Primary-25, #F6FBFF);
    border-top: none;
}

#obamacare-calculator .seventh-screen #rate-list .list-group-item .plan-footer img{
    max-width: 75%;
    margin: 0;
}

#obamacare-calculator .seventh-screen #rate-list .list-group-item .plan-footer .btn-interest{
    width: 200px;
    padding: 16px 28px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid var(--Gray-300, #D0D5DD);
    background: var(--Base-White, #FFF);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);    
    color: var(--Gray-700, #344054);
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
    line-height: 28px; /* 155.556% */
    @media (max-width: 768px) {
        width: 125px;
        padding: 5px 10px;
        font-size: 16px;
    }
}

#obamacare-calculator .seventh-screen #rate-list .list-group-item:hover .plan-footer .btn-interest{
    border: 1px solid var(--Primary-800, #2A61AD);
    background: var(--Primary-700, #3071BF);
    color: var(--Base-White, #FFF);
    font-weight: 900;
    line-height: 28px; /* 155.556% */
}

/* -------------------------------- */
/* Estilos para la Pantalla 8       */
/* -------------------------------- */
#obamacare-calculator .eighth-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* Ocupa toda la altura del viewport */
    text-align: center;
    padding: 20px;
}

/* Título */
#obamacare-calculator .eighth-screen h3 {
    color: var(--Primary-950, #17356C);
    text-align: center;
    font-family: Lato;
    font-size: 60px;
    font-style: normal;
    font-weight: 900;
    line-height: 72px; /* 120% */
    letter-spacing: -1.2px;
    @media (max-width: 768px) {
        font-size: 40px;
        line-height: 55px;
    }
}

/* Texto descriptivo */
#obamacare-calculator .eighth-screen p.quote-number {
    border-radius: 16px;
    border: 1px solid var(--Success-200, #ABEFC6);
    background: var(--Success-50, #ECFDF3);
    mix-blend-mode: multiply;
    width: fit-content;
    margin: auto;
    display: flex;
    padding: 4px 4px 4px 14px;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

#obamacare-calculator .eighth-screen p.quote-number strong {
    color: var(--Success-700, #067647);
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 142.857% */
}

#obamacare-calculator .eighth-screen p {
    color: var(--Gray-600, #475467);
    text-align: center;
    font-family: Lato;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px; /* 150% */
}

/* Estilo para el Quote ID */
#obamacare-calculator .eighth-screen #quote-number {
    display: flex;
    padding: 2px 6px 2px 10px;
    align-items: center;
    gap: 8px;
    border-radius: 16px;
    border: 1px solid var(--Success-200, #ABEFC6);
    background: var(--Base-White, #FFF);
    color: var(--Success-700, #067647);
    text-align: center;
    font-family: Tahoma;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 150% */
}

/* Botón: Reiniciar o Nueva cotización */
#obamacare-calculator .eighth-screen #restart-button {
    display: flex;
    padding: 16px 28px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Primary-800, #2A61AD);
    background: var(--Primary-700, #3071BF);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);    
    margin: auto;
}

#obamacare-calculator .eighth-screen #restart-button:hover {
    background-color: var(--Primary-600, #2C5282);
}

/* Botón: Reiniciar con ícono */
#obamacare-calculator .eighth-screen #restart-button svg {
    width: 20px;
    height: 20px;
    fill: #fff;
}

/* Teléfono del agente */
#obamacare-calculator .eighth-screen .agent-phone {
    border: none;
    width: 200px;
    margin: 0 auto 96px !important;
}

#obamacare-calculator .eighth-screen .agent-phone a {
    color: var(--Gray-700, #344054);
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 150% */
    display: flex;
    padding: 12px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: 1px solid var(--Gray-300, #D0D5DD);
    background: var(--Base-White, #FFF);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

#obamacare-calculator .eighth-screen .agent-phone a:hover {
    border: 1px solid var(--Primary-800, #2A61AD);
    background: var(--Primary-700, #3071BF);
    color: var(--Base-White, #FFF);
}

#obamacare-calculator .eighth-screen .agent-phone a:hover svg path{
    stroke: var(--Base-White, #FFF);
}