/*
  Optional "modern" look, aligned with healthteamadvantage.com and the 2027 Enrollment Book:
  white page, Poppins, teal titles, purple actions, lime rule. Activated by body[data-theme="modern"]
  Everything here is additive: the default theme stays untouched when the attribute is absent
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

body[data-theme="modern"] {
    --hta-teal: #0D628A;
    --hta-teal-dark: #0A4E6E;
    --hta-teal-tint: #E8F3F8;
    --hta-purple: #7C2786;
    --hta-purple-dark: #611D69;
    --hta-lime: #8DC63F;
    --hta-ink: #272D37;
    --hta-text: #3D3F41;
    --hta-muted: #5F6D7E;
    --hta-line: #D7DEE6;
    --hta-page: #F4F7FA;
    --hta-card: #FFFFFF;
    --hta-radius: 12px;

    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
    color: var(--hta-text);
    background-color: var(--hta-page);
}

/* ---------- header ---------- */
body[data-theme="modern"] #headerSection,
body[data-theme="modern"] #contentSection {
    background-color: transparent;
}

body[data-theme="modern"] #headerSection {
    background-color: var(--hta-card);
    border-radius: var(--hta-radius) var(--hta-radius) 0 0;
    border-bottom: 4px solid var(--hta-lime);
    margin-top: 18px;
    padding-top: 0;
    box-shadow: 0 1px 2px rgba(39, 45, 55, 0.06);
}

body[data-theme="modern"] .logoContainer {
    background: transparent;
    margin: 0;
    padding: 22px 30px 8px 30px;
    border-bottom: 1px solid var(--hta-line);
}

body[data-theme="modern"] #headerSection .title {
    color: var(--hta-ink);
    letter-spacing: 0;
}

@media (min-width: 870px) {
    body[data-theme="modern"] #headerSection .title {
        margin-left: 40px;
    }
}

body[data-theme="modern"] #headerSection .small-title:first-of-type {
    color: var(--hta-purple);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

body[data-theme="modern"] #headerSection .medium-title {
    color: var(--hta-teal);
    font-weight: 600;
}

body[data-theme="modern"] #seniorPicture {
    right: 40px;
    top: 96px;
}

body[data-theme="modern"] #seniorPicture > img {
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(13, 98, 138, 0.18);
}

/* between the mobile breakpoint and ~1000px (e.g. a laptop at 150% zoom) the photo would sit on the title */
@media (min-width: 821px) and (max-width: 1000px) {
    body[data-theme="modern"] #seniorPicture {
        display: none;
    }
}

body[data-theme="modern"] #subtitle-band {
    background-color: var(--hta-teal-tint);
    color: var(--hta-teal);
    font-weight: 500;
    padding-left: 40px !important;
    margin: 18px 0 0 0 !important;
}

body[data-theme="modern"] #HelpButton {
    background-color: transparent;
    color: var(--hta-purple) !important;
    border: 2px solid var(--hta-purple);
    border-radius: 24px;
    font-weight: 600;
    font-size: 14px;
    padding: 20px 10px; /* narrow enough to stay clear of the "Agent Information" bar in the card */
}

body[data-theme="modern"] #HelpButton:hover {
    background-color: var(--hta-purple);
    color: #fff !important;
}

/* ---------- survey card ---------- */
body[data-theme="modern"] #contentSection .content {
    margin: 0; /* the classic look indents the card by 1.5rem; the modern card runs edge to edge */
    background-color: var(--hta-card);
    border-radius: 0 0 var(--hta-radius) var(--hta-radius);
    box-shadow: 0 8px 24px rgba(39, 45, 55, 0.08);
    padding-bottom: 12px;
}

body[data-theme="modern"] .sv_main .panel-heading.card-header,
body[data-theme="modern"] .sv_main .sv_page_title,
body[data-theme="modern"] ch, body[data-theme="modern"] .ch {
    background-color: var(--hta-teal);
    color: #fff;
    border-radius: 8px;
}

/* the markup nests an inline <ch> inside div.ch; only the outer block should paint the bar */
body[data-theme="modern"] .ch ch,
body[data-theme="modern"] .ch .ch {
    background: transparent;
    padding: 0;
    border-radius: 0;
}

body[data-theme="modern"] .sv_main .ch {
    padding: 4px 10px;
    line-height: 1.4;
}

