/**
 * Restaurant Booking Form — Style System (v2)
 *
 * THREE genuinely distinct, fully-OPAQUE, generic styles that suit any
 * restaurant website, all driven by CSS custom properties so they can be
 * combined with customization modifiers (accent color, corner style,
 * button fill, density).
 *
 *   STYLES (mutually exclusive):
 *     .style-classic  — Traditional bordered white card. Trattoria/classic.
 *     .style-modern   — Dark header band, uppercase labels, airy. Contemporary.
 *     .style-minimal  — Fine-dining minimalist on a solid "paper" surface
 *                       (NO transparency — fixes content bleed-through).
 *
 *   CUSTOMIZATION MODIFIERS (mix freely with any style):
 *     .color-*        — accent palette (blue/green/red/.../custom)
 *     .corners-sharp | .corners-rounded | .corners-pill
 *     .btn-solid | .btn-outline
 *     .density-comfortable | .density-compact
 *
 * IMPORTANT: every style sets an OPAQUE surface so the form is always
 * readable, even when placed over a hero image or page content.
 *
 * NOTE: The legacy multi-step "wizard" style is deprecated. PHP normalizes
 * a saved value of "wizard" to "classic"; any residual wizard chrome is
 * hidden at the bottom of this file as a safety net.
 */

@layer plugin-components {

/* =====================================================================
   BASE + DESIGN TOKENS
   Defaults live here; modifiers below override the variables.
   ===================================================================== */
.rtb-booking-form {
    /* Accent (overridden by .color-*) */
    --rtb-accent: #b5854b;
    --rtb-accent-2: #986d3a;
    --rtb-on-accent: #ffffff;

    /* Surfaces & text (overridden per style) */
    --rtb-surface: #ffffff;
    --rtb-field-bg: #ffffff;
    --rtb-text: #1f2430;
    --rtb-muted: #6b7280;
    --rtb-border: #d9dce1;
    --rtb-border-strong: #b9bec7;

    /* Shape (overridden by .corners-*) */
    --rtb-radius: 12px;
    --rtb-btn-radius: 10px;

    /* Density (overridden by .density-*) */
    --rtb-gap: 1.2rem;
    --rtb-field-py: 12px;
    --rtb-field-px: 15px;
    --rtb-pad: clamp(1.5rem, 4vw, 2.5rem);

    box-sizing: border-box !important;
    max-width: 560px !important;
    margin: 48px auto !important;
    font-family: inherit !important;
    line-height: 1.6 !important;
    color: var(--rtb-text) !important;
    position: relative !important;
    /* Safety net: an opaque default surface so content never bleeds through,
       even if a style class is somehow missing. */
    background: var(--rtb-surface) !important;
    border-radius: var(--rtb-radius) !important;
    padding: var(--rtb-pad) !important;
}
.rtb-booking-form *,
.rtb-booking-form *::before,
.rtb-booking-form *::after {
    box-sizing: border-box !important;
}

/* Honeypot stays hidden regardless of theme */
.rtb-booking-form .rtb-booking-form__hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* =====================================================================
   SHARED ELEMENTS (variable-driven; styles tweak these)
   ===================================================================== */
.rtb-booking-form__title {
    font-family: inherit !important;
    font-size: clamp(1.4rem, 3.5vw, 1.9rem) !important;
    font-weight: 700 !important;
    color: var(--rtb-text) !important;
    text-align: center !important;
    margin: 0 0 1.5rem 0 !important;
    line-height: 1.2 !important;
}

.rtb-booking-form__field { margin-bottom: var(--rtb-gap) !important; }

.rtb-booking-form__row {
    display: flex !important;
    gap: var(--rtb-gap) !important;
    margin-bottom: var(--rtb-gap) !important;
}
.rtb-booking-form__row .rtb-booking-form__field {
    flex: 1 !important;
    margin-bottom: 0 !important;
}

.rtb-booking-form__label {
    display: block !important;
    margin-bottom: 6px !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    color: var(--rtb-muted) !important;
    letter-spacing: .01em !important;
}
.rtb-booking-form__label--required::after {
    content: " *" !important;
    color: var(--rtb-accent) !important;
}

.rtb-booking-form__input,
.rtb-booking-form__select,
.rtb-booking-form__textarea {
    width: 100% !important;
    padding: var(--rtb-field-py) var(--rtb-field-px) !important;
    min-height: 46px !important;
    border: 1px solid var(--rtb-border) !important;
    border-radius: var(--rtb-radius) !important;
    font-size: 0.95rem !important;
    font-family: inherit !important;
    line-height: 1.5 !important;
    color: var(--rtb-text) !important;
    background: var(--rtb-field-bg) !important;
    transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease !important;
}
.rtb-booking-form__input::placeholder,
.rtb-booking-form__textarea::placeholder { color: var(--rtb-muted) !important; opacity: .8 !important; }

.rtb-booking-form__input:hover,
.rtb-booking-form__select:hover,
.rtb-booking-form__textarea:hover { border-color: var(--rtb-border-strong) !important; }

.rtb-booking-form__input:focus,
.rtb-booking-form__select:focus,
.rtb-booking-form__textarea:focus {
    outline: none !important;
    border-color: var(--rtb-accent) !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .08) !important; /* fallback */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rtb-accent) 18%, transparent) !important;
}

