/*
 * AMA Timeslot Booking — Frontend v2.0.6
 * Uses CSS custom properties so Elementor / theme variables override naturally.
 * Falls back to sensible defaults if variables aren't defined.
 */

:root {
    /* Customisable via AMA Features → Timeslot Booking → Colors */
    --ama-ts-primary:       var(--e-global-color-accent, #2e7d32);
    --ama-ts-nav-bg:        var(--ama-ts-primary);  /* overrideable */
    --ama-ts-avail-color:   var(--ama-ts-primary);  /* available day number colour */
    --ama-ts-disabled-color:#767676;                /* unavailable day number colour — WCAG AA: 4.54:1 on white */
    /* Derived */
    --ama-ts-primary-light: color-mix(in srgb, var(--ama-ts-primary) 12%, white);
    --ama-ts-primary-text:  #fff;
    --ama-ts-radius:        var(--e-global-border-radius, 8px);
    --ama-ts-font:          var(--e-global-typography-text-font-family, inherit);
    --ama-ts-text:          var(--e-global-color-text, #333);
    --ama-ts-muted:         #888;
    --ama-ts-border:        #ddd;
    --ama-ts-success-bg:    #e8f5e9;
    --ama-ts-success-border:#a5d6a7;
    --ama-ts-success-text:  #1b5e20;
    --ama-ts-error-bg:      #fdecea;
    --ama-ts-error-border:  #ef9a9a;
    --ama-ts-error-text:    #c62828;
}

/*
 * Two columns when there is room, one when there is not — with no breakpoint.
 *
 * `width: 380px` stays as the standalone default, so the picker on its own is
 * still a narrow widget. Where a theme gives it the full width of a column
 * (the AMA product page sets `flex: 1 0 100%` on it, and flex-basis beats
 * width), these rules put the calendar and the remaining steps side by side
 * and reclaim the empty space to the right of the calendar.
 *
 * flex-wrap does the responsive work rather than a media query. The calendar
 * is a fixed 340px and .ama-ts-picker__col asks for at least 280px; when the
 * container cannot hold both, the column wraps underneath on its own. That
 * matters here because width available to the picker is NOT proportional to
 * the viewport: the product page's own two-column layout collapses at 900px,
 * so the picker gets *wider* as the viewport crosses that point downwards. A
 * viewport media query would get the 900–1150px range exactly wrong.
 */
.ama-ts-picker {
    max-width: 100%;
    width: 380px;
    margin: 20px 0 28px;
    font-family: var(--ama-ts-font);
    font-size: 14px;
    color: var(--ama-ts-text);
    box-sizing: border-box;

    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 32px;
}

/* The calendar never stretches: it is a fixed grid and looks wrong wide. */
.ama-ts-picker > #ama-ts-step-calendar {
    flex: 0 0 340px;
    max-width: 100%;
}

/* Steps 2–4 and the summary. min-width:0 so a long slot label cannot push the
   column past its share and force a wrap that the widths allow. */
.ama-ts-picker__col {
    flex: 1 1 280px;
    min-width: 0;
}

/* The summary and any message concern the whole picker, so they each take a
   full-width row under both columns — the summary landing directly above the
   Add to cart button. */
.ama-ts-picker > .ama-ts-summary,
.ama-ts-picker > .ama-ts-message {
    flex: 1 1 100%;
}
.ama-ts-picker > .ama-ts-summary { margin-top: 4px; }

/* ── Steps ───────────────────────────────────────────────── */
.ama-ts-step { margin-bottom: 22px; }

.ama-ts-step-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ama-ts-text);
}
.ama-ts-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--ama-ts-primary);
    color: var(--ama-ts-primary-text);
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
/* Its own line, right-aligned under the step heading. */
.ama-ts-chosen-date {
    display: block;
    text-align: right;
    margin: -4px 0 8px;
    font-weight: 400;
    font-size: 12px;
    color: var(--ama-ts-muted);
}
.ama-ts-chosen-date:empty { display: none; }   /* no gap before a date is picked */

/* ── Calendar ────────────────────────────────────────────── */
.ama-ts-calendar-wrap {
    border: 1px solid var(--ama-ts-border);
    border-radius: var(--ama-ts-radius);
    overflow: hidden;
    width: 100%;
    max-width: 340px;
}