body[data-theme="modern"] c, body[data-theme="modern"] .c {
    color: var(--hta-teal);
}

body[data-theme="modern"] .sv_main .sv_q_required_text {
    margin-left: -4px; /* base uses -10px, which puts the star into the label text */
}

body[data-theme="modern"] .sv_main .sv_q_title,
body[data-theme="modern"] .sv_main h5 {
    color: var(--hta-ink);
    font-weight: 600;
}

body[data-theme="modern"] .form-control,
body[data-theme="modern"] .sv_main input[type="text"],
body[data-theme="modern"] .sv_main select {
    border: 1px solid var(--hta-line);
    border-radius: 8px;
    box-shadow: none;
    font-family: inherit;
}

/* dropdowns: the outer .sv_q_dd_control already carries the border; the filter input inside must not */
body[data-theme="modern"] .sv_main .sv_q_dd_control input.sv_q_dd_filter-string-input,
body[data-theme="modern"] .sv_main .sv_q_dd_control input.sv_q_dd_filter-string-input:focus {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

body[data-theme="modern"] .sv_main .sv_q_dd_control:focus-within {
    border-color: var(--hta-teal);
    box-shadow: 0 0 0 3px rgba(13, 98, 138, 0.18);
}

body[data-theme="modern"] .form-control:focus,
body[data-theme="modern"] .sv_main input[type="text"]:focus {
    border-color: var(--hta-teal);
    box-shadow: 0 0 0 3px rgba(13, 98, 138, 0.18);
}

/* native radios and checkboxes: larger, brand colored, with room for the focus ring
   (.sv_qstn scrolls with overflow:auto, so a ring outside the row would be clipped) */
body[data-theme="modern"] #surveyElement input[type="radio"],
body[data-theme="modern"] #surveyElement input[type="checkbox"] {
    width: 19px;
    height: 19px;
    min-width: 19px;
    margin: 0 8px 0 2px;
    vertical-align: -4px;
    accent-color: var(--hta-teal);
    cursor: pointer;
}

body[data-theme="modern"] #surveyElement .radio,
body[data-theme="modern"] #surveyElement .checkbox {
    padding: 3px 0 3px 2px;
    line-height: 22px;
}

body[data-theme="modern"] #surveyElement .radio label,
body[data-theme="modern"] #surveyElement .checkbox label {
    align-items: center;
    margin-bottom: 0;
    cursor: pointer;
}

body[data-theme="modern"] .custom-control-input:checked ~ .custom-control-label::before,
body[data-theme="modern"] .custom-radio .custom-control-input:checked ~ .custom-control-label::before,
body[data-theme="modern"] .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--hta-teal);
    border-color: var(--hta-teal);
}

/* ---------- progress and actions ---------- */
/* The progress bar is a sibling rendered after the action bar; the base theme overlaps them with a
   negative margin. Here the container is the anchor and the bar sits centered between the buttons */
body[data-theme="modern"] .sv_main .sv_container {
    position: relative;
}

body[data-theme="modern"] .sv_main.sv_main .progress {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    /* never wider than the gap between the two buttons (~170px each plus padding), e.g. at 150% zoom */
    width: min(48%, calc(100% - 400px));
    height: 30px;
    margin: 0 !important; /* bootstrap .mb-4 would push it up */
    border: 1px solid var(--hta-line);
    background-color: var(--hta-teal-tint);
    border-radius: 999px;
    overflow: hidden;
    z-index: 3;
}

@media (max-width: 820px) {
    /* narrow screens: the bar sits on its own row under the separator, buttons below it.
       Extra .sv_container in the selector so this outranks the desktop rule at the end of the file */
    body[data-theme="modern"] .sv_main .sv_container .sv-action-bar {
        padding: 58px 8px 8px 8px !important;
    }
    body[data-theme="modern"] .sv_main.sv_main .sv_container .progress {
        width: calc(100% - 24px);
        height: 26px;
        bottom: 72px; /* 8px bottom padding + 50px buttons + 14px gap */
    }
    body[data-theme="modern"] .sv_main.sv_main .progress-bar span {
        font-size: 14px;
    }
    /* surveyjs gives each action a fixed width; let them share the row instead of overflowing the card */
    body[data-theme="modern"] .sv_main .sv-action-bar .sv-action {
        width: auto !important;
        max-width: 48%;
        flex: 0 1 auto;
    }
    body[data-theme="modern"] .sv_prev_btn,
    body[data-theme="modern"] .sv_next_btn,
    body[data-theme="modern"] .sv_complete_btn,
    body[data-theme="modern"] .sv_preview_btn,
    body[data-theme="modern"] .sv_esignatures_btn {
        min-width: 0 !important;
        width: auto !important;
        padding: 8px 18px !important;
    }
}

