/**
 * Drug & Alcohol Testing System — Public Styles
 *
 * Integrates with Ion 7 CSS custom properties.
 * All classes prefixed with .dats- to avoid theme collisions.
 */

/* ----------------------------------------------------------------
   DATS-FRONTEND DESIGN SYSTEM SCOPE

   `body.dats-frontend` is added by `DATS_Frontend_Scope` (see
   includes/class-dats-frontend-scope.php) on every page where DATS
   owns the customer-facing surface — checkout (with DATS in cart),
   /find-a-location/, /provider-dashboard/, /practitioner-dashboard/,
   and /verify/{uuid}/.

   The scope defines DATS-owned tokens so front-end components stop
   inheriting theme variables that paint our buttons wrong. The bug
   class this fixes:

     `.dats-btn { border-radius: var(--button-radius, 4px); }`
     Ion 7's `--button-radius` is a large pill value; our intended 4px
     fallback never applies because the theme var is set. Result:
     checkout Continue/Back buttons render as round pills.

   By owning our own tokens (`--dats-radius-*`, `--dats-primary`,
   `--dats-text`, etc.), we read OUR variables, not the theme's.
   `.dats-frontend .dats-btn` rules below override the legacy
   theme-var-leaking rules with explicit DATS values.
   ---------------------------------------------------------------- */
body.dats-frontend {
    --dats-primary:        #0B1F3A;
    --dats-primary-hover:  #142D52;
    --dats-primary-active: #081729;
    --dats-secondary:      #2CA6A4;
    --dats-text:           #4A5A67;
    --dats-text-strong:    #0B1F3A;
    --dats-text-muted:     #5E6B78;
    --dats-bg:             #FFFFFF;
    --dats-bg-subtle:      #F7F9FB;
    --dats-bg-input:       #FFFFFF;
    --dats-border:         #E2E6EB;
    --dats-border-strong:  #818D9A;
    --dats-success:        #1F7B79;
    --dats-success-bg:     #E6F5F4;
    --dats-warning:        #C77700;
    --dats-warning-bg:     #FFF6E6;
    --dats-danger:         #B42318;
    --dats-danger-bg:      #FDECEA;
    --dats-info:           #1F5DB1;
    --dats-info-bg:        #E8F0FA;
    --dats-focus-ring:     #1F7B79;

    --dats-radius-sm: 4px;
    --dats-radius-md: 6px;
    --dats-radius-lg: 8px;
    --dats-radius-xl: 12px;

    --dats-space-1:  4px;
    --dats-space-2:  8px;
    --dats-space-3:  12px;
    --dats-space-4:  16px;
    --dats-space-5:  20px;
    --dats-space-6:  24px;
    --dats-space-8:  32px;

    --dats-shadow-xs: 0 1px 2px rgba(11,31,58,.04);
    --dats-shadow-sm: 0 1px 3px rgba(11,31,58,.06), 0 1px 2px rgba(11,31,58,.04);
    --dats-shadow-md: 0 4px 6px rgba(11,31,58,.05), 0 2px 4px rgba(11,31,58,.04);
    --dats-shadow-lg: 0 10px 15px rgba(11,31,58,.06), 0 4px 6px rgba(11,31,58,.04);

    --dats-transition-fast: 120ms ease;
    --dats-transition-base: 180ms ease;
}

/*
 * Override the existing `.dats-btn` rules (legacy, defined later in
 * the file with theme-variable fallbacks) inside the `.dats-frontend`
 * scope. Higher specificity (0,2,0 vs 0,1,0) wins regardless of source
 * order. Buttons now render with DATS-owned tokens — no more Ion 7
 * pill-radius inheritance.
 *
 * Strip text-decoration on every state per Track 3 — anchors-as-buttons
 * shouldn't carry the underline that the theme's global `a:hover`
 * applies. Same defensive pattern as `.dats-admin__btn`.
 */
.dats-frontend .dats-btn,
.dats-frontend .dats-btn:hover,
.dats-frontend .dats-btn:visited,
.dats-frontend .dats-btn:focus,
.dats-frontend .dats-btn:active { text-decoration: none; }

.dats-frontend .dats-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--dats-radius-md);
    font-family: 'DM Sans', var(--font, inherit);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background var(--dats-transition-fast),
                border-color var(--dats-transition-fast),
                color var(--dats-transition-fast),
                box-shadow var(--dats-transition-fast);
    min-height: 40px;
    white-space: nowrap;
}
.dats-frontend .dats-btn:focus-visible {
    outline: 2px solid var(--dats-focus-ring);
    outline-offset: 2px;
}
.dats-frontend .dats-btn-primary {
    background: var(--dats-primary);
    border-color: var(--dats-primary);
    color: #fff;
}
.dats-frontend .dats-btn-primary:hover {
    background: var(--dats-primary-hover);
    border-color: var(--dats-primary-hover);
    color: #fff;
}
.dats-frontend .dats-btn-primary:active {
    background: var(--dats-primary-active);
    border-color: var(--dats-primary-active);
}
.dats-frontend .dats-btn-secondary {
    background: #fff;
    border-color: var(--dats-primary);
    color: var(--dats-primary);
}
.dats-frontend .dats-btn-secondary:hover {
    background: var(--dats-bg-subtle);
    color: var(--dats-primary);
}
.dats-frontend .dats-btn-small {
    padding: 6px 14px;
    font-size: 13px;
    min-height: 32px;
}
/* Disabled / loading buttons */
.dats-frontend .dats-btn[disabled],
.dats-frontend .dats-btn--loading {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* ----------------------------------------------------------------
   Track 0 (1.0.20) — WooCommerce Place Order button override.

   Ion 7's `.woocommerce button.button.alt` rule ships at specificity
   (0,2,1) with `border-radius: var(--button-radius)`. Glowpath sets
   `--button-radius: 9999px`, so the Place Order button renders as a
   round pill that breaks the rest of the checkout's rectangular grid.
   Color contrast is fine (white on navy 16.52:1) — only shape needs
   correcting.

   Override at (0,3,1): `.dats-frontend .woocommerce button.button.alt`
   (and the `a.button.alt` / `input.button.alt` siblings used by other
   WC actions). Radius 6px to match `.dats-btn`, padding tightened from
   the theme's 14px/32px to 12px/24px so the button matches DATS
   visual rhythm. text-transform `none` because Glowpath's
   `--button-text--casing: capitalize` is the wrong fit here — the
   surrounding DATS buttons say "Continue to Payment" with sentence
   case.
   ---------------------------------------------------------------- */
.dats-frontend .woocommerce button.button.alt,
.dats-frontend .woocommerce a.button.alt,
.dats-frontend .woocommerce input.button.alt,
.dats-frontend #payment #place_order {
    border-radius: var(--dats-radius-md, 6px);
    padding: 12px 24px;
    font-family: 'DM Sans', var(--font, inherit);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
    background: var(--dats-primary);
    border: 1px solid var(--dats-primary);
    color: #fff;
    min-height: 40px;
    transition: background var(--dats-transition-fast),
                border-color var(--dats-transition-fast);
}
.dats-frontend .woocommerce button.button.alt:hover,
.dats-frontend .woocommerce a.button.alt:hover,
.dats-frontend .woocommerce input.button.alt:hover,
.dats-frontend #payment #place_order:hover {
    background: var(--dats-primary-hover);
    border-color: var(--dats-primary-hover);
    color: #fff;
}
.dats-frontend .woocommerce button.button.alt:focus-visible,
.dats-frontend #payment #place_order:focus-visible {
    outline: 2px solid var(--dats-focus-ring);
    outline-offset: 2px;
}

/* ----------------------------------------------------------------
   Universal — WP admin bar awareness.

   Anything position-fixed/sticky that needs to clear the WP admin bar
   should subtract `var(--dats-admin-bar-height)` from its viewport math.
   The bar is 32px desktop, 46px mobile (≤782px), 0 logged out.

   Using a CSS variable instead of media-query branches per element
   means a single root-level rule maintains the offset for every modal,
   sticky sidebar, drawer, or sticky checkout summary that opts in.
   ---------------------------------------------------------------- */
:root {
    --dats-admin-bar-height: 0px;
}
body.admin-bar {
    --dats-admin-bar-height: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar {
        --dats-admin-bar-height: 46px;
    }
}

/* ----------------------------------------------------------------
   BASE / RESETS
   ---------------------------------------------------------------- */