.rtb-booking-form__textarea {
    min-height: 92px !important;
    resize: vertical !important;
}

/* Checkbox */
.rtb-booking-form__checkbox-wrapper {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
}
.rtb-booking-form__checkbox {
    margin-top: 2px !important;
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
    accent-color: var(--rtb-accent) !important;
    flex: 0 0 auto !important;
}
.rtb-booking-form__checkbox-label {
    font-size: 0.8rem !important;
    color: var(--rtb-muted) !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
}
.rtb-booking-form__checkbox-label a {
    color: var(--rtb-accent) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}
.rtb-booking-form__checkbox-label a:hover { text-decoration: underline !important; }

/* Errors */
.rtb-booking-form__error {
    display: block !important;
    margin-top: 4px !important;
    font-size: 0.8rem !important;
    color: #dc2626 !important;
    font-weight: 500 !important;
}
.rtb-booking-form__input--error,
.rtb-booking-form__select--error,
.rtb-booking-form__textarea--error {
    border-color: #dc2626 !important;
}

/* Submit button (solid by default) */
.rtb-booking-form__submit {
    width: 100% !important;
    padding: 15px 24px !important;
    min-height: 50px !important;
    background: var(--rtb-accent) !important;
    color: var(--rtb-on-accent) !important;
    border: 2px solid var(--rtb-accent) !important;
    border-radius: var(--rtb-btn-radius) !important;
    font-family: inherit !important;
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background-color 180ms ease, box-shadow 180ms ease, transform 120ms ease, color 180ms ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 1.5rem !important;
}
.rtb-booking-form__submit:hover {
    background: var(--rtb-accent-2) !important;
    border-color: var(--rtb-accent-2) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .14) !important; /* fallback */
    box-shadow: 0 6px 18px color-mix(in srgb, var(--rtb-accent) 28%, transparent) !important;
    transform: translateY(-1px) !important;
}
.rtb-booking-form__submit:active { transform: translateY(0) !important; }
.rtb-booking-form__submit:disabled {
    opacity: .55 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Time slots */
.rtb-booking-form__time-slots {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
    gap: 8px !important;
    margin-top: 10px !important;
}
.rtb-booking-form__time-slot {
    padding: 10px 8px !important;
    text-align: center !important;
    border: 1px solid var(--rtb-border) !important;
    border-radius: var(--rtb-btn-radius) !important;
    cursor: pointer !important;
    transition: all 160ms ease !important;
    background: var(--rtb-field-bg) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    color: var(--rtb-text) !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.rtb-booking-form__time-slot:hover {
    border-color: var(--rtb-accent) !important;
    color: var(--rtb-accent) !important;
}
.rtb-booking-form__time-slot.is-selected {
    border-color: var(--rtb-accent) !important;
    background: var(--rtb-accent) !important;
    color: var(--rtb-on-accent) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15) !important; /* fallback */
    box-shadow: 0 2px 8px color-mix(in srgb, var(--rtb-accent) 30%, transparent) !important;
}

.rtb-booking-form__no-slots {
    text-align: center !important;
    padding: 24px 18px !important;
    color: var(--rtb-muted) !important;
    font-style: italic !important;
    background: rgba(0, 0, 0, .03) !important; /* fallback */
    background: color-mix(in srgb, var(--rtb-text) 4%, transparent) !important;
    border-radius: var(--rtb-radius) !important;
    border: 1px dashed var(--rtb-border) !important;
}

/* Loading + messages */
.rtb-booking-form__loading { display: none !important; text-align: center !important; padding: 18px !important; }
.rtb-booking-form__loading.is-active { display: block !important; }
.rtb-booking-form__spinner {
    display: inline-block !important;
    width: 34px !important; height: 34px !important;
    border: 3px solid var(--rtb-border) !important;
    border-top-color: var(--rtb-accent) !important;
    border-radius: 50% !important;
    animation: rtb-spin .8s linear infinite !important;
}
@keyframes rtb-spin { to { transform: rotate(360deg); } }

.rtb-booking-form__message {
    padding: 0.85rem 1rem !important;
    margin-bottom: 1.1rem !important;
    border-radius: var(--rtb-radius) !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
}
.rtb-booking-form__message--success { background: #f0fdf4 !important; color: #166534 !important; border: 1px solid #bbf7d0 !important; }
.rtb-booking-form__message--error { background: #fef2f2 !important; color: #991b1b !important; border: 1px solid #fecaca !important; }

/* =====================================================================
   STYLE 1 — CLASSIC  (bordered white card, traditional)
   ===================================================================== */
.rtb-booking-form.style-classic {
    --rtb-surface: #ffffff;
    --rtb-field-bg: #ffffff;
    max-width: 560px !important;
    border: 1px solid var(--rtb-border) !important;
    box-shadow: 0 2px 10px rgba(17, 24, 39, .05) !important;
}
.rtb-booking-form.style-classic .rtb-booking-form__title {
    border-bottom: 1px solid var(--rtb-border) !important;
    padding-bottom: 1rem !important;
    margin-bottom: 1.75rem !important;
}

/* =====================================================================
   STYLE 2 — MODERN  (dark header band, uppercase labels, pill button)
   ===================================================================== */
.rtb-booking-form.style-modern {
    --rtb-surface: #f7f8fa;
    --rtb-field-bg: #ffffff;
    --rtb-btn-radius: 9999px;
    max-width: 520px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--rtb-border) !important;
    box-shadow: 0 10px 34px rgba(17, 24, 39, .10) !important;
}
.rtb-booking-form.style-modern .rtb-booking-form__title {
    background: var(--rtb-accent) !important;
    color: var(--rtb-on-accent) !important;
    padding: 1.6rem 2rem !important;
    margin: 0 !important;
    font-size: 1.35rem !important;
}
.rtb-booking-form.style-modern .rtb-booking-form__form { padding: clamp(1.5rem, 4vw, 2rem) !important; }
.rtb-booking-form.style-modern .rtb-booking-form__label {
    text-transform: uppercase !important;
    letter-spacing: .1em !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
}
.rtb-booking-form.style-modern .rtb-booking-form__submit {
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    font-size: 0.85rem !important;
}

/* =====================================================================
   STYLE 3 — MINIMAL  (fine-dining, OPAQUE paper surface, hairline inputs)
   The critical fix: a solid surface + faintly tinted fields so the form
   is always readable — never transparent over page content.
   ===================================================================== */
.rtb-booking-form.style-minimal {
    --rtb-surface: #faf9f6;      /* warm paper, fully opaque */
    --rtb-field-bg: #ffffff;
    --rtb-text: #232323;
    --rtb-muted: #8a8a83;
    --rtb-border: #e4e1d9;
    --rtb-border-strong: #cfc9bd;
    --rtb-btn-radius: 0px;
    max-width: 460px !important;
    padding: clamp(2rem, 5vw, 3rem) !important;
    border: 1px solid var(--rtb-border) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,.02) !important;
}
.rtb-booking-form.style-minimal .rtb-booking-form__title {
    font-weight: 300 !important;
    font-size: clamp(1.6rem, 4vw, 2.1rem) !important;
    letter-spacing: .01em !important;
    margin-bottom: 2rem !important;
}
.rtb-booking-form.style-minimal .rtb-booking-form__label {
    text-transform: uppercase !important;
    letter-spacing: .14em !important;
    font-size: 0.68rem !important;
    font-weight: 500 !important;
    color: var(--rtb-muted) !important;
}
/* Hairline-underline inputs, but on a solid field background (readable) */
.rtb-booking-form.style-minimal .rtb-booking-form__input,
.rtb-booking-form.style-minimal .rtb-booking-form__select,
.rtb-booking-form.style-minimal .rtb-booking-form__textarea {
    border: 1px solid transparent !important;
    border-bottom: 1px solid var(--rtb-border-strong) !important;
    border-radius: 0 !important;
    background: var(--rtb-field-bg) !important;
    font-weight: 300 !important;
    font-size: 1rem !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}
.rtb-booking-form.style-minimal .rtb-booking-form__input:focus,
.rtb-booking-form.style-minimal .rtb-booking-form__select:focus,
.rtb-booking-form.style-minimal .rtb-booking-form__textarea:focus {
    border-bottom-color: var(--rtb-accent) !important;
    box-shadow: 0 1px 0 0 var(--rtb-accent) !important;
}
.rtb-booking-form.style-minimal .rtb-booking-form__time-slot {
    border-radius: 0 !important;
}
/* Ghost/outline submit feels right for minimalist */
.rtb-booking-form.style-minimal .rtb-booking-form__submit {
    background: transparent !important;
    color: var(--rtb-text) !important;
    border: 1px solid var(--rtb-text) !important;
    text-transform: uppercase !important;
    letter-spacing: .15em !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
}
.rtb-booking-form.style-minimal .rtb-booking-form__submit:hover {
    background: var(--rtb-text) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* =====================================================================
   CUSTOMIZATION MODIFIER — CORNERS
   ===================================================================== */
.rtb-booking-form.corners-sharp   { --rtb-radius: 0px;  --rtb-btn-radius: 0px; }
.rtb-booking-form.corners-rounded { --rtb-radius: 12px; --rtb-btn-radius: 10px; }
.rtb-booking-form.corners-pill    { --rtb-radius: 16px; --rtb-btn-radius: 9999px; }
/* Pill: keep inputs gently rounded, button fully pill */
.rtb-booking-form.corners-pill .rtb-booking-form__input,
.rtb-booking-form.corners-pill .rtb-booking-form__select,
.rtb-booking-form.corners-pill .rtb-booking-form__textarea { border-radius: 14px !important; }

/* =====================================================================
   CUSTOMIZATION MODIFIER — BUTTON FILL
   ===================================================================== */
.rtb-booking-form.btn-outline .rtb-booking-form__submit {
    background: transparent !important;
    color: var(--rtb-accent) !important;
    border: 2px solid var(--rtb-accent) !important;
}
.rtb-booking-form.btn-outline .rtb-booking-form__submit:hover {
    background: var(--rtb-accent) !important;
    color: var(--rtb-on-accent) !important;
}

/* =====================================================================
   CUSTOMIZATION MODIFIER — DENSITY
   ===================================================================== */
.rtb-booking-form.density-comfortable {
    --rtb-gap: 1.35rem; --rtb-field-py: 13px; --rtb-pad: clamp(1.75rem, 4.5vw, 2.75rem);
}
.rtb-booking-form.density-compact {
    --rtb-gap: 0.8rem; --rtb-field-py: 9px; --rtb-pad: clamp(1.1rem, 3vw, 1.6rem);
}
.rtb-booking-form.density-compact .rtb-booking-form__input,
.rtb-booking-form.density-compact .rtb-booking-form__select,
.rtb-booking-form.density-compact .rtb-booking-form__textarea { min-height: 40px !important; }
.rtb-booking-form.density-compact .rtb-booking-form__submit { min-height: 44px !important; padding: 12px 20px !important; }

/* =====================================================================
   COLOR SCHEMES  (set accent variables; work across all styles)
   ===================================================================== */
.rtb-booking-form.color-blue   { --rtb-accent: #2563eb; --rtb-accent-2: #1d4ed8; --rtb-on-accent:#fff; }
.rtb-booking-form.color-green  { --rtb-accent: #16a34a; --rtb-accent-2: #15803d; --rtb-on-accent:#fff; }
.rtb-booking-form.color-red    { --rtb-accent: #dc2626; --rtb-accent-2: #b91c1c; --rtb-on-accent:#fff; }
.rtb-booking-form.color-purple { --rtb-accent: #7c3aed; --rtb-accent-2: #6d28d9; --rtb-on-accent:#fff; }
.rtb-booking-form.color-orange { --rtb-accent: #ea580c; --rtb-accent-2: #c2410c; --rtb-on-accent:#fff; }
.rtb-booking-form.color-teal   { --rtb-accent: #0d9488; --rtb-accent-2: #0f766e; --rtb-on-accent:#fff; }
.rtb-booking-form.color-gold   { --rtb-accent: #b5854b; --rtb-accent-2: #986d3a; --rtb-on-accent:#fff; }
.rtb-booking-form.color-slate  { --rtb-accent: #475569; --rtb-accent-2: #334155; --rtb-on-accent:#fff; }
/* custom: variables are injected inline via style="" by PHP */

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 600px) {
    .rtb-booking-form { margin: 20px 14px !important; max-width: none !important; }
    .rtb-booking-form.style-modern { margin: 16px 14px !important; }
    .rtb-booking-form__row { flex-direction: column !important; gap: 0 !important; }
    .rtb-booking-form__row .rtb-booking-form__field { margin-bottom: var(--rtb-gap) !important; }
    .rtb-booking-form__time-slots { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)) !important; }
}

/* =====================================================================
   LEGACY WIZARD SAFETY NET
   The wizard is deprecated. If any residual wizard DOM is present (e.g.
   cached markup), hide its chrome so the plain single-page form shows.
   ===================================================================== */
.rtb-wizard-progress,
.rtb-wizard-navigation { display: none !important; }
.rtb-booking-form .rtb-booking-form__form { display: block !important; }
.rtb-wizard-step-content { display: block !important; opacity: 1 !important; }

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .rtb-booking-form__spinner { animation: none !important; border-top-color: transparent !important; }
    .rtb-booking-form__submit,
    .rtb-booking-form__time-slot,
    .rtb-booking-form__input,
    .rtb-booking-form__select,
    .rtb-booking-form__textarea { transition: none !important; }
}

} /* end @layer plugin-components */