body[data-theme="modern"] .sv_main.sv_main .progress-bar {
    background-color: var(--hta-teal);
    border-radius: 999px;
}

body[data-theme="modern"] .sv_prev_btn,
body[data-theme="modern"] .sv_next_btn,
body[data-theme="modern"] .sv_complete_btn,
body[data-theme="modern"] .sv_preview_btn,
body[data-theme="modern"] .sv_esignatures_btn,
body[data-theme="modern"] .home-button,
body[data-theme="modern"] .greenButton {
    background-color: var(--hta-purple) !important;
    color: #fff !important;
    border: 0;
    border-radius: 24px;
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 12px rgba(124, 39, 134, 0.25);
}

body[data-theme="modern"] .sv_prev_btn {
    background-color: transparent !important;
    color: var(--hta-teal) !important;
    border: 2px solid var(--hta-teal);
    box-shadow: none;
}

body[data-theme="modern"] .sv_next_btn:hover,
body[data-theme="modern"] .sv_complete_btn:hover,
body[data-theme="modern"] .sv_preview_btn:hover,
body[data-theme="modern"] .sv_esignatures_btn:hover,
body[data-theme="modern"] .home-button:hover,
body[data-theme="modern"] .greenButton:hover {
    background-color: var(--hta-purple-dark) !important;
    color: #fff !important;
}

body[data-theme="modern"] .sv_prev_btn:hover {
    background-color: var(--hta-teal-tint) !important;
    color: var(--hta-teal-dark) !important;
}

body[data-theme="modern"] #footerSection {
    background: transparent;
    height: 0;
}

body[data-theme="modern"] .sv_main .sv-action-bar .sv_progress_text,
/* the step label is centered over the whole track, not inside the filled part */
body[data-theme="modern"] .sv_main.sv_main .progress-bar span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    padding: 1px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: var(--hta-teal-dark);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

/* ---------- action bar spacing: the base theme pulls it up with a negative margin over the navy footer ---------- */
body[data-theme="modern"] .sv_main .sv-action-bar,
body[data-theme="modern"] .sv_main .panel-footer {
    /* base css centers a wider footer over the navy band with left:50% + translate; keep it inside the card */
    position: static;
    left: auto;
    transform: none;
    width: 100%;
    min-height: 0;
    margin: 18px 0 0 0 !important;
    padding: 16px 12px 14px 12px !important;
    background: var(--hta-card) !important;
    border-top: 1px solid var(--hta-line);
    border-radius: 0;
    overflow: visible !important; /* surveyjs clips the bar, which cut the button shadow flat */
}

body[data-theme="modern"] #contentSection .content {
    padding-bottom: 24px;
}

/* ---------- readability for 65+: larger type, taller fields, stronger contrast ---------- */
body[data-theme="modern"] .sv_main {
    font-size: 17px;
    line-height: 1.5;
}

body[data-theme="modern"] .sv_main .sv_q_title,
body[data-theme="modern"] .sv_main h5,
body[data-theme="modern"] .sv_main h7 {
    font-size: 17px;
    line-height: 1.4;
    margin-bottom: 6px;
}

body[data-theme="modern"] .sv_main .form-control,
body[data-theme="modern"] .sv_main input[type="text"],
body[data-theme="modern"] .sv_main select,
body[data-theme="modern"] .sv_main .sv_q_dd_control {
    min-height: 46px;
    font-size: 17px;
    padding: 8px 14px;
}

body[data-theme="modern"] .sv_main .sv_q_dd_control input.sv_q_dd_filter-string-input {
    min-height: 0;
    padding: 0;
}

body[data-theme="modern"] .sv_main .small,
body[data-theme="modern"] .sv_main small,
body[data-theme="modern"] .sv_main .text-muted,
body[data-theme="modern"] .field-hint {
    color: #4A5563;
    font-size: 15px;
}

body[data-theme="modern"] .optional-badge {
    background: var(--hta-teal-tint);
    color: var(--hta-teal-dark);
}

