/*
 * The waiver pages' new look (docs/waiver-pages-look-spec.md §4). Loaded only when the account (or an admin's ?look=modern preview) uses
 * it, after styles-waiver-area.css and before GetStyle.ashx, so the account's colours and custom CSS still win.
 * EVERY rule is scoped to body.wf-modern: nothing here can touch a classic page.
 * Colours come from the account's waiver colours as CSS variables (ColorSettingList.GetCSSVariables, --wfk-*), each with a fallback.
 * Look: page background, a plain header with the logo, big brand-coloured choice cards (max ~480px), rounded fields: like WaiverFile Venue.
 */

/* ---------------------------------------------------------------- page */
body.wf-modern {
    background-color: var(--wfk-page, #F4F6F9);
    color: var(--wfk-text, #1f2937);
    -webkit-font-smoothing: antialiased;
}
body.wf-modern a:not(.btn) { color: var(--wfk-btn, #005DAC); }
body.wf-modern h1, body.wf-modern h2, body.wf-modern h3, body.wf-modern h4 { color: inherit; }

/* ---------------------------------------------------------------- header */
body.wf-modern .navbar.navbar-default {
    background-color: var(--wfk-head, #FFFFFF);
    border: 0;
    border-radius: 0;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .08);
    margin-bottom: 0;
}
body.wf-modern .navbar-default .navbar-brand {
    color: var(--wfk-head-text, #1f2937);
    font-weight: 800;
    font-size: 20px;
}

/* ---------------------------------------------------------------- start / thank-you band: no coloured band */
body.wf-modern .call-to-action,
body.wf-modern .call-to-action.bg-primary {
    background: transparent;
    color: var(--wfk-text, #1f2937);
    padding: 40px 0 28px;
}
body.wf-modern .call-to-action h1 {
    font-size: clamp(1.75rem, 4.5vw, 2.4rem);
    font-weight: 800;
    margin: 0 0 6px;
    color: var(--wfk-text, #1f2937);
}
body.wf-modern .call-to-action h2,
body.wf-modern .call-to-action h3 {
    font-size: clamp(1.05rem, 2.6vw, 1.3rem);
    font-weight: 500;
    margin: 0 0 24px;
    color: var(--wfk-text, #1f2937);
    opacity: .8;
}
body.wf-modern .img-welcome { border-radius: 12px; margin: 8px auto 16px; max-height: 260px; }

/* ---------------------------------------------------------------- choice cards (start page, event categories, workflow steps)
   The #aside1 variants out-rank the classic Welcome-button colours (GetStyle: "#aside1 a.btn-light:link"): the new look uses the main
   button colour, as WaiverFile Venue does. */
body.wf-modern .call-to-action a.btn-light,
body.wf-modern .call-to-action a.btn-default,
body.wf-modern #aside1 a.btn-light:link, body.wf-modern #aside1 a.btn-light:visited,
body.wf-modern #aside1 a.btn-default:link, body.wf-modern #aside1 a.btn-default:visited,
body.wf-modern a.waiverselect {
    display: block;
    width: 100%;
    max-width: 480px;
    margin: 0 auto 14px;
    padding: 18px 22px;
    background-color: var(--wfk-btn, #005DAC);
    border: 0;
    border-radius: 14px;
    color: var(--wfk-btn-text, #FFFFFF);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: normal;
    text-align: center;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .10);
    transition: background-color .15s ease, transform .05s ease;
}
body.wf-modern .call-to-action a.btn-light:hover, body.wf-modern .call-to-action a.btn-light:focus,
body.wf-modern .call-to-action a.btn-default:hover, body.wf-modern .call-to-action a.btn-default:focus,
body.wf-modern #aside1 a.btn-light:hover, body.wf-modern #aside1 a.btn-light:focus,
body.wf-modern a.waiverselect:hover, body.wf-modern a.waiverselect:focus {
    background-color: var(--wfk-btn-hover, var(--wfk-btn, #004A8A));
    color: var(--wfk-btn-text, #FFFFFF);
    text-decoration: none;
}
body.wf-modern .call-to-action a.btn-light:active, body.wf-modern #aside1 a.btn-light:active, body.wf-modern a.waiverselect:active { transform: scale(.99); }
body.wf-modern .call-to-action a.btn:focus-visible, body.wf-modern a.waiverselect:focus-visible {
    outline: 3px solid var(--wfk-text, #1f2937);
    outline-offset: 3px;
}
/* the description line under a workflow step's name */
body.wf-modern .call-to-action .btn-light > small {
    display: block;
    max-width: none;
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .35);
    font-size: .85rem;
    font-weight: 500;
    opacity: .92;
}
/* more than 10 choices: the search list */
body.wf-modern .call-to-action .bootstrap-select,
body.wf-modern .call-to-action select#linkselect { max-width: 480px; width: 100% !important; margin: 0 auto; }
body.wf-modern .call-to-action .bootstrap-select > .dropdown-toggle { border-radius: 12px; padding: 14px 16px; font-size: 1.1rem; }
/* "no waivers accepted right now" text in the band */
body.wf-modern .call-to-action .col-lg-12 { color: var(--wfk-text, #1f2937); }

/* small buttons that also sit in the band (thank-you Print / Email / Continue, Go back): normal buttons, not choice cards.
   Same or higher rank than the card rules above (incl. the #aside1 ones) and later, so these win. */
body.wf-modern #aside1 .ipa_small_button2 a.btn:link, body.wf-modern #aside1 .ipa_small_button2 a.btn:visited,
body.wf-modern .call-to-action .ipa_small_button2 a.btn {
    display: inline-block;
    width: auto;
    max-width: none;
    margin: 6px 4px;
    padding: 12px 22px;
    font-size: 1.05rem;
    border-radius: 10px;
    box-shadow: none;
    background-color: var(--wfk-btn2, #EEF2F7);
    color: var(--wfk-btn2-text, #1f2937);
}
body.wf-modern #aside1 .ipa_small_button2 a.btn:hover, body.wf-modern .call-to-action .ipa_small_button2 a.btn:hover {
    background-color: var(--wfk-btn2-hover, var(--wfk-btn2, #E2E8F0));
    color: var(--wfk-btn2-text, #1f2937);
}

/* ---------------------------------------------------------------- back link (event select, category select) */
body.wf-modern .ipa_small_button2.abstopleft { position: static; text-align: left; margin: 0 0 8px; }
body.wf-modern #aside1 .ipa_small_button2.abstopleft a.btn:link, body.wf-modern #aside1 .ipa_small_button2.abstopleft a.btn:visited,
body.wf-modern .call-to-action .ipa_small_button2.abstopleft a.btn,
body.wf-modern .ipa_small_button2.abstopleft .btn {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--wfk-btn, #005DAC);
    font-weight: 700;
    padding: 6px 0;
}
body.wf-modern .ipa_small_button2.abstopleft .btn::before { content: "\2039"; margin-right: 6px; font-size: 1.3em; line-height: 1; }

/* ---------------------------------------------------------------- content area: a white card on the page background */
body.wf-modern section.about { padding: 24px 0 8px; }
body.wf-modern section.about > .container {
    background: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);
    padding: 24px 28px 28px;
    max-width: 980px;
}
body.wf-modern section.about h1 { font-size: clamp(1.5rem, 3.6vw, 2rem); font-weight: 800; margin-top: 4px; }
/* a content area whose controls rendered nothing (e.g. thank-you with no waiver to show): no empty card. Needs :has (current browsers);
   the masters also hide areas with nothing in them. */
body.wf-modern section.about:not(:has(.col-lg-12 > :not(script):not(style):not(input[type="hidden"]))) { display: none; }
@media (max-width: 575px) {
    body.wf-modern section.about { padding-top: 12px; }
    body.wf-modern section.about > .container { border-radius: 0; box-shadow: none; padding: 18px 16px 22px; }
}

/* ---------------------------------------------------------------- event list (PartySelect, "Standard View") */
body.wf-modern .event-group { background: transparent; padding: 0; margin: 0 0 18px; }
body.wf-modern .event-group h3 { color: var(--wfk-text, #1f2937); opacity: .65; font-size: .95rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; text-align: left; margin: 6px 0 10px; }
body.wf-modern .event {
    display: flex;
    align-items: stretch;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    overflow: hidden;
    background: #FFFFFF;
    color: var(--wfk-text, #1f2937);
    min-height: 76px;
}
body.wf-modern a.event:hover, body.wf-modern a.event:focus { border-color: var(--wfk-btn, #005DAC); background: #FFFFFF; box-shadow: 0 2px 10px rgba(15, 23, 42, .10); }
body.wf-modern .evt-datepart,
body.wf-modern .event:hover .evt-datepart {
    background-color: var(--wfk-btn, #005DAC);
    color: var(--wfk-btn-text, #FFFFFF);
    min-width: 88px;
    height: auto;
    margin: 0 12px 0 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
body.wf-modern .evt-main { height: auto; padding: 12px 12px 12px 0; font-weight: 700; color: var(--wfk-text, #1f2937); }
body.wf-modern .evtlocation { font-weight: 400; opacity: .75; }
body.wf-modern .event.maxedout { opacity: .6; }

/* ---------------------------------------------------------------- forms */
body.wf-modern label { font-weight: 700; }
body.wf-modern .form-control,
body.wf-modern select.form-control,
body.wf-modern .form-select {
    min-height: 46px;
    border-radius: 10px;
    border: 1px solid var(--wfk-field-border, #D1D5DB);
    background-color: var(--wfk-field, #FFFFFF);
    color: var(--wfk-field-text, #1f2937);
    font-size: 16px; /* 16px stops iPhones zooming in */
    box-shadow: none;
}
body.wf-modern textarea.form-control { min-height: 96px; }
/* file attachments: the box is 46px tall here but Bootstrap's "Choose File" button keeps its own smaller height, which left a gap
   under it. Drop the vertical padding and make the button fill the box (46px less the 2px border) */
body.wf-modern input[type=file].form-control { padding-top: 0; padding-bottom: 0; line-height: 44px; overflow: hidden; }
body.wf-modern input[type=file].form-control::file-selector-button { height: 44px; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
body.wf-modern .form-control:focus,
body.wf-modern .form-select:focus {
    border-color: var(--wfk-btn, #005DAC);
    box-shadow: 0 0 0 3px rgba(0, 93, 172, .15);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wfk-btn, #005DAC) 22%, transparent);
}
body.wf-modern .has-error .form-control { border-color: var(--wfk-invalid, #C62828); }
/* date of birth (WFDatePicker, BS3 mode): one bordered box, borderless month/day/year inside. The box is taller here (46px), so the
   parts stretch to fill it and their text sits in the middle (same fix as admin-modern.css) */
body.wf-modern .wfdatepicker.form-control { display: flex; align-items: stretch; padding: 0; height: 46px; overflow: hidden; }
body.wf-modern .wfdatepicker [class*='col-'] { float: none; display: flex; padding: 0; border-right: 1px solid var(--wfk-field-border, #D1D5DB); border-radius: 0; }
body.wf-modern .wfdatepicker [class*='col-'].lastone { border-right: 0; }
body.wf-modern .wfdatepicker input, body.wf-modern .wfdatepicker select, body.wf-modern .wfdatepicker input.form-control, body.wf-modern .wfdatepicker select.form-control {
    height: auto; min-height: 0; margin: 0; padding: 0 12px; border: 0; border-radius: 0; background-color: transparent; box-shadow: none;
    line-height: normal; width: 100%;
}
body.wf-modern .wfdatepicker select { padding-right: 6px; }
body.wf-modern .wfdatepicker input:focus, body.wf-modern .wfdatepicker select:focus { outline: 0; box-shadow: none; border: 0; }
body.wf-modern .wfdatepicker.form-control:focus-within {
    border-color: var(--wfk-btn, #005DAC);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wfk-btn, #005DAC) 22%, transparent);
}
body.wf-modern .has-error .wfdatepicker.form-control { border-color: var(--wfk-invalid, #C62828); }
body.wf-modern .text-danger { color: var(--wfk-required, #C62828); }
body.wf-modern .partbox { border-bottom-color: #EEF0F3; }

/* buttons */
body.wf-modern .btn { border-radius: 10px; font-weight: 700; }
body.wf-modern .btn-primary,
body.wf-modern .btn-primary:focus {
    background-color: var(--wfk-btn, #005DAC);
    border-color: var(--wfk-btn, #005DAC);
    color: var(--wfk-btn-text, #FFFFFF);
}
body.wf-modern .btn-primary:hover {
    background-color: var(--wfk-btn-hover, var(--wfk-btn, #004A8A));
    border-color: var(--wfk-btn-hover, var(--wfk-btn, #004A8A));
    color: var(--wfk-btn-text, #FFFFFF);
}
/* pressed, and a choice that stays selected (.active: Adult / Adult and Children / Children on the form, set by setSigningOption).
   Uses the pressed colour (cpBtnPrimaryActiveBG; standard orange, as classic) and holds it through hover and focus, which the rules
   above would otherwise win. The ring makes it read even when the pressed colour is close to the button colour (derived palettes) */
body.wf-modern .btn-primary:active,
body.wf-modern .btn-primary.active,
body.wf-modern .btn-primary.active:hover,
body.wf-modern .btn-primary.active:focus {
    background-color: var(--wfk-btn-active, #F5871F);
    border-color: var(--wfk-btn-active, #F5871F);
    color: var(--wfk-btn-active-text, #FFFFFF);
}
body.wf-modern .btn-primary.active,
body.wf-modern .btn-primary.active:focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(245, 135, 31, .35);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wfk-btn-active, #F5871F) 35%, transparent);
}
body.wf-modern .btn-primary.active:focus-visible { outline: 2px solid var(--wfk-btn-active, #F5871F); outline-offset: 3px; }
body.wf-modern .btn-lg { padding: 13px 24px; font-size: 1.1rem; }
body.wf-modern .btn-default {
    background-color: var(--wfk-btn2, #EEF2F7);
    border-color: var(--wfk-btn2, #EEF2F7);
    color: var(--wfk-btn2-text, #1f2937);
}
body.wf-modern .btn-default:hover {
    background-color: var(--wfk-btn2-hover, var(--wfk-btn2, #E2E8F0));
    border-color: var(--wfk-btn2-hover, var(--wfk-btn2, #E2E8F0));
    color: var(--wfk-btn2-text, #1f2937);
}

/* signature + initials */
body.wf-modern .signature { border: 2px dashed var(--wfk-field-border, #CBD5E1); border-radius: 12px; background: #FFFFFF; }
body.wf-modern .sigcover { border-radius: 12px; border-color: var(--wfk-field-border, #CBD5E1); }
body.wf-modern .sigbox { border-radius: 10px; }

/* messages */
body.wf-modern .WPERR_Error, body.wf-modern .WPERR_Validation, body.wf-modern .WPERR_Information,
body.wf-modern .WPERR_Warning, body.wf-modern .WPERR_Fatal, body.wf-modern .WPERR_Login, body.wf-modern .WPERR_Success {
    border-radius: 10px;
    padding: 12px 14px;
}

/* workflow progress + breadcrumbs */
body.wf-modern .wfprogress .progress-step.is-active { color: var(--wfk-btn, #005DAC); }
body.wf-modern .wfprogress .progress-step.is-active:before { border-color: var(--wfk-btn, #005DAC); }
body.wf-modern .wfprogress .progress-step.is-complete:before,
body.wf-modern .wfprogress .progress-step.is-skip:before { background: var(--wfk-btn, #005DAC); }
body.wf-modern .wfprogress .progress-step.is-complete:after,
body.wf-modern .wfprogress .progress-step.is-skip:after { background: var(--wfk-btn, #005DAC); }
body.wf-modern .workflow-form-status { color: var(--wfk-btn, #005DAC); }
body.wf-modern .breadcrumb { background: transparent; padding: 8px 0; margin-bottom: 4px; }

/* ---------------------------------------------------------------- thank-you */
body.wf-modern.wf-page-thankyou .call-to-action h1::before,
body.wf-modern.wf-page-thankyouseries section.about h1:first-of-type::before {
    content: "\2713";
    display: block;
    width: 64px;
    height: 64px;
    line-height: 64px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--wfk-btn, #005DAC);
    color: var(--wfk-btn-text, #FFFFFF);
    font-size: 34px;
    font-weight: 700;
    text-align: center;
}
body.wf-modern .ipa_small_button2 .btn { margin: 6px 4px; padding: 12px 22px; font-size: 1.05rem; }

/* ---------------------------------------------------------------- footer */
body.wf-modern footer#footer { padding: 28px 0 36px; background: transparent; }

/* ---------------------------------------------------------------- web kiosk (/d/): bigger targets, no hover-only cues */
@media (pointer: coarse) {
    body.wf-modern .call-to-action a.btn-light,
    body.wf-modern #aside1 a.btn-light:link, body.wf-modern #aside1 a.btn-light:visited,
    body.wf-modern a.waiverselect { padding: 22px 24px; font-size: 1.3rem; }
    body.wf-modern .btn { min-height: 48px; }
}