/*
 * AIR DATEPICKER IN THE W2W PALETTE — the one copy.
 * ===========================================================================
 *
 * Three places on this site open an Air Datepicker: the checkout date of birth
 * (themes/ways2well/inc/checkout.php), the questionnaire
 * (shortcodes/questionnaire/), and the Build Your Own Bloodwork modal
 * (shortcodes/byobw/). All three load the same 3.5.0 bundle from jsDelivr, and
 * that bundle ships a light theme — white panel, #4a4a4a text, #4eb5e6 accent,
 * system font — which is what any of them gets by default.
 *
 * The questionnaire fixed that for itself and carried these rules inside
 * questionnaire.css. Checkout never did, and opened a white calendar on a dark
 * page — which is what started this change. byobw had fixed it too, separately,
 * with a palette of its own that had drifted from the questionnaire's (#050b0e
 * against #0b1116) and would have gone on winning here, since depending on this
 * file makes it print afterwards at equal specificity.
 *
 * So: one page with nothing, one with the good copy, one with a copy that
 * disagreed. The rules moved here and all three enqueue this file through
 * w2w_enqueue_air_datepicker().
 *
 * WHY THE TOKENS ARE THEME-WIDE ONES WITH LITERAL FALLBACKS. Every one of the
 * three renders the picker with `container: "body"`, so its element is a
 * sibling of the page wrapper rather than a descendant of any component. A
 * component-scoped token — the questionnaire's --q-*, the checkout flow's own —
 * resolves to nothing out there, and the library quietly falls back to its
 * light theme. That is the bug this file exists to prevent, and it is why the
 * --w2w-* tokens (declared on :root in style.css) are used, each with a literal
 * fallback for the case where the theme stylesheet has not loaded.
 *
 * LOAD ORDER IS LOAD-BEARING. The CDN stylesheet defines the --adp-* custom
 * properties and the light defaults on .air-datepicker at the same specificity
 * as the rules below, so whichever comes last wins. This file must load AFTER
 * it, which w2w_enqueue_air_datepicker() guarantees by declaring it a
 * dependency rather than trusting enqueue order.
 *
 * WHAT IS NOT HERE: z-index. byobw opens its picker inside a modal at z-index
 * 100000 and needs its own override; nothing else does, and a value high enough
 * for that modal would be wrong everywhere else.
 */

/* ==========================================================================
   DATE PICKER — Air Datepicker in the new palette
   --------------------------------------------------------------------------
   The picker is rendered with `container: "body"`, so its element is a sibling
   of the page wrapper, NOT a descendant of .w2w-questionnaire. The --q-* tokens
   are declared on that wrapper, so referencing them here resolved to nothing
   and the library fell back to its own light theme — which is why this panel
   came out pale. Everything below therefore uses the theme-wide --w2w-* tokens
   (declared in style.css, so they are in scope) with literal fallbacks.
   ========================================================================== */

.air-datepicker {
    --adp-font-family: var(--w2w-nb-font-body, "Inter", sans-serif);

    /* Surfaces: the panel sits on the darkest surface in the system so it reads
       as an overlay above the form's own fields. */
    --adp-background-color: #0b1116;
    --adp-background-color-hover: rgba(236, 238, 243, .08);
    --adp-background-color-active: rgba(236, 238, 243, .14);
    --adp-background-color-in-range: rgba(46, 139, 255, .18);
    --adp-background-color-in-range-focused: rgba(46, 139, 255, .28);
    --adp-background-color-selected-other-month: #2e8bff;
    --adp-background-color-selected-other-month-focused: #2e8bff;

    /* Text: light throughout, not the muted body tone. */
    --adp-color: #eceef3;
    --adp-color-secondary: #a8aeb8;
    --adp-color-current-date: var(--w2w-nb-warm-amber, #e8902a);
    --adp-color-other-month: rgba(236, 238, 243, .28);
    --adp-color-disabled: rgba(236, 238, 243, .22);
    --adp-color-disabled-in-range: rgba(236, 238, 243, .22);
    --adp-color-other-month-hover: #eceef3;

    --adp-border-color: rgba(236, 238, 243, .12);
    --adp-border-color-inner: rgba(236, 238, 243, .08);
    --adp-border-color-inline: rgba(236, 238, 243, .12);
    --adp-border-radius: 12px;

    --adp-nav-color: #eceef3;
    --adp-nav-color-secondary: #a8aeb8;
    --adp-nav-arrow-color: #a8aeb8;
    --adp-nav-action-color: #eceef3;

    --adp-day-name-color: #a8aeb8;
    --adp-day-name-color-hover: #eceef3;
    --adp-day-cell-height: 36px;
    --adp-cell-border-radius: 8px;

    --adp-accent-color: var(--w2w-nb-brand, #2e8bff);
    --adp-cell-background-color-selected: var(--w2w-nb-brand, #2e8bff);
    --adp-cell-background-color-selected-hover: #1f7bef;

    --adp-btn-color: #eceef3;
    --adp-btn-color-hover: #fff;
    --adp-btn-height: 44px;

    background: #0b1116;
    border-color: rgba(236, 238, 243, .12);
    color: #eceef3;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
}

/* A few of the library's rules paint colours directly rather than through its
   variables, so they are restated here. */
.air-datepicker-nav {
    border-bottom: 1px solid rgba(236, 238, 243, .08);
}

.air-datepicker-nav--title,
.air-datepicker-nav--action {
    font-family: var(--w2w-nb-font-data, monospace);
    font-weight: 500;
    letter-spacing: .06em;
    color: #eceef3;
}

.air-datepicker-nav--title:hover,
.air-datepicker-nav--action:hover {
    background: rgba(236, 238, 243, .08);
}

.air-datepicker-body--day-name {
    font-family: var(--w2w-nb-font-data, monospace);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #a8aeb8;
}

.air-datepicker-cell {
    font-family: var(--w2w-nb-font-data, monospace);
    font-size: 14px;
    color: #eceef3;
}

.air-datepicker-cell.-current- {
    color: var(--w2w-nb-warm-amber, #e8902a);
}

.air-datepicker-cell.-selected-,
.air-datepicker-cell.-selected-.-current- {
    background: var(--w2w-nb-brand, #2e8bff);
    color: #fff;
}

.air-datepicker-cell.-disabled- {
    color: rgba(236, 238, 243, .22);
}

/* Clear: full-width pill at the bottom, as on the old checkout. */
.air-datepicker-buttons {
    border-top: 1px solid rgba(236, 238, 243, .08);
    padding: 10px;
}

.air-datepicker-button {
    border-radius: 40px;
    background: var(--w2w-nb-brand, #2e8bff);
    color: #fff;
    font-family: var(--w2w-nb-font-display, sans-serif);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: .8px;
}

.air-datepicker-button:hover,
.air-datepicker-button:focus {
    background: #1f7bef;
    color: #fff;
}

/* The little arrow pointing at the field takes `background: #fff` literally in
   the CDN stylesheet — there is no variable behind it — so on a dark panel it
   reads as a white diamond floating above the calendar. Came from byobw.css,
   which had found and fixed it locally; it is a fault of the bundle rather than
   of that page, so every picker gets the fix. */
.air-datepicker--pointer::after {
    background: #0b1116;
}