/* errors: plain language, high contrast, icon, tied to the field */
body[data-theme="modern"] .sv_main .sv_qstn.has-error {
    border-left: 4px solid #B42318;
    padding-left: 20px !important;
    background: #FFF5F4;
    border-radius: 6px;
}

body[data-theme="modern"] .sv_main .alert-danger.sv_qstn_error_top,
body[data-theme="modern"] .sv_main .sv_qstn_error_bottom {
    background: transparent;
    border: 0;
    color: #B42318;
    font-weight: 600;
    font-size: 16px;
    padding: 4px 0 6px 0;
    margin: 0;
}

body[data-theme="modern"] .sv_main .alert-danger.sv_qstn_error_top::before {
    content: "\26A0  ";
}

body[data-theme="modern"] .sv_main .has-error .form-control,
body[data-theme="modern"] .sv_main .has-error input[type="text"] {
    border-color: #B42318;
    background-color: #fff;
}

/* keyboard focus is visible everywhere, not only on text fields */
body[data-theme="modern"] .sv_prev_btn:focus-visible,
body[data-theme="modern"] .sv_next_btn:focus-visible,
body[data-theme="modern"] .sv_complete_btn:focus-visible,
body[data-theme="modern"] .sv_preview_btn:focus-visible,
body[data-theme="modern"] .sv_esignatures_btn:focus-visible,
body[data-theme="modern"] .home-button:focus-visible,
body[data-theme="modern"] #HelpButton:focus-visible,
body[data-theme="modern"] .sv_main .btn:focus-visible,
body[data-theme="modern"] #surveyElement input[type="radio"]:focus-visible,
body[data-theme="modern"] #surveyElement input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--hta-teal);
    outline-offset: 3px;
}

/* ---------- dialogs (bootstrap-dialog): same language as the card ---------- */
body[data-theme="modern"] .bootstrap-dialog .modal-content {
    border: 0;
    border-radius: var(--hta-radius);
    box-shadow: 0 16px 48px rgba(39, 45, 55, 0.25);
    overflow: hidden;
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
}

body[data-theme="modern"] .bootstrap-dialog .modal-header,
body[data-theme="modern"] body > .bootstrap-dialog.type-primary .modal-header,
body[data-theme="modern"] .bootstrap-dialog.type-primary .modal-header {
    background: var(--hta-teal) !important;
    border-bottom: 4px solid var(--hta-lime);
    padding: 14px 22px;
}

body[data-theme="modern"] .bootstrap-dialog .bootstrap-dialog-title {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
}

body[data-theme="modern"] .bootstrap-dialog .bootstrap-dialog-close-button {
    color: #fff;
    opacity: 0.9;
}

body[data-theme="modern"] .bootstrap-dialog .modal-body {
    padding: 22px 26px;
    color: var(--hta-text);
    font-size: 17px;
    line-height: 1.5;
}

body[data-theme="modern"] .bootstrap-dialog .modal-body a {
    color: var(--hta-teal);
    text-decoration: underline;
}

body[data-theme="modern"] .bootstrap-dialog .modal-footer {
    border-top: 1px solid var(--hta-line);
    padding: 14px 22px;
}

body[data-theme="modern"] .bootstrap-dialog .modal-footer .btn {
    border-radius: 24px;
    font-weight: 600;
    padding: 10px 26px;
    font-size: 16px;
    min-width: 110px;
}

body[data-theme="modern"] .bootstrap-dialog .modal-footer .btn-primary,
body[data-theme="modern"] body .modal-footer .bootstrap-dialog-footer .bootstrap-dialog-footer-buttons .btn-primary {
    background: var(--hta-purple) !important;
    border-color: var(--hta-purple) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(124, 39, 134, 0.25);
}

body[data-theme="modern"] .bootstrap-dialog .modal-footer .btn-primary:hover {
    background: var(--hta-purple-dark) !important;
}

body[data-theme="modern"] .bootstrap-dialog .modal-footer .btn-default,
body[data-theme="modern"] .bootstrap-dialog .modal-footer .btn-secondary {
    background: #fff;
    color: var(--hta-teal);
    border: 2px solid var(--hta-teal);
}

body[data-theme="modern"] .bootstrap-dialog .modal-footer .btn:focus-visible {
    outline: 3px solid var(--hta-teal);
    outline-offset: 3px;
}

