/**
 * Front-end styling for the booking widget (shortcode + block, one shared
 * markup — see public/booking.php's render() and public/calendar.php).
 * Scoped entirely under .surebook-booking / .surebook-confirmation /
 * .surebook-manage so it never leaks into the surrounding theme, and built
 * on CSS custom properties so a theme (or a future admin color setting)
 * can override the accent without touching this file.
 */

.surebook-booking,
.surebook-confirmation,
.surebook-manage {
    --surebook-accent: #2563eb;
    --surebook-accent-contrast: #ffffff;
    --surebook-available-bg: #e8f5e9;
    --surebook-available-fg: #1b5e20;
    --surebook-full-bg: #fdf2e9;
    --surebook-full-fg: #9a5b13;
    --surebook-closed-bg: transparent;
    --surebook-muted: #9aa0a6;
    --surebook-border: #e2e5e9;
    --surebook-surface: #ffffff;
    --surebook-text: #1f2328;
    --surebook-error: #c62828;
    --surebook-radius: 10px;

    /* color-scheme, not just `color` — without it, a native <input
       type="date"/"time"> renders its internal value text using whatever
       color-scheme it INHERITS (often "dark" on a modern theme/browser
       combo that declares one ambiently), completely ignoring our own
       explicit background here. That's exactly how "white on white" and
       "black on black" happen: the input's shadow-DOM text color comes
       from color-scheme, not from the `color:` property authors normally
       reach for. Declaring it explicitly, matching whichever background we
       actually set below, is the fix — not just here but in
       stripe-checkout.js too (see that file's own note on the Stripe
       Elements iframe, which has exactly the same failure mode for a
       different reason). */
    color-scheme: light;

    box-sizing: border-box;
    max-width: 30rem;
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: var(--surebook-surface);
    border: 1px solid var(--surebook-border);
    border-radius: var(--surebook-radius);
    color: var(--surebook-text);
    font-size: 1rem;
    line-height: 1.5;
}

.surebook-booking *,
.surebook-confirmation *,
.surebook-manage * {
    box-sizing: border-box;
}

.surebook-booking h3 {
    margin: 0 0 1.25rem;
    font-size: 1.15rem;
    font-weight: 600;
}

/* --- Service picker --- */

.surebook-service-picker {
    margin-bottom: 1.25rem;
}

.surebook-service-picker label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--surebook-muted);
}

.surebook-service-picker select {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--surebook-border);
    border-radius: 8px;
    background: var(--surebook-surface);
    color: var(--surebook-text);
    font-size: 1rem;
}

/* --- Calendar --- */

.surebook-calendar {
    margin-bottom: 1.5rem;
}

.surebook-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.surebook-calendar-nav strong {
    font-size: 1rem;
    font-weight: 600;
}

.surebook-calendar-nav a {
    color: var(--surebook-accent);
    text-decoration: none;
    padding: 0.25rem 0.4rem;
    border-radius: 6px;
}

.surebook-calendar-nav a:hover,
.surebook-calendar-nav a:focus-visible {
    background: var(--surebook-available-bg);
}

.surebook-calendar-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 3px;
    table-layout: fixed;
    font-variant-numeric: tabular-nums;
}

.surebook-calendar-grid th {
    padding-bottom: 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--surebook-muted);
}

.surebook-calendar-grid td {
    text-align: center;
    height: 2.4rem;
    vertical-align: middle;
    border-radius: 8px;
    font-size: 0.9rem;
}

.surebook-calendar-grid td a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
    border-radius: 8px;
    transition: transform 0.08s ease;
}

.surebook-day-available {
    background: var(--surebook-available-bg);
    color: var(--surebook-available-fg);
    font-weight: 600;
}

.surebook-day-full {
    background: var(--surebook-full-bg);
    color: var(--surebook-full-fg);
}

.surebook-day-available a:hover,
.surebook-day-available a:focus-visible,
.surebook-day-full a:hover,
.surebook-day-full a:focus-visible {
    transform: scale(1.08);
    outline: none;
}

.surebook-day-selected {
    box-shadow: 0 0 0 2px var(--surebook-accent) inset;
}

.surebook-day-closed,
.surebook-day-past,
.surebook-day-empty {
    color: var(--surebook-muted);
}

.surebook-day-past {
    text-decoration: line-through;
    opacity: 0.5;
}

/* --- Time slots --- */

.surebook-slots fieldset {
    margin: 0 0 1.25rem;
    padding: 0;
    border: none;
}

.surebook-slots legend {
    padding: 0 0 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--surebook-muted);
}

.surebook-slot-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.surebook-slot {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--surebook-border);
    border-radius: 999px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.1s ease, background 0.1s ease;
}

.surebook-slot:hover {
    border-color: var(--surebook-accent);
}

.surebook-slot:has(input:checked) {
    background: var(--surebook-accent);
    border-color: var(--surebook-accent);
    color: var(--surebook-accent-contrast);
}

.surebook-slot input {
    accent-color: var(--surebook-accent-contrast);
}

/* --- Contact fields --- */

.surebook-booking form p {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0 0 1.25rem;
}

.surebook-booking form p label {
    flex: 1 1 8rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--surebook-muted);
}

.surebook-booking form input[type="text"],
.surebook-booking form input[type="email"],
.surebook-booking form input[type="tel"],
.surebook-booking form input[type="date"],
.surebook-booking form input[type="time"] {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--surebook-border);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--surebook-text);
}

.surebook-rental-estimate {
    margin: 0 0 1.25rem;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    background: var(--surebook-available-bg);
    color: var(--surebook-available-fg);
    font-size: 0.95rem;
}

/* --- Buttons --- */