.ama-ts-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--ama-ts-nav-bg);
    color: var(--ama-ts-primary-text);
    padding: 10px 12px;
}
.ama-ts-month-label { font-weight: 600; font-size: 14px; }
/* #ama-ts-prev-month, #ama-ts-next-month */
.ama-ts-cal-arrow {
    background: var(--ama-ts-nav-arrow-bg, rgba(0,0,0,0.15));
    border: none;
    color: var(--ama-ts-primary-text, #fff);
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    padding: 2px 10px;
    border-radius: 4px;
    transition: background .12s;
}
.ama-ts-cal-arrow:hover {
    background: var(--ama-ts-nav-arrow-hover, rgba(0,0,0,0.28));
}

/* Table: use fixed layout so all 7 columns share width equally */
.ama-ts-cal-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    table-layout: fixed;  /* ← key: prevents Saturday overflow */
}
.ama-ts-cal-th {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--ama-ts-muted);
    padding: 8px 0 5px;
    background: #f8f8f8;
    border-bottom: 1px solid #eee;
    overflow: hidden;
}
.ama-ts-cal-table td {
    text-align: center;
    padding: 2px 1px;
}

.ama-ts-cal-day {
    width: 100%;
    aspect-ratio: 1;          /* square cells that scale with container */
    max-width: 38px;
    max-height: 38px;
    border: none;
    border-radius: 50%;
    background: none;
    cursor: default;
    font-size: 12px;
    font-family: var(--ama-ts-font);
    color: var(--ama-ts-text);
    transition: background .12s, color .12s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* .ama-ts-cal-day--available */
.ama-ts-cal-day--available {
    cursor: pointer;
    color: var(--ama-ts-avail-color, var(--ama-ts-primary));
    background: var(--ama-ts-avail-bg, transparent);
    font-weight: 600;
}
.ama-ts-cal-day--available:hover {
    background: var(--ama-ts-avail-bg, var(--ama-ts-primary-light));
    opacity: 0.85;
}
.ama-ts-cal-day--selected {
    background: var(--ama-ts-primary) !important;
    color: var(--ama-ts-primary-text) !important;
    font-weight: 700;
    cursor: pointer;
}
/* Today highlight */
.ama-ts-cal-day--today {
    font-weight: 700;
    color: var(--ama-ts-primary);
    box-shadow: 0 0 0 2px var(--ama-ts-primary);
}
.ama-ts-cal-day--today.ama-ts-cal-day--selected { box-shadow: none; }

/* Past — diagonal strikethrough */
.ama-ts-cal-day--past {
    color: var(--ama-ts-disabled-color, #767676);
    cursor: not-allowed;
    position: relative;
    overflow: hidden;
}
.ama-ts-cal-day--past::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 110%; height: 1px;
    background: #ddd;
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Wrong weekday / before min / beyond max — grey with diagonal line */
/* .ama-ts-cal-day--disabled (wrong weekday / outside booking window) */
.ama-ts-cal-day--disabled {
    color: var(--ama-ts-disabled-color, #bbb);
    background: var(--ama-ts-disabled-bg, transparent);
    cursor: not-allowed;
    position: relative;
    overflow: hidden;
}
.ama-ts-cal-day--disabled::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 80%; height: 1px;
    background: var(--ama-ts-disabled-color, #ccc);
    opacity: 0.5;
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Fully booked */
.ama-ts-cal-day--booked {
    color: #c62828; /* WCAG AA fix: was #f9a8a8 (1.88:1), now 5.62:1 on white */
    text-decoration: line-through;
    cursor: not-allowed;
}


/* Explicitly blocked dates — same appearance as disabled */
.ama-ts-cal-day--blocked {
    color: var(--ama-ts-disabled-color, #bbb);
    background: var(--ama-ts-disabled-bg, transparent);
    cursor: not-allowed;
    position: relative;
    overflow: hidden;
}
.ama-ts-cal-day--blocked::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 80%; height: 1px;
    background: var(--ama-ts-disabled-color, #ccc);
    opacity: 0.5;
    transform: translate(-50%, -50%) rotate(-45deg);
}
/* ── Slot buttons ────────────────────────────────────────── */
.ama-ts-slots-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ama-ts-slot-btn {
    padding: 8px 14px;
    border: 1.5px solid var(--ama-ts-border);
    border-radius: var(--ama-ts-radius);
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    font-family: var(--ama-ts-font);
    text-align: left;
    line-height: 1.5;
    transition: border-color .12s, background .12s;
    color: var(--ama-ts-text);
}
.ama-ts-slot-btn:hover:not(:disabled) {
    border-color: var(--ama-ts-primary);
    background: var(--ama-ts-primary-light);
}
.ama-ts-slot-btn--selected {
    border-color: var(--ama-ts-primary) !important;
    background: var(--ama-ts-primary-light) !important;
    font-weight: 600;
}
.ama-ts-slot-btn--full,
.ama-ts-slot-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
    text-decoration: line-through;
}
.ama-ts-slot-cap { display: block; font-size: 11px; color: var(--ama-ts-muted); font-weight: 400; }

/* ── Persons stepper ─────────────────────────────────────── */
.ama-ts-qty-wrap { display: flex; align-items: center; gap: 12px; }
.ama-ts-qty-btn {
    width: 36px; height: 36px;
    border: 1.5px solid var(--ama-ts-border);
    border-radius: 50%;
    background: #fff;
    font-size: 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .1s, border-color .1s;
    color: var(--ama-ts-text);
    line-height: 1;
}
.ama-ts-qty-btn:hover { background: #f5f5f5; border-color: #767676; /* WCAG AA fix, was #aaa (2.32:1) */ }
.ama-ts-qty-display {
    font-size: 24px;
    font-weight: 700;
    min-width: 30px;
    text-align: center;
    color: var(--ama-ts-primary);
}
.ama-ts-qty-remaining { font-size: 12px; color: var(--ama-ts-muted); margin: 4px 0 0; }

/* ── Summary bar ─────────────────────────────────────────── */
.ama-ts-summary {
    background: var(--ama-ts-success-bg);
    border: 1px solid var(--ama-ts-success-border);
    border-radius: var(--ama-ts-radius);
    padding: 10px 14px;
    font-size: 13px;
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--ama-ts-success-text);
    margin-bottom: 14px;
}
.ama-ts-summary-icon { font-size: 18px; flex-shrink: 0; }

/* ── Messages ────────────────────────────────────────────── */
.ama-ts-message {
    padding: 10px 14px;
    border-radius: var(--ama-ts-radius);
    font-size: 13px;
    margin-bottom: 10px;
}
.ama-ts-message--success {
    background: var(--ama-ts-success-bg);
    color: var(--ama-ts-success-text);
    border: 1px solid var(--ama-ts-success-border);
}
.ama-ts-message--error {
    background: var(--ama-ts-error-bg);
    color: var(--ama-ts-error-text);
    border: 1px solid var(--ama-ts-error-border);
}
.ama-ts-loading, .ama-ts-no-slots {
    color: var(--ama-ts-muted);
    font-size: 13px;
    font-style: italic;
}

/* ── Slot select dropdown ────────────────────────────────── */
.ama-ts-slot-select {
    width: 100%;
    max-width: 340px;
    padding: 9px 12px;
    border: 1.5px solid var(--ama-ts-border);
    border-radius: var(--ama-ts-radius);
    background: #fff;
    font-size: 14px;
    font-family: var(--ama-ts-font);
    color: var(--ama-ts-text);
    cursor: pointer;
    appearance: auto;
    transition: border-color .12s;
}
.ama-ts-slot-select:focus {
    outline: 2px solid var(--ama-ts-primary);
    border-color: var(--ama-ts-primary);
}

/* ── Attendee name field ─────────────────────────────────── */
.ama-ts-name-input {
    width: 100%;
    max-width: 340px;
    padding: 9px 12px;
    border: 1.5px solid var(--ama-ts-border);
    border-radius: var(--ama-ts-radius);
    font-size: 14px;
    font-family: var(--ama-ts-font);
    color: var(--ama-ts-text);
    background: #fff;
    transition: border-color .12s;
    box-sizing: border-box;
}
.ama-ts-name-input:focus {
    outline: none;
    border-color: var(--ama-ts-primary);
}
.ama-ts-name-hint {
    font-size: 12px;
    color: var(--ama-ts-muted);
    margin: 5px 0 0;
    line-height: 1.5;
}

/* Name field error state */
.ama-ts-name-input--error {
    border-color: var(--ama-ts-error-text, #c62828);
    background: var(--ama-ts-error-bg, #fdecea);
}
.ama-ts-name-error {
    color: var(--ama-ts-error-text, #c62828);
    font-size: 12px;
    margin: 4px 0 0;
}

/* ── Fully booked day notice ─────────────────────────────── */
.ama-ts-fully-booked {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff8f0;
    border: 1.5px solid #f5a623;
    border-radius: var(--ama-ts-radius);
    padding: 14px 16px;
    max-width: 340px;
}
.ama-ts-fully-booked__icon {
    flex-shrink: 0;
    color: #b45309; /* WCAG 1.4.11 fix: was #e67e22 (2.70:1), now 4.77:1 on the notice bg */
    margin-top: 1px;
}
.ama-ts-fully-booked__title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #b45309;
    margin-bottom: 4px;
}
.ama-ts-fully-booked__msg {
    font-size: 13px;
    color: #78350f;
    margin: 0;
    line-height: 1.5;
}

/* ── Locked quantity display in cart/checkout ───────────────────────────── */
.ama-ts-qty-locked {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    background: #f3f3f3;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    cursor: not-allowed;
}

/* ── Screen-reader-only live region (month announcer) ───────────────────── */
.ama-ts-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   Theme / Elementor-Kit hardening.
   Some builders (notably Elementor's global Kit) register global
   `button { … !important }` styles — a solid accent/red background and square
   corners — that repaint the calendar days into red squares and restyle the
   nav / quantity buttons. Those rules use !important, so re-asserting the
   picker's appearance needs BOTH !important AND enough specificity to win:
   hence everything below is scoped under the #ama-ts-picker *ID* (beats any
   `.elementor-kit-… button` class selector). Only the structural/default
   properties are forced here; the admin-configured colours from
   build_color_css() (also #ama-ts-picker + !important) load later and win
   where set.
   ────────────────────────────────────────────────────────────────────────── */
#ama-ts-picker .ama-ts-cal-day,
#ama-ts-picker .ama-ts-cal-arrow,
#ama-ts-picker .ama-ts-qty-btn {
    text-transform: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    min-height: 0 !important;
}
#ama-ts-picker .ama-ts-cal-day {
    background: transparent !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    color: var(--ama-ts-text) !important;
    /* Re-assert the flex centring AND the square sizing. A global `button` rule
       from the Kit both offset the number (padding / line-height) and shrank the
       cell (width / display), so with padding removed the square collapsed — hence
       width + aspect-ratio are forced back too. */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    max-width: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
}
#ama-ts-picker .ama-ts-cal-day--available {
    color: var(--ama-ts-avail-color, var(--ama-ts-primary)) !important;
    background: var(--ama-ts-avail-bg, transparent) !important;
}
#ama-ts-picker .ama-ts-cal-day--available:hover {
    background: var(--ama-ts-avail-bg, var(--ama-ts-primary-light)) !important;
}
#ama-ts-picker .ama-ts-cal-day--selected {
    background: var(--ama-ts-primary) !important;
    color: var(--ama-ts-primary-text) !important;
}
#ama-ts-picker .ama-ts-cal-day--today {
    box-shadow: inset 0 0 0 2px var(--ama-ts-primary) !important;
    color: var(--ama-ts-primary) !important;
}
#ama-ts-picker .ama-ts-cal-day--today.ama-ts-cal-day--selected { box-shadow: none !important; }
#ama-ts-picker .ama-ts-cal-day--disabled,
#ama-ts-picker .ama-ts-cal-day--blocked,
#ama-ts-picker .ama-ts-cal-day[disabled] {
    background: transparent !important;
    color: var(--ama-ts-disabled-color, #767676) !important;
}
#ama-ts-picker .ama-ts-cal-arrow {
    background: var(--ama-ts-nav-arrow-bg, rgba(0,0,0,0.15)) !important;
    border: 0 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    color: var(--ama-ts-primary-text, #fff) !important;
}
#ama-ts-picker .ama-ts-cal-arrow:hover { background: var(--ama-ts-nav-arrow-hover, rgba(0,0,0,0.28)) !important; }
#ama-ts-picker .ama-ts-qty-btn {
    background: #fff !important;
    border: 1.5px solid var(--ama-ts-border) !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    color: var(--ama-ts-text) !important;
}
#ama-ts-picker .ama-ts-qty-btn:hover { background: #f5f5f5 !important; border-color: #767676 !important; }

/* WooCommerce's own quantity input on a booking product.
   The persons count is chosen in the picker's stepper and is tied to the
   selected slot's remaining capacity, so the stock input must not be reachable.
   This replaces an inline DOMContentLoaded script that hid it after paint —
   the box used to flash on screen first. Server-side enforcement lives in
   AMA_TS_Cart::lock_quantity_display() and enforce_quantity(); this is only
   what the visitor sees. */
body.ama-ts-has-picker form.cart .quantity { display: none; }