/* ---------- discreet theme switch: fixed top-right so it stays reachable while scrolling,
   far from the Next/Previous buttons at the bottom ---------- */
.theme-switch {
    position: fixed;
    right: 12px;
    top: 10px;
    z-index: 30;
    font-size: 12px;
    line-height: 1;
    color: #9AA5B1;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #E1E6EB;
    border-radius: 999px;
    padding: 6px 10px;
    cursor: pointer;
    text-decoration: none;
    opacity: 0.6;
    transition: opacity 0.2s;
    font-family: 'Poppins', Arial, sans-serif;
}

.theme-switch:hover {
    opacity: 1;
    color: #0D628A;
    text-decoration: none;
}

/* ---------- "New Classic": the classic page wearing the modern typography ----------
   Chrome comes back from the classic look - the navy page, the cyan band across the full width,
   the white card indented by 1.5rem, the hero photo where it always sat. Everything the modern
   look does INSIDE the card stays: Poppins, the larger type, the rounded fields and the teal bars.
   Values measured from the classic look. Activated by body[data-look="framed"] */

/* the navy page the classic look paints behind header, band and card */
body[data-theme="modern"][data-look="framed"] #headerSection,
body[data-theme="modern"][data-look="framed"] #contentSection {
    background-color: #00437C;
}

/* no floating card up here: the header is part of the navy page again */
body[data-theme="modern"][data-look="framed"] #headerSection {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin-top: 0;
    padding-top: 13px;
}

/* the logo keeps its own white strip, as in the classic look */
body[data-theme="modern"][data-look="framed"] .logoContainer {
    background: var(--hta-card);
    border-bottom: 0;
}

body[data-theme="modern"][data-look="framed"] #headerSection .title,
body[data-theme="modern"][data-look="framed"] #headerSection .medium-title,
body[data-theme="modern"][data-look="framed"] #headerSection .small-title:first-of-type,
body[data-theme="modern"][data-look="framed"] #agent {
    color: #fff !important;
}

/* the hero photo goes back to its classic corner, and stays put at every width */
body[data-theme="modern"][data-look="framed"] #seniorPicture {
    right: 120px;
    top: 30px;
}

@media (min-width: 821px) and (max-width: 1000px) {
    body[data-theme="modern"][data-look="framed"] #seniorPicture {
        display: block;
    }
}

/* the cyan band runs edge to edge again, with the air the classic look leaves around it */
body[data-theme="modern"][data-look="framed"] #subtitle-band {
    background-color: #00BACE;
    color: #fff;
    border-top: 0;
    margin: 10px 0 20px 0 !important;
}

/* the card sits inside the classic 1.5rem margin instead of running edge to edge */
body[data-theme="modern"][data-look="framed"] #contentSection .content {
    margin: 0 1.5rem 0 1.5rem;
    border-radius: 0;
    box-shadow: none;
}

/* the navy frame closes under the card too, instead of the card running off the bottom of the page */
body[data-theme="modern"][data-look="framed"] #contentSection {
    padding-bottom: 1.5rem;
}

/* buttons go back to the classic ones: solid teal, white text, the classic corner radius, no lift */
body[data-theme="modern"][data-look="framed"] .sv_prev_btn,
body[data-theme="modern"][data-look="framed"] .sv_next_btn,
body[data-theme="modern"][data-look="framed"] .sv_complete_btn,
body[data-theme="modern"][data-look="framed"] .sv_preview_btn,
body[data-theme="modern"][data-look="framed"] .sv_esignatures_btn {
    background-color: #0080A5 !important;
    color: #fff !important;
    border: 0;
    border-radius: 15px;
    box-shadow: none;
    font-weight: 400;
    letter-spacing: normal;
}

body[data-theme="modern"][data-look="framed"] .home-button,
body[data-theme="modern"][data-look="framed"] .greenButton {
    background-color: #0080A5 !important;
    color: #fff !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-weight: 400;
    letter-spacing: normal;
}

/* the Need Help tab as the classic look draws it: filled purple, white, its own size */
body[data-theme="modern"][data-look="framed"] #HelpButton {
    background-color: #531C58;
    color: #fff !important;
    border: 0;
    border-radius: 0;
    font-weight: 400;
    font-size: 16px;
    padding: 26px 15px 26px 12px;
}

body[data-theme="modern"][data-look="framed"] #HelpButton:hover {
    background-color: #531C58;
    color: #fff !important;
}