.surebook-booking button,
.surebook-manage button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1.5rem;
    border: none;
    border-radius: 999px;
    background: var(--surebook-accent);
    color: var(--surebook-accent-contrast);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.1s ease;
}

.surebook-booking button:hover,
.surebook-manage button:hover {
    opacity: 0.9;
}

.surebook-booking button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* --- Stripe payment step --- */

.surebook-stripe-payment #surebook-card-element {
    padding: 0.85rem;
    margin-bottom: 1rem;
    border: 1px solid var(--surebook-border);
    border-radius: 8px;
    background: var(--surebook-surface);
}

/* Apple Pay / Google Pay. Both this and the divider below are rendered with
   the `hidden` attribute and only revealed by stripe-checkout.js once Stripe
   confirms a wallet is actually available on the device — so there is no
   display rule here that could override `hidden` and leave an empty box on
   every wallet-less desktop. */
.surebook-stripe-payment .surebook-express-checkout {
    margin-bottom: 1rem;
}

/* A centred "or pay by card" with a rule either side, drawn with borders on
   the pseudo-elements so it needs no background matching and stays correct on
   any themed surface. */
.surebook-stripe-payment .surebook-express-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1rem;
    color: var(--surebook-muted);
    font-size: 0.85rem;
}

.surebook-stripe-payment .surebook-express-divider::before,
.surebook-stripe-payment .surebook-express-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--surebook-border);
}

/* --- Errors & confirmation --- */

.surebook-error {
    margin: 0 0 1rem;
    padding: 0.6rem 0.85rem;
    border-radius: 8px;
    background: #fdecea;
    color: var(--surebook-error);
    font-size: 0.9rem;
}

.surebook-confirmation {
    max-width: 30rem;
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: var(--surebook-available-bg);
    border: 1px solid var(--surebook-available-fg);
    border-radius: var(--surebook-radius);
}

.surebook-confirmation h3 {
    margin-top: 0;
    color: var(--surebook-available-fg);
}

/* Automatic (Auto theme): follows the visitor's own OS/browser preference —
   unchanged from before this session's widget-config work. Guarded with
   :not([data-theme="light"]) so an explicit Light override (below) still
   wins even on a dark-preferring browser; an explicit Dark override doesn't
   need a matching guard here since its own standalone rule below applies
   unconditionally regardless of what this media query does. */
@media (prefers-color-scheme: dark) {
    .surebook-booking:not([data-theme="light"]),
    .surebook-confirmation:not([data-theme="light"]),
    .surebook-manage:not([data-theme="light"]) {
        color-scheme: dark;
        --surebook-surface: #1e2126;
        --surebook-text: #f0f1f3;
        --surebook-border: #33373d;
        --surebook-available-bg: #16311c;
        --surebook-available-fg: #8fd99a;
        --surebook-full-bg: #3a2b12;
        --surebook-full-fg: #f0b968;
        --surebook-muted: #8a9099;
        --surebook-error: #ff8a80;
    }

    .surebook-booking:not([data-theme="light"]) .surebook-error,
    .surebook-confirmation:not([data-theme="light"]) .surebook-error,
    .surebook-manage:not([data-theme="light"]) .surebook-error {
        background: #3a1a1a;
    }
}

/* Explicit theme override (a saved widget config's Light/Dark choice —
   admin-widgets.php) — applies regardless of the visitor's OS preference,
   which is the whole point of an explicit choice beating an automatic one.
   Dark's tokens are the exact ones above, just no longer conditional on
   prefers-color-scheme; Light doesn't need its own token block at all,
   since the unguarded base rule at the top of this file already IS the
   light palette — it only needs re-asserting when this same element would
   otherwise have matched the dark media query above, which the :not()
   guard on that query already handles. */
.surebook-booking[data-theme="dark"],
.surebook-confirmation[data-theme="dark"],
.surebook-manage[data-theme="dark"] {
    color-scheme: dark;
    --surebook-surface: #1e2126;
    --surebook-text: #f0f1f3;
    --surebook-border: #33373d;
    --surebook-available-bg: #16311c;
    --surebook-available-fg: #8fd99a;
    --surebook-full-bg: #3a2b12;
    --surebook-full-fg: #f0b968;
    --surebook-muted: #8a9099;
    --surebook-error: #ff8a80;
}

.surebook-booking[data-theme="dark"] .surebook-error,
.surebook-confirmation[data-theme="dark"] .surebook-error,
.surebook-manage[data-theme="dark"] .surebook-error {
    background: #3a1a1a;
}

/* Landscape layout (a saved widget config's choice) — Portrait (the
   default, no attribute emitted) stays exactly the original single stacked
   column. The calendar stays full-width above in both layouts (it's
   inherently grid/table-shaped and doesn't split into a "pane" sensibly);
   only the form below it — slot-list/rental-time-fields on one side,
   contact details + submit on the other — becomes two columns. Scoped to
   the two specific form classes, not a blanket `form` selector, since the
   service-picker and date-picker are also <form> elements that should
   never be grid-ified. */
.surebook-booking[data-layout="landscape"] {
    max-width: 46rem;
}

.surebook-booking[data-layout="landscape"] .surebook-slots,
.surebook-booking[data-layout="landscape"] .surebook-rental-form {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 640px) {
    /* Never force two cramped columns on a narrow viewport, regardless of
       the chosen layout — landscape is an opt-in widening for a wide
       embed, not a promise to defy the visitor's actual screen. */
    .surebook-booking[data-layout="landscape"] {
        max-width: 30rem;
    }
    .surebook-booking[data-layout="landscape"] .surebook-slots,
    .surebook-booking[data-layout="landscape"] .surebook-rental-form {
        display: block;
    }
}

@media (max-width: 420px) {
    .surebook-calendar-grid td {
        height: 2.1rem;
        font-size: 0.8rem;
    }
}