.dats-input,
.dats-select,
.dats-textarea {
    display: block;
    width: 100%;
    padding: var(--form-field--padding-top, 10px) var(--form-field--padding-right, 14px) var(--form-field--padding-bottom, 10px) var(--form-field--padding-left, 14px);
    border: 1px solid var(--form-field--border, #ccc);
    border-radius: var(--form-field--radius, 4px);
    font-family: var(--font, inherit);
    font-size: var(--font-size, 16px);
    line-height: var(--line-height, 1.5);
    color: var(--text, #333);
    background: #fff;
    transition: border-color var(--transitionFast, 0.15s) ease;
    box-sizing: border-box;
}
.dats-input:focus,
.dats-select:focus,
.dats-textarea:focus {
    outline: none;
    border-color: var(--primary, #0073aa);
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.15);
}
.dats-input-qty {
    width: 80px;
    text-align: center;
}
.dats-input-time {
    width: auto;
    display: inline-block;
}
.dats-label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
    color: var(--dark, #1a1a1a);
    font-size: var(--font-size--small, 14px);
}
.dats-req {
    color: var(--red, #dc3545);
}
.dats-hint {
    display: block;
    margin-top: 4px;
    font-size: clamp(12px, 1.5vw, 13px);
    color: var(--grey, #666);
}

/* ----------------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------------- */
.dats-btn {
    display: inline-block;
    padding: 10px 24px;
    border: none;
    border-radius: var(--button-radius, 4px);
    font-family: var(--font, inherit);
    font-size: var(--button-text--size, 15px);
    font-weight: var(--button-text--weight, 600);
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background var(--transitionFast, 0.15s) ease, color var(--transitionFast, 0.15s) ease;
    line-height: 1.4;
}
.dats-btn-primary {
    background: var(--button-background--primary, var(--primary, #0073aa));
    color: var(--button-text--colour, #fff);
}
.dats-btn-primary:hover {
    background: var(--button-hover--background, var(--secondary, #005177));
    color: var(--button-hover--color, #fff);
}
.dats-btn-secondary {
    background: var(--button-background--secondary, var(--secondary, #555));
    color: var(--button-text--colour, #fff);
}
.dats-btn-secondary:hover {
    background: var(--button-hover--background, var(--dark, #333));
    color: var(--button-hover--color, #fff);
}
.dats-btn-small {
    padding: 6px 14px;
    font-size: clamp(12px, 1.5vw, 13px);
}
.dats-btn-close {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--grey, #666);
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--radius, 4px);
}
.dats-btn-close:hover {
    color: var(--dark, #1a1a1a);
    background: var(--light, #f0f0f0);
}

/* ----------------------------------------------------------------
   NOTICES
   ---------------------------------------------------------------- */
.dats-notice {
    padding: 14px 18px;
    border-radius: var(--radius, 4px);
    margin-bottom: 20px;
    font-size: var(--font-size--small, 14px);
}
.dats-notice-error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}
.dats-notice-success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}
.dats-notice-info {
    background: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
}
/* 1.0.38 Track 2 — warn variant for credential gate notices */
.dats-notice-warn {
    background: #FFF4E5;
    border: 1px solid #F0C181;
    color: #7A4F12;
}

/*
 * 1.0.38 Track 7d — canonical file-upload field. Native <input type="file">
 * is hard to fully restyle, but we can give the surrounding control box a
 * visible border, padding, and hover/focus states. The browser-rendered
 * "Choose File" button on the left + filename text inherit from the
 * surrounding container's font + colour. AA contrast 4.5:1 on the focus
 * ring (#0B1F3A on #FFFFFF = 16.5:1).
 */
.dats-file-upload {
    display: block;
    width: 100%;
    max-width: 480px;
    padding: 10px 12px;
    border: 1px solid var(--dats-border, #C7CED6);
    border-radius: var(--radius, 6px);
    background: #FFFFFF;
    color: #212833;
    font-size: 14px;
    line-height: 1.4;
    transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
.dats-file-upload:hover {
    border-color: #5E6B78;
    background: #F7F9FB;
}
.dats-file-upload:focus,
.dats-file-upload:focus-visible {
    outline: none;
    border-color: #0B1F3A;
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.18);
}
.dats-file-upload:disabled {
    background: #F0F2F5;
    color: #5E6B78;
    cursor: not-allowed;
}

/* 1.0.38 Track 2 — credential summary card states */
.dats-cred-summary {
    padding: 14px 16px;
    border-radius: var(--radius, 6px);
    margin-bottom: 16px;
}
.dats-cred-summary--approved { background: #E6F5F4; border: 1px solid rgba(31,123,121,.30); color: #0B1F3A; }
.dats-cred-summary--pending  { background: #E8F0FA; border: 1px solid rgba(31,93,177,.30); color: #0B1F3A; }
.dats-cred-summary--rejected { background: #FDECEA; border: 1px solid rgba(180,35,24,.30); color: #7A1A12; }
.dats-cred-summary p { margin: 0 0 6px 0; }
.dats-cred-summary p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------
   SEARCH FORM — Homepage [dats_search_form]
   ---------------------------------------------------------------- */
.dats-search-form-wrap {
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
}
.dats-search-label {
    display: block;
    font-family: var(--heading, inherit);
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 700;
    color: var(--dark, #1a1a1a);
    margin-bottom: 16px;
    line-height: var(--line-height--heading, 1.2);
}
.dats-search-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
.dats-fsa-input {
    flex: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: clamp(16px, 2vw, 20px);
    text-align: center;
}
.dats-search-btn {
    flex-shrink: 0;
}
.dats-geolocation-wrap {
    margin-top: 14px;
}
.dats-divider-text {
    display: inline-block;
    margin: 0 10px;
    color: var(--grey, #666);
    font-size: var(--font-size--small, 14px);
}
.dats-search-hint {
    margin-top: 12px;
    font-size: clamp(12px, 1.5vw, 13px);
    color: var(--grey, #666);
}

/* ----------------------------------------------------------------
   SEARCH RESULTS — [dats_search_results]
   ---------------------------------------------------------------- */
.dats-view-toggle {
    display: none;
    gap: 0;
    margin-bottom: 16px;
    border: 1px solid var(--form-field--border, #ccc);
    border-radius: var(--radius, 4px);
    overflow: hidden;
    width: fit-content;
}
.dats-toggle-btn {
    padding: 8px 20px;
    background: #fff;
    border: none;
    font-size: var(--font-size--small, 14px);
    cursor: pointer;
    color: var(--text, #333);
    transition: background var(--transitionFast, 0.15s) ease;
}
.dats-toggle-btn + .dats-toggle-btn {
    border-left: 1px solid var(--form-field--border, #ccc);
}
.dats-toggle-active {
    background: var(--primary, #0073aa);
    color: #fff;
}
.dats-filters {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.dats-filter-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size--small, 14px);
    color: var(--text, #333);
    cursor: pointer;
}
/*
 * Find a Location layout.
 *
 * Rules (LEARNED THE HARD WAY — do not regress):
 *   1. The page must scroll natively. The LIST must NOT have its own
 *      `max-height + overflow-y: auto` — that created nested scrollbars
 *      and made trackpads jump between containers. We force
 *      `overflow: visible` on the wrap, the columns row, and the list
 *      itself so any older/cached/Elementor-injected rule loses.
 *   2. The MAP column uses `position: sticky` so it stays pinned in
 *      the viewport while the user scrolls the list. **`position: sticky`
 *      is silently disabled by ANY ancestor with `overflow: hidden`,
 *      `overflow: auto`, or `overflow: scroll`.** That includes
 *      Elementor section/column wrappers. We force `overflow: visible`
 *      on every DATS ancestor; the page template itself must also not
 *      wrap us in an `overflow: hidden` Elementor section.
 *   3. The map div needs a DEFINITE height at init time. A flex parent
 *      that resolves to 0 leaves Google Maps initialised at 0×0 with
 *      no tiles. We use `height: 70vh; min-height: 500px;` (was
 *      `calc(100vh - 140px)` previously — too fragile against admin-bar
 *      offset changes). The companion JS also fires
 *      `google.maps.event.trigger(map, 'resize')` after init to recover
 *      from any late layout.
 *
 * `--dats-search-sticky-top` is exposed so the offset can be tuned per
 * theme (admin bar adds ~32px; Ion 7 sticky header adds ~60–80px).
 */
.dats-search-results-wrap {
    overflow: visible;
    --dats-search-sticky-top: 100px;
}
.dats-results-columns {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    overflow: visible;
}
.dats-results-list {
    flex: 0 0 35%;
    min-width: 0;
    overflow: visible;
    max-height: none;
}
.dats-results-map {
    flex: 1;
    position: sticky;
    top: var(--dats-search-sticky-top, 100px);
    align-self: flex-start;
}
.dats-google-map {
    width: 100%;
    height: 70vh;
    min-height: 500px;
    max-height: calc(100vh - var(--dats-search-sticky-top, 100px) - 24px);
    max-height: calc(100dvh - var(--dats-search-sticky-top, 100px) - 24px);
    border-radius: var(--radius, 4px);
    background: var(--light, #f5f5f5);
}
/* When the WP admin bar is showing, push sticky offset down to clear it.
   The base offset (100px) accounts for the Ion 7 fixed header; admin bar
   stacks on top of that, so we add `--dats-admin-bar-height` (32 or 46px). */
body.admin-bar .dats-search-results-wrap {
    --dats-search-sticky-top: calc(100px + var(--dats-admin-bar-height, 0px));
}

/*
 * Map info window.
 *
 * Google Maps wraps our `.dats-map-iw` content in a stack of containers
 * (`.gm-style-iw`, `.gm-style-iw-c`, `.gm-style-iw-d`, plus a 2024-era
 * `.gm-style-iw-ch` close-header), each with its own padding. The default
 * stack adds ~24px of inner padding plus a 40px close-header strip, which
 * leaves a large blank L-shaped region around the address. We zero out
 * the wrapper padding and shrink the close button so the bubble hugs its
 * content. `!important` is used because Google's rules ship inline at
 * runtime with their own specificity weight — class-only selectors lose.
 */
.gm-style .gm-style-iw-c {
    padding: 8px 10px !important;
    max-height: none !important;
    border-radius: var(--radius, 4px) !important;
}
.gm-style .gm-style-iw-d {
    overflow: visible !important;
    max-height: none !important;
    padding: 0 !important;
}
/* Newer Maps JS (≥ 2024) adds a header strip for the close X. Collapse it
   so the close X overlays the content corner instead of taking its own row. */
.gm-style .gm-style-iw-ch { padding: 0 !important; }
.gm-style .gm-style-iw-chr { display: none !important; }
/* Close button — shrink and tuck into the corner. */
.gm-style .gm-ui-hover-effect {
    width: 22px !important;
    height: 22px !important;
    top: 2px !important;
    right: 2px !important;
    opacity: 0.6;
}
.gm-style .gm-ui-hover-effect:hover { opacity: 1; }
.gm-style .gm-ui-hover-effect > span {
    width: 14px !important;
    height: 14px !important;
    margin: 4px !important;
}

.dats-map-iw {
    font-family: var(--font, inherit);
    font-size: var(--font-size--small, 13px);
    line-height: 1.45;
    color: var(--dark, #1a1a1a);
    min-width: 220px;
    max-width: 280px;
    /* No padding here — `.gm-style-iw-c` above provides the only padding
       so the bubble is snug to the content. */
    padding: 0;
    /* Reserve a few px on the right edge so the close X (which now overlays
       the corner) doesn't sit on top of the address text. */
    padding-right: 18px;
    /* Flex column with `gap` owns vertical rhythm between the text block
       and the button — replaces the old hand-tuned margins which butted
       the address straight against the Book Here button. */
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dats-map-iw__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dats-map-iw__address {
    margin: 0;
    font-weight: 500;
}
.dats-map-iw__hours {
    margin: 0;
    font-size: 12px;
    color: #555;
    line-height: 1.4;
}
.dats-map-iw__btn {
    display: block;
    width: 100%;
    padding: 8px 14px;
    background: var(--primary, #0073aa);
    color: #fff;
    border: none;
    border-radius: var(--radius, 4px);
    cursor: pointer;
    font-size: var(--font-size--small, 13px);
    font-weight: 600;
    text-align: center;
    transition: background var(--transitionFast, 0.15s) ease;
}
.dats-map-iw__btn:hover {
    background: var(--dark, #003d5b);
}

/* Location cards — compact layout. The whole card is clickable
   (highlights the matching map pin), so we set `cursor: pointer`.
   Inner buttons/links keep their own cursor + behavior. */
.dats-location-card {
    border: 1px solid #e0e0e0;
    border-radius: var(--radius, 4px);
    padding: 14px 16px;
    margin-bottom: 10px;
    transition: border-color var(--transitionFast, 0.15s) ease, box-shadow var(--transitionFast, 0.15s) ease;
    background: #fff;
    cursor: pointer;
}
.dats-location-card:hover,
.dats-location-card.dats-card-active {
    border-color: var(--primary, #0073aa);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.dats-loc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}
.dats-loc-main { flex: 1; min-width: 0; }
/*
 * Privacy Rule §3 — `.dats-loc-address-primary` (street address) is the
 * customer-facing identifier on location cards. The legacy `.dats-loc-name`
 * rule remains for any post-payment context that re-renders cards with
 * names visible, but the public search list never emits that class.
 */
.dats-loc-name,
.dats-loc-address-primary {
    display: block;
    font-size: var(--font-size, 15px);
    font-weight: 600;
    color: var(--dark, #1a1a1a);
    margin-bottom: 2px;
    line-height: 1.3;
}
.dats-location-address {
    margin: 0;
    font-size: clamp(12px, 1.5vw, 13px);
    color: var(--grey, #666);
    line-height: 1.4;
}
.dats-loc-distance {
    flex-shrink: 0;
    font-size: clamp(12px, 1.5vw, 13px);
    font-weight: 600;
    color: var(--primary, #0073aa);
    white-space: nowrap;
}
.dats-loc-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    font-size: clamp(12px, 1.5vw, 13px);
    color: var(--text, #333);
}
.dats-loc-hours-summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: default;
}
.dashicon-clock { font-size: 14px; }
.dats-hours-toggle {
    background: none;
    border: none;
    padding: 0 2px;
    font-size: 12px;
    cursor: pointer;
    color: var(--grey, #666);
    transition: transform 0.2s ease;
    line-height: 1;
}
.dats-hours-toggle[aria-expanded="true"] {
    transform: rotate(180deg);
}
.dats-hours-detail {
    padding: 8px 0 4px 22px;
    margin-bottom: 8px;
    border-top: 1px solid #f0f0f0;
}
.dats-hours-row-compact {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 2px 0;
    max-width: 220px;
}
.dats-hrc-day { font-weight: 600; color: var(--dark, #1a1a1a); }
.dats-hrc-time { color: var(--text, #333); }
.dats-hrc-closed { color: #999; }
.dats-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.dats-badge-late {
    background: #e8f5e9;
    color: #2e7d32;
}
.dats-badge-sunday {
    background: #e3f2fd;
    color: #1565c0;
}
.dats-btn-book {
    width: 100%;
}
.dats-no-results {
    text-align: center;
    padding: 40px 20px;
}

/*
 * Find a Location landing prompt — what users see when they hit
 * /find-a-location/ with no FSA or coordinates yet. Replaces an older
 * error-wall ("Please provide a valid FSA…") with the actual search
 * form so the user can act immediately. The form is reused via the
 * same shortcode renderer ([dats_search_form]) for a single source of
 * truth.
 */
.dats-search-prompt {
    max-width: 640px;
    margin: 0 auto;
    padding: 32px 16px 16px;
    text-align: center;
}
.dats-search-prompt__title {
    font-family: var(--heading, inherit);
    font-size: clamp(22px, 3.5vw, 30px);
    color: var(--dark, #1a1a1a);
    margin: 0 0 8px;
}
.dats-search-prompt__sub {
    color: var(--text, #555);
    font-size: var(--font-size, 16px);
    margin: 0 0 20px;
}

/* ----------------------------------------------------------------
   BOOKING PANEL — universal modal pattern

   The panel is a fixed side-drawer that follows the same sticky
   header / scroll body / sticky footer rule as every other modal in
   the system (see assets/admin/dats-admin.css §13). The panel itself
   is the flex column with overflow hidden, so the body is the ONLY
   scroll container — no nested scrollbars and the Proceed-to-Checkout
   button never scrolls out of view.

   Companion JS (assets/js/dats-public.js) toggles
   `body.dats-booking-open` for scroll lock and updates the header
   title as the user moves between steps.
   ---------------------------------------------------------------- */
.dats-booking-panel {
    position: fixed;
    /* Admin-bar-aware: when a logged-in admin is browsing the public
       site, the WP admin bar covers the top 32px (or 46px on mobile).
       Without this offset, the panel's top edge slipped behind the bar
       and pushed its bottom (with the sticky CTA) below the viewport,
       leaving "Proceed to Checkout" unreachable. Logged-out users get
       --dats-admin-bar-height: 0 so the panel still hugs the top. */
    top: var(--dats-admin-bar-height, 0px);
    right: 0;
    width: 420px;
    max-width: 100vw;
    /* Mobile browser URL/toolbar can shrink the visible viewport; vh is
       computed against the largest viewport so the panel's sticky CTA
       slips under the chrome. dvh tracks the actual visible area. */
    height: calc(100vh - var(--dats-admin-bar-height, 0px));
    height: calc(100dvh - var(--dats-admin-bar-height, 0px));
    max-height: calc(100vh - var(--dats-admin-bar-height, 0px));
    max-height: calc(100dvh - var(--dats-admin-bar-height, 0px));
    background: #fff;
    box-shadow: -4px 0 20px rgba(0,0,0,0.12);
    z-index: 10000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: dats-slide-in 0.2s ease-out;
}
.dats-booking-panel--leaving {
    animation: dats-slide-out 0.15s ease-in;
}
@keyframes dats-slide-in {
    from { transform: translateX(100%); opacity: 0.4; }
    to   { transform: translateX(0);    opacity: 1;   }
}
@keyframes dats-slide-out {
    from { transform: translateX(0);    opacity: 1;   }
    to   { transform: translateX(100%); opacity: 0;   }
}
/* 1.0.38 Track 6 — accessibility: skip the slide for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .dats-booking-panel,
    .dats-booking-panel--leaving { animation: none; }
}
.dats-booking-panel__header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--form-field--border, #e0e0e0);
    background: #fff;
}
.dats-booking-panel__title {
    font-family: var(--heading, inherit);
    font-size: clamp(18px, 2.5vw, 22px);
    margin: 0;
    color: var(--dark, #1a1a1a);
    line-height: 1.2;
}
.dats-booking-panel__body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding: 24px;
}
.dats-booking-panel__footer {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--form-field--border, #e0e0e0);
    background: var(--light, #f9f9f9);
}
.dats-booking-panel__footer .dats-confirm-summary {
    margin: 0;
    font-size: var(--font-size--small, 14px);
    line-height: 1.5;
    color: var(--text, #333);
}
.dats-booking-panel__footer .dats-btn {
    width: 100%;
}

/*
 * Visibility modifiers — class-based so they don't fight inline-style
 * cleanup. `!important` wins specificity battles against any theme rule
 * that targets the same element type. Without this the show/hide path
 * silently lost on themes that defined `aside { display: block }` etc.
 */
.dats-booking-panel--hidden,
.dats-booking-panel__footer--hidden,
.dats-step--hidden,
.dats-slots-wrap--hidden,
.dats-booking-loading--hidden {
    display: none !important;
}

/* Body scroll lock while the booking drawer is open. */
body.dats-booking-open {
    overflow: hidden;
}

.dats-step__back-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.dats-step__back-row .dats-selected-test {
    font-size: var(--font-size--small, 13px);
    color: var(--grey, #666);
}
.dats-btn-back {
    background: none;
    border: 1px solid #ddd;
    border-radius: var(--radius, 4px);
    width: 32px;
    height: 32px;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text, #333);
    transition: background var(--transitionFast, 0.15s) ease;
    flex-shrink: 0;
}
.dats-btn-back:hover { background: var(--light, #f5f5f5); }

/* Test type selector */
.dats-test-type-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dats-test-type-btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border: 2px solid #e0e0e0;
    border-radius: var(--radius, 4px);
    background: #fff;
    cursor: pointer;
    text-align: left;
    transition: border-color var(--transitionFast, 0.15s) ease, background var(--transitionFast, 0.15s) ease;
}
.dats-test-type-btn:hover {
    border-color: var(--primary, #0073aa);
    background: #f0f7fb;
}
.dats-test-type-btn.dats-tt-selected {
    border-color: var(--primary, #0073aa);
    background: #eaf3fa;
}
.dats-tt-name {
    font-weight: 600;
    font-size: var(--font-size, 16px);
    color: var(--dark, #1a1a1a);
    flex: 1;
}
.dats-tt-price {
    font-weight: 700;
    font-size: var(--font-size, 16px);
    color: var(--primary, #0073aa);
}
.dats-tt-desc {
    display: block;
    width: 100%;
    font-size: clamp(12px, 1.5vw, 13px);
    color: var(--grey, #666);
    margin-top: 2px;
}

/* Calendar */
.dats-calendar-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.dats-cal-month {
    font-weight: 600;
    font-size: var(--font-size, 16px);
}
.dats-btn-nav {
    background: none;
    border: 1px solid #ddd;
    border-radius: var(--radius, 4px);
    width: 36px;
    height: 36px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text, #333);
    transition: background var(--transitionFast, 0.15s) ease;
}
.dats-btn-nav:hover { background: var(--light, #f5f5f5); }
.dats-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    text-align: center;
}
.dats-cal-header {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--grey, #666);
    padding: 6px 0;
}
.dats-cal-day {
    padding: 8px 4px;
    border: none;
    border-radius: var(--radius, 4px);
    background: none;
    cursor: pointer;
    font-size: var(--font-size--small, 14px);
    color: var(--text, #333);
    transition: background var(--transitionFast, 0.15s) ease;
}
.dats-cal-day:hover { background: var(--light, #f0f0f0); }
.dats-cal-day.dats-cal-today {
    font-weight: 700;
    border: 1px solid var(--primary, #0073aa);
}
.dats-cal-day.dats-cal-available {
    background: #e8f5e9;
    color: #2e7d32;
    font-weight: 600;
}
.dats-cal-day.dats-cal-available:hover { background: #c8e6c9; }
.dats-cal-day.dats-cal-selected {
    background: var(--primary, #0073aa);
    color: #fff;
}
.dats-cal-day.dats-cal-disabled {
    color: #ccc;
    cursor: default;
    pointer-events: none;
}
.dats-cal-day.dats-cal-empty {
    visibility: hidden;
}

/* Time slots */
.dats-slots-title {
    font-size: var(--font-size, 16px);
    font-weight: 600;
    margin: 20px 0 12px;
    color: var(--dark, #1a1a1a);
}
.dats-slots-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.dats-slot-btn {
    padding: 10px 8px;
    border: 1px solid #ddd;
    border-radius: var(--radius, 4px);
    background: #fff;
    font-size: var(--font-size--small, 14px);
    cursor: pointer;
    text-align: center;
    transition: all var(--transitionFast, 0.15s) ease;
}
.dats-slot-btn:hover {
    border-color: var(--primary, #0073aa);
    background: #f0f7fb;
}
.dats-slot-btn.dats-slot-selected {
    background: var(--primary, #0073aa);
    color: #fff;
    border-color: var(--primary, #0073aa);
}
.dats-confirm-summary {
    background: var(--light, #f8f9fa);
    padding: 14px 18px;
    border-radius: var(--radius, 4px);
    margin-bottom: 16px;
    font-size: var(--font-size--small, 14px);
    line-height: 1.6;
}

/* Spinner */
.dats-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid #e0e0e0;
    border-top-color: var(--primary, #0073aa);
    border-radius: 50%;
    animation: dats-spin 0.6s linear infinite;
}
@keyframes dats-spin {
    to { transform: rotate(360deg); }
}
.dats-booking-loading {
    text-align: center;
    padding: 30px 0;
}

/* ----------------------------------------------------------------
   RESERVATION COUNTDOWN (WooCommerce Checkout)
   ---------------------------------------------------------------- */
.dats-reservation-timer {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: var(--radius, 4px);
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: var(--font-size--small, 14px);
    text-align: center;
}
.dats-timer-countdown {
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 700;
    color: var(--dark, #1a1a1a);
    font-variant-numeric: tabular-nums;
}
.dats-timer-expired {
    background: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

/* ----------------------------------------------------------------
   WOOCOMMERCE CHECKOUT — DATS Custom Fields
   ---------------------------------------------------------------- */
.dats-checkout-fields {
    background: var(--light, #f9f9f9);
    border: 1px solid var(--form-field--border, #ddd);
    border-radius: var(--radius, 6px);
    padding: 24px;
    margin: 24px 0;
    clear: both;
}
.dats-checkout-fields h3 {
    font-family: var(--heading, inherit);
    font-size: var(--font-size--h4, 18px);
    margin: 0 0 6px;
    color: var(--dark, #1a1a1a);
}
.dats-checkout-fields h3 + .dats-checkout-note {
    margin-bottom: 16px;
    font-size: var(--font-size--small, 14px);
    color: var(--text, #555);
}
.dats-checkout-fields .form-row-first,
.dats-checkout-fields .form-row-last {
    width: 48%;
    display: inline-block;
    vertical-align: top;
}
.dats-checkout-fields .form-row-first { float: left; }
.dats-checkout-fields .form-row-last { float: right; }
.dats-checkout-fields .form-row-wide { clear: both; }
.dats-share-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--form-field--border, #ddd);
    clear: both;
    display: flow-root; /* contain inner floats so the card box does not collapse when fields reveal */
}
.dats-share-fields {
    padding-left: 8px;
    margin-top: 8px;
    clear: both;
    display: flow-root; /* contain form-row-first/-last floats so the section keeps its height in the revealed state */
}

/* ----------------------------------------------------------------
   1.0.35 — WooCommerce billing/shipping field layout optimization
   City / Province / Postal pack onto one row (50/28/20). Email / Phone
   pair via Woo's existing form-row-first/last. Applied via PHP filter
   only when a DATS product is in the cart.

   Specificity needs to beat both `.woocommerce form .form-row-wide`
   (0,3,1) and any theme override at similar weight. The trio elements
   end up with `form-row-wide` re-attached by Woo's address-i18n JS on
   country change even after our PHP filter strips it; we don't fight
   that, we just out-specify the width rule. !important on width is the
   final guard against theme stylesheets loaded after ours.
   ---------------------------------------------------------------- */
form.woocommerce-checkout .form-row.dats-row-3up,
form.checkout .form-row.dats-row-3up {
    box-sizing: border-box;
    float: left !important;
    margin-bottom: 16px;
}
form.woocommerce-checkout .form-row.dats-row-3up.dats-row-3up__city,
form.checkout .form-row.dats-row-3up.dats-row-3up__city {
    width: 49% !important;
    clear: left !important;
    margin-right: 1.5%;
}
form.woocommerce-checkout .form-row.dats-row-3up.dats-row-3up__state,
form.checkout .form-row.dats-row-3up.dats-row-3up__state {
    width: 28% !important;
    margin-right: 1.5%;
    clear: none !important;
}
form.woocommerce-checkout .form-row.dats-row-3up.dats-row-3up__postcode,
form.checkout .form-row.dats-row-3up.dats-row-3up__postcode {
    width: 20% !important;
    clear: none !important;
}
/* The next row after the trio (or after an email/phone pair) needs to
   start clean. form-row-first already clears in vanilla Woo; this rule
   defends against themes that overwrite that default. */
form.woocommerce-checkout .form-row.dats-row-3up.dats-row-3up__postcode + .form-row,
form.checkout .form-row.dats-row-3up.dats-row-3up__postcode + .form-row {
    clear: both;
}
/* Defensive: the email/phone pair uses Woo's standard form-row-first/
   form-row-last. Most themes style those, but lock the widths down
   inside the DATS-cart checkout so a theme that doesn't can't break
   it. */
form.woocommerce-checkout .form-row.form-row-first,
form.checkout .form-row.form-row-first {
    width: 49%;
    float: left;
    clear: both;
    margin-right: 2%;
    box-sizing: border-box;
}
form.woocommerce-checkout .form-row.form-row-last,
form.checkout .form-row.form-row-last {
    width: 49%;
    float: left;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    /* Stack the trio + pair on narrow screens — three skinny columns
       are unusable on a phone, and so are 49/49 pairs. */
    form.woocommerce-checkout .form-row.dats-row-3up,
    form.checkout .form-row.dats-row-3up,
    form.woocommerce-checkout .form-row.form-row-first,
    form.checkout .form-row.form-row-first,
    form.woocommerce-checkout .form-row.form-row-last,
    form.checkout .form-row.form-row-last {
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
        clear: both !important;
    }
}

/* ----------------------------------------------------------------
   PROVIDER SIGNUP FORM
   ---------------------------------------------------------------- */
.dats-signup-wrap {
    max-width: 720px;
    margin: 0 auto;
}
.dats-signup-intro {
    margin-bottom: 24px;
    color: var(--text, #333);
}
.dats-fieldset {
    border: 1px solid #e0e0e0;
    border-radius: var(--radius, 4px);
    padding: 24px;
    margin-bottom: 24px;
}
.dats-legend {
    font-family: var(--heading, inherit);
    font-size: clamp(16px, 2vw, 18px);
    font-weight: 700;
    color: var(--dark, #1a1a1a);
    padding: 0 8px;
}
.dats-field {
    margin-bottom: 16px;
}
.dats-field:last-child { margin-bottom: 0; }
.dats-field-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}
.dats-field-half { flex: 1; }
.dats-field-third { flex: 1; }

/* Hours rows */
.dats-hours-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    flex-wrap: wrap;
}
.dats-hours-day {
    min-width: 100px;
    font-weight: 600;
    font-size: var(--font-size--small, 14px);
}
.dats-hours-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size--small, 14px);
    cursor: pointer;
}
.dats-hours-times {
    display: flex;
    align-items: center;
    gap: 8px;
}
.dats-hours-sep {
    font-size: var(--font-size--small, 14px);
    color: var(--grey, #666);
}

/* Checkbox / radio groups */
.dats-checkbox-group,
.dats-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.dats-checkbox-label,
.dats-radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size--small, 14px);
    cursor: pointer;
}
.dats-form-actions {
    text-align: left;
}

/* ----------------------------------------------------------------
   VERIFICATION PAGE
   ---------------------------------------------------------------- */
.dats-verification-container {
    max-width: 600px;
    margin: 0 auto;
}
.dats-verify-card {
    border-radius: var(--radius, 4px);
    padding: 32px;
    text-align: center;
}
.dats-verify-not-found {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
}
.dats-verify-valid {
    background: #fff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.dats-verify-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 24px;
    font-weight: 700;
}
.dats-verify-icon-valid {
    background: #d4edda;
    color: #28a745;
}
.dats-verify-icon-error {
    background: #f8d7da;
    color: #dc3545;
}
.dats-verify-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}
.dats-verify-badge-text {
    font-size: clamp(18px, 2.5vw, 22px);
    font-weight: 700;
    color: #28a745;
}
.dats-verify-title {
    font-family: var(--heading, inherit);
    font-size: clamp(16px, 2vw, 20px);
    color: var(--dark, #1a1a1a);
    margin-bottom: 24px;
}
.dats-verify-details {
    text-align: left;
    margin: 0;
}
.dats-verify-row {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}
.dats-verify-row:last-child { border-bottom: none; }
.dats-verify-row dt {
    flex: 0 0 45%;
    font-weight: 600;
    color: var(--dark, #1a1a1a);
    font-size: var(--font-size--small, 14px);
}
.dats-verify-row dd {
    flex: 1;
    margin: 0;
    font-size: var(--font-size--small, 14px);
    color: var(--text, #333);
}
.dats-result-negative {
    color: #28a745;
    font-weight: 700;
}

/* ----------------------------------------------------------------
   TABLES (shared)
   ---------------------------------------------------------------- */
.dats-table {
    width: 100%;
    border-collapse: collapse;
}
.dats-table th,
.dats-table td {
    padding: 10px 12px;
    text-align: left;
    font-size: var(--font-size--small, 14px);
    border-bottom: 1px solid #e0e0e0;
}
.dats-table th {
    font-weight: 600;
    color: var(--dark, #1a1a1a);
    background: var(--light, #f8f9fa);
}
.dats-table tr:hover { background: #fafafa; }
.dats-col-qty { width: 100px; text-align: center; }

/* STATUS BADGES */
.dats-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}
.dats-status-pending   { background: #fff3cd; color: #856404; }
.dats-status-fulfilled { background: #d4edda; color: #155724; }
.dats-status-confirmed { background: #d4edda; color: #155724; }
.dats-status-completed { background: #cce5ff; color: #004085; }
.dats-status-cancelled { background: #f8d7da; color: #721c24; }
.dats-status-presumptive_positive { background: #f8d7da; color: #721c24; }

/* ----------------------------------------------------------------
   PROVIDER DASHBOARD (shared public-facing elements)
   ---------------------------------------------------------------- */
.dats-provider-dashboard {
    max-width: 1100px;
    margin: 0 auto;
}
.dats-tab-nav {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.dats-tab-link {
    padding: 10px 20px;
    text-decoration: none;
    font-size: var(--font-size--small, 14px);
    font-weight: 600;
    color: var(--text, #333);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color var(--transitionFast, 0.15s) ease, border-color var(--transitionFast, 0.15s) ease;
}
.dats-tab-link:hover {
    color: var(--primary, #0073aa);
}
.dats-tab-link.dats-tab-active {
    color: var(--primary, #0073aa);
    border-bottom-color: var(--primary, #0073aa);
}

/* Summary cards */
.dats-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.dats-summary-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: var(--radius, 4px);
    padding: 20px;
    text-align: center;
}
.dats-summary-card-value {
    display: block;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    color: var(--dark, #1a1a1a);
    line-height: 1.2;
}
.dats-summary-card-label {
    display: block;
    margin-top: 4px;
    font-size: clamp(12px, 1.5vw, 13px);
    color: var(--grey, #666);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Empty state */
.dats-empty {
    color: var(--grey, #666);
    font-style: italic;
    padding: 20px 0;
}

/* Divider */
.dats-divider {
    border: none;
    border-top: 1px solid #e0e0e0;
}

/* Inline result form */
.dats-result-form {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* ----------------------------------------------------------------
   CHECKOUT STEPPER — 3-step Billing → Recipient → Payment flow
   ----------------------------------------------------------------
   Engaged by JS only when DATS product is in cart on the WC checkout
   page. The form HTML stays untouched; we only add CSS classes that
   show/hide WC's existing sub-sections inside three tab containers.
   All colors meet WCAG AA per the Track 0 audit.
   ---------------------------------------------------------------- */
.dats-checkout-wrap {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    /*
     * Position-relative so the sidebar's `position: sticky` calculates
     * inside this wrap (sidebar exits the sticky container at the bottom
     * of the form, not the bottom of the page).
     */
    position: relative;
}
.dats-checkout-wrap > form.checkout {
    flex: 1 1 auto;
    min-width: 0;
}
.dats-checkout-aside {
    flex: 0 0 320px;
    /* Sticky sidebar: rides the viewport while user scrolls form content.
       Top offset clears the WP admin bar (Track 1.2 universal rule).
       80px additional clearance for the Ion 7 site header. */
    position: sticky;
    top: calc(var(--dats-admin-bar-height, 0px) + 80px);
    align-self: flex-start;
}

/* Order Summary card inside the sidebar */
.dats-checkout-sidebar {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: var(--radius, 6px);
    box-shadow: 0 4px 12px rgba(11,31,58,.06);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.dats-checkout-sidebar__inner {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.dats-checkout-sidebar__title {
    font-family: var(--heading, inherit);
    font-size: var(--font-size--h5, 16px);
    margin: 0 0 4px;
    color: var(--dark, #1a1a1a);
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 12px;
}
.dats-summary-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--font-size--small, 14px);
    line-height: 1.4;
}
.dats-summary-row__label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
    font-weight: 600;
    color: #5E6B78; /* WCAG AA: 5.46:1 on white */
}
.dats-summary-row__value {
    color: var(--dark, #0B1F3A); /* WCAG AA: 16.52:1 on white */
    font-weight: 500;
}
.dats-summary-row--price .dats-summary-row__value {
    font-size: clamp(18px, 2vw, 20px);
    font-weight: 700;
}

/* Reservation timer — three states: normal / warning / danger / expired */
.dats-checkout-sidebar .dats-reservation-timer {
    background: #F7F9FB;
    border: 1px solid #E2E6EB;
    border-radius: 6px;
    padding: 14px 16px;
    margin: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: background 0.25s ease, border-color 0.25s ease;
}
.dats-checkout-sidebar .dats-timer-notice {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
}
.dats-checkout-sidebar .dats-timer-label {
    font-size: 12px;
    color: #5E6B78;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.dats-checkout-sidebar .dats-countdown {
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #0B1F3A;
    line-height: 1;
}
.dats-checkout-sidebar .dats-timer-help {
    margin: 0;
    font-size: 12px;
    color: #5E6B78;
    line-height: 1.4;
}

/* Warning state (<2:00 remaining): orange tint. WCAG: #8A5500 on #FFF6E6 → 5.79:1 */
.dats-checkout-sidebar--warning .dats-reservation-timer {
    background: #FFF6E6;
    border-color: rgba(199,119,0,.35);
}
.dats-checkout-sidebar--warning .dats-countdown,
.dats-checkout-sidebar--warning .dats-timer-help {
    color: #8A5500;
}

/* Danger state (<1:00 remaining): red tint. WCAG: #B42318 on #FDECEA → 5.75:1 */
.dats-checkout-sidebar--danger .dats-reservation-timer {
    background: #FDECEA;
    border-color: rgba(180,35,24,.45);
    animation: dats-timer-pulse 1.2s ease-in-out infinite alternate;
}
.dats-checkout-sidebar--danger .dats-countdown,
.dats-checkout-sidebar--danger .dats-timer-help,
.dats-checkout-sidebar--danger .dats-timer-label {
    color: #B42318;
}
@keyframes dats-timer-pulse {
    from { box-shadow: 0 0 0 0 rgba(180,35,24,0); }
    to   { box-shadow: 0 0 0 4px rgba(180,35,24,.10); }
}

/* Expired state — graceful pre-redirect appearance */
.dats-checkout-sidebar--expired .dats-reservation-timer {
    background: #FDECEA;
    border-color: #B42318;
    color: #B42318;
}
.dats-checkout-sidebar--expired .dats-countdown {
    color: #B42318;
}

/* ----------------------------------------------------------------
   Stepper UI — three step indicators above the tab content.
   ---------------------------------------------------------------- */
.dats-checkout-stepper {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    counter-reset: dats-step;
}
.dats-checkout-stepper__item { margin: 0; }
.dats-checkout-stepper__btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #F7F9FB;
    border: 1px solid #E2E6EB;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--font-size--small, 14px);
    text-align: left;
    color: #5E6B78; /* WCAG AA: 5.17:1 on subtle bg */
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.dats-checkout-stepper__btn:hover {
    background: #fff;
    border-color: #C9D1D9;
    color: #0B1F3A;
}
.dats-checkout-stepper__btn:focus-visible {
    outline: 2px solid #1F7B79;
    outline-offset: 2px;
}
.dats-checkout-stepper__num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #C9D1D9;
    color: #5E6B78;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.dats-checkout-stepper__btn.is-active {
    background: #0B1F3A;
    border-color: #0B1F3A;
    color: #fff;
}
.dats-checkout-stepper__btn.is-active .dats-checkout-stepper__num {
    background: #fff;
    border-color: #fff;
    color: #0B1F3A;
}
.dats-checkout-stepper__btn.is-complete {
    background: #fff;
    border-color: #1F7B79;
    color: #0B1F3A;
}
.dats-checkout-stepper__btn.is-complete .dats-checkout-stepper__num {
    background: #1F7B79;
    border-color: #1F7B79;
    color: #fff;
}
.dats-checkout-stepper__label {
    font-weight: 600;
    flex: 1;
    min-width: 0;
}

/* ----------------------------------------------------------------
   Tab regions and prev/next nav.
   ---------------------------------------------------------------- */
.dats-checkout-tabs {
    background: transparent;
}
.dats-checkout-tab {
    animation: dats-checkout-tab-fade 180ms ease;
}
.dats-checkout-tab[hidden] { display: none; }

@keyframes dats-checkout-tab-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

.dats-checkout-tabnav {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #E2E6EB;
}
.dats-checkout-tabnav__prev { margin-right: auto; }
.dats-checkout-tabnav__next { margin-left: auto; }

.dats-checkout-tabnotice {
    background: #FFF6E6;
    border: 1px solid rgba(199,119,0,.35);
    border-radius: 6px;
    padding: 12px 16px;
    margin: 0 0 16px;
    color: #8A5500; /* WCAG AA: 5.79:1 on #FFF6E6 */
    font-size: var(--font-size--small, 14px);
    font-weight: 500;
}

/* ----------------------------------------------------------------
   "Same as billing" affordance.
   ---------------------------------------------------------------- */
.dats-same-as-billing-row {
    background: #F7F9FB;
    border: 1px solid #E2E6EB;
    border-radius: 6px;
    padding: 12px 16px !important;
    margin: 0 0 16px !important;
}
.dats-same-as-billing {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size--small, 14px);
    color: #0B1F3A;
    cursor: pointer;
    margin: 0;
}
/* Visually muted readonly state once "Same as billing" is checked */
.dats-checkout-fields input[readonly] {
    background: #F7F9FB;
    color: #5E6B78;
    cursor: not-allowed;
}

/* ----------------------------------------------------------------
   Modals — reservation warning + back-navigation prompt.
   ---------------------------------------------------------------- */
.dats-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(11,31,58,.55);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    /* `[hidden]` provides the default off state. The `--visible` class
       opts in once JS calls show*. We also set explicit `display: none`
       under [hidden] so any theme rule that re-asserts display: block on
       the element type doesn't paint an empty modal. */
}
.dats-modal-backdrop[hidden] { display: none !important; }
.dats-modal-backdrop--visible {
    animation: dats-modal-fade 160ms ease;
}
.dats-modal-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(11,31,58,.20);
    padding: 24px 28px;
    width: 100%;
    max-width: 440px;
    animation: dats-modal-pop 180ms ease;
}
.dats-modal-card__title {
    font-family: var(--heading, inherit);
    font-size: var(--font-size--h4, 18px);
    margin: 0 0 8px;
    color: #0B1F3A;
}
.dats-modal-card__body {
    margin: 0 0 20px;
    color: #4A5A67;
    font-size: var(--font-size--small, 14px);
    line-height: 1.5;
}
.dats-modal-card__actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
@keyframes dats-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dats-modal-pop  { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------
   Mobile fallback (<860px) — sidebar collapses to a sticky banner
   above the stepper instead of riding alongside the form.
   ---------------------------------------------------------------- */
@media (max-width: 860px) {
    .dats-checkout-wrap {
        flex-direction: column;
        gap: 16px;
    }
    .dats-checkout-aside {
        order: -1;
        position: sticky;
        top: var(--dats-admin-bar-height, 0px);
        flex: 0 0 auto;
        width: 100%;
        z-index: 50;
    }
    .dats-checkout-sidebar {
        box-shadow: 0 4px 12px rgba(11,31,58,.10);
    }
    .dats-checkout-sidebar__inner {
        padding: 12px 16px;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px 18px;
        align-items: center;
    }
    .dats-checkout-sidebar__title { display: none; }
    .dats-summary-row { flex: 1 1 auto; }
    .dats-summary-row--price { flex-basis: 100%; text-align: right; }
    .dats-checkout-sidebar .dats-reservation-timer { flex-basis: 100%; padding: 8px 12px; }
    .dats-checkout-sidebar .dats-timer-help { display: none; }
    .dats-checkout-stepper { grid-template-columns: 1fr; gap: 2px; }
}

/* ----------------------------------------------------------------
   DATS TOP BAR — replaces wp_admin_bar for provider/practitioner
   ----------------------------------------------------------------
   Rendered server-side via wp_body_open. Sticky to the top of the
   viewport, navy-on-white DM Sans, WCAG AA verified.

   For provider/practitioner roles, WP's admin bar is suppressed so
   --dats-admin-bar-height resolves to 0 and the DATS bar IS the
   top fixture. Administrators don't see this bar (they keep WP's).
   ---------------------------------------------------------------- */
.dats-topbar {
    position: sticky;
    top: 0;
    z-index: 9000;
    background: #0B1F3A; /* WCAG AA: white-on-navy = 16.52:1 */
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    /* DM Sans loaded by the existing public stylesheet enqueue chain
       (Ion 7 ships Google Fonts); fallback to the OS sans-serif. */
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
/* 1.0.35 Track 6 — three-column grid puts the brand on the left, the
   greeting + dashboard cluster in the centre, and the logout link on the
   right. `1fr auto 1fr` lets the centre group sit at the true visual
   centre of the bar regardless of brand/logout text widths. */
.dats-topbar__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 8px 20px;
    max-width: 1400px;
    margin: 0 auto;
    min-height: 44px;
}
.dats-topbar__brand {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    justify-self: start;
}
.dats-topbar__brand:hover,
.dats-topbar__brand:focus,
.dats-topbar__brand:visited {
    color: #fff;
    text-decoration: none;
}
.dats-topbar__brand-mark {
    font-size: 16px;
    letter-spacing: 0.06em;
    /* High-contrast: white on navy bar = 16.52:1 PASS */
}
.dats-topbar__center {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    justify-self: center;
}
.dats-topbar__greeting {
    font-size: 13px;
    color: rgba(255,255,255,0.85); /* WCAG AA: ~13.9:1 on navy PASS */
    font-weight: 500;
}
.dats-topbar__dashboard-btn.dats-btn.dats-btn-secondary {
    /* The default secondary button is navy-on-white, which would
       collide with the navy bar bg. Repaint for the dark bar. */
    background: transparent;
    border-color: rgba(255,255,255,0.5);
    color: #fff;
    padding: 5px 14px;
    font-size: 13px;
    min-height: 30px;
}
.dats-topbar__dashboard-btn.dats-btn.dats-btn-secondary:hover {
    background: rgba(255,255,255,0.1);
    border-color: #fff;
    color: #fff;
}
.dats-topbar__logout {
    color: rgba(255,255,255,0.78);
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 2px;
    justify-self: end;
}
.dats-topbar__logout:hover { color: #fff; }
@media (max-width: 640px) {
    /* Collapse the grid to a single column. Brand + logout on the same
       wrapped row, centre group below — keeps thumb-friendly tap targets
       without crowding the navy bar at narrow widths. */
    .dats-topbar__inner {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 8px 12px;
        padding: 6px 12px;
    }
    .dats-topbar__center { justify-content: center; width: 100%; order: 3; gap: 10px; }
    .dats-topbar__greeting { font-size: 12px; }
}

/* ----------------------------------------------------------------
   DATS-FRONTEND-DASHBOARD — minimum-viable styling lift for the
   provider/practitioner dashboards. Full per-tab redesign deferred,
   but we lift the most-visible regressions (button radius, link
   underlines on action buttons, basic form-field rhythm) so the
   pages feel cohesive.
   ---------------------------------------------------------------- */
.dats-frontend-dashboard {
    /* Anchors-as-buttons should not get the global theme underline */
}
.dats-frontend-dashboard .dats-btn,
.dats-frontend-dashboard .dats-btn:hover,
.dats-frontend-dashboard .dats-btn:visited,
.dats-frontend-dashboard .dats-btn:focus { text-decoration: none; }

/* Page-chrome surface so dashboards aren't just transparent on theme bg */
.dats-frontend-dashboard .dats-dashboard-tabs,
.dats-frontend-dashboard .dats-tab-panel,
.dats-frontend-dashboard .dats-card {
    background: var(--dats-bg, #fff);
    border: 1px solid var(--dats-border, #E2E6EB);
    border-radius: var(--dats-radius-lg, 8px);
    box-shadow: var(--dats-shadow-xs, 0 1px 2px rgba(11,31,58,.04));
}
.dats-frontend-dashboard .dats-card { padding: var(--dats-space-5, 20px); margin-bottom: var(--dats-space-5, 20px); }
.dats-frontend-dashboard .dats-tab-panel { padding: var(--dats-space-6, 24px); }

/* Table rhythm */
.dats-frontend-dashboard table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.dats-frontend-dashboard table th {
    text-align: left;
    background: var(--dats-bg-subtle, #F7F9FB);
    color: var(--dats-text-strong, #0B1F3A);
    font-weight: 600;
    padding: 10px 14px;
    border-bottom: 1px solid var(--dats-border, #E2E6EB);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.dats-frontend-dashboard table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--dats-border, #E2E6EB);
    color: var(--dats-text, #4A5A67);
    vertical-align: top;
}
.dats-frontend-dashboard table tr:last-child td { border-bottom: 0; }

/* Form fields — basic rhythm + visible borders (3:1 UI threshold) */
.dats-frontend-dashboard input[type="text"],
.dats-frontend-dashboard input[type="email"],
.dats-frontend-dashboard input[type="tel"],
.dats-frontend-dashboard input[type="number"],
.dats-frontend-dashboard input[type="date"],
.dats-frontend-dashboard input[type="time"],
.dats-frontend-dashboard input[type="password"],
.dats-frontend-dashboard select,
.dats-frontend-dashboard textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--dats-border-strong, #818D9A);
    border-radius: var(--dats-radius-md, 6px);
    font-size: 14px;
    color: var(--dats-text-strong, #0B1F3A);
    background: var(--dats-bg-input, #fff);
    min-height: 40px;
    line-height: 1.4;
}
.dats-frontend-dashboard input:focus,
.dats-frontend-dashboard select:focus,
.dats-frontend-dashboard textarea:focus {
    outline: none;
    border-color: var(--dats-focus-ring, #1F7B79);
    box-shadow: 0 0 0 3px rgba(31,123,121,.20);
}

/* ----------------------------------------------------------------
   Track 1 (1.0.20) — Field width discipline (front-end).

   Universal sizing rule: form fields are sized to their expected
   content type, not stretched to the container. Mirrors the same
   intent applied admin-side via `.dats-admin__field--*`.

   The DATS-frontend scope owns its inputs in checkout
   (`.dats-checkout-fields`), the dashboard (`.dats-frontend-dashboard`),
   and provider signup (`.dats-signup-wrap`). Apply max-width at the
   input level so any template renders correctly without authoring
   modifier classes.
   ---------------------------------------------------------------- */
.dats-frontend .dats-checkout-fields input[type="date"],
.dats-frontend-dashboard input[type="date"],
.dats-signup-wrap input[type="date"]                  { max-width: 200px; }
.dats-frontend .dats-checkout-fields input[type="time"],
.dats-frontend-dashboard input[type="time"]           { max-width: 140px; }
.dats-frontend .dats-checkout-fields input[type="tel"],
.dats-frontend-dashboard input[type="tel"],
.dats-signup-wrap input[type="tel"]                   { max-width: 200px; }
.dats-frontend .dats-checkout-fields input[type="email"],
.dats-frontend-dashboard input[type="email"],
.dats-signup-wrap input[type="email"]                 { max-width: 400px; }
.dats-frontend .dats-checkout-fields input[type="number"],
.dats-frontend-dashboard input[type="number"]         { max-width: 160px; }

/* Modifier classes available on field wrappers — used by templates that
   want to constrain a `text` input to a specific content shape. */
.dats-field--narrow input,
.dats-field--narrow select        { max-width: 140px; }
.dats-field--postal input         { max-width: 140px; }
.dats-field--phone input          { max-width: 200px; }
.dats-field--email input          { max-width: 400px; }
.dats-field--city input           { max-width: 320px; }
.dats-field--province select      { max-width: 240px; }
.dats-field--full input,
.dats-field--full select,
.dats-field--full textarea        { max-width: none; }

/* Side-by-side pair component — used by First/Last name etc. */
.dats-field-pair {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .dats-field-pair { grid-template-columns: 1fr 1fr; }
    .dats-field-pair > * input,
    .dats-field-pair > * select { max-width: none; }
}

/* Supply items list in past requests */
.dats-supply-items-list li {
    font-size: clamp(12px, 1.5vw, 13px);
    padding: 1px 0;
}

/* ----------------------------------------------------------------
   Track 1 + 4 (1.0.21) — Universal dashboard polish: checkbox/radio
   alignment, tab styling, button protection from theme pills, page
   header rhythm, empty states, modal component (shared with admin).

   Specificity discipline: every rule scoped to
   `.dats-frontend-dashboard` so it can't leak onto generic theme
   pages, and uses (0,2,0)+ specificity to defeat the legacy
   `--button-radius: 9999px` Ion 7 token leak.
   ---------------------------------------------------------------- */

/* 1.3 — checkbox/radio alignment */
.dats-frontend-dashboard .dats-app__checkbox-item,
.dats-frontend-dashboard .dats-app__radio-item,
.dats-frontend-dashboard .dats-check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--dats-text, #4A5A67);
    line-height: 1.4;
}
.dats-frontend-dashboard .dats-app__checkbox-group,
.dats-frontend-dashboard .dats-check-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dats-frontend-dashboard .dats-app__checkbox-group--inline,
.dats-frontend-dashboard .dats-check-group--inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
}

/* 1.5 — stacked button symmetry inside dashboard row-actions */
.dats-frontend-dashboard .dats-row-actions {
    display: inline-flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.dats-frontend-dashboard .dats-row-actions > .dats-btn,
.dats-frontend-dashboard .dats-row-actions > form > .dats-btn,
.dats-frontend-dashboard .dats-row-actions > form { min-width: 96px; }
.dats-frontend-dashboard .dats-row-actions > form { display: inline-flex; align-self: stretch; margin: 0; }
.dats-frontend-dashboard .dats-row-actions > details { display: inline-flex; flex-direction: column; min-width: 96px; }

/* Track 4 (1.0.31) — Card header row: title left, primary action right.
   Used by Locations / Staff / Availability tabs to keep Add buttons
   anchored to the top-right of the card chrome. */
.dats-frontend-dashboard .dats-card-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.dats-frontend-dashboard .dats-card-header-row > h2,
.dats-frontend-dashboard .dats-card-header-row > h3 { margin: 0; }

/* 4 — Tab nav restyle in dashboard scope */
.dats-frontend-dashboard .dats-tab-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid var(--dats-border, #E2E6EB);
    margin: 0 0 24px;
    padding: 0;
    background: transparent;
}
.dats-frontend-dashboard .dats-tab-link {
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--dats-text-muted, #5E6B78);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 120ms ease, border-color 120ms ease;
    line-height: 1.2;
}
.dats-frontend-dashboard .dats-tab-link:hover { color: var(--dats-primary, #0B1F3A); }
.dats-frontend-dashboard .dats-tab-link.dats-tab-active {
    color: var(--dats-primary, #0B1F3A);
    border-bottom-color: var(--dats-primary, #0B1F3A);
}

/* 4 — Buttons inside dashboard scope: defeat Ion 7 pill inheritance.
   Dashboard buttons used to fall back to theme `--button-radius: 9999px`
   and the theme padding tokens; force the design system rectangle. */
.dats-frontend-dashboard .dats-btn,
.dats-frontend-dashboard .dats-btn:hover,
.dats-frontend-dashboard .dats-btn:focus,
.dats-frontend-dashboard .dats-btn:active,
.dats-frontend-dashboard .dats-btn:visited {
    border-radius: var(--dats-radius-md, 6px);
    padding: 10px 18px;
    font-family: 'DM Sans', var(--font, inherit);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    min-height: 38px;
    text-transform: none;
    letter-spacing: 0;
    text-decoration: none;
}
.dats-frontend-dashboard .dats-btn-primary {
    background: var(--dats-primary, #0B1F3A);
    border: 1px solid var(--dats-primary, #0B1F3A);
    color: #fff;
}
.dats-frontend-dashboard .dats-btn-primary:hover {
    background: var(--dats-primary-hover, #142D52);
    border-color: var(--dats-primary-hover, #142D52);
    color: #fff;
}
.dats-frontend-dashboard .dats-btn-secondary {
    background: #fff;
    border: 1px solid var(--dats-primary, #0B1F3A);
    color: var(--dats-primary, #0B1F3A);
}
.dats-frontend-dashboard .dats-btn-secondary:hover {
    background: var(--dats-bg-subtle, #F7F9FB);
    color: var(--dats-primary, #0B1F3A);
}
.dats-frontend-dashboard .dats-btn-danger {
    background: var(--dats-danger, #B42318);
    border: 1px solid var(--dats-danger, #B42318);
    color: #fff;
}
.dats-frontend-dashboard .dats-btn-danger:hover {
    background: #951c13;
    border-color: #951c13;
    color: #fff;
}
.dats-frontend-dashboard .dats-btn-ghost {
    background: transparent;
    border: 1px solid transparent;
    color: var(--dats-primary, #0B1F3A);
}
.dats-frontend-dashboard .dats-btn-ghost:hover {
    background: var(--dats-bg-subtle, #F7F9FB);
    color: var(--dats-primary, #0B1F3A);
}
.dats-frontend-dashboard .dats-btn[disabled],
.dats-frontend-dashboard .dats-btn--loading {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* 4 — Page header (dashboard internal) */
.dats-frontend-dashboard .dats-tab-content > h2,
.dats-frontend-dashboard .dats-tab-content > h3 {
    color: var(--dats-text-strong, #0B1F3A);
    font-family: var(--heading, inherit);
    font-weight: 700;
    margin: 0 0 8px;
}
.dats-frontend-dashboard .dats-tab-content > h2 { font-size: 22px; }
.dats-frontend-dashboard .dats-tab-content > h3 { font-size: 18px; margin-top: 24px; }
.dats-frontend-dashboard .dats-helper-text,
.dats-frontend-dashboard .dats-tab-content > p {
    color: var(--dats-text-muted, #5E6B78);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 16px;
}

/* 4 — Form labels + field rhythm */
.dats-frontend-dashboard .dats-field {
    margin-bottom: 16px;
}
.dats-frontend-dashboard .dats-label,
.dats-frontend-dashboard label.dats-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--dats-text-strong, #0B1F3A);
    margin-bottom: 6px;
}
.dats-frontend-dashboard .dats-req {
    color: var(--dats-primary, #0B1F3A);
    font-weight: 700;
}
.dats-frontend-dashboard .dats-helper {
    font-size: 12px;
    color: var(--dats-text-muted, #5E6B78);
    margin-top: 4px;
    line-height: 1.45;
}
.dats-frontend-dashboard .dats-error {
    font-size: 12px;
    color: var(--dats-danger, #B42318);
    font-weight: 500;
    margin-top: 4px;
}

/* 4 — Empty state */
.dats-frontend-dashboard .dats-empty,
.dats-frontend-dashboard .dats-empty-state {
    background: var(--dats-bg-subtle, #F7F9FB);
    border: 1px dashed var(--dats-border, #E2E6EB);
    border-radius: 8px;
    padding: 32px 24px;
    text-align: center;
    color: var(--dats-text-muted, #5E6B78);
    font-size: 14px;
    line-height: 1.5;
}

/* 4 — Status pills inside dashboard scope */
.dats-frontend-dashboard .dats-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.dats-frontend-dashboard .dats-pill--success { background: #E6F5F4; color: #1F7B79; }
.dats-frontend-dashboard .dats-pill--warning { background: #FFF6E6; color: #8A5500; }
.dats-frontend-dashboard .dats-pill--danger  { background: #FDECEA; color: #B42318; }
.dats-frontend-dashboard .dats-pill--info    { background: #E8F0FA; color: #1F5DB1; }
.dats-frontend-dashboard .dats-pill--neutral { background: #F1F3F5; color: #4A5A67; }

/* 4 — Clickable rows on dashboard tables (Track 5: provider Bookings) */
.dats-frontend-dashboard table.dats-table--clickable tbody tr {
    cursor: pointer;
    transition: background 120ms ease;
}
.dats-frontend-dashboard table.dats-table--clickable tbody tr:hover {
    background: var(--dats-bg-subtle, #F7F9FB);
}

/* ----------------------------------------------------------------
   Track 5 + 6 (1.0.21) — Shared modal component for dashboards.
   Used by the provider read-only booking detail and the practitioner
   result-recording flow. Lightweight: vanilla CSS + a tiny JS hook
   in dats-public.js.

   The admin-bar-aware top offset is automatic (modal is centered
   absolutely on the viewport).
   ---------------------------------------------------------------- */
.dats-app-modal {
    position: fixed;
    inset: 0;
    background: rgba(11,31,58,.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 16px;
}
.dats-app-modal[aria-hidden="false"],
.dats-app-modal.is-open { display: flex; }
.dats-app-modal__card {
    background: #fff;
    border-radius: 12px;
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 12px 32px rgba(11,31,58,.25);
}
.dats-app-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--dats-border, #E2E6EB);
}
.dats-app-modal__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--dats-primary, #0B1F3A);
    line-height: 1.3;
}
.dats-app-modal__close {
    background: none;
    border: 0;
    font-size: 20px;
    line-height: 1;
    color: var(--dats-text-muted, #5E6B78);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}
.dats-app-modal__close:hover { color: var(--dats-primary, #0B1F3A); background: var(--dats-bg-subtle, #F7F9FB); }
.dats-app-modal__body {
    padding: 20px 22px;
    color: var(--dats-text, #4A5A67);
    font-size: 14px;
    line-height: 1.55;
}
.dats-app-modal__footer {
    padding: 14px 22px 18px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--dats-border, #E2E6EB);
    background: var(--dats-bg-subtle, #F7F9FB);
    border-radius: 0 0 12px 12px;
}
/* Verification block — read-only booking facts. */
.dats-app-modal__facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 14px;
    margin: 0 0 16px;
}
.dats-app-modal__facts dt {
    color: var(--dats-text-muted, #5E6B78);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    align-self: start;
    padding-top: 2px;
}
.dats-app-modal__facts dd {
    margin: 0;
    color: var(--dats-text-strong, #0B1F3A);
    font-size: 14px;
}
/* Action block — radio choices with helper text. */
.dats-app-modal__action {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--dats-border, #E2E6EB);
}
.dats-app-modal__action h3 {
    margin: 0 0 12px;
    font-size: 15px;
    color: var(--dats-text-strong, #0B1F3A);
    font-weight: 700;
}
.dats-app-modal__choice {
    display: block;
    padding: 12px 14px;
    border: 1px solid var(--dats-border, #E2E6EB);
    border-radius: 8px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
.dats-app-modal__choice:hover { border-color: var(--dats-primary, #0B1F3A); }
.dats-app-modal__choice input[type="radio"]:checked ~ .dats-app-modal__choice-label {
    color: var(--dats-primary, #0B1F3A);
}
.dats-app-modal__choice-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.dats-app-modal__choice-label {
    font-weight: 600;
    color: var(--dats-text-strong, #0B1F3A);
}
.dats-app-modal__choice-help {
    margin: 6px 0 0 26px;
    font-size: 12px;
    color: var(--dats-text-muted, #5E6B78);
    line-height: 1.45;
}
.dats-app-modal__readonly-result {
    background: var(--dats-bg-subtle, #F7F9FB);
    padding: 14px 16px;
    border-radius: 8px;
    margin-top: 16px;
    border: 1px solid var(--dats-border, #E2E6EB);
}
.dats-app-modal__alert {
    background: #FDECEA;
    border: 1px solid rgba(180,35,24,.30);
    color: #B42318;
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 13px;
    display: none;
}
.dats-app-modal__alert.is-visible { display: block; }

/* ----------------------------------------------------------------
   Track 6 (1.0.33) — "Book a Test" menu modal.

   Neutral-scoped (no `.dats-frontend` ancestor). The `.dats-app-modal`
   chrome above already meets that bar; this block adds the form-shaped
   body specific to the postal-code/geolocation entry point.

   Body-scroll lock when the modal is open is owned by JS (.dats-book-
   modal-open class on <body>), with the lock rule co-located here.
   ---------------------------------------------------------------- */
body.dats-book-modal-open { overflow: hidden; }

.dats-app-modal--book .dats-app-modal__card { max-width: 480px; }

.dats-app-modal__book-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dats-app-modal__book-label {
    font-size: 14px;
    color: var(--dats-text, #4A5A67);
    line-height: 1.5;
}
.dats-app-modal__book-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.dats-app-modal__book-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 14px;
    font-size: 16px;
    line-height: 1.4;
    border: 1px solid var(--dats-border, #818D9A);
    border-radius: 6px;
    background: #fff;
    color: var(--dats-text, #212833);
    text-transform: uppercase;
    letter-spacing: .04em;
    min-height: 44px;
}
.dats-app-modal__book-input:focus {
    outline: none;
    border-color: var(--dats-primary, #1F7B79);
    box-shadow: 0 0 0 3px rgba(31,123,121,.20);
}
.dats-app-modal__book-input::placeholder {
    color: var(--dats-text-muted, #5E6B78);
    text-transform: none;
    letter-spacing: 0;
}
.dats-app-modal__book-submit {
    flex: 0 0 auto;
    padding: 10px 18px;
    background: var(--dats-primary, #1F7B79);
    color: #fff;
    border: 1px solid var(--dats-primary, #1F7B79);
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    min-height: 44px;
    transition: background .15s ease, border-color .15s ease;
}
.dats-app-modal__book-submit:hover,
.dats-app-modal__book-submit:focus {
    background: var(--dats-primary-hover, #0E6663);
    border-color: var(--dats-primary-hover, #0E6663);
    outline: none;
}
.dats-app-modal__book-error {
    color: #B42318;
    font-size: 13px;
    line-height: 1.45;
    min-height: 1px;
}
.dats-app-modal__book-error:empty { display: none; }
.dats-app-modal__book-geo {
    align-self: flex-start;
    background: #fff;
    color: var(--dats-primary, #1F7B79);
    border: 1px solid var(--dats-primary, #1F7B79);
    border-radius: 6px;
    padding: 10px 16px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    min-height: 44px;
    transition: background .15s ease;
}
.dats-app-modal__book-geo:hover,
.dats-app-modal__book-geo:focus {
    background: var(--dats-bg-subtle, #F7F9FB);
    outline: none;
}
.dats-app-modal__book-geo:disabled {
    opacity: .65;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .dats-app-modal__book-row { flex-direction: column; }
    .dats-app-modal__book-submit { width: 100%; }
    .dats-app-modal__book-geo { width: 100%; text-align: center; }
}

/* ----------------------------------------------------------------
   Header "Login" modal (glowpath menu-login-modal.js) — reuses the
   book-modal form styles; overrides below are login-specific.
   ---------------------------------------------------------------- */
.dats-app-modal--login .dats-app-modal__card { max-width: 420px; }
.dats-app-modal--login .dats-app-modal__book-input {
    text-transform: none;
    letter-spacing: 0;
}
.dats-app-modal__login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--dats-text, #4A5A67);
    cursor: pointer;
}
.dats-app-modal__login-links {
    margin: 0;
    font-size: 13px;
    text-align: center;
}
.dats-app-modal__login-links a {
    color: var(--dats-primary, #1F7B79);
    text-decoration: underline;
}

/* ----------------------------------------------------------------
   Track 4 (1.0.21) — Availability tab grid + helpers.
   ---------------------------------------------------------------- */
.dats-frontend-dashboard .dats-availability-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 12px 0 20px;
}
.dats-frontend-dashboard .dats-day-row {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 140px 12px 140px;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--dats-bg-subtle, #F7F9FB);
    border: 1px solid var(--dats-border, #E2E6EB);
    border-radius: 8px;
}
.dats-frontend-dashboard .dats-day-label {
    font-weight: 600;
    color: var(--dats-text-strong, #0B1F3A);
}
.dats-frontend-dashboard .dats-day-sep {
    text-align: center;
    color: var(--dats-text-muted, #5E6B78);
    font-weight: 600;
}
.dats-frontend-dashboard .dats-input--narrow {
    max-width: 140px;
}
.dats-frontend-dashboard .dats-form-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 16px;
    flex-wrap: wrap;
}
@media (max-width: 640px) {
    .dats-frontend-dashboard .dats-day-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .dats-frontend-dashboard .dats-day-sep { display: none; }
}

/* Notices inside the dashboard scope */
.dats-frontend-dashboard .dats-notice {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 14px;
    border: 1px solid transparent;
}
.dats-frontend-dashboard .dats-notice-success { background: #E6F5F4; color: #0B1F3A; border-color: rgba(31,123,121,.30); }
.dats-frontend-dashboard .dats-notice-error   { background: #FDECEA; color: #B42318; border-color: rgba(180,35,24,.30); }
.dats-frontend-dashboard .dats-notice-info    { background: #E8F0FA; color: #1F5DB1; border-color: rgba(31,93,177,.30); }

/* ----------------------------------------------------------------
   1.0.35 Track 5 — Provider edit-location grid (map + form)
   ---------------------------------------------------------------- */
.dats-frontend-dashboard .dats-loc-edit-grid {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: var(--dats-space-6, 24px);
    align-items: start;
}
.dats-frontend-dashboard .dats-loc-edit-grid__map {
    min-width: 0; /* prevent the map cell from stretching the grid */
}
.dats-frontend-dashboard .dats-loc-edit-grid__fields {
    min-width: 0;
}
.dats-frontend-dashboard .dats-loc-pin-map {
    height: 500px;
    width: 100%;
    background: var(--dats-bg-subtle, #F7F9FB);
    border: 1px solid var(--dats-border, #D8DDE3);
    border-radius: var(--dats-radius-md, 8px);
    overflow: hidden;
}
.dats-frontend-dashboard .dats-loc-pin-map--dirty {
    outline: 2px dashed var(--dats-primary, #1F7B79);
    outline-offset: 2px;
}
.dats-frontend-dashboard .dats-loc-pin-map--locked {
    cursor: not-allowed;
    opacity: 0.85;
}
.dats-frontend-dashboard .dats-loc-pin-help {
    margin-top: var(--dats-space-3, 12px);
    margin-bottom: var(--dats-space-3, 12px);
    font-size: 13px;
    color: var(--dats-text-muted, #5E6B78);
}
.dats-frontend-dashboard .dats-loc-pin-save-form {
    margin-top: var(--dats-space-3, 12px);
}
.dats-frontend-dashboard .dats-loc-pin-save-actions {
    display: inline-flex;
    gap: var(--dats-space-2, 8px);
    flex-wrap: wrap;
}
@media ( max-width: 767px ) {
    .dats-frontend-dashboard .dats-loc-edit-grid {
        grid-template-columns: 1fr;
        gap: var(--dats-space-5, 20px);
    }
    .dats-frontend-dashboard .dats-loc-pin-map {
        height: 300px;
    }
}

/* Section title styling */
.dats-frontend-dashboard .dats-section-title {
    color: var(--dats-text-strong, #0B1F3A);
    font-family: var(--heading, inherit);
    font-weight: 700;
    font-size: 20px;
    margin: 0 0 var(--dats-space-5, 20px);
}

/*
 * 1.0.67 — safety net: an unclassed h2 inside the dashboard shells
 * renders on the section-title scale instead of the theme's page-h2
 * scale. Every template now carries .dats-section-title explicitly;
 * this only catches future omissions so one tab can never look
 * different from the rest. Scoped to the shell wrapper (not the body
 * class) so theme headings outside the dashboard are untouched. Both
 * dashboards render inside .dats-provider-dashboard (the practitioner
 * shortcode reuses the same shell — class-dats-provider.php).
 */
.dats-provider-dashboard h2:not([class]) {
    color: var(--dats-text-strong, #0B1F3A);
    font-family: var(--heading, inherit);
    font-weight: 700;
    font-size: 20px;
    margin: 0 0 var(--dats-space-5, 20px);
}

/*
 * 1.0.35 Track 7b + 7c — canonical h3 vertical rhythm on the
 * provider/practitioner dashboards. Replaces the per-template inline
 * `style="margin-top: 24px"` overrides that had accumulated on
 * profile.php, payouts.php, etc.
 *
 * `:not(:first-child)` keeps the FIRST heading in a tab/section flush so
 * we don't introduce a top gap above the section title. Subsequent
 * headings get a clear visual break from the preceding content.
 */
.dats-frontend-dashboard h3 {
    margin: 0 0 var(--dats-space-5, 20px);
    font-family: var(--heading, inherit);
    font-weight: 700;
    /* 1.0.67 — pin size and colour: bare h3s were inheriting the
     * theme's (much larger) heading scale, so sub-headings differed
     * from tab to tab. 16px matches .dats-inline-add__title. */
    font-size: 16px;
    color: var(--dats-text-strong, #0B1F3A);
}
.dats-frontend-dashboard h3:not(:first-child) {
    margin-top: var(--dats-space-6, 24px);
}

/*
 * 1.0.68 — the dashboard heading scale, level 2 and level 3, as explicit
 * classes (documented in CLAUDE.md). Level 1 is .dats-section-title
 * above. Every heading in a dashboard template carries one of these
 * classes; the bare-tag h3 rule and the unclassed-h2 safety net remain
 * only as fallbacks, because the theme styles bare tags at 32-70px.
 *
 * Section heading — a major block within a tab.
 */
.dats-frontend-dashboard .dats-subsection-title {
    margin: 0 0 var(--dats-space-5, 20px);
    font-family: var(--heading, inherit);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    color: var(--dats-text-strong, #0B1F3A);
}
.dats-frontend-dashboard .dats-subsection-title:not(:first-child) {
    margin-top: var(--dats-space-6, 24px);
}
/* Sub-heading — a labelled group within a section. */
.dats-frontend-dashboard .dats-group-label {
    margin: 0 0 var(--dats-space-2, 8px);
    font-family: var(--heading, inherit);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dats-text-muted, #4A5A67);
}

/* Filter bar inside dashboards */
.dats-frontend-dashboard .dats-filter-bar {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.dats-frontend-dashboard .dats-filter-bar select {
    max-width: 320px;
}

/* ----------------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .dats-view-toggle { display: flex; }
    .dats-results-columns { flex-direction: column; }
    .dats-results-list { flex: none; max-height: none; padding-right: 0; }
    .dats-results-map { position: static; }
    .dats-results-map.dats-hidden { display: none; }
    .dats-results-list.dats-hidden { display: none; }
    .dats-google-map { height: 50vh; min-height: 300px; }
    .dats-booking-panel { width: 100vw; }
    .dats-field-row { flex-direction: column; gap: 0; }
    .dats-hours-row { flex-wrap: wrap; }
    .dats-slots-grid { grid-template-columns: repeat(2, 1fr); }
    .dats-verify-row { flex-direction: column; gap: 2px; }
    .dats-verify-row dt { flex: none; }
}

@media (max-width: 480px) {
    .dats-search-row { flex-direction: column; }
    .dats-slots-grid { grid-template-columns: 1fr 1fr; }
    .dats-tab-nav { gap: 0; }
    .dats-tab-link { padding: 8px 12px; font-size: 13px; }
}

/* ----------------------------------------------------------------
   Track 1 (1.0.26) — Universal UI polish primitives.

   These utility classes are imported by both the credentials and
   supplies tabs (and any future tab with multi-section layout).

   `.dats-section-stack` — row gap between sibling sections.
   `.dats-app__card`     — visible card boundary inside the dashboard
                           scope (mirror of `.dats-admin__card`).
   `.dats-form-actions`  — flex wrapper that right-aligns primary
                           submit buttons under a form, with row gap.
   `.dats-supply-items-list` — tight rhythm for bullet lists rendered
                           inside table cells (only used as fallback
                           when an item list exceeds 3 entries).
   ---------------------------------------------------------------- */
.dats-frontend-dashboard .dats-section-stack {
    display: flex;
    flex-direction: column;
    gap: var(--dats-space-10, 40px);
}

.dats-frontend-dashboard .dats-app__card {
    background: var(--dats-bg, #fff);
    border: 1px solid var(--dats-border, #E2E6EB);
    border-radius: var(--dats-radius-lg, 8px);
    box-shadow: var(--dats-shadow-xs, 0 1px 2px rgba(11,31,58,.04));
    padding: var(--dats-space-6, 24px);
}
.dats-frontend-dashboard .dats-app__card > h2:first-child,
.dats-frontend-dashboard .dats-app__card > h3:first-child,
.dats-frontend-dashboard .dats-app__card > h4:first-child {
    margin-top: 0;
    margin-bottom: var(--dats-space-4, 16px);
}

.dats-frontend-dashboard .dats-form-actions,
.dats-frontend .dats-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--dats-space-3, 12px);
    margin-top: var(--dats-space-5, 20px);
    flex-wrap: wrap;
}

/* ----------------------------------------------------------------
   Track 1 (1.0.32) — Inline add-form pattern.

   Used by: provider/staff (Add New Practitioner) and
            provider/availability (Block Date).

   The card sits subtle-fill (against the page's white) so it reads
   as an entry zone. Two layout variants:
     · default (multi-row form): vertical stack, submit bottom-right
     · --row (single-row form): horizontal flex, submit on the right

   Generous bottom margin (--dats-space-8 = 32px) so the submit
   button never visually attaches to the table or list below.
   ---------------------------------------------------------------- */
.dats-frontend-dashboard .dats-app__card--inline-add {
    background: var(--dats-bg-subtle, #F7F9FB);
    border: 1px solid var(--dats-border, #E2E6EB);
    padding: var(--dats-space-6, 24px);
    margin-bottom: var(--dats-space-8, 32px);
}
.dats-frontend-dashboard .dats-app__card--inline-add--row {
    padding: var(--dats-space-4, 16px);
}
.dats-frontend-dashboard .dats-inline-add__title {
    margin: 0 0 var(--dats-space-4, 16px);
    font-size: 16px;
    font-weight: 700;
    color: var(--dats-text-strong, #0B1F3A);
}
.dats-frontend-dashboard .dats-inline-add__grid--2col {
    display: grid;
    gap: var(--dats-space-4, 16px);
    grid-template-columns: 1fr 1fr;
    margin-bottom: var(--dats-space-4, 16px);
}
.dats-frontend-dashboard .dats-inline-add__grid--2col > .dats-field {
    margin-bottom: 0;
}
.dats-frontend-dashboard .dats-inline-add__grid--2col > .dats-field input {
    max-width: none;
    width: 100%;
}
/*
 * 1.0.38 Track 7c — three-up variant for the Add New Practitioner form
 * (First / Last / Email all share equal width). The .dats-field--email
 * 400px cap is overridden inside this grid so the three columns stay
 * visually balanced — this is an acknowledged exception to the standard
 * field-width discipline rules; balance of related fields wins here.
 */
.dats-frontend-dashboard .dats-inline-add__grid--3col {
    display: grid;
    gap: var(--dats-space-4, 16px);
    grid-template-columns: 1fr 1fr 1fr;
    margin-bottom: var(--dats-space-4, 16px);
}
.dats-frontend-dashboard .dats-inline-add__grid--3col > .dats-field {
    margin-bottom: 0;
}
.dats-frontend-dashboard .dats-inline-add__grid--3col > .dats-field input {
    max-width: none;
    width: 100%;
}
.dats-frontend-dashboard .dats-inline-add__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--dats-space-3, 12px);
    margin-top: var(--dats-space-5, 20px);
    flex-wrap: wrap;
}

/* Single-row variant: date narrow, reason flex-grows, submit right. */
.dats-frontend-dashboard .dats-inline-add__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--dats-space-4, 16px);
}
.dats-frontend-dashboard .dats-inline-add__row > .dats-field {
    margin-bottom: 0;
}
.dats-frontend-dashboard .dats-inline-add__row .dats-field--date {
    flex: 0 0 200px;
}
.dats-frontend-dashboard .dats-inline-add__row .dats-field--grow {
    flex: 1 1 200px;
    min-width: 200px;
}
.dats-frontend-dashboard .dats-inline-add__row .dats-field--grow input {
    max-width: none;
    width: 100%;
}
.dats-frontend-dashboard .dats-inline-add__row-submit {
    flex: 0 0 auto;
    align-self: flex-end;
}
.dats-frontend-dashboard .dats-inline-add__row-submit .dats-btn {
    height: 44px;
}

/* Mobile: stack the row variant; let the 2-col grid collapse. */
@media (max-width: 640px) {
    .dats-frontend-dashboard .dats-inline-add__grid--2col,
    .dats-frontend-dashboard .dats-inline-add__grid--3col {
        grid-template-columns: 1fr;
    }
    .dats-frontend-dashboard .dats-inline-add__row .dats-field--date,
    .dats-frontend-dashboard .dats-inline-add__row .dats-field--grow,
    .dats-frontend-dashboard .dats-inline-add__row-submit {
        flex: 1 1 100%;
    }
    .dats-frontend-dashboard .dats-inline-add__row-submit .dats-btn { width: 100%; }
}

.dats-frontend-dashboard .dats-supply-items-list {
    margin: 0;
    padding-left: 18px;
    line-height: 1.4;
    list-style: disc;
}
.dats-frontend-dashboard .dats-supply-items-list li {
    margin: 0;
    padding: 0;
}

/* Two-column layout still applies on wide viewports; collapse below
   720px to a single column with the section-stack rhythm. */
@media (max-width: 720px) {
    .dats-frontend-dashboard .dats-two-col {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
        gap: var(--dats-space-10, 40px);
    }
}

/* ----------------------------------------------------------------
   Track 4 (1.0.26) — indeterminate progress bar.

   Honest progress: animated, but no percentage value claimed. Used
   inside the credential upload modal while the AI review runs
   synchronously on the server.
   ---------------------------------------------------------------- */
.dats-progress {
    width: 100%;
    height: 6px;
    background: var(--dats-bg-subtle, #F7F9FB);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.dats-progress--indeterminate .dats-progress__bar {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--dats-primary, #0B1F3A) 30%,
        var(--dats-primary, #0B1F3A) 70%,
        transparent 100%);
    width: 40%;
    animation: dats-progress-slide 1.4s ease-in-out infinite;
}
@keyframes dats-progress-slide {
    0%   { left: -40%; }
    100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .dats-progress--indeterminate .dats-progress__bar {
        animation: none;
        left: 30%;
        opacity: 0.6;
    }
}

/* ─────────────────────────────────────────────────────────────────
 * Track 2 (1.0.28) — Copyable email cells (front-end).
 *
 * Mirror of the admin rule. Scoped to `.dats-frontend` so it
 * inherits the front-end token cascade (per project_frontend_scope).
 * Computed contrast: text uses --dats-text on --dats-bg, hover
 * promotes to --dats-primary. Both audited via the contrast harness.
 * ───────────────────────────────────────────────────────────────── */
.dats-frontend .dats-app__copyable-email,
body.dats-frontend-dashboard .dats-app__copyable-email {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: underline dotted var(--dats-border-strong, #cbd2da);
    text-underline-offset: 2px;
    text-align: left;
    transition: color 120ms ease, text-decoration-color 120ms ease;
}
.dats-frontend .dats-app__copyable-email:hover,
.dats-frontend .dats-app__copyable-email:focus-visible,
body.dats-frontend-dashboard .dats-app__copyable-email:hover,
body.dats-frontend-dashboard .dats-app__copyable-email:focus-visible {
    color: var(--dats-primary, #0B1F3A);
    text-decoration-color: var(--dats-primary, #0B1F3A);
}
.dats-frontend .dats-app__copyable-email:focus-visible,
body.dats-frontend-dashboard .dats-app__copyable-email:focus-visible {
    outline: 2px solid var(--dats-focus-ring, #2563eb);
    outline-offset: 2px;
    border-radius: 2px;
}
.dats-frontend .dats-app__cell-empty,
body.dats-frontend-dashboard .dats-app__cell-empty { color: var(--dats-text-muted, #4A5A67); }

/* Floating "Copied!" pill anchored next to the clicked email button.
 * Ephemeral DOM node injected by JS, removed after ~1.5s. Sits inside
 * the relatively-positioned button via JS append, then is removed. */
.dats-app__copy-feedback {
    position: absolute;
    z-index: 9999;
    background: var(--dats-primary, #0B1F3A);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    animation: dats-copy-feedback 1500ms ease forwards;
    white-space: nowrap;
}
@keyframes dats-copy-feedback {
    0%   { opacity: 0; transform: translateY(4px); }
    15%  { opacity: 1; transform: translateY(0); }
    85%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
    .dats-app__copy-feedback {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* =================================================================
 * Track 4 (1.0.29) — Mobile pass for provider + practitioner dashboards.
 *
 * Universal breakpoint: 768px. Above: existing desktop layout.
 * Below: hamburger nav, tables → card lists, paired form fields un-pair,
 * touch targets ≥44×44px on interactive elements.
 *
 * Per project_frontend_scope memory: rules scoped to
 * `body.dats-frontend-dashboard` so they only fire on dashboard pages.
 * ================================================================= */

/* ----- Hamburger trigger (always present in markup; CSS-hidden above 768px) ----- */
.dats-tab-shell { position: relative; }
.dats-tab-trigger {
    display: none; /* hidden on desktop */
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: var(--dats-bg, #fff);
    border: 1px solid var(--dats-border, #E2E6EB);
    border-radius: 6px;
    color: var(--dats-primary, #0B1F3A);
    font: inherit;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    text-align: left;
    margin-bottom: 16px;
    min-height: 48px;
}
.dats-tab-trigger:hover,
.dats-tab-trigger:focus-visible {
    border-color: var(--dats-primary, #0B1F3A);
}
.dats-tab-trigger__icon {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    width: 22px;
    height: 16px;
    flex: 0 0 22px;
}
.dats-tab-trigger__icon span {
    display: block;
    height: 2px;
    width: 100%;
    background: currentColor;
    border-radius: 1px;
    transition: transform 160ms ease, opacity 160ms ease;
}
.dats-tab-shell.is-open .dats-tab-trigger__icon span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.dats-tab-shell.is-open .dats-tab-trigger__icon span:nth-child(2) {
    opacity: 0;
}
.dats-tab-shell.is-open .dats-tab-trigger__icon span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}
.dats-tab-trigger__label { flex: 1 1 auto; }
.dats-tab-trigger::after {
    content: '';
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-left: 4px;
    transition: transform 160ms ease;
}
.dats-tab-shell.is-open .dats-tab-trigger::after {
    transform: rotate(-135deg);
    margin-top: 4px;
}

@media (max-width: 768px) {
    body.dats-frontend-dashboard .dats-tab-trigger { display: inline-flex; }
    body.dats-frontend-dashboard .dats-tab-nav {
        display: none;
        flex-direction: column;
        background: var(--dats-bg, #fff);
        border: 1px solid var(--dats-border, #E2E6EB);
        border-radius: 6px;
        margin: -8px 0 16px;
        padding: 4px 0;
        box-shadow: 0 4px 16px rgba(11,31,58,.08);
    }
    body.dats-frontend-dashboard .dats-tab-shell.is-open .dats-tab-nav {
        display: flex;
    }
    body.dats-frontend-dashboard .dats-tab-link {
        padding: 14px 18px;
        border-bottom: 0;
        margin-bottom: 0;
        min-height: 48px;
        display: flex;
        align-items: center;
    }
    body.dats-frontend-dashboard .dats-tab-link.dats-tab-active {
        background: var(--dats-bg-subtle, #F7F9FB);
        border-left: 3px solid var(--dats-primary, #0B1F3A);
        padding-left: 15px;
    }
}

/* ----- Tables → list cards (shared `.dats-app__list-card` chrome) ----- */
.dats-app__list-card {
    display: block;
    background: var(--dats-bg, #fff);
    border: 1px solid var(--dats-border, #E2E6EB);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(11,31,58,.04);
}
.dats-app__list-card__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.dats-app__list-card__title {
    font-weight: 700;
    color: var(--dats-primary, #0B1F3A);
    font-size: 15px;
    line-height: 1.3;
}
.dats-app__list-card__meta {
    color: var(--dats-text-muted, #4A5A67);
    font-size: 13px;
}
.dats-app__list-card__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    font-size: 13px;
}
.dats-app__list-card__row dt {
    color: var(--dats-text-muted, #4A5A67);
    font-weight: 500;
    margin: 0;
    flex: 0 0 auto;
}
.dats-app__list-card__row dd {
    margin: 0;
    color: var(--dats-text, #212833);
    text-align: right;
    flex: 1 1 auto;
}
.dats-app__list-card__actions {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--dats-border-soft, #EEF1F4);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.dats-app__list-card__actions > * { flex: 1 1 auto; min-height: 44px; }

@media (max-width: 768px) {
    /* Hide tables, show .dats-mobile-card lists (rendered alongside tables
       in templates with both presentations). When a template hasn't been
       updated to render cards, the table falls back to horizontal scroll. */
    body.dats-frontend-dashboard .dats-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* When a template renders both presentations, hide the table and show the cards. */
    body.dats-frontend-dashboard .dats-table-wrap:has(+ .dats-mobile-cards) { display: none; }
    body.dats-frontend-dashboard .dats-mobile-cards { display: block; }
    body.dats-frontend-dashboard .dats-desktop-only { display: none; }

    /* Field width / pairing un-pair */
    body.dats-frontend-dashboard .dats-field-pair {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    body.dats-frontend-dashboard .dats-field-pair > * { flex: 1 1 100%; }
    body.dats-frontend-dashboard .dats-field input[type="date"],
    body.dats-frontend-dashboard .dats-field input[type="time"],
    body.dats-frontend-dashboard .dats-field input[type="number"] {
        width: 100%;
        max-width: none;
    }

    /* Touch-target floor for any visible button/link inside the dashboard */
    body.dats-frontend-dashboard .dats-btn,
    body.dats-frontend-dashboard .dats-tab-link,
    body.dats-frontend-dashboard .dats-app__list-card__actions a,
    body.dats-frontend-dashboard .dats-app__list-card__actions button {
        min-height: 44px;
        padding-left: 14px;
        padding-right: 14px;
    }

    /* Modal — admin-bar-aware sizing on mobile (32px → 46px on small WP) */
    body.dats-frontend-dashboard .dats-app-modal__card {
        max-height: calc(90vh - var(--dats-admin-bar-height, 0px));
    }

    /* Mobile dashboard heading rhythm */
    body.dats-frontend-dashboard .dats-section-title,
    body.dats-frontend-dashboard .dats-provider-dashboard h2:not([class]) { font-size: 18px; margin-top: 0; }
    body.dats-frontend-dashboard .dats-form-section h3 { font-size: 16px; }

    /* Hide secondary table action buttons that have a card-level equivalent */
    body.dats-frontend-dashboard .dats-row-actions { flex-wrap: wrap; }
}

/* Above 768px the mobile cards stay hidden; the table is the canonical view. */
.dats-mobile-cards { display: none; }



/* ============================================================
   City locations map — [dats_city_locations]  (1.0.53)
   ============================================================ */

.dats-city-locations {
    width: 100%;
}

.dats-city-locations .dats-city-map {
    width: 100%;
    height: 405px;
    border-radius: 16px;
    border: 1px solid #E5E8EB;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.dats-city-locations .dats-city-map-count {
    margin: 12px 0 0;
    font-size: 14px;
    color: #4A5A67;
    text-align: center;
}

.dats-city-map-info {
    font-size: 13px;
    line-height: 1.5;
    padding: 2px 4px;
}

.dats-city-map-info a {
    display: inline-block;
    margin-top: 6px;
    font-weight: 600;
}

.dats-city-locations--empty {
    border: 1px solid #E5E8EB;
    border-radius: 16px;
    background: #F6F9FD;
    padding: 40px 30px;
    text-align: center;
}

.dats-city-locations--empty p {
    margin: 0 0 20px;
}

@media (max-width: 767px) {
    .dats-city-locations .dats-city-map {
        height: 285px;
    }
}

/* City locations — Map/List tabs and crawlable list (1.0.55) */

.dats-city-locations {
    position: relative;
}

/* 1.0.59 - the tab pill floats over the map's top-right corner instead of
   sitting above it, so the widget wastes no vertical space. */
.dats-city-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid #E5E8EB;
    border-radius: 9999px;
    background: #fff;
    margin: 0;
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 20;
    box-shadow: 0 4px 16px 0 rgba(11, 31, 58, 0.14);
}

/* When the List tab is active the pill floats over the list instead -
   pad the list down so the first card clears it. */
.dats-city-panel--list {
    padding-top: 64px;
}

.dats-city-tab {
    border: none;
    background: transparent;
    padding: 8px 24px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 600;
    color: #4A5A67;
    cursor: pointer;
    transition: all 0.2s;
}

.dats-city-tab:hover,
.dats-city-tab:focus {
    color: #0B1F3A;
}

.dats-city-tab.is-active {
    background: #0B1F3A;
    color: #fff;
}

.dats-city-panel { display: none; }
.dats-city-panel.is-active { display: block; }

.dats-city-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dats-city-list-item {
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid #E5E8EB;
    border-radius: 16px;
    background: #fff;
    padding: 18px 22px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.04);
}

.dats-city-list-address {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dats-city-list-address strong {
    color: #0B1F3A;
    font-size: 16px;
    line-height: 1.4;
}

.dats-city-list-address span {
    color: #4A5A67;
    font-size: 14px;
}

.dats-city-list-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: auto;
    text-align: right;
}

.dats-city-list-hours {
    color: #4A5A67;
    font-size: 13px;
}

.dats-city-list-distance {
    color: #2CA6A4;
    font-size: 13px;
    font-weight: 600;
}

.dats-city-list-book {
    flex: 0 0 auto;
}

@media (max-width: 600px) {
    .dats-city-list-item {
        flex-wrap: wrap;
    }
    /* Long street names wrap inside the address block instead of pushing
       the Book button onto its own row - keeps the button pinned top-right
       on every card. */
    .dats-city-list-address {
        flex: 1 1 0;
        min-width: 0;
    }
    .dats-city-list-meta {
        margin-left: 0;
        text-align: left;
        width: 100%;
        order: 3;
    }
}

/* 1.0.56 — the city-list Book button inherits theme link colours inside
   <li> (dark-on-dark). Pin its colours explicitly. */
.dats-city-locations .dats-city-list-book,
.dats-city-locations .dats-city-list-book:visited {
    background: #0B1F3A;
    color: #fff;
}

.dats-city-locations .dats-city-list-book:hover,
.dats-city-locations .dats-city-list-book:focus {
    background: #2CA6A4;
    color: #fff;
}