/* OSAC CSS Bundle - Generated 2026-03-30 09:20:07 - Do not edit directly */
/* Bundle: booking-bundle.css */
/* Sources: 21 files */

/* === buttons.css === */
/* ===================================================================
   OSAC v2 - BUTTONS (Clean Architecture)
   ===================================================================

   Uses --osb-* tokens so theme can remap via .osb-product-page.
   No !important on colors/fonts — theme overrides work naturally.
   !important kept only on layout-critical properties (display, flex)
   and Elementor compat (height, width).

   NAMING CONVENTION (Elementor-safe, no "primary"):
   -----------------------------------------------
   .osb-btn          → Base styles (all buttons)
   .osb-btn-cta      → Main action (Reserve, Continue)
   .osb-btn-ghost    → Secondary (Back, Cancel)
   .osb-btn-check    → Check Availability
   .osb-btn-summary  → View Summary
   .osb-btn-reserve  → Add to Cart / Reserve
   .osb-btn-alt      → Alternative option
   .osb-btn-suggest  → Suggestion (warm)
   .osb-btn-mini     → Compact size

   USAGE:
   <button class="osb-btn osb-btn-cta">Reserve Bungalow</button>
   <button class="osb-btn osb-btn-ghost">Change Dates</button>

   =================================================================== */

/* =========================================
   1. BASE BUTTON (All Buttons)
   ========================================= */
.osb-container .osb-btn,
.osb-container a.osb-btn,
.osb-container button.osb-btn {
    /* Layout — !important to override Elementor inline styles */
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;

    /* Spacing */
    padding: var(--osb-btn-padding);
    margin: 0;

    /* Typography */
    font-family: var(--osb-font-primary);
    font-size: var(--osb-btn-font-size);
    font-weight: var(--osb-btn-font-weight);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: 0.02em;

    /* Appearance */
    border: none;
    border-radius: var(--osb-btn-radius);
    cursor: pointer;

    /* Animation */
    transition: all 0.2s ease;

    /* Reset Elementor */
    box-shadow: none;
    outline: none;
}

/* Disabled State (All Buttons) */
.osb-container .osb-btn:disabled,
.osb-container .osb-btn[disabled],
.osb-container .osb-btn.osb-btn-disabled {
    background-color: var(--osb-btn-disabled-bg);
    color: var(--osb-btn-disabled-text);
    border-color: var(--osb-btn-disabled-bg);
    cursor: not-allowed;
    transform: none;
    pointer-events: none;
    box-shadow: none;
    opacity: 0.7;
}

/* =========================================
   2. CTA BUTTON (Main Action - Reserve, Continue)
   ========================================= */
.osb-container .osb-btn.osb-btn-cta,
.osb-container .osb-btn.osb-btn-reserve {
    background-color: var(--osb-btn-cta-bg);
    color: var(--osb-btn-cta-text);
    border: none;
    box-shadow: 0 4px 6px var(--osb-btn-cta-shadow);
}

.osb-container .osb-btn.osb-btn-cta:hover,
.osb-container .osb-btn.osb-btn-reserve:hover {
    background-color: var(--osb-btn-cta-bg-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px var(--osb-btn-cta-shadow);
}

/* =========================================
   3. GHOST BUTTON (Secondary - Back, Cancel)
   ========================================= */
.osb-container .osb-btn.osb-btn-ghost {
    background-color: var(--osb-btn-alt-bg);
    color: var(--osb-btn-alt-text);
    border: 2px solid var(--osb-btn-alt-border);
    box-shadow: none;
    margin-bottom: 20px;
}

.osb-container .osb-btn.osb-btn-ghost:hover {
    background-color: var(--osb-btn-ghost-bg-hover);
    color: var(--osb-btn-ghost-text-hover);
    border-color: var(--osb-btn-ghost-border-hover);
    transform: translateY(-1px);
}

/* =========================================
   4. CHECK BUTTON (Check Availability)
   ========================================= */
.osb-container .osb-btn.osb-btn-check {
    background-color: var(--osb-btn-check-bg);
    color: var(--osb-btn-check-text);
    border: none;
    box-shadow: 0 2px 8px var(--osb-btn-check-shadow);
}

.osb-container .osb-btn.osb-btn-check:hover {
    background-color: var(--osb-btn-check-bg-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--osb-btn-check-shadow);
}

/* =========================================
   5. SUMMARY BUTTON (View Summary)
   ========================================= */
.osb-container .osb-btn.osb-btn-summary {
    background-color: var(--osb-btn-summary-bg);
    color: var(--osb-btn-summary-text);
    border: 1px solid var(--osb-btn-summary-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);

    /* Multi-line support — !important for Elementor */
    flex-direction: column !important;
    line-height: 1.4;
}

.osb-container .osb-btn.osb-btn-summary:hover {
    background-color: var(--osb-btn-summary-bg-hover);
    border-color: var(--osb-interactive, #089383);
    color: var(--osb-interactive-dark, #006666);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Summary Button Subtext */
.osb-container .osb-btn.osb-btn-summary .osb-btn-subtext,
.osb-container .osb-btn.osb-btn-summary .osb-btn__subtext {
    font-size: var(--osb-text-sm);
    font-weight: var(--osb-font-medium);
    display: block;
    margin-top: 4px;
}

/* =========================================
   6. ALTERNATIVE BUTTON (See Alternative)
   ========================================= */
.osb-container .osb-btn.osb-btn-alt {
    background-color: var(--osb-btn-alt-bg);
    color: var(--osb-btn-alt-text);
    border: 2px solid var(--osb-btn-alt-border);
    box-shadow: none;

    /* Multi-line support — !important for Elementor */
    flex-direction: column !important;
    line-height: 1.4;
}

.osb-container .osb-btn.osb-btn-alt:hover {
    background-color: var(--osb-btn-alt-bg-hover);
    border-color: var(--osb-interactive, #007F7F);
    color: var(--osb-interactive-dark, #006666);
    transform: translateY(-1px);
}

/* Alternative Button Subtext */
.osb-container .osb-btn.osb-btn-alt .osb-btn-subtext,
.osb-container .osb-btn.osb-btn-alt .osb-btn__subtext {
    font-size: var(--osb-text-sm);
    font-weight: var(--osb-font-medium);
    display: block;
    margin-top: 4px;
}

/* =========================================
   7. SUGGESTION BUTTON (Warm Gold)
   ========================================= */
.osb-container .osb-btn.osb-btn-suggest {
    background-color: var(--osb-btn-suggest-bg);
    color: var(--osb-btn-suggest-text);
    border: 2px solid var(--osb-btn-suggest-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);

    /* Multi-line support — !important for Elementor */
    flex-direction: column !important;
    line-height: 1.4;
}

.osb-container .osb-btn.osb-btn-suggest:hover {
    background-color: var(--osb-btn-suggest-bg-hover);
    border-color: var(--osb-btn-suggest-border-hover, #E5B84A);
    color: var(--osb-btn-suggest-text-hover, #8B6914);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Suggestion Button Subtext */
.osb-container .osb-btn.osb-btn-suggest .osb-btn-subtext {
    font-size: 12px;
    font-weight: 500;
    display: block;
    margin-top: 4px;
}

/* =========================================
   8. MINI BUTTON (Compact Size)
   ========================================= */
.osb-container .osb-btn.osb-btn-mini {
    padding: var(--osb-btn-padding-mini);
    font-size: var(--osb-btn-font-size-mini);
    width: auto !important; /* Override 100% width from base */
}

/* =========================================
   9. STEPPER BUTTONS (+ / -)
   Uses --osb-* tokens — theme remaps via .osb-product-page.
   ========================================= */
.osb-container .osb-stepper-btn {
    background-color: var(--osb-surface-bg, #f0f0f0);
    color: var(--osb-text-dark, #555555);
    border: 1px solid var(--osb-border, #cccccc);
    padding: 0;
    /* Elementor compat — !important on dimensions */
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 0;
}

.osb-container .osb-stepper-btn:hover {
    background-color: var(--osb-interactive, #e0e0e0);
    color: var(--osb-text-white, #ffffff);
}

/* Minus Button (Left) */
.osb-container .osb-stepper-btn.osb-stepper-minus {
    border-radius: 4px 0 0 4px;
    border-right: none;
}

/* Plus Button (Right) */
.osb-container .osb-stepper-btn.osb-stepper-plus {
    border-radius: 0 4px 4px 0;
    border-left: none;
}

/* =========================================
   10. LOADING STATE
   ========================================= */
.osb-container .osb-btn.osb-btn-loading {
    position: relative;
    pointer-events: none;
    color: transparent;
}

.osb-container .osb-btn.osb-btn-loading::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    top: 50%;
    left: 50%;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: osb-btn-spin 0.6s linear infinite;
}

/* Dark spinner for light buttons */
.osb-container .osb-btn.osb-btn-ghost.osb-btn-loading::after,
.osb-container .osb-btn.osb-btn-summary.osb-btn-loading::after,
.osb-container .osb-btn.osb-btn-alt.osb-btn-loading::after,
.osb-container .osb-btn.osb-btn-suggest.osb-btn-loading::after {
    border-color: rgba(0, 0, 0, 0.2);
    border-top-color: var(--osb-interactive, #007F7F);
}

@keyframes osb-btn-spin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================
   11. BUTTON GROUP (Actions Container)
   ========================================= */
.osb-container .osb-btn-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px;
    margin-top: 16px;
    width: 100%;
}

/* Horizontal variant */
.osb-container .osb-btn-group.osb-btn-group-row {
    flex-direction: row !important;
}

.osb-container .osb-btn-group.osb-btn-group-row > .osb-btn {
    flex: 1;
}

/* =========================================
   12. MOBILE RESPONSIVE
   ========================================= */
@media (max-width: 768px) {
    .osb-container .osb-btn {
        padding: 16px 20px;
        font-size: 15px;
    }

    .osb-container .osb-btn.osb-btn-mini {
        padding: 10px 14px;
        font-size: 13px;
    }

    /* Stack buttons on mobile */
    .osb-container .osb-btn-group.osb-btn-group-row {
        flex-direction: column !important;
    }
}

/* =========================================
   13. LEGACY COMPATIBILITY (Temporary)
   Remove after all templates are updated
   ========================================= */
.osb-container .osb-btn-primary {
    background-color: var(--osb-btn-cta-bg);
    color: var(--osb-btn-cta-text);
}

.osb-container .osb-btn-secondary,
.osb-container .osb-back-to-selection-button {
    background-color: var(--osb-btn-alt-bg);
    color: var(--osb-btn-alt-text);
    border: 2px solid var(--osb-btn-alt-border);
    margin-bottom: 20px;
}

.osb-container .osb-btn-secondary:hover,
.osb-container .osb-back-to-selection-button:hover {
    background-color: var(--osb-btn-alt-bg-hover);
    border-color: var(--osb-brand-primary-dark);
    color: var(--osb-brand-primary-dark);
    transform: translateY(-1px);
}

.osb-container .osb-check-btn {
    background-color: var(--osb-btn-cta-bg);
    color: var(--osb-btn-cta-text);
    box-shadow: 0 4px 6px var(--osb-btn-cta-shadow);
}

.osb-container .osb-add-to-cart-button {
    background-color: var(--osb-btn-cta-bg);
    color: var(--osb-btn-cta-text);
}

/* ============================================
   Button with Subtext (two-line buttons)
   ============================================ */
.osb-container .osb-btn.osb-btn--with-subtext {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.4;
    padding: 16px 24px;
    min-height: 70px;
    gap: 4px;
}

.osb-container .osb-btn .osb-btn__subtext {
    display: block;
    font-size: var(--osb-text-sm);
    font-weight: var(--osb-font-medium);
    opacity: 0.9;
    margin-top: 2px;
}


/* === forms.css === */
/* OSAC v2 – FORM STYLES (Cleaned Version)
 * Uses --osb-* tokens so theme can remap via .osb-product-page
 * No !important on colors/fonts — theme overrides work naturally
 */

/* ============================================================
   1. GRID & LAYOUT
   ============================================================ */
.osb-quantity-persons-wrapper,
.osb-date-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px;
    margin-bottom: var(--osb-space-3, 12px);
    width: 100%;
}

.osb-field-group {
    flex: 1 1 calc(50% - 8px);
    min-width: 140px;
    margin: 0;
}

.osb-label,
.osb-field-group label,
.osb-form-group label {
    display: block;
    margin-bottom: var(--osb-space-2, 6px);
    font-weight: var(--osb-font-semibold, 600);
    color: var(--osb-text-dark, #1C2E3F);
    font-family: var(--osb-font-primary, 'Plus Jakarta Sans', sans-serif);
    font-size: 11px;
    letter-spacing: 0.08em;
    line-height: 1.4;
    min-height: 22px;
}

/* ============================================================
   2. STEPPER CONTAINER
   ============================================================ */
.osb-stepper-input-wrapper,
.osb-input,
.flatpickr-input {
    box-sizing: border-box;
    height: 44px;
    background: var(--osb-surface, #ffffff);
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-md, 8px);
    font-size: var(--osb-text-base, 16px);
    color: var(--osb-text-main, #333333);
    box-shadow: none;
    margin: 0;
    padding: 0;
}

.osb-stepper-input-wrapper {
    display: flex !important;
    align-items: stretch !important;
    overflow: hidden;
    padding: 0;
    transition: var(--osb-transition-normal, 0.2s ease);
}

/* Hover Effect — individual button hover only, no group-level tinting */
/* (Group-level hover removed — caused specificity conflicts with theme overrides) */

/* Number Input */
.osb-stepper-input-wrapper input {
    flex-grow: 1;
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    text-align: center;
    font-weight: var(--osb-font-medium, 500);
    font-size: 15px;
    padding: 0;
    margin: 0;
    color: var(--osb-text-dark, #222222);
}

.osb-stepper-input-wrapper input::-webkit-outer-spin-button,
.osb-stepper-input-wrapper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ============================================================
   3. STEPPER BUTTONS (+ / -)
   No !important on colors — theme remaps --osb-surface-bg,
   --osb-text-dark, --osb-interactive via token mapping.
   ============================================================ */
.osb-stepper-button,
.osb-minus-button,
.osb-plus-button {
    width: 36px;
    min-width: 36px;
    height: 100%;
    padding: 0;
    border: none;
    border-radius: 0;
    margin: 0;
    box-shadow: none;
    cursor: pointer;
    background-color: var(--osb-surface-bg, #f8f6f2);
    color: var(--osb-text-dark, #1C2E3F);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--osb-font-primary, 'Plus Jakarta Sans', sans-serif);
    font-size: 16px;
    font-weight: var(--osb-font-normal, 400);
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.osb-stepper-button:hover,
.osb-minus-button:hover,
.osb-plus-button:hover {
    background-color: var(--osb-interactive, #B8856C);
    color: #FFFFFF;
}

.osb-minus-button {
    border-radius: var(--osb-radius-md, 8px) 0 0 var(--osb-radius-md, 8px);
}

.osb-plus-button {
    border-radius: 0 var(--osb-radius-md, 8px) var(--osb-radius-md, 8px) 0;
}

.osb-stepper-input-wrapper .osb-minus-button,
.osb-stepper-input-wrapper .osb-plus-button {
    height: 100%;
    padding: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Elementor compat: explicit heights prevent Elementor column stretch.
   !important kept on height/min-height only — Elementor injects inline styles. */
.osb-stepper-input-wrapper {
    height: 50px !important;
    min-height: 50px !important;
}

.osb-stepper-input-wrapper .osb-stepper-button,
.osb-stepper-input-wrapper .osb-minus-button,
.osb-stepper-input-wrapper .osb-plus-button {
    height: 48px !important;
    min-height: 48px !important;
    line-height: 48px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0;
    border: none;
    box-shadow: none;
}

/* ============================================================
   4. EXTRA BEDS & READONLY
   ============================================================ */
.osb-stepper-input-wrapper input[readonly],
.osb-stepper-input-wrapper.osb-readonly {
    background-color: var(--osb-surface-alt, #f8f6f2);
    color: var(--osb-text-muted, #666666);
    pointer-events: none;
}

.osb-stepper-input-wrapper.osb-readonly {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
}

.osb-input.flatpickr-input[readonly] {
    pointer-events: auto;
    background-color: var(--osb-surface, #ffffff);
    cursor: pointer;
}

/* ============================================================
   5. DATEPICKER STYLING
   ============================================================ */
html body .osb-date-wrapper input.flatpickr-input,
html body input.osb-input.flatpickr-input,
html body input.flatpickr-input.form-control,
html body input.flatpickr-input {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 0 15px !important;
    line-height: 48px !important;
    font-size: var(--osb-text-base, 16px) !important;
    background-color: var(--osb-surface, #ffffff) !important;
    border: 1px solid var(--osb-border, #e2ddd5) !important;
    border-radius: var(--osb-radius-md, 8px) !important;
    box-shadow: none !important;
    color: var(--osb-text-main, #333333) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    opacity: 1 !important;
    transition: var(--osb-transition-normal, 0.2s ease) !important;
}

html body .osb-date-wrapper input.flatpickr-input:hover,
html body input.osb-input.flatpickr-input:hover,
html body input.flatpickr-input:hover {
    border-color: var(--osb-interactive, #B8856C) !important;
}

html body .osb-date-wrapper input.flatpickr-input:focus,
html body input.osb-input.flatpickr-input:focus,
html body input.flatpickr-input:focus {
    border-color: var(--osb-interactive, #B8856C) !important;
    box-shadow: 0 0 0 3px var(--osb-interactive-ring) !important;
    outline: none !important;
}

html body input.flatpickr-input[readonly] {
    background-color: var(--osb-surface, #ffffff) !important;
    cursor: pointer !important;
    opacity: 1 !important;
}

html body .flatpickr-input::placeholder {
    color: var(--osb-text-muted, #6B7280) !important;
    opacity: 1 !important;
}

.flatpickr-calendar {
    z-index: 9999 !important;
}

/* ============================================================
   6. MOBILE
   ============================================================ */
@media (max-width: 600px) {
    .osb-field-group {
        flex: 1 1 calc(50% - 5px) !important;
        margin-bottom: var(--osb-space-3, 10px) !important;
        min-width: 130px !important;
    }

    .osb-date-wrapper .osb-field-group {
        flex: 1 1 100% !important;
    }

    .osb-quantity-persons-wrapper {
        gap: var(--osb-space-3, 10px) !important;
    }

    .osb-date-wrapper {
        gap: 0 !important;
    }
}

/* ============================================================
   7. STAFF/ADMIN STYLES
   ============================================================ */
.osb-guest-details-form {
    background-color: var(--osb-surface-alt, #f8f6f2) !important;
    border: 1px solid var(--osb-border, #e2ddd5) !important;
    border-radius: var(--osb-radius-md, 8px) !important;
    padding: var(--osb-space-5, 20px) !important;
    margin-top: var(--osb-space-5, 20px) !important;
}

.osb-guest-details-title {
    margin: 0 0 15px 0 !important;
    font-size: 1.1em !important;
    font-weight: var(--osb-font-bold, 700) !important;
    color: var(--osb-text-dark, #222222) !important;
    border-bottom: 1px solid var(--osb-border-light, #ece8e0) !important;
    padding-bottom: var(--osb-space-2, 8px) !important;
}

.osb-form-row {
    display: flex !important;
    gap: var(--osb-space-5, 20px) !important;
    margin-bottom: var(--osb-space-3, 10px) !important;
}

/* Override: allow hiding form rows via class (beats display:flex !important) */
.osb-form-row.osb-hidden {
    display: none !important;
}

.osb-form-group {
    flex: 1 !important;
    position: relative !important;
    min-width: 0 !important;
}

.osb-form-group label {
    display: block !important;
    margin-bottom: 5px !important;
    font-weight: var(--osb-font-semibold, 600) !important;
    font-size: 0.9em !important;
    color: var(--osb-text-muted, #666666) !important;
}

.osb-booker-info {
    background-color: var(--osb-brand-primary-light, #e8f1f7) !important;
    border: 1px solid var(--osb-brand-primary-light, #e8f1f7) !important;
    color: var(--osb-brand-primary, #26577C) !important;
    padding: var(--osb-space-3, 10px) !important;
    border-radius: var(--osb-radius-md, 6px) !important;
    margin-bottom: 15px !important;
    text-align: center !important;
    font-weight: var(--osb-font-semibold, 600) !important;
    font-size: 0.9em !important;
}

/* Staff Form: 50/50 Layout */
html body .osb-guest-details-form .osb-form-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--osb-space-5, 20px) !important;
    width: 100% !important;
}

/* Hidden state: override display:flex when JS hides a row */
html body .osb-guest-details-form .osb-form-row.osb-hidden {
    display: none !important;
}

html body .osb-guest-details-form .osb-form-row .osb-form-group {
    flex: 1 1 calc(50% - 10px) !important;
    min-width: 200px !important;
    max-width: none !important;
}

html body .osb-guest-details-form .osb-form-row .osb-form-group .osb-input {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: var(--osb-space-3, 12px) 15px !important;
}

html body .osb-guest-details-form .osb-form-group--full {
    flex: 1 1 100% !important;
    width: 100% !important;
}

html body .osb-guest-details-form textarea.osb-input {
    width: 100% !important;
    min-height: 80px !important;
    resize: vertical !important;
    padding: var(--osb-space-3, 12px) 15px !important;
    line-height: 1.5 !important;
    height: auto !important;
    box-sizing: border-box !important;
}

html body .osb-booking-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--osb-space-3, 12px) !important;
    margin-top: var(--osb-space-5, 20px) !important;
}

html body .osb-booking-actions .osb-btn {
    margin: 0 !important;
}

/* ============================================================
   8. GUEST SEARCH DROPDOWN
   ============================================================ */
.osb-search-results {
    display: none;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    background: var(--osb-surface, #ffffff) !important;
    border: 1px solid var(--osb-border, #e2ddd5) !important;
    border-radius: 0 0 var(--osb-radius-md, 6px) var(--osb-radius-md, 6px) !important;
    z-index: 99999 !important;
    max-height: 250px !important;
    overflow-y: auto !important;
    box-shadow: var(--osb-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1)) !important;
}

.osb-result-item {
    padding: var(--osb-space-3, 12px) 15px !important;
    cursor: pointer !important;
    border-bottom: 1px solid var(--osb-border-light, #ece8e0) !important;
    font-size: var(--osb-text-sm, 14px) !important;
    color: var(--osb-text-main, #333333) !important;
}

.osb-result-item:hover {
    background-color: var(--osb-brand-primary-light, #e8f1f7) !important;
    color: var(--osb-brand-primary, #26577C) !important;
}

/* ============================================================
   9. HOLD OPTIONS (Clean Design - No Yellow)
   ============================================================ */
.osb-hold-options,
.osb-hold-options-wrapper {
    margin-top: var(--osb-space-3, 12px);
    padding: var(--osb-space-4, 16px);
    background-color: var(--osb-surface, #ffffff);
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-md, 8px);
}

.osb-hold-options-wrapper {
    display: none;
}

.osb-hold-options__title {
    margin: 0 0 var(--osb-space-3, 12px) 0;
    font-weight: var(--osb-font-semibold, 600);
    font-size: var(--osb-text-sm, 14px);
    color: var(--osb-text-muted, #666666);
}

.osb-hold-options__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--osb-space-2, 8px);
}

@media (max-width: 480px) {
    .osb-hold-options__grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   9b. RADIO & CHECKBOX
   ============================================================ */
.osb-radio,
.osb-checkbox {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--osb-space-2, 8px);
    padding: var(--osb-space-3, 12px);
    background-color: var(--osb-surface, #ffffff);
    border: 2px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-md, 8px);
    cursor: pointer;
    transition: var(--osb-transition-normal, 0.2s ease);
    font-size: var(--osb-text-sm, 14px);
    font-weight: var(--osb-font-medium, 500);
    color: var(--osb-text-main, #333333);
}

.osb-radio:hover,
.osb-checkbox:hover {
    border-color: var(--osb-brand-primary, #26577C);
    background-color: var(--osb-brand-primary-light, #e8f1f7);
}

.osb-radio--active,
.osb-checkbox--active,
.osb-radio.active,
.osb-checkbox.active {
    border-color: var(--osb-brand-primary, #26577C);
    background-color: var(--osb-brand-primary-light, #e8f1f7);
    color: var(--osb-brand-primary, #26577C);
}

.osb-radio input[type="radio"],
.osb-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
    z-index: 1;
    margin: 0;
}

.osb-radio__indicator {
    width: 18px;
    height: 18px;
    border: 2px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-full, 50%);
    background: var(--osb-surface, #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--osb-transition-normal, 0.2s ease);
}

.osb-radio--active .osb-radio__indicator,
.osb-radio.active .osb-radio__indicator {
    border-color: var(--osb-brand-primary, #26577C);
    background-color: var(--osb-brand-primary, #26577C);
}

.osb-radio--active .osb-radio__indicator::after,
.osb-radio.active .osb-radio__indicator::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: var(--osb-radius-full, 50%);
    background: var(--osb-text-white, #ffffff);
}

.osb-checkbox__indicator {
    width: 18px;
    height: 18px;
    border: 2px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-sm, 4px);
    background: var(--osb-surface, #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--osb-transition-normal, 0.2s ease);
}

.osb-checkbox--active .osb-checkbox__indicator,
.osb-checkbox.active .osb-checkbox__indicator {
    border-color: var(--osb-brand-primary, #26577C);
    background-color: var(--osb-brand-primary, #26577C);
}

.osb-checkbox--active .osb-checkbox__indicator::after,
.osb-checkbox.active .osb-checkbox__indicator::after {
    content: '✓';
    color: var(--osb-text-white, #ffffff);
    font-size: 12px;
    font-weight: var(--osb-font-bold, 700);
}

.osb-radio__text,
.osb-checkbox__text {
    flex: 1;
}

.osb-radio--sm,
.osb-checkbox--sm {
    padding: var(--osb-space-2, 8px);
    font-size: var(--osb-text-xs, 12px);
}

.osb-radio--sm .osb-radio__indicator,
.osb-checkbox--sm .osb-checkbox__indicator {
    width: 14px;
    height: 14px;
}

/* ============================================================
   9c. FORM SECTION
   ============================================================ */
.osb-form-section {
    margin-bottom: var(--osb-space-4, 16px);
}

.osb-form-section--nested {
    padding: var(--osb-space-4, 16px);
    background-color: var(--osb-surface-alt, #f8f6f2);
    border-radius: var(--osb-radius-md, 8px);
    border: 1px solid var(--osb-border-light, #ece8e0);
}

.osb-form-label {
    display: block;
    margin-bottom: var(--osb-space-2, 8px);
    font-weight: var(--osb-font-semibold, 600);
    font-size: var(--osb-text-sm, 14px);
    color: var(--osb-text-main, #333333);
}

.osb-form-label--muted {
    color: var(--osb-text-muted, #666666);
    font-weight: var(--osb-font-medium, 500);
}

.osb-form-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--osb-space-2, 8px);
}

.osb-form-options--vertical {
    flex-direction: column;
}

.osb-form-options--grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

/* ============================================================
   9d. FOC SECTION (Clean Design - No Yellow)
   ============================================================ */
.osb-foc-section {
    margin-top: var(--osb-space-4, 16px);
    padding: var(--osb-space-4, 16px);
    background-color: var(--osb-surface, #ffffff);
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-md, 8px);
}

.osb-foc-question {
    margin: 0 0 var(--osb-space-3, 12px) 0;
    font-weight: var(--osb-font-medium, 500);
    font-size: var(--osb-text-sm, 14px);
    color: var(--osb-text-muted, #666666);
}

.osb-foc-buttons {
    display: flex;
    gap: var(--osb-space-2, 8px);
}

.osb-foc-buttons .osb-btn {
    flex: 1;
}

/* ============================================================
   9e. BOOKING STATUS TOGGLE (Clean Blue Design)
   ============================================================ */
.osb-booking-status {
    display: flex;
    gap: var(--osb-space-2, 8px);
    padding: var(--osb-space-3, 12px);
    background-color: var(--osb-surface-alt, #f8f6f2);
    border-radius: var(--osb-radius-md, 8px);
}

.osb-booking-status__option {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--osb-space-2, 8px);
    padding: var(--osb-space-3, 12px);
    background-color: var(--osb-surface, #ffffff);
    border: 2px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-md, 8px);
    cursor: pointer;
    transition: var(--osb-transition-normal, 0.2s ease);
    font-weight: var(--osb-font-medium, 500);
    font-size: var(--osb-text-sm, 14px);
    color: var(--osb-text-muted, #666666);
}

.osb-booking-status__option:hover {
    border-color: var(--osb-brand-primary, #26577C);
    background-color: var(--osb-brand-primary-tint, rgba(38, 87, 124, 0.06));
}

.osb-booking-status__option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
    z-index: 1;
    margin: 0;
}

.osb-booking-status__option svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Both Confirmed and Hold: Same blue style when selected */
.osb-booking-status__option--confirmed:has(input:checked),
.osb-booking-status__option--confirmed.osb-booking-status__option--selected,
.osb-booking-status__option--hold:has(input:checked),
.osb-booking-status__option--hold.osb-booking-status__option--selected {
    border-color: var(--osb-brand-primary, #26577C) !important;
    background-color: var(--osb-brand-primary-light, #e8f1f7) !important;
    color: var(--osb-brand-primary, #26577C) !important;
}

/* Legacy active class (for JS toggle) */
.osb-booking-status__option--active {
    border-color: var(--osb-brand-primary, #26577C) !important;
    background-color: var(--osb-brand-primary-light, #e8f1f7) !important;
    color: var(--osb-brand-primary, #26577C) !important;
}

.osb-booking-status__icon {
    font-size: 1.2em;
}

/* ============================================================
   10. GUEST TAGS
   ============================================================ */
.osb-selected-guests {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--osb-space-2, 8px) !important;
    margin-top: 5px !important;
    min-height: 0 !important;
}

.osb-guest-tag {
    display: inline-flex !important;
    align-items: center !important;
    background-color: var(--osb-brand-primary-light, #e8f1f7) !important;
    color: var(--osb-brand-primary, #26577C) !important;
    border: 1px solid var(--osb-brand-primary-light, #e8f1f7) !important;
    border-radius: var(--osb-radius-full, 9999px) !important;
    padding: 4px var(--osb-space-3, 12px) !important;
    font-size: 13px !important;
    font-weight: var(--osb-font-semibold, 600) !important;
}

.osb-tag-name {
    font-weight: var(--osb-font-medium, 500) !important;
    margin-right: 4px !important;
}

.osb-tag-email {
    font-size: 0.9em !important;
    color: var(--osb-text-muted, #666666) !important;
    margin-right: var(--osb-space-2, 6px) !important;
}

.osb-remove-tag-btn {
    background: transparent !important;
    border: none !important;
    color: var(--osb-brand-primary, #26577C) !important;
    margin-left: var(--osb-space-2, 6px) !important;
    font-size: var(--osb-text-base, 16px) !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 0 !important;
    display: flex !important;
}

.osb-remove-tag-btn:hover {
    color: var(--osb-error, #ef4444) !important;
}

/* ============================================================
   11. LABEL COLOR FIX
   ============================================================ */
.osb-container .osb-form-group label,
.osb-container .osb-field-group label,
.osb-container label {
    color: var(--osb-text-dark, #1C2E3F) !important;
    font-family: var(--osb-font-primary) !important;
    font-weight: var(--osb-font-semibold, 600) !important;
    font-size: 11px !important;
    letter-spacing: 0.3px !important;
}

/* ============================================================
   12. PRODUCT PAGE EMBED (.osb-product-embed)
   When the booking form is embedded on a product page (accommodation,
   course), all wizard chrome (breadcrumbs, steps, nav) is skipped
   in PHP. The remaining wrappers are flattened so ONLY the
   .osb-custom-picker-section provides the visual card.
   ============================================================ */

/* Flatten all intermediate wrappers to transparent/zero */
.osb-product-embed .osb-wizard,
.osb-product-embed .osb-wizard__body,
.osb-product-embed .osb-wizard__step,
.osb-product-embed .osb-wizard__step-content {
    background: transparent;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    min-height: 0;
    overflow: visible;
}

/* All wizard steps visible — preview.js toggles sections directly */
.osb-product-embed .osb-wizard__step {
    display: block;
}

/* Preview/result section — visible card with padding + dark text */
.osb-product-embed .osb-booking-preview-section {
    background: var(--osb-surface-bg-alt, #F7F4EF);
    border-radius: var(--osb-radius-lg, 12px);
    padding: 24px;
    color: var(--osb-text-dark, #1C2E3F);
}

.osb-product-embed .osb-booking-preview-section * {
    color: inherit;
}

.osb-product-embed .osb-booking-preview-section .osac-summary-row__label {
    color: var(--osb-text-muted, #6B7280);
}

.osb-product-embed .osb-booking-preview-section .osb-btn {
    color: var(--osb-btn-cta-text, #fff);
}

/* The form section — no card styling, just content */
.osb-product-embed .osb-custom-picker-section {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.osb-product-embed .osb-section-header {
    margin-bottom: var(--osb-space-2, 8px);
}

.osb-product-embed .osb-grid-2 {
    margin-bottom: 16px;
    gap: var(--osb-space-4, 16px);
}

.osb-product-embed .osb-actions {
    margin-top: 16px;
}

/* ============================================================
   13. LABEL BADGES
   ============================================================ */
.osb-label-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--osb-surface-bg, #f8f6f2) !important;
    color: var(--osb-text-muted, #6B7280) !important;
    border: 1px solid var(--osb-border, #e2ddd5) !important;
    font-family: var(--osb-font-primary);
    font-size: 10px;
    font-weight: var(--osb-font-semibold, 600);
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
    text-transform: uppercase;
}

/* ============================================================
   14. SECTION HEADERS
   ============================================================ */
.osb-section-header {
    margin-bottom: var(--osb-space-2, 8px);
    padding-bottom: var(--osb-space-2, 8px);
    border-bottom: 1px solid var(--osb-border-light, #ece8e0);
}

.osb-section-header h4 {
    margin: 0 0 4px 0;
    font-family: var(--osb-font-display);
    font-size: 22px;
    font-weight: var(--osb-font-semibold, 600);
    color: var(--osb-text-dark, #1C2E3F);
    letter-spacing: 0;
}

.osb-section-header small {
    font-family: var(--osb-font-primary);
    font-size: 13px;
    font-weight: 400;
    color: var(--osb-text-muted, #6B7280);
    letter-spacing: 0;
    display: block;
}

/* ============================================================
   15. READONLY STEPPER
   ============================================================ */
.osb-stepper-readonly {
    background-color: var(--osb-surface-alt, #f8f6f2);
    border: 1px solid var(--osb-border, #e2ddd5);
    cursor: default;
}

.osb-stepper-readonly input {
    color: var(--osb-text-main, #333333);
    font-weight: var(--osb-font-semibold, 600);
    background: transparent;
}

.osb-label-muted {
    color: var(--osb-text-muted, #666666);
    font-weight: var(--osb-font-medium, 500);
}

/* ============================================================
   16. AGENCY CONTACT FIELDS (Read-only)
   ============================================================ */
.osac-agency-section .osb-form-group input[readonly],
.osac-agency-section input[readonly] {
    background-color: var(--osb-success-light, #d1fae5) !important;
    border: 1px solid var(--osb-success, #10b981) !important;
    color: var(--osb-success-dark, #059669) !important;
    cursor: default !important;
}

.osac-agency-section .osb-form-group input[readonly]:hover,
.osac-agency-section input[readonly]:hover,
.osac-agency-section .osb-form-group input[readonly]:focus,
.osac-agency-section input[readonly]:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--osb-success, #10b981) !important;
}

.osac-agency-section h4 {
    font-size: 1rem !important;
    font-weight: var(--osb-font-semibold, 600) !important;
    color: var(--osb-text-dark, #222222) !important;
    margin: 0 0 var(--osb-space-3, 12px) 0 !important;
}

/* ============================================================
   16b. GUEST CONTACT FIELDS (Read-only)
   ============================================================ */
.osac-guest-section .osb-form-group input[readonly],
.osac-guest-section input[readonly] {
    background-color: var(--osb-success-light, #d1fae5) !important;
    border: 1px solid var(--osb-success, #10b981) !important;
    color: var(--osb-success-dark, #059669) !important;
    cursor: default !important;
}

.osac-guest-section .osb-form-group input[readonly]:hover,
.osac-guest-section input[readonly]:hover,
.osac-guest-section .osb-form-group input[readonly]:focus,
.osac-guest-section input[readonly]:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--osb-success, #10b981) !important;
}

/* ============================================================
   17. AGENCY COMMISSION BOX
   ============================================================ */
.osac-agency-commission {
    margin-top: 15px;
    background: linear-gradient(135deg, var(--osb-brand-primary-light, #e8f1f7) 0%, var(--osb-surface-alt, #f8f6f2) 100%);
    border: 1px solid var(--osb-border, #e2ddd5);
    border-left: 5px solid var(--osb-brand-primary, #26577C);
    border-radius: var(--osb-radius-md, 8px);
    padding: var(--osb-space-5, 20px);
    position: relative;
}

.osac-agency-commission::before {
    content: 'Agency Pricing';
    display: block;
    font-size: 0.75em;
    font-weight: var(--osb-font-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--osb-brand-primary, #26577C);
    margin-bottom: var(--osb-space-3, 12px);
    padding-bottom: var(--osb-space-2, 8px);
    border-bottom: 1px dashed var(--osb-border, #e2ddd5);
}

.osac-agency-commission .osb-commission-header {
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: var(--osb-space-2, 8px);
}

.osac-agency-commission .osb-commission-net-row {
    background: rgba(255, 255, 255, 0.6);
    border-radius: var(--osb-radius-md, 6px);
    padding: var(--osb-space-3, 12px);
    margin-top: var(--osb-space-3, 10px);
}

.osac-agency-commission .osb-commission-net-value {
    color: var(--osb-success-dark, #059669);
    font-size: 1.15em;
}

/* FOC Deduction Row */
.osac-foc-deduction {
    display: flex;
    justify-content: space-between;
    padding: var(--osb-space-3, 10px) var(--osb-space-3, 12px);
    margin: var(--osb-space-3, 10px) 0;
    background: var(--osb-surface, #ffffff);
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-md, 6px);
    font-size: 0.9em;
    color: var(--osb-brand-primary, #26577C);
    font-weight: var(--osb-font-medium, 500);
}

/* Savings Badge */
.osac-savings-badge {
    margin-top: var(--osb-space-3, 12px);
    padding: var(--osb-space-3, 10px) var(--osb-space-3, 12px);
    background: var(--osb-success-light, #d1fae5);
    border: 1px solid var(--osb-success, #10b981);
    border-radius: var(--osb-radius-md, 6px);
    color: var(--osb-success-dark, #059669);
    font-weight: var(--osb-font-semibold, 600);
    text-align: center;
    font-size: 0.95em;
}

/* FOC Question Box (Clean - No Yellow) */
.osac-agency-commission .osac-foc-question,
.osac-foc-question {
    margin-top: 15px;
    padding: var(--osb-space-3, 12px);
    background: var(--osb-surface, #ffffff);
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-md, 6px);
}

.osac-foc-question-text {
    margin: 0 0 var(--osb-space-3, 10px) 0;
    font-weight: var(--osb-font-medium, 500);
    color: var(--osb-text-muted, #666666);
}


/* ============================================================
   18. PENDING AGENT BLOCK (Clean - No Yellow)
   ============================================================ */
.osac-pending-agent-block {
    background: linear-gradient(135deg, var(--osb-brand-primary-light, #e8f1f7) 0%, var(--osb-surface-alt, #f8f6f2) 100%);
    border: 2px solid var(--osb-brand-primary, #26577C);
    border-radius: var(--osb-radius-lg, 12px);
    padding: 30px;
    text-align: center;
    margin: var(--osb-space-5, 20px) 0;
}

.osac-pending-agent-block__icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.osac-pending-agent-block__title {
    margin: 0 0 var(--osb-space-3, 10px) 0;
    color: var(--osb-brand-primary, #26577C);
    font-size: 1.4em;
    font-weight: var(--osb-font-bold, 700);
}

.osac-pending-agent-block__text {
    margin: 0 0 var(--osb-space-5, 20px) 0;
    color: var(--osb-text-muted, #666666);
    font-size: 1em;
    line-height: 1.6;
}

.osac-pending-agent-block__btn {
    display: inline-block;
    background: var(--osb-brand-primary, #26577C);
    color: var(--osb-text-white, #ffffff);
    padding: var(--osb-space-3, 12px) var(--osb-space-6, 24px);
    border-radius: var(--osb-radius-md, 6px);
    text-decoration: none;
    font-weight: var(--osb-font-semibold, 600);
    transition: var(--osb-transition-normal, 0.2s ease);
}

.osac-pending-agent-block__btn:hover {
    background: var(--osb-brand-primary-dark, #1e4562);
    color: var(--osb-text-white, #ffffff);
}

/* ============================================================
   AGENCY SECTION - Clean & Professional
   Add to: assets/css/v2/components/forms.css (replace old agency styles)
   ============================================================ */

/* Agent Info - Simple text */
.osac-agent-info {
    padding: var(--osb-space-3, 12px) var(--osb-space-4, 16px);
    background-color: var(--osb-surface-alt, #f8f6f2);
    border-radius: var(--osb-radius-md, 8px);
    font-size: var(--osb-text-sm, 14px);
    color: var(--osb-text-muted, #666666);
    margin-bottom: var(--osb-space-4, 16px);
}

.osac-agent-info strong {
    color: var(--osb-text-dark, #222222);
}

/* Commission Summary - Clean table-like layout */
.osac-commission-summary {
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-md, 8px);
    overflow: hidden;
    margin-bottom: var(--osb-space-4, 16px);
}

.osac-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--osb-space-3, 12px) var(--osb-space-4, 16px);
    border-bottom: 1px solid var(--osb-border-light, #ece8e0);
    font-size: var(--osb-text-sm, 14px);
}

.osac-row:last-child {
    border-bottom: none;
}

/* Deduction rows - subtle color */
.osac-row--deduction {
    color: var(--osb-text-muted, #666666);
}

.osac-row--deduction span:last-child {
    color: var(--osb-brand-primary, #26577C);
}

/* Total row - highlighted */
.osac-row--total {
    background-color: var(--osb-surface-alt, #f8f6f2);
    font-weight: var(--osb-font-semibold, 600);
}

.osac-row--total span:last-child {
    color: var(--osb-brand-primary, #26577C);
    font-size: var(--osb-text-base, 16px);
}

/* FOC Toggle - Simple inline */
.osac-foc-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--osb-space-3, 12px) var(--osb-space-4, 16px);
    background-color: var(--osb-surface-alt, #f8f6f2);
    border-radius: var(--osb-radius-md, 8px);
    font-size: var(--osb-text-sm, 14px);
    color: var(--osb-text-muted, #666666);
}

.osac-toggle-buttons {
    display: flex;
    gap: var(--osb-space-2, 8px);
}

.osac-toggle-btn {
    padding: var(--osb-space-2, 8px) var(--osb-space-4, 16px);
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-md, 8px);
    background: var(--osb-surface, #ffffff);
    color: var(--osb-text-muted, #666666);
    font-size: var(--osb-text-sm, 14px);
    font-weight: var(--osb-font-medium, 500);
    cursor: pointer;
    transition: var(--osb-transition-normal, 0.2s ease);
}

.osac-toggle-btn:hover {
    border-color: var(--osb-brand-primary, #26577C);
    color: var(--osb-brand-primary, #26577C);
}

/* Active state - Ocean Blue */
.osac-toggle-btn--active {
    background: var(--osb-brand-primary, #26577C);
    border-color: var(--osb-brand-primary, #26577C);
    color: var(--osb-text-white, #ffffff);
}

.osac-toggle-btn--active:hover {
    background: var(--osb-brand-primary-dark, #1e4562);
    border-color: var(--osb-brand-primary-dark, #1e4562);
    color: var(--osb-text-white, #ffffff);
}

/* Error text */
.osac-error-text {
    color: var(--osb-error, #ef4444);
    font-size: var(--osb-text-sm, 14px);
}

/* ============================================================
   MANUAL DISCOUNT INPUT (Staff Flow)
   ============================================================ */
.osb-manual-discount-row {
    margin-top: var(--osb-space-3, 12px);
    padding-top: var(--osb-space-3, 12px);
    border-top: 1px dashed var(--osb-border, #e2ddd5);
}

.osb-form-group--discount {
    max-width: 200px;
}

.osb-form-group--discount label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.osb-label-hint {
    font-size: 14px;
    cursor: help;
    opacity: 0.7;
}

.osb-discount-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.osb-discount-input-wrapper .osb-input {
    padding-right: 35px !important;
    text-align: right !important;
}

.osb-discount-suffix {
    position: absolute;
    right: 14px;
    color: var(--osb-text-muted, #666666);
    font-weight: var(--osb-font-semibold, 600);
    font-size: 15px;
    pointer-events: none;
}

.osb-field-note {
    display: block;
    margin-top: 6px;
    font-size: var(--osb-text-xs, 12px);
    color: var(--osb-text-muted, #666666);
    line-height: 1.4;
}

.osb-discount-note--existing {
    color: var(--osb-success, #10b981);
    font-weight: var(--osb-font-medium, 500);
}

/* Manual discount preview in dynamic section */
.osb-manual-discount-preview {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: var(--osb-radius-md, 8px);
    padding: 12px 16px;
}

.osb-manual-discount-preview .osb-info-bar__text strong {
    color: var(--osb-success, #10b981);
}

/* === wizard.css === */
/* ===================================================================
   OSAC v2 - BOOKING WIZARD (Step-by-Step with Breadcrumbs)
   ===================================================================

   Pure CSS + minimal JS wrapper around EXISTING booking sections.
   No logic changes — only show/hide steps and visual transitions.

   STRUCTURE:
   .osb-wizard
     .osb-wizard__breadcrumbs
       .osb-wizard__breadcrumb (×3)
     .osb-wizard__body
       .osb-wizard__step (wraps existing sections)
     .osb-wizard__nav

   =================================================================== */

/* =========================================
   1. WIZARD CONTAINER
   ========================================= */
.osb-wizard {
    position: relative;
    background: var(--osb-wizard-bg, var(--osb-surface, #ffffff));
    border: var(--osb-wizard-border, 1px solid var(--osb-border, #e2ddd5));
    border-radius: var(--osb-wizard-radius, var(--osb-radius-xl, 16px));
    overflow: hidden;
    box-shadow: var(--osb-wizard-shadow, 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04));
}

/* =========================================
   2. BREADCRUMB BAR (Desktop: text labels)
   ========================================= */
.osb-wizard__breadcrumbs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 20px 24px 16px;
    background: var(--osb-surface-bg, #f8f6f2);
    border-bottom: 1px solid var(--osb-border-light, #ece8e0);
}

.osb-wizard__breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    cursor: default;
    user-select: none;
}

/* Connector line between breadcrumbs */
.osb-wizard__breadcrumb + .osb-wizard__breadcrumb {
    margin-left: 0;
}

.osb-wizard__breadcrumb + .osb-wizard__breadcrumb::before {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: var(--osb-border, #e2ddd5);
    margin-right: 8px;
    flex-shrink: 0;
    transition: background 0.3s ease;
}

/* Completed connector */
.osb-wizard__breadcrumb--complete + .osb-wizard__breadcrumb::before {
    background: var(--osb-brand-accent, #14b8a6);
}

/* Step dot */
.osb-wizard__dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    transition: all 0.3s ease;
    border: 2px solid var(--osb-border, #e2ddd5);
    background: var(--osb-surface, #ffffff);
    color: var(--osb-text-muted, #6B7280);
}

/* Active dot */
.osb-wizard__breadcrumb--active .osb-wizard__dot {
    background: var(--osb-brand-accent, #14b8a6);
    border-color: var(--osb-brand-accent, #14b8a6);
    color: #ffffff;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.15);
}

/* Complete dot — checkmark */
.osb-wizard__breadcrumb--complete .osb-wizard__dot {
    background: var(--osb-brand-accent, #14b8a6);
    border-color: var(--osb-brand-accent, #14b8a6);
    color: #ffffff;
}

.osb-wizard__breadcrumb--complete .osb-wizard__dot-number {
    display: none;
}

.osb-wizard__dot-check {
    display: none;
}

.osb-wizard__breadcrumb--complete .osb-wizard__dot-check {
    display: block;
    font-size: 14px;
    line-height: 1;
}

/* Step label text */
.osb-wizard__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--osb-text-muted, #6B7280);
    letter-spacing: 0.01em;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.osb-wizard__breadcrumb--active .osb-wizard__label {
    color: var(--osb-text-dark, #1C2E3F);
}

.osb-wizard__breadcrumb--complete .osb-wizard__label {
    color: var(--osb-brand-accent, #14b8a6);
}

/* Clickable completed breadcrumbs */
.osb-wizard__breadcrumb--complete {
    cursor: pointer;
}

.osb-wizard__breadcrumb--complete:hover .osb-wizard__dot {
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.2);
}

.osb-wizard__breadcrumb--complete:hover .osb-wizard__label {
    color: var(--osb-brand-accent-dark, #0d9488);
}

/* =========================================
   3. STEP COUNTER (visible on all screens)
   ========================================= */
.osb-wizard__step-counter {
    text-align: center;
    padding: 0 24px 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--osb-text-muted, #6B7280);
    background: var(--osb-surface-bg, #f8f6f2);
    display: none;
}

/* =========================================
   4. WIZARD BODY (Step content area)
   ========================================= */
.osb-wizard__body {
    padding: 24px;
    position: relative;
    min-height: 200px;
}

/* Individual steps — always in the DOM, existing JS controls
   inner section visibility via display:none/block on the actual
   .osb-custom-picker-section and .osb-booking-preview-section.
   The wizard ONLY updates breadcrumb visuals. */
.osb-wizard__step {
    /* Visible by default — no display toggling here */
}

/* Note: Step visibility is controlled by existing preview.toggleView()
   which shows/hides .osb-custom-picker-section and .osb-booking-preview-section.
   No step animations needed — the wizard is a visual breadcrumb indicator only. */

/* =========================================
   5. WIZARD NAVIGATION (Back / Next)
   ========================================= */
.osb-wizard__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-top: 1px solid var(--osb-border-light, #ece8e0);
    background: var(--osb-surface-bg, #f8f6f2);
}

.osb-wizard__nav--single {
    justify-content: flex-end;
}

/* Back button */
.osb-wizard__back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: transparent;
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-md, 8px);
    color: var(--osb-text-muted, #6B7280);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.osb-wizard__back-btn:hover {
    border-color: var(--osb-text-muted, #6B7280);
    color: var(--osb-text-dark, #1C2E3F);
    background: var(--osb-surface, #ffffff);
}

.osb-wizard__back-btn .osb-wizard__arrow {
    font-size: 16px;
    transition: transform 0.2s ease;
}

.osb-wizard__back-btn:hover .osb-wizard__arrow {
    transform: translateX(-2px);
}

/* Hidden state for nav buttons */
.osb-wizard__back-btn--hidden,
.osb-wizard__next-btn--hidden {
    visibility: hidden;
    pointer-events: none;
}

/* =========================================
   6. MOBILE RESPONSIVE
   ========================================= */
@media (max-width: 600px) {
    /* Compact breadcrumbs: dots only */
    .osb-wizard__breadcrumbs {
        padding: 16px 20px 12px;
        gap: 0;
    }

    .osb-wizard__label {
        display: none;
    }

    .osb-wizard__dot {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }

    .osb-wizard__breadcrumb + .osb-wizard__breadcrumb::before {
        width: 28px;
    }

    /* Show step counter on mobile */
    .osb-wizard__step-counter {
        display: block;
    }

    /* Compact body */
    .osb-wizard__body {
        padding: 16px;
    }

    /* Compact nav */
    .osb-wizard__nav {
        padding: 12px 16px;
    }

    .osb-wizard__back-btn {
        padding: 8px 14px;
        font-size: 13px;
    }
}

@media (max-width: 380px) {
    .osb-wizard__breadcrumb + .osb-wizard__breadcrumb::before {
        width: 20px;
    }

    .osb-wizard__dot {
        width: 22px;
        height: 22px;
        font-size: 10px;
    }
}

/* =========================================
   7. PUBLIC WEBSITE VARIANT (Ocean Sun Theme)
   ========================================= */
.osb-public-view .osb-wizard,
.osb-guest-view .osb-wizard {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}

/* Breadcrumbs on product pages: skipped in PHP via $isProductPage check */

.osb-public-view .osb-wizard__breadcrumbs,
.osb-guest-view .osb-wizard__breadcrumbs {
    background: var(--os-bg-cream, #faf6ef);
}

.osb-public-view .osb-wizard__dot,
.osb-guest-view .osb-wizard__dot {
    border-color: var(--os-border, #e2ddd5);
}

/* Public: Use terracotta accent instead of teal */
.osb-public-view .osb-wizard__breadcrumb--active .osb-wizard__dot,
.osb-guest-view .osb-wizard__breadcrumb--active .osb-wizard__dot {
    background: var(--os-cta, #B8856C);
    border-color: var(--os-cta, #B8856C);
    box-shadow: 0 0 0 4px rgba(184, 133, 108, 0.15);
}

.osb-public-view .osb-wizard__breadcrumb--complete .osb-wizard__dot,
.osb-guest-view .osb-wizard__breadcrumb--complete .osb-wizard__dot {
    background: var(--os-cta, #B8856C);
    border-color: var(--os-cta, #B8856C);
}

.osb-public-view .osb-wizard__breadcrumb--complete + .osb-wizard__breadcrumb::before,
.osb-guest-view .osb-wizard__breadcrumb--complete + .osb-wizard__breadcrumb::before {
    background: var(--os-cta, #B8856C);
}

.osb-public-view .osb-wizard__breadcrumb--complete .osb-wizard__label,
.osb-guest-view .osb-wizard__breadcrumb--complete .osb-wizard__label {
    color: var(--os-cta, #B8856C);
}

.osb-public-view .osb-wizard__breadcrumb--complete:hover .osb-wizard__dot,
.osb-guest-view .osb-wizard__breadcrumb--complete:hover .osb-wizard__dot {
    box-shadow: 0 0 0 4px rgba(184, 133, 108, 0.2);
}

.osb-public-view .osb-wizard__breadcrumb--complete:hover .osb-wizard__label,
.osb-guest-view .osb-wizard__breadcrumb--complete:hover .osb-wizard__label {
    color: var(--os-cta-hover, #a0705a);
}

/* Public: Display font for labels */
.osb-public-view .osb-wizard__label,
.osb-guest-view .osb-wizard__label {
    font-family: var(--os-font-body, 'Plus Jakarta Sans', sans-serif);
}

/* Public: Nav uses theme bg */
.osb-public-view .osb-wizard__nav,
.osb-guest-view .osb-wizard__nav {
    background: var(--os-bg-cream, #faf6ef);
    border-color: var(--os-border, #e2ddd5);
}

.osb-public-view .osb-wizard__step-counter,
.osb-guest-view .osb-wizard__step-counter {
    background: var(--os-bg-cream, #faf6ef);
}

/* =========================================
   8. REDUCED MOTION
   ========================================= */
@media (prefers-reduced-motion: reduce) {
    .osb-wizard__dot,
    .osb-wizard__label,
    .osb-wizard__back-btn,
    .osb-wizard__breadcrumb + .osb-wizard__breadcrumb::before {
        transition: none;
    }
}

/* =========================================
   9. WIZARD INNER SECTION OVERRIDES
   Inside wizard, remove margin/padding from
   existing sections since the wizard handles spacing.
   ========================================= */
.osb-wizard__step .osb-section,
.osb-wizard__step .osb-custom-picker-section {
    padding: 0;
    margin: 0;
}

.osb-wizard__step .osb-section > .osb-section-header:first-child {
    margin-top: 0;
}

/* Remove result container margin when inside wizard */
.osb-wizard__step .osb-result {
    margin-top: var(--osb-space-4, 16px);
}

/* Preview section inside wizard — no extra padding */
.osb-wizard__step .osb-booking-preview-section {
    padding: 0;
    margin: 0;
}

/* Step content wrapper (transparent for non-staff) */
.osb-wizard__step-content {
    /* No styles by default — only staff wizard uses collapse */
}

/* =========================================
   10. STAFF WIZARD OVERRIDES
   ========================================= */

/* Staff wizard sits inside SNB step container — no own box styling needed */
.osb-wizard--staff {
    overflow: visible;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Remove min-height and excess padding from wizard body in staff terminal */
.osb-wizard--staff .osb-wizard__body {
    min-height: 0;
    padding: 0;
}

/* Hide empty nav bar in staff terminal */
.osb-wizard--staff .osb-wizard__nav {
    display: none;
}

/* Hide inner wizard step-summary bars — SNB handles collapse/expand */
.osac-snb__form-step .osb-wizard__step-summary {
    display: none !important;
}

/* Hide redundant property summary row — already shown in SNB summary bars */
.osac-snb__form-step .osac-summary-row--property {
    display: none !important;
}

/* Hide redundant date/guest details line inside status box — already in SNB bar */
.osac-snb__form-step .osac-avail-details {
    display: none !important;
}

/* Remove inner box styling from form section — staff terminal provides its own container */
.osb-wizard--staff .osb-custom-picker-section {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Sticky breadcrumb bar — stays visible while scrolling */
.osb-wizard--staff .osb-wizard__breadcrumbs {
    position: sticky;
    top: 32px; /* WP admin bar height */
    z-index: 20;
    background: var(--osb-deep, #132a3e);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px 16px 0 0;
}

/* Override breadcrumb colors for dark navy background */
.osb-wizard--staff .osb-wizard__breadcrumb + .osb-wizard__breadcrumb::before {
    background: rgba(255, 255, 255, 0.2);
}

.osb-wizard--staff .osb-wizard__breadcrumb--complete + .osb-wizard__breadcrumb::before {
    background: var(--osb-brand-accent, #14b8a6);
}

.osb-wizard--staff .osb-wizard__dot {
    border-color: rgba(255, 255, 255, 0.3);
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
}

.osb-wizard--staff .osb-wizard__breadcrumb--active .osb-wizard__dot {
    background: var(--osb-brand-primary, #1C2E3F);
    border-color: var(--osb-brand-primary, #1C2E3F);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(28, 46, 63, 0.3);
}

.osb-wizard--staff .osb-wizard__breadcrumb--complete .osb-wizard__dot {
    background: var(--osb-brand-accent, #14b8a6);
    border-color: var(--osb-brand-accent, #14b8a6);
    color: #fff;
}

.osb-wizard--staff .osb-wizard__label {
    color: rgba(255, 255, 255, 0.5);
}

.osb-wizard--staff .osb-wizard__breadcrumb--active .osb-wizard__label {
    color: #fff;
}

.osb-wizard--staff .osb-wizard__breadcrumb--complete .osb-wizard__label {
    color: var(--osb-brand-accent, #14b8a6);
}

.osb-wizard--staff .osb-wizard__breadcrumb--complete:hover .osb-wizard__label {
    color: #5eead4;
}

.osb-wizard--staff .osb-wizard__breadcrumb--complete:hover .osb-wizard__dot {
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.3);
}

/* Step counter on dark background */
.osb-wizard--staff .osb-wizard__step-counter {
    background: var(--osb-deep, #132a3e);
    color: rgba(255, 255, 255, 0.6);
}

/* =========================================
   11. STAFF STEP COLLAPSE/EXPAND
   Active step: visible. Completed: collapsed summary.
   Future: hidden. Only for .osb-wizard--staff.
   ========================================= */

/* Step content wrapper — animated via max-height */
.osb-wizard--staff .osb-wizard__step-content {
    transition: max-height 0.35s ease, opacity 0.25s ease;
    will-change: max-height, opacity;
}

/* Active step: fully visible */
.osb-wizard--staff .osb-wizard__step--active .osb-wizard__step-content {
    max-height: none;
    opacity: 1;
    overflow: visible;
}

/* Collapsed step: content hidden */
.osb-wizard--staff .osb-wizard__step--collapsed .osb-wizard__step-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

/* Future step: completely hidden */
.osb-wizard--staff .osb-wizard__step--future {
    display: none;
}

/* Step separator between visible steps (not in SNB — container handles separation) */
.osb-wizard--staff .osb-wizard__step--collapsed + .osb-wizard__step {
    border-top: none;
}

/* ── Summary bar (collapsed one-liner) ── */
.osb-wizard__step-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--osb-terminal-surface, #f8f6f2);
    border: 1px solid var(--osb-surface-border, #e2ddd5);
    border-left: 3px solid var(--osb-brand-accent, #14b8a6);
    border-radius: var(--osb-radius-md, 8px);
    margin-bottom: 8px;
}

.osb-wizard__step-summary-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

/* Green checkmark badge */
.osb-wizard__step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    color: #fff;
}

.osb-wizard__step-badge--done {
    background: var(--osb-brand-accent, #14b8a6);
    font-size: 11px;
}

.osb-wizard__step-summary-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--osb-text-dark, #1C2E3F);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

/* ── "Change" ghost button ── */
.osb-wizard__change-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: transparent;
    border: 1px solid var(--osb-surface-border, #e2ddd5);
    border-radius: var(--osb-radius-md, 8px);
    color: var(--osb-text-muted, #6B7280);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.osb-wizard__change-btn:hover {
    border-color: var(--osb-brand-accent, #14b8a6);
    color: var(--osb-brand-accent, #14b8a6);
    background: rgba(20, 184, 166, 0.05);
}

/* ── Mobile responsive for collapse/expand ── */
@media (max-width: 600px) {
    .osb-wizard__step-summary {
        padding: 10px 12px;
        gap: 8px;
    }

    .osb-wizard__step-summary-text {
        font-size: 12px;
    }

    .osb-wizard__change-btn {
        padding: 5px 10px;
        font-size: 11px;
    }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .osb-wizard--staff .osb-wizard__step-content {
        transition: none;
    }
}

/* =========================================
   12. SUMMARY-ACTIVE — Hide collapsed bars
   When on the summary step, the collapsed
   step summaries are hidden (info is inline
   in the preview section instead).
   ========================================= */
.osb-wizard--summary-active .osb-wizard__step--collapsed .osb-wizard__step-summary {
    display: none !important;
}

/* =========================================
   13. INLINE SUMMARY ROWS (preview section)
   Compact rows replacing the old collapsed
   bars + Booking Details box.
   ========================================= */
.osac-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--osb-terminal-surface, #f8f6f2);
    border: 1px solid var(--osb-surface-border, #e2ddd5);
    border-left: 3px solid var(--osb-brand-accent, #14b8a6);
    border-radius: var(--osb-radius-md, 8px);
    margin-bottom: 8px;
}

.osac-summary-row__content {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.osac-summary-row__step {
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
    color: var(--osb-brand-accent, #14b8a6);
}

.osac-summary-row__info {
    min-width: 0;
    flex: 1;
}

.osac-summary-row__primary {
    font-size: 13px;
    font-weight: 500;
    color: var(--osb-text-dark, #1C2E3F);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.osac-summary-row__secondary {
    font-size: 12px;
    color: var(--osb-text-muted, #6B7280);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.osac-summary-row__change {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    background: transparent;
    border: 1px solid var(--osb-surface-border, #e2ddd5);
    border-radius: 6px;
    color: var(--osb-text-muted, #6B7280);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.osac-summary-row__change:hover {
    border-color: var(--osb-brand-accent, #14b8a6);
    color: var(--osb-brand-accent, #14b8a6);
    background: rgba(20, 184, 166, 0.05);
}

/* ── Mobile responsive ── */
@media (max-width: 600px) {
    .osac-summary-row {
        padding: 10px 12px;
        gap: 8px;
    }

    .osac-summary-row__primary {
        font-size: 12px;
    }

    .osac-summary-row__secondary {
        font-size: 11px;
    }

    .osac-summary-row__change {
        padding: 4px 8px;
        font-size: 11px;
    }
}


/* === calendar.css === */
/* OSAC v2 - CALENDAR STYLES
   Styling für Flatpickr mit OSB-Klassen und Variablen.
*/

/* Flatpickr Basis-Anpassung */
.flatpickr-day {
    position: relative;
    font-family: inherit !important;
    border-radius: var(--osb-radius-sm, 6px) !important;
}

/* ---------------------------------------------------------
   1. VERFÜGBARKEITS-ZAHLEN (Oben rechts)
   --------------------------------------------------------- */
.osb-day-count {
    position: absolute !important;
    top: 2px !important;
    right: 4px !important;
    font-size: 9px !important;
    font-weight: 700;
    line-height: 1;
    color: var(--osb-text-muted);
    pointer-events: none;
    background: var(--osb-surface);
    padding: 1px 3px;
    border-radius: 4px;
    z-index: 10;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Rote Zahl bei vollen Tagen */
.flatpickr-day.osb-day-full .osb-day-count {
    color: var(--osb-error);
    font-weight: 800;
}

/* ---------------------------------------------------------
   2. VERFÜGBARKEITS-PUNKTE (Unten mittig)
   --------------------------------------------------------- */
.flatpickr-day.osb-day-ok::after,
.flatpickr-day.osb-day-low::after,
.flatpickr-day.osb-day-full::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

/* GRÜN (Viel Platz) */
.flatpickr-day.osb-day-ok::after {
    background: var(--osb-success);
}

/* GELB/ORANGE (Wenig Platz) */
.flatpickr-day.osb-day-low::after {
    background: var(--osb-warning);
}

/* ROT (Voll) */
.flatpickr-day.osb-day-full::after {
    background: var(--osb-error);
}

/* ---------------------------------------------------------
   3. ZUSTÄNDE (Voll / Blockiert)
   --------------------------------------------------------- */

/* Durchgestrichen bei Voll */
.flatpickr-day.osb-day-full {
    color: var(--osb-text-muted) !important;
    text-decoration: line-through;
    cursor: not-allowed;
    background: var(--osb-surface-alt);
}

/* Staff Override: volle Tage bleiben klickbar (Überbuchen erlaubt) */
.osb-cal-staff .flatpickr-day.osb-day-full {
    color: inherit !important;
    text-decoration: none !important;
    cursor: pointer !important;
    background: rgba(239, 68, 68, 0.08) !important;
    border: 1px dashed var(--osb-error, #ef4444) !important;
}

.osb-cal-staff .flatpickr-day.osb-day-full:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: var(--osb-error, #ef4444);
}

/* Hover-Effekte für verfügbare Tage */
.flatpickr-day.osb-day-ok:hover,
.flatpickr-day.osb-day-low:hover {
    background: var(--osb-brand-primary-light);
    border-color: var(--osb-brand-primary);
}

/* Ausgewählter Tag (Selected) */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: var(--osb-brand-primary) !important;
    border-color: var(--osb-brand-primary) !important;
    color: var(--osb-text-white) !important;
}

/* ---------------------------------------------------------
   4. FLATPICKR CONTAINER (Responsive)
   --------------------------------------------------------- */

/* Ensure calendar doesn't overflow on mobile */
.flatpickr-calendar {
    max-width: 100vw !important;
    box-sizing: border-box !important;
}

/* Calendar wrapper responsive */
.osb-calendar-wrap,
.osb-date-wrapper {
    width: 100% !important;
}

/* ---------------------------------------------------------
   5. MOBILE RESPONSIVE (max-width: 600px)
   --------------------------------------------------------- */
@media (max-width: 600px) {
    /* Reduce calendar width on mobile */
    .flatpickr-calendar {
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
    }

    /* Smaller day cells on mobile */
    .flatpickr-day {
        width: 38px !important;
        height: 38px !important;
        line-height: 38px !important;
        font-size: 13px !important;
    }

    /* Adjust availability count badge */
    .osb-day-count {
        font-size: 8px !important;
        top: 1px !important;
        right: 2px !important;
        padding: 0 2px !important;
    }

    /* Smaller availability dots */
    .flatpickr-day.osb-day-ok::after,
    .flatpickr-day.osb-day-low::after,
    .flatpickr-day.osb-day-full::after {
        width: 5px;
        height: 5px;
        bottom: 3px;
    }

    /* Month navigation */
    .flatpickr-months {
        padding: 0 4px !important;
    }

    .flatpickr-current-month {
        font-size: 14px !important;
    }

    .flatpickr-prev-month,
    .flatpickr-next-month {
        padding: 8px !important;
    }

    /* Weekday headers */
    .flatpickr-weekdays {
        font-size: 11px !important;
    }

    span.flatpickr-weekday {
        font-size: 11px !important;
    }
}

/* ---------------------------------------------------------
   6. EXTRA SMALL SCREENS (max-width: 380px)
   --------------------------------------------------------- */
@media (max-width: 380px) {
    .flatpickr-calendar {
        max-width: 280px !important;
    }

    .flatpickr-day {
        width: 34px !important;
        height: 34px !important;
        line-height: 34px !important;
        font-size: 12px !important;
    }

    .osb-day-count {
        font-size: 7px !important;
    }

    .flatpickr-current-month {
        font-size: 13px !important;
    }
}

/* === preview.css === */
/* ===================================================================
   OSAC v2 - PREVIEW SECTION (Modernes 3-Box-Layout)
   =================================================================== */

/* CONTAINER */
.osb-booking-preview-section {
    display: none;
    padding: 0;
    margin-top: var(--osb-space-6);
    transition: opacity 0.3s ease;
}

/* HEADER */
.osac-preview-header {
    margin-bottom: var(--osb-space-5);
    text-align: center;
}

.osac-preview-title {
    font-family: var(--osb-font-heading);
    font-size: var(--osb-text-3xl);
    font-weight: var(--osb-font-bold);
    color: var(--osb-text-dark);
    margin: 0;
    line-height: var(--osb-leading-tight);
}

/* ===================================================================
   PREVIEW BOXES (3 getrennte Karten)
   =================================================================== */
.osac-preview-box {
    background: var(--osb-surface);
    border: 1px solid var(--osb-border);
    border-radius: var(--osb-radius-lg);
    padding: var(--osb-space-5);
    margin-bottom: var(--osb-space-6);
    box-shadow: var(--osb-shadow-sm);
}

.osac-box-heading {
    font-family: var(--osb-font-heading);
    font-size: 1.1rem;
    font-weight: var(--osb-font-semibold);
    color: var(--osb-text-main);
    margin: 0 0 var(--osb-space-4) 0;
    padding-bottom: var(--osb-space-3);
    border-bottom: 2px solid var(--osb-border-light);
}

/* ===================================================================
   BOX 1: DATES & GUEST INFO
   =================================================================== */
.osac-preview-dates-box {
    background: linear-gradient(180deg, var(--osb-brand-primary-tint) 0%, var(--osb-surface) 100%);
    border: 1px solid var(--osb-brand-primary);
}

.osac-info-grid {
    display: grid;
    gap: var(--osb-space-3);
}

.osac-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--osb-space-3);
    background: var(--osb-surface);
    border-radius: var(--osb-radius-md);
    border: 1px solid var(--osb-border-light);
    transition: all 0.2s ease;
}

.osac-info-row:hover {
    border-color: var(--osb-brand-primary-light);
    box-shadow: var(--osb-shadow-sm);
}

.osac-label {
    font-size: var(--osb-text-sm);
    font-weight: var(--osb-font-medium);
    color: var(--osb-text-dark);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.osac-value {
    font-size: 1.1rem;
    font-weight: var(--osb-font-bold);
    color: var(--osb-text-dark);
}

/* ===================================================================
   BOX 2: PRICE BREAKDOWN
   =================================================================== */
.osac-preview-breakdown-box {
    background: linear-gradient(180deg, var(--osb-brand-primary-tint) 0%, var(--osb-surface) 100%);
    border: 1px solid var(--osb-brand-primary);
}

.osac-breakdown-grid {
    display: grid;
    gap: var(--osb-space-3);
}

.osac-breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--osb-space-3) var(--osb-space-4);
    background: var(--osb-surface);
    border-radius: var(--osb-radius-md);
    border: 1px solid var(--osb-border-light);
    transition: all 0.2s ease;
}

.osac-breakdown-row:hover {
    border-color: var(--osb-brand-primary-light);
    box-shadow: var(--osb-shadow-sm);
}

.osac-breakdown-label {
    display: flex;
    flex-direction: column;
    gap: var(--osb-space-1);
    flex: 1;
}

.osac-item-name {
    font-size: var(--osb-text-base);
    font-weight: var(--osb-font-semibold);
    color: var(--osb-text-dark);
}

.osac-item-detail {
    font-size: var(--osb-text-sm);
    font-weight: var(--osb-font-normal);
    color: var(--osb-text-muted);
    font-style: italic;
}

.osac-breakdown-price {
    font-size: 1.15rem;
    font-weight: var(--osb-font-bold);
    color: var(--osb-text-dark);
    white-space: nowrap;
    margin-left: var(--osb-space-4);
}

/* FOC Row */
.osac-breakdown-row.osac-foc-row {
    background: var(--osb-surface);
    border: 1px solid var(--osb-border-light);
}

.osac-foc-price {
    color: var(--osb-text-dark);
    font-weight: var(--osb-font-bold);
}

/* Discount Row */
.osb-booking-preview-section .osac-breakdown-row.osac-discount-row {
    background: var(--osb-success-light) !important;
    border: 1px solid var(--osb-success) !important;
}

.osb-booking-preview-section .osac-discount-price {
    color: var(--osb-success-dark) !important;
}

/* ===================================================================
   BOX 3: TOTAL SUMMARY
   =================================================================== */
.osac-preview-total-box {
    background: linear-gradient(135deg, var(--osb-brand-primary-light) 0%, var(--osb-surface) 100%);
    border: 2px solid var(--osb-brand-primary);
    padding: var(--osb-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--osb-space-3);
}

.osac-preview-total-box > .osac-box-heading {
    margin-bottom: 0;
}

.osac-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--osb-space-3) 0;
}

.osac-subtotal-row {
    border-bottom: 1px dashed var(--osb-border);
    padding-bottom: var(--osb-space-4);
    margin-bottom: var(--osb-space-2);
}

.osac-total-label {
    font-size: var(--osb-text-base);
    font-weight: var(--osb-font-semibold);
    color: var(--osb-text-dark);
}

.osac-total-value {
    font-size: var(--osb-text-xl);
    font-weight: var(--osb-font-bold);
    color: var(--osb-text-dark);
}

.osac-grand-total-row {
    margin-top: var(--osb-space-4);
    padding-top: var(--osb-space-4);
    border-top: 3px solid var(--osb-brand-primary);
}

.osac-grand-label {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--osb-text-dark);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.osac-grand-total {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--osb-brand-primary);
    line-height: 1;
}

/* ===================================================================
   BOX 4: AGENCY COMMISSION
   =================================================================== */
.osac-preview-commission-box {
    background: linear-gradient(135deg, var(--os-bg-cream, #F7F4EF) 0%, var(--osb-surface) 100%);
    border: 2px solid var(--os-primary, #1C2E3F);
    padding: var(--osb-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--osb-space-3);
}

.osac-preview-commission-box > .osac-box-heading {
    color: var(--os-primary, #1C2E3F);
    margin-bottom: 0;
}

.osac-commission-row .osac-commission-amount {
    color: var(--os-error, #EF4444);
    font-weight: var(--osb-font-semibold);
}

.osac-net-to-pay-row {
    margin-top: var(--osb-space-3);
    padding-top: var(--osb-space-3);
    border-top: 3px solid var(--os-primary, #1C2E3F);
}

.osac-net-to-pay-row .osac-item-name {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.osac-net-to-pay-row .osac-net-to-pay {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--os-primary, #1C2E3F);
    line-height: 1;
}

/* ===================================================================
   STATE MANAGEMENT (JS Integration)
   =================================================================== */
.osb-container.osb-restore-preview .osb-custom-picker-section {
    display: none !important;
}

.osb-container.osb-restore-preview .osb-booking-preview-section {
    display: block !important;
}

.osb-booking-preview-section.osb-lock-height {
    opacity: 0.5;
    pointer-events: none;
    overflow: hidden;
}

/* ===================================================================
   SUCCESS MESSAGE (Staff/Agency Direct Booking)
   =================================================================== */
.osb-success-message {
    text-align: center;
    padding: var(--osb-space-12) var(--osb-space-6);
    background: linear-gradient(135deg, var(--osb-success-light) 0%, color-mix(in srgb, var(--osb-success, #10b981) 12%, white) 100%);
    border: 2px solid var(--osb-success);
    border-radius: var(--osb-radius-xl);
    animation: osacFadeIn 0.6s ease;
}

.osb-success-icon {
    font-size: 60px;
    color: var(--osb-success);
    margin-bottom: var(--osb-space-5);
    line-height: 1;
    display: block;
}

.osb-success-message h3 {
    margin: 0 0 var(--osb-space-3) 0;
    color: var(--osb-success-dark);
    font-size: var(--osb-text-3xl);
    font-weight: var(--osb-font-bold);
}

.osb-success-message p {
    font-size: 1.15rem;
    color: var(--osb-text-main);
    margin-bottom: var(--osb-space-8);
}

.osb-booking-success-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: var(--osb-space-3) !important;
    margin-top: var(--osb-space-6) !important;
}

.osb-booking-success-actions a.osb-btn {
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
}

/* ===================================================================
   LEGACY COMPATIBILITY
   =================================================================== */
.osb-preview-identifier {
    background: var(--osb-brand-primary-light);
    border: 1px solid var(--osb-brand-primary);
    padding: var(--osb-space-3) var(--osb-space-4);
    font-size: var(--osb-text-sm);
    font-weight: var(--osb-font-semibold);
    color: var(--osb-brand-primary);
    border-radius: var(--osb-radius-md);
    margin-bottom: var(--osb-space-4);
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 600px) {
    .osac-preview-title {
        font-size: 1.4rem;
    }

    .osac-grand-total {
        font-size: 1.5rem;
    }

    .osb-booking-success-actions .osb-btn {
        width: 100% !important;
    }
}

/* =============================================
   SUCCESS PANEL (Staff/Agency Confirmation)
   ============================================= */

.osb-success-panel {
    background: linear-gradient(135deg, var(--osb-success-light, #d1fae5) 0%, color-mix(in srgb, var(--osb-success, #10b981) 15%, white) 100%);
    border: 1px solid var(--osb-success, #10b981);
    border-radius: var(--osb-radius-xl, 16px);
    padding: 28px 24px;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.osb-success-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
}

.osb-success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--osb-brand-accent, #14b8a6) 0%, var(--osb-brand-accent-dark, #0d9488) 100%);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    border-radius: 50%;
    flex-shrink: 0;
}

.osb-success-title h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--osb-success-dark, #059669);
}

.osb-success-ref {
    margin: 4px 0 0 0;
    font-size: 0.9rem;
    color: var(--osb-success-dark, #059669);
}

.osb-success-stay-id {
    margin-bottom: 20px;
    font-size: 0.8rem;
    color: var(--osb-text-muted, #6B7280);
}

.osb-success-stay-id code {
    background: rgba(255, 255, 255, 0.7);
    padding: 3px 8px;
    border-radius: 4px;
    font-family: monospace;
    color: var(--osb-brand-accent-dark, #0d9488);
}

/* Primary Button */
.osb-btn-success-primary {
    display: block;
    width: 100%;
    padding: 14px 20px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, var(--osb-brand-accent, #14b8a6) 0%, var(--osb-brand-accent-dark, #0d9488) 100%);
    color: #fff !important;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--osb-radius-lg, 10px);
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(13, 148, 136, 0.25);
    transition: all 0.2s ease;
}

.osb-btn-success-primary:hover {
    background: linear-gradient(135deg, var(--osb-brand-accent-dark, #0d9488) 0%, color-mix(in srgb, var(--osb-brand-accent-dark, #0d9488) 85%, black) 100%);
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(13, 148, 136, 0.35);
}

/* Secondary Section */
.osb-success-secondary {
    padding: 16px 0;
    border-top: 1px dashed var(--osb-success, #10b981);
    border-bottom: 1px dashed var(--osb-success, #10b981);
    margin-bottom: 16px;
}

.osb-success-secondary-label {
    margin: 0 0 12px 0;
    font-size: 0.8rem;
    color: var(--osb-text-muted, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.osb-success-secondary-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.osb-btn-success-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: #fff;
    color: var(--osb-brand-accent-dark, #0d9488) !important;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1.5px solid var(--osb-brand-accent, #14b8a6);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.osb-btn-success-secondary:hover {
    background: var(--osb-success-light, #d1fae5);
    border-color: var(--osb-brand-accent-dark, #0d9488);
}

.osb-btn-success-secondary .osb-btn-icon {
    font-weight: 700;
    font-size: 1rem;
}

/* New Booking Button */
.osb-btn-success-new {
    width: 100%;
    padding: 12px 20px;
    background: transparent;
    color: var(--osb-text-muted, #6B7280) !important;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.osb-btn-success-new:hover {
    background: rgba(255, 255, 255, 0.5);
    border-color: var(--osb-text-muted, #6B7280);
    color: var(--osb-success-dark, #059669) !important;
}

/* ===================================================================
   DISCOUNT HIGHLIGHT ROW — shared base for all discount rows
   Both Long Stay and Guest Discount rows use .osac-total-row.osac-discount-row.
   This two-class selector cleanly overrides .osac-total-row (padding: X 0)
   without needing !important.
   =================================================================== */
.osac-total-row.osac-discount-row {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid var(--osb-success);
    border-radius: var(--osb-radius-md);
    padding: var(--osb-space-3) var(--osb-space-4);
    margin: var(--osb-space-3) 0;
}

.osac-total-row.osac-discount-row .osac-total-label {
    display: flex;
    align-items: center;
    gap: var(--osb-space-2);
    color: var(--os-success-dark, #059669);
}

.osac-total-row.osac-discount-row .osac-total-value,
.osac-total-row.osac-discount-row .osac-discount-applied {
    font-size: var(--osb-text-base);
    font-weight: var(--osb-font-bold);
    color: var(--os-success, #10B981);
}

/* Shared badge styling for discount percentage badges */
.osac-guest-discount-badge,
.osac-long-stay-badge {
    display: inline-flex;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.2);
    color: var(--os-success-dark, #059669);
}

/* Shared icon sizing for discount type icons */
.osac-guest-discount-icon,
.osac-long-stay-icon {
    font-size: 1.1rem;
}

/* ===================================================================
   GUEST SECTION STYLING (guest.php)
   =================================================================== */
.osac-guest-section {
    margin-top: var(--osb-space-4);
}

.osac-guest-section .osb-initiator-bar {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.12) 100%);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: var(--os-success-dark, #059669);
    padding: var(--osb-space-3) var(--osb-space-4);
    border-radius: var(--osb-radius-md);
    font-weight: var(--osb-font-semibold);
    font-size: var(--osb-text-sm);
    margin-bottom: var(--osb-space-4);
}

/* ============================================
   Staff/Agency Info Bar
   ============================================ */
.osb-staff-info-bar {
    background-color: var(--osb-brand-primary-tint);
    color: var(--osb-brand-primary-dark);
    padding: var(--osb-space-2);
    text-align: center;
    border-bottom: 1px solid var(--osb-brand-primary-light);
    font-weight: var(--osb-font-semibold);
    font-size: var(--osb-text-sm);
    margin-bottom: var(--osb-space-4);
    border-radius: 0 0 var(--osb-radius-sm) var(--osb-radius-sm);
}

/* Guest Discount Thank You Message */
.osac-guest-discount-thanks {
    display: block;
    font-size: 0.75em;
    font-weight: 400;
    color: var(--osb-success, #10b981);
    margin-top: 2px;
    font-style: italic;
}

/* ===================================================================
   LONG STAY / GUEST DISCOUNT — type-specific rules
   Layout (bg, border, padding, margin) is handled by .osac-total-row.osac-discount-row.
   Only type-specific overrides go here.
   =================================================================== */

/* ===================================================================
   DISCOUNT LABEL WRAPPER (for both discount types)
   =================================================================== */
.osac-discount-label-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.osac-discount-thanks {
    display: block;
    font-size: 0.8em;
    font-weight: 500;
    color: var(--os-success, #10B981);
    font-style: italic;
}

/* ===================================================================
   PRICE SUMMARY SPACING IMPROVEMENTS
   =================================================================== */
.osac-preview-total-box > .osac-breakdown-row {
    margin-bottom: var(--osb-space-3);
}

.osac-preview-total-box > .osac-breakdown-row:last-child {
    margin-bottom: 0;
}

.osac-preview-total-box > .osac-total-row {
    margin-bottom: var(--osb-space-3);
}

/* ===================================================================
   FREE EXTRA BED ROW (Children under 10)
   =================================================================== */
.osac-breakdown-row.osac-free-extra-bed-row {
    background: rgba(16, 185, 129, 0.08) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.osac-breakdown-row.osac-free-extra-bed-row:hover {
    border-color: rgba(16, 185, 129, 0.5) !important;
}

.osac-free-extra-bed-row .osac-item-name {
    display: flex;
    align-items: center;
    gap: var(--osb-space-2);
    color: var(--os-success-dark, #059669);
}

.osac-free-icon {
    font-size: 1.1rem;
}

.osac-free-extra-bed-row .osac-item-detail {
    color: var(--os-success, #10B981);
    font-style: italic;
}

.osac-breakdown-price.osac-free-label,
.osac-free-extra-bed-row .osac-free-label {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--os-success, #10B981) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ===========================================
   STAFF CONTEXT — Compact Preview
   All info stays, just tighter spacing & smaller type.
   =========================================== */

/* Preview header: smaller */
.osb-staff-view .osac-preview-header {
    margin-bottom: 8px;
}

.osb-staff-view .osac-preview-title {
    font-size: 18px;
}

/* Identifier bar: compact */
.osb-staff-view .osb-preview-identifier {
    padding: 6px 12px;
    font-size: 12px;
    margin-bottom: 8px;
}

/* Staff info bar: compact */
.osb-staff-view .osb-staff-info-bar {
    padding: 4px 8px;
    font-size: 12px;
    margin-bottom: 8px;
}

/* Section headings: uppercase micro labels */
.osb-staff-view .osac-box-heading {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--osb-text-muted, #6B7280);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom-width: 1px;
}

/* Boxes: tighter spacing */
.osb-staff-view .osac-preview-box {
    padding: 12px;
    margin-bottom: 8px;
}

/* Info rows (Booking Details): compact */
.osb-staff-view .osac-info-row {
    padding: 6px 12px;
}

.osb-staff-view .osac-label {
    font-size: 11px;
}

.osb-staff-view .osac-value {
    font-size: 12px;
    font-weight: 500;
}

/* =============================================================
   STAFF VIEW — Unified Row Spacing
   Both boxes (Price Breakdown + Price Summary) mix two class
   systems: .osac-breakdown-row and .osac-total-row.
   This section normalizes ALL rows to the same compact spacing.
   ============================================================= */

/* All rows — same padding regardless of class system */
.osb-staff-view .osac-breakdown-row,
.osb-staff-view .osac-total-row {
    padding: 6px 12px;
    margin: 0;
}

/* Breakdown grid: match total-box gap */
.osb-staff-view .osac-breakdown-grid {
    gap: 8px;
}

/* Total box: compact */
.osb-staff-view .osac-preview-total-box {
    padding: 12px;
    gap: 8px;
}

/* Typography: labels */
.osb-staff-view .osac-item-name,
.osb-staff-view .osac-total-label {
    font-size: 12px;
    font-weight: 500;
}

.osb-staff-view .osac-item-detail {
    font-size: 11px;
}

/* Typography: values */
.osb-staff-view .osac-breakdown-price,
.osb-staff-view .osac-total-value {
    font-size: 12px;
    font-weight: 500;
}

/* Discount rows: keep visual styling, override spacing from base rule */
.osb-staff-view .osac-total-row.osac-discount-row {
    padding: 6px 12px;
    margin: 0;
}

/* Nightly Rate Total — closing line for breakdown box */
.osac-nightly-rate-total-row {
    border-top: 2px solid var(--osb-border, #E5E7EB);
    margin-top: 4px;
    padding-top: 10px;
    padding-bottom: 4px;
}

.osac-nightly-rate-total-row .osac-item-name {
    font-weight: var(--osb-font-bold, 700);
}

.osac-nightly-rate-total-row .osac-breakdown-price {
    font-weight: var(--osb-font-bold, 700);
}

.osb-staff-view .osac-nightly-rate-total-row {
    padding: 10px 12px 6px;
}

.osb-staff-view .osac-nightly-rate-total-row .osac-item-name {
    font-size: 14px;
    font-weight: 700;
}

.osb-staff-view .osac-nightly-rate-total-row .osac-breakdown-price {
    font-size: 14px;
    font-weight: 700;
}

/* Divider line before Grand Total */
.osb-staff-view .osac-grand-total-row {
    border-top: 2px solid var(--osb-border, #E5E7EB);
    margin-top: 4px;
    padding-top: 10px;
}

/* Grand total: prominent */
.osb-staff-view .osac-grand-label {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--osb-text-dark, #1C2E3F);
}

.osb-staff-view .osac-grand-total {
    font-size: 22px;
    font-weight: 800;
    color: var(--osb-brand-primary, #26577C);
}

/* === price-preview.css === */
/* ═══════════════════════════════════════════════════════
   PRICE PREVIEW — Shared component
   Used by Edit Stay, New Booking, and future Dive Booking.
   ═══════════════════════════════════════════════════════ */

.osac-price-preview {
    background: #fff;
    border: 1px solid var(--osb-border);
    border-radius: 10px;
    overflow: hidden;
}

/* ── Header (badge + title) ── */

.osac-price-preview__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--osb-surface-bg);
    border-bottom: 1px solid var(--osb-border);
}

.osac-price-preview__badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.osac-price-preview__badge--ok {
    background: var(--osb-success-light);
    color: var(--osb-success-dark, #059669);
}

.osac-price-preview__badge--warn {
    background: var(--osb-warning-light);
    color: var(--osb-warning-dark, #b45309);
}

.osac-price-preview__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--osb-text-dark, #1C2E3F);
}

/* ── Table rows ── */

.osac-price-preview__table {
    padding: 0;
}

.osac-price-preview__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--osb-text-muted, #6B7280);
    border-bottom: 1px solid var(--osb-border-light, #ece8e0);
}

.osac-price-preview__row:last-child {
    border-bottom: none;
}

.osac-price-preview__row--discount {
    color: var(--osb-success-dark);
}

.osac-price-preview__row--total {
    padding-top: 10px;
    margin-top: 0;
    border-top: 1px dashed var(--osb-border);
    background: var(--osb-surface-bg);
    font-size: 15px;
    color: var(--osb-text-dark, #1C2E3F);
}

/* ── Price diff indicator ── */

.osac-price-preview__diff {
    margin: 0;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    border-top: 1px solid var(--osb-border);
}

.osac-price-preview__diff--up {
    background: var(--osb-warning-light);
    color: var(--osb-warning-dark, #b45309);
}

.osac-price-preview__diff--down {
    background: var(--osb-success-light);
    color: var(--osb-success-dark, #059669);
}


/* === status.css === */
/* ===================================================================
   OSAC v2 - STATUS BOXES (Jimmy's Edel Ton-in-Ton)
   ===================================================================

   Design-Prinzip: "Kompakt wie Tickets, edel wie Voucher"
   - One-Line Header: Icon | Titel | Badge
   - Hero = kräftig, Alternative = blass
   - Ton-in-Ton Farben: Smaragd, Gold, Rosé

   =================================================================== */

/* =========================================
   1. BASE STATUS BOX (Kompakt)
   ========================================= */
.osb-status-box {
    position: relative;
    background: #fff;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 1px solid var(--osb-border, #e2ddd5);
    border-left: 4px solid var(--osb-border, #e2ddd5);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* =========================================
   2. ONE-LINE HEADER (Perfekt horizontal)
   ========================================= */
.osb-status-box__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 22px;
}

.osb-status-box__icon {
    flex-shrink: 0;
    width: 16px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
}

body .osb-container .osb-status-box__title,
body .osb-container h4.osb-status-box__title {
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 22px !important;
    flex-grow: 1 !important;
    vertical-align: middle !important;
}

/* =========================================
   3. STATUS BADGE (Pill - gleiche Höhe)
   ========================================= */
.osb-status-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    padding: 0 0.5rem;
    border-radius: 9999px;
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
    margin-top: 0;
    margin-bottom: 0;
}

/* =========================================
   4. STATUS MESSAGE + ACTIONS + BUTTONS BASE
   ========================================= */
.osb-status-box__message {
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
}

.osb-status-box__actions {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-top: 0.25rem;
}

/* Base Button in Status Box */
.osb-status-box__actions .osb-btn,
.osb-status-box__actions>a,
.osb-status-box__actions>button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    line-height: 1.3;
}

.osb-btn__subtext,
.osb-btn-subtext {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.9;
    margin-top: 0.125rem;
}

/* =========================================
   5. PUBLIC BUTTONS (scoped to .osb-public-view)
   ========================================= */

/* 5.1 Available Hero button (Smaragd Soft) */
body .osb-container .osb-public-view .osb-status-box--success:not(.osb-status-box--alt) .osb-btn,
body .osb-container .osb-public-view .osb-status-box--success:not(.osb-status-box--alt) .osb-btn-summary {
    background: rgba(5, 150, 105, 0.12) !important;
    color: var(--osb-success-dark, #059669) !important;
    border: 1.5px solid var(--osb-success, #10b981) !important;
    box-shadow: none !important;
}

body .osb-container .osb-public-view .osb-status-box--success:not(.osb-status-box--alt) .osb-btn:hover,
body .osb-container .osb-public-view .osb-status-box--success:not(.osb-status-box--alt) .osb-btn-summary:hover {
    background: rgba(5, 150, 105, 0.25) !important;
    border-color: var(--osb-success, #10b981) !important;
    color: var(--osb-success-dark, #059669) !important;
}

/* 5.2 Available Alt Ghost button (Sanftes Grün) */
body .osb-container .osb-public-view .osb-status-box--success.osb-status-box--alt .osb-btn,
body .osb-container .osb-public-view .osb-status-box--success.osb-status-box--alt .osb-btn-alt {
    background: rgba(5, 150, 105, 0.06) !important;
    color: var(--osb-success-dark, #059669) !important;
    border: 1.5px solid rgba(167, 243, 208, 0.6) !important;
    box-shadow: none !important;
}

body .osb-container .osb-public-view .osb-status-box--success.osb-status-box--alt .osb-btn:hover,
body .osb-container .osb-public-view .osb-status-box--success.osb-status-box--alt .osb-btn-alt:hover {
    background: rgba(5, 150, 105, 0.18) !important;
    border-color: var(--osb-success, #10b981) !important;
    color: var(--osb-success-dark, #059669) !important;
}

/* 5.3 Promoted: Alt gets solid hero button after error */
.osb-public-view .osb-status-box--error + .osb-status-box--success.osb-status-box--alt .osb-btn,
.osb-public-view .osb-status-box--error + .osb-status-box--success.osb-status-box--alt .osb-btn-alt {
    background: var(--osb-success-dark, #059669);
    color: #fff;
    border: none;
}

.osb-public-view .osb-status-box--error + .osb-status-box--success.osb-status-box--alt .osb-btn:hover,
.osb-public-view .osb-status-box--error + .osb-status-box--success.osb-status-box--alt .osb-btn-alt:hover {
    background: var(--osb-success-dark, #059669);
}

/* 5.4 Suggestion Hero button (Gold Solid) */
.osb-public-view .osb-status-box--warning:not(.osb-status-box--alt) .osb-btn,
.osb-public-view .osb-status-box--warning:not(.osb-status-box--alt) .osb-btn-suggest {
    background: var(--osb-warning-dark, #b45309);
    color: #fff;
    border: none;
}

.osb-public-view .osb-status-box--warning:not(.osb-status-box--alt) .osb-btn:hover,
.osb-public-view .osb-status-box--warning:not(.osb-status-box--alt) .osb-btn-suggest:hover {
    background: var(--osb-warning-dark, #b45309);
}

/* =========================================
   6. PUBLIC STATUS VARIANTS (.osb-public-view)
   ========================================= */

/* 6.1 Available (success): Smaragd/Mint background */
.osb-public-view .osb-status-box--success:not(.osb-status-box--alt) {
    background: var(--osb-success-light, #d1fae5);
    border-color: var(--osb-success, #10b981);
    border-left-color: var(--osb-success-dark, #059669);
}
.osb-public-view .osb-status-box--success:not(.osb-status-box--alt) .osb-status-box__icon { color: var(--osb-success-dark, #059669); }
.osb-public-view .osb-status-box--success:not(.osb-status-box--alt) .osb-status-box__title { color: var(--osb-success-dark, #059669); }
.osb-public-view .osb-status-box--success:not(.osb-status-box--alt) .osb-status-box__message { color: var(--osb-success-dark, #059669); }
.osb-public-view .osb-status-box--success:not(.osb-status-box--alt) .osb-status-badge {
    background: var(--osb-success-light, #d1fae5);
    color: var(--osb-success-dark, #059669);
    border-color: var(--osb-success, #10b981);
}

/* 6.2 Available Alt (success.alt): Ghost Mint */
body .osb-container .osb-public-view .osb-status-box--success.osb-status-box--alt {
    background: var(--osb-success-light, #d1fae5) !important;
    border-color: rgba(167, 243, 208, 0.5) !important;
    border-left-color: rgba(74, 222, 128, 0.7) !important;
}
.osb-public-view .osb-status-box--success.osb-status-box--alt .osb-status-box__icon { color: var(--osb-success, #10b981); }
.osb-public-view .osb-status-box--success.osb-status-box--alt .osb-status-box__title { color: var(--osb-success-dark, #059669); }
.osb-public-view .osb-status-box--success.osb-status-box--alt .osb-status-box__message { color: var(--osb-success-dark, #059669); }
.osb-public-view .osb-status-box--success.osb-status-box--alt .osb-status-badge {
    background: var(--osb-success-light, #d1fae5);
    color: var(--osb-success-dark, #059669);
    border-color: var(--osb-success, #10b981);
}

/* 6.3 Promoted (error + success.alt): Full Hero treatment */
.osb-public-view .osb-status-box--error + .osb-status-box--success.osb-status-box--alt {
    background: var(--osb-success-light, #d1fae5);
    border-color: var(--osb-success, #10b981);
    border-left-color: var(--osb-success-dark, #059669);
}
.osb-public-view .osb-status-box--error + .osb-status-box--success.osb-status-box--alt .osb-status-box__icon { color: var(--osb-success-dark, #059669); }
.osb-public-view .osb-status-box--error + .osb-status-box--success.osb-status-box--alt .osb-status-box__title { color: var(--osb-success-dark, #059669); }
.osb-public-view .osb-status-box--error + .osb-status-box--success.osb-status-box--alt .osb-status-box__message { color: var(--osb-success-dark, #059669); }
.osb-public-view .osb-status-box--error + .osb-status-box--success.osb-status-box--alt .osb-status-badge {
    background: var(--osb-success-light, #d1fae5);
    color: var(--osb-success-dark, #059669);
    border-color: var(--osb-success, #10b981);
}

/* 6.4 Suggestion (warning): Gold/Vanille background */
.osb-public-view .osb-status-box--warning:not(.osb-status-box--alt) {
    background: var(--osb-warning-light, #fef3c7);
    border-color: var(--osb-warning, #f59e0b);
    border-left-color: var(--osb-warning-dark, #b45309);
}
.osb-public-view .osb-status-box--warning:not(.osb-status-box--alt) .osb-status-box__icon { color: var(--osb-warning-dark, #b45309); }
.osb-public-view .osb-status-box--warning:not(.osb-status-box--alt) .osb-status-box__title { color: var(--osb-warning-dark, #b45309); }
.osb-public-view .osb-status-box--warning:not(.osb-status-box--alt) .osb-status-box__message { color: var(--osb-warning-dark, #b45309); }
.osb-public-view .osb-status-box--warning:not(.osb-status-box--alt) .osb-status-badge {
    background: var(--osb-warning-light, #fef3c7);
    color: var(--osb-warning-dark, #b45309);
    border-color: var(--osb-warning, #f59e0b);
}

/* 6.5 Unavailable (error): Warm Terracotta background */
.osb-public-view .osb-status-box--error:not(.osb-status-box--alt) {
    background: var(--osb-error-light, #fee2e2);
    border-color: var(--osb-error, #ef4444);
    border-left-color: var(--osb-error-dark, #b91c1c);
}
.osb-public-view .osb-status-box--error:not(.osb-status-box--alt) .osb-status-box__icon { color: var(--osb-error-dark, #b91c1c); }
.osb-public-view .osb-status-box--error:not(.osb-status-box--alt) .osb-status-box__title { color: var(--osb-error-dark, #b91c1c); }
.osb-public-view .osb-status-box--error:not(.osb-status-box--alt) .osb-status-box__message { color: var(--osb-error, #ef4444); }
.osb-public-view .osb-status-box--error:not(.osb-status-box--alt) .osb-status-badge {
    background: var(--osb-error-light, #fee2e2);
    color: var(--osb-error-dark, #b91c1c);
    border-color: var(--osb-error, #ef4444);
}

/* =========================================
   7. ROLE VIEWS — Subdued treatment for
      Staff, Guest, and Agency views.
      All three get identical styling via :is()
   ========================================= */

/* 7.1 Success: white bg, teal left border, dark text */
:is(.osb-staff-view, .osb-guest-view, .osb-agency-view) .osb-status-box--success:not(.osb-status-box--alt) {
    background: #fff;
    border-color: var(--osb-surface-border, #e2ddd5);
    border-left: 3px solid var(--osb-brand-accent, #14b8a6);
}
:is(.osb-staff-view, .osb-guest-view, .osb-agency-view) .osb-status-box--success:not(.osb-status-box--alt) .osb-status-box__icon { color: var(--osb-brand-accent, #14b8a6); }
:is(.osb-staff-view, .osb-guest-view, .osb-agency-view) .osb-status-box--success:not(.osb-status-box--alt) .osb-status-box__title { color: var(--osb-text-dark, #1C2E3F); }
:is(.osb-staff-view, .osb-guest-view, .osb-agency-view) .osb-status-box--success:not(.osb-status-box--alt) .osb-status-box__message { color: var(--osb-text-main, #4A5568); }
:is(.osb-staff-view, .osb-guest-view, .osb-agency-view) .osb-status-box--success:not(.osb-status-box--alt) .osb-status-badge {
    background: var(--osb-brand-accent, #14b8a6);
    color: #fff;
    border-color: var(--osb-brand-accent, #14b8a6);
}

/* 7.2 Success.alt: white bg, softer teal left border, navy badge */
body :is(.osb-staff-view, .osb-guest-view, .osb-agency-view) .osb-status-box--success.osb-status-box--alt {
    background: #fff !important;
    border-color: var(--osb-surface-border, #e2ddd5) !important;
    border-left: 3px solid rgba(20, 184, 166, 0.5) !important;
}
:is(.osb-staff-view, .osb-guest-view, .osb-agency-view) .osb-status-box--success.osb-status-box--alt .osb-status-box__icon { color: var(--osb-brand-accent, #14b8a6); }
:is(.osb-staff-view, .osb-guest-view, .osb-agency-view) .osb-status-box--success.osb-status-box--alt .osb-status-box__title { color: var(--osb-text-dark, #1C2E3F); }
:is(.osb-staff-view, .osb-guest-view, .osb-agency-view) .osb-status-box--success.osb-status-box--alt .osb-status-box__message { color: var(--osb-text-main, #4A5568); }
:is(.osb-staff-view, .osb-guest-view, .osb-agency-view) .osb-status-box--success.osb-status-box--alt .osb-status-badge {
    background: var(--osb-brand-primary, #26577c);
    color: #fff;
    border-color: var(--osb-brand-primary, #26577c);
}

/* 7.3 Success buttons: teal solid (!important to beat buttons.css) */
:is(.osb-staff-view, .osb-guest-view, .osb-agency-view) .osb-status-box--success .osb-btn-summary,
:is(.osb-staff-view, .osb-guest-view, .osb-agency-view) .osb-status-box--success .osb-btn,
:is(.osb-staff-view, .osb-guest-view, .osb-agency-view) .osb-status-box--success .osb-btn-alt {
    background: var(--osb-brand-accent, #14b8a6) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px;
    box-shadow: none !important;
}

:is(.osb-staff-view, .osb-guest-view, .osb-agency-view) .osb-status-box--success .osb-btn-summary:hover,
:is(.osb-staff-view, .osb-guest-view, .osb-agency-view) .osb-status-box--success .osb-btn:hover,
:is(.osb-staff-view, .osb-guest-view, .osb-agency-view) .osb-status-box--success .osb-btn-alt:hover {
    background: var(--osb-brand-accent-dark, #0d9488) !important;
}

/* 7.4 Warning (both primary and alt): white bg, amber left border, dark text */
:is(.osb-staff-view, .osb-guest-view, .osb-agency-view) .osb-status-box--warning {
    background: #fff;
    border-color: var(--osb-surface-border, #e2ddd5);
    border-left: 3px solid var(--osb-warning, #f59e0b);
}
:is(.osb-staff-view, .osb-guest-view, .osb-agency-view) .osb-status-box--warning .osb-status-box__icon { color: var(--osb-warning-dark, #b45309); }
:is(.osb-staff-view, .osb-guest-view, .osb-agency-view) .osb-status-box--warning .osb-status-box__title { color: var(--osb-text-dark, #1C2E3F); }
:is(.osb-staff-view, .osb-guest-view, .osb-agency-view) .osb-status-box--warning .osb-status-box__message { color: var(--osb-text-main, #4A5568); }
:is(.osb-staff-view, .osb-guest-view, .osb-agency-view) .osb-status-box--warning .osb-status-badge {
    background: var(--osb-warning, #f59e0b);
    color: #fff;
    border-color: var(--osb-warning, #f59e0b);
}

/* 7.5 Error: white bg, red left border, dark text, red message */
:is(.osb-staff-view, .osb-guest-view, .osb-agency-view) .osb-status-box--error:not(.osb-status-box--alt) {
    background: #fff;
    border-color: var(--osb-surface-border, #e2ddd5);
    border-left: 3px solid var(--osb-error, #ef4444);
}
:is(.osb-staff-view, .osb-guest-view, .osb-agency-view) .osb-status-box--error:not(.osb-status-box--alt) .osb-status-box__title { color: var(--osb-text-dark, #1C2E3F); }
:is(.osb-staff-view, .osb-guest-view, .osb-agency-view) .osb-status-box--error:not(.osb-status-box--alt) .osb-status-box__message { color: var(--osb-error, #ef4444); }

/* ===========================================
   8. CART ERROR (Inline)
   =========================================== */
.osb-cart-error {
    background: var(--osb-error-light, #fee2e2);
    border: 1px solid var(--osb-error-border, #fecaca);
    border-left: 4px solid var(--osb-error, #ef4444);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    animation: osb-shake 0.4s ease-out;
}

.osb-cart-error .osb-error-content strong {
    display: block;
    color: var(--osb-error-dark, #b91c1c);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.375rem;
}

.osb-cart-error .osb-error-content p {
    color: var(--osb-text-muted, #6B7280);
    margin: 0 0 0.75rem 0;
    line-height: 1.5;
    font-size: 0.8125rem;
}

@keyframes osb-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-5px);
    }

    40% {
        transform: translateX(5px);
    }

    60% {
        transform: translateX(-3px);
    }

    80% {
        transform: translateX(3px);
    }
}

/* ===========================================
   9. ERROR MODAL
   =========================================== */
.osb-error-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 1rem;
    animation: osb-fade-in 0.2s ease-out;
}

.osb-error-modal {
    background: #fff;
    border-radius: 14px;
    padding: 1.75rem;
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
    animation: osb-slide-up 0.3s ease-out;
}

.osb-error-modal-icon {
    color: var(--osb-error, #ef4444);
    margin-bottom: 0.875rem;
}

.osb-error-modal-icon svg {
    width: 44px;
    height: 44px;
}

.osb-error-modal-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--osb-text-dark, #1C2E3F);
    margin: 0 0 0.5rem 0;
}

.osb-error-modal-text {
    font-size: 0.875rem;
    color: var(--osb-text-muted, #6B7280);
    line-height: 1.5;
    margin: 0 0 1.25rem 0;
}

.osb-error-modal-btn {
    background: var(--osb-success-dark, #059669);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    min-width: 160px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.osb-error-modal-btn:hover {
    background: var(--osb-success-dark, #059669);  /* darker success shade */
}

@keyframes osb-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes osb-slide-up {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.osb-modal-closing {
    opacity: 0;
    transition: opacity 0.15s ease-out;
}

.osb-modal-closing .osb-error-modal {
    transform: translateY(-8px) scale(0.98);
    transition: transform 0.15s ease-out;
}

/* ===========================================
   10. RESPONSIVE
   =========================================== */
@media (max-width: 600px) {
    .osb-status-box {
        padding: 0.875rem 1rem;
        border-radius: 10px;
    }

    .osb-status-box__title {
        font-size: 0.875rem;
    }

    .osb-status-badge {
        font-size: 0.5625rem;
        padding: 0.125rem 0.375rem;
    }

    .osb-error-modal {
        padding: 1.5rem;
        margin: 0.75rem;
    }
}

/* ===========================================
   11. SUMMARY BOX (Commission/Discount)
   =========================================== */
.osb-summary-box {
    background: #fff;
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.osb-summary-box--commission {
    border-color: var(--osb-border, #e2ddd5);
    border-top: 3px solid var(--osb-brand-primary, #26577C);
}

.osb-summary-box__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--osb-brand-primary-light, #e8f1f7);
    border-bottom: 1px solid var(--osb-border, #e2ddd5);
}

.osb-summary-box__title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--osb-brand-primary, #26577C);
    margin: 0;
}

.osb-summary-box__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--osb-border-light, #ece8e0);
}

.osb-summary-box__row:last-child {
    border-bottom: none;
}

.osb-summary-box__row--highlight {
    background: var(--osb-warning-light, #fef3c7);
}

.osb-summary-box__row--foc {
    background: var(--osb-warning-light, #fef3c7);
    color: var(--osb-warning-dark, #b45309);
}

.osb-summary-box__row--subtotal {
    background: var(--osb-surface-bg, #f8f6f2);
    font-weight: 600;
}

.osb-summary-box__badge {
    display: inline-block;
    background: var(--osb-brand-primary, #26577C);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    margin-left: 0.375rem;
}

/* Net to Pay Row (prominent) */
.osb-commission-net-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1rem;
    background: linear-gradient(135deg, var(--osb-success-light, #d1fae5) 0%, var(--osb-success-light, #d1fae5) 100%);
    border-top: 2px solid var(--osb-success, #10b981);
}

.osb-commission-net-label {
    display: flex;
    flex-direction: column;
}

.osb-commission-net-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--osb-success-dark, #059669);
}

.osb-commission-net-subtitle {
    font-size: 0.75rem;
    color: var(--osb-success-dark, #059669);
    opacity: 0.8;
}

.osb-commission-net-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--osb-success-dark, #059669);
}

/* ===========================================
   12. INFO TRIGGER (Icon Button)
   =========================================== */
.osb-info-trigger {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
    transition: background 0.15s ease;
}

.osb-info-trigger:hover {
    background: color-mix(in oklch, var(--osb-brand-primary) 10%, transparent);
}

.osb-info-trigger__icon {
    font-size: 1rem;
    line-height: 1;
}

/* ===========================================
   13. FOC SECTION (Toggle separated)
   =========================================== */
.osb-foc-section {
    margin-top: 0.75rem;
}

.osb-foc-section .osb-info-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.osb-foc-section__buttons {
    display: flex;
    gap: 0.5rem;
}

.osb-btn--sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    border-radius: 6px;
}

.osb-btn--active {
    background: var(--osb-brand-primary, #26577C);
    color: #fff;
    border-color: var(--osb-brand-primary, #26577C);
}

/* ===========================================
   14. MODAL (Info Popup)
   =========================================== */
.osb-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.osb-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    animation: osb-fade-in 0.2s ease-out;
}

.osb-modal__content {
    position: relative;
    background: #fff;
    border-radius: 16px;
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    animation: osb-slide-up 0.3s ease-out;
}

.osb-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--osb-brand-primary, #26577C);
    color: #fff;
    border-radius: 16px 16px 0 0;
}

.osb-modal__title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

.osb-modal__close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.15s ease;
}

.osb-modal__close:hover {
    opacity: 1;
}

.osb-modal__body {
    padding: 1.25rem;
}

.osb-modal__footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--osb-border, #e2ddd5);
    text-align: right;
}

/* ===========================================
   15. INFO CARD (Inside Modal)
   =========================================== */
.osb-info-card {
    background: var(--osb-surface-bg, #f8f6f2);
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: 8px;
    padding: 0.875rem 1rem;
}

.osb-info-card strong {
    display: block;
    font-size: 0.875rem;
    color: var(--osb-brand-primary, #26577C);
    margin-bottom: 0.375rem;
}

.osb-info-card p {
    font-size: 0.8125rem;
    color: var(--osb-text-muted, #6B7280);
    margin: 0;
    line-height: 1.5;
}

.osb-info-card code {
    display: block;
    background: var(--osb-border, #e2ddd5);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--osb-text-dark, #1C2E3F);
    margin-top: 0.5rem;
}

.osb-info-card--highlight {
    background: var(--osb-brand-sand-light, #fef9e7);
    border-color: var(--osb-warning, #f59e0b);
}

.osb-info-card ol {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.8125rem;
    color: var(--osb-text-muted, #6B7280);
}

.osb-info-card ol li {
    margin-bottom: 0.25rem;
}

/* ===========================================
   16. TABLE (Compact)
   =========================================== */
.osb-table--compact {
    width: 100%;
    font-size: 0.75rem;
    border-collapse: collapse;
}

.osb-table--compact th,
.osb-table--compact td {
    padding: 0.375rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--osb-border, #e2ddd5);
}

.osb-table--compact th {
    background: var(--osb-surface-bg, #f8f6f2);
    font-weight: 600;
    color: var(--osb-text-dark, #1C2E3F);
}

.osb-table--compact td {
    color: var(--osb-text-muted, #6B7280);
}

/* ===========================================
   17. UTILITY CLASSES
   =========================================== */
.osb-mb-2 {
    margin-bottom: 0.5rem;
}

.osb-mb-3 {
    margin-bottom: 0.75rem;
}

.osb-mt-2 {
    margin-top: 0.5rem;
}

.osb-mt-3 {
    margin-top: 0.75rem;
}

/* ===========================================
   18. INLINE VALIDATION ERROR (Client-Side)
   =========================================== */
.osb-result.osb-error,
.osb-result.osb-summary-error {
    background: var(--osb-error-light, #fef2f2);
    border: 1px solid var(--osb-error-border, #fecaca);
    border-left: 4px solid var(--osb-error, #ef4444);
    border-radius: var(--osb-radius-md, 10px);
    padding: var(--osb-space-3, 0.875rem) var(--osb-space-4, 1rem);
    margin-top: var(--osb-space-3, 0.75rem);
    color: var(--osb-error-dark, #991b1b);
    font-size: var(--osb-text-sm, 0.875rem);
    font-weight: var(--osb-font-medium, 500);
    line-height: 1.5;
}

/* ===========================================
   19. AGENCY COMMISSION SECTION
   Design: Clean, professional, Ocean Blue + subtle green for discounts
   =========================================== */

/* Agent Info Bar */
.osac-agent-bar {
    display: flex;
    align-items: center;
    gap: var(--osb-space-2, 8px);
    padding: var(--osb-space-3, 12px) var(--osb-space-4, 16px);
    background: linear-gradient(135deg, var(--osb-brand-primary-light, #e8f4f8) 0%, var(--osb-brand-primary-light, #e8f4f8) 100%);
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-md, 8px);
    margin-bottom: var(--osb-space-4, 16px);
    font-size: var(--osb-text-sm, 14px);
    color: var(--osb-brand-primary, #26577C);
}

.osac-agent-bar__icon {
    font-size: 1rem;
}

.osac-agent-bar__text strong {
    color: var(--osb-brand-primary-dark, #1e4562);
}

/* Commission Box */
.osac-commission-box {
    background: var(--osb-surface, #ffffff);
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-lg, 10px);
    overflow: hidden;
    margin-bottom: var(--osb-space-4, 16px);
}

/* Box Header */
.osac-commission-box__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--osb-space-3, 12px) var(--osb-space-4, 16px);
    background: var(--osb-brand-primary, #26577C);
    color: var(--osb-text-white, #ffffff);
}

.osac-commission-box__title {
    font-size: var(--osb-text-xs, 12px);
    font-weight: var(--osb-font-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.osac-commission-box__info-btn {
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: var(--osb-radius-full, 50%);
    color: var(--osb-text-white, #ffffff);
    font-size: var(--osb-text-sm, 14px);
    font-weight: var(--osb-font-semibold, 600);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--osb-transition-fast, 0.15s ease);
}

.osac-commission-box__info-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Commission Rows */
.osac-commission-box__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--osb-space-3, 14px) var(--osb-space-4, 16px);
    font-size: var(--osb-text-sm, 14px);
    border-bottom: 1px solid var(--osb-border-light, #ece8e0);
}

.osac-commission-box__row:last-child {
    border-bottom: none;
}

.osac-commission-box__label {
    color: var(--osb-text-muted, #64748b);
}

.osac-commission-box__value {
    font-weight: var(--osb-font-medium, 500);
    color: var(--osb-text-dark, #1e293b);
}

/* Deduction Row - subtle green for discounts (label + value) */
.osac-commission-box__row--deduction .osac-commission-box__label,
.osac-commission-box__row--deduction .osac-commission-box__value {
    color: var(--osb-success-dark, #059669);
}

.osac-commission-box__row--deduction .osac-commission-box__value {
    font-weight: var(--osb-font-semibold, 600);
}

/* Total Row - highlighted */
.osac-commission-box__row--total {
    background: linear-gradient(135deg, var(--osb-brand-primary-light, #e8f1f7) 0%, var(--osb-brand-primary-light, #e8f1f7) 100%);
    border-top: 2px solid var(--osb-brand-primary, #26577C);
}

.osac-commission-box__row--total .osac-commission-box__label {
    font-weight: var(--osb-font-semibold, 600);
    color: var(--osb-text-dark, #1e293b);
    font-size: 15px;
}

.osac-commission-box__row--total .osac-commission-box__value {
    color: var(--osb-brand-primary, #26577C);
    font-size: var(--osb-text-lg, 18px);
    font-weight: var(--osb-font-bold, 700);
}

/* Plan B (Group Leader) specific styles */
.osac-commission-box--plan-b {
    border-color: var(--osb-success, #10b981);
}

.osac-commission-badge--plan-b {
    background: var(--osb-success, #10b981) !important;
}

/* FOC Row - orange/amber for free leader benefit */
.osac-commission-box__row--foc .osac-commission-box__label,
.osac-commission-box__row--foc .osac-commission-box__value {
    color: var(--osb-warning-dark, #d97706);
}

.osac-commission-box__row--foc .osac-commission-box__value {
    font-weight: var(--osb-font-semibold, 600);
}

/* Subtotal Row (Commission Basis) */
.osac-commission-box__row--subtotal {
    background: var(--osb-surface-alt, #f8f6f2);
    border-top: 1px dashed var(--osb-border, #e2ddd5);
    padding-top: var(--osb-space-2, 8px);
    margin-top: var(--osb-space-1, 4px);
}

.osac-commission-box__row--subtotal .osac-commission-box__label {
    font-size: var(--osb-text-xs, 12px);
    color: var(--osb-text-muted, #64748b);
}

.osac-commission-box__row--subtotal .osac-commission-box__value {
    font-size: var(--osb-text-sm, 14px);
    color: var(--osb-text-dark, #1e293b);
}

/* FOC Toggle - Segment Style */
.osac-foc-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--osb-space-3, 14px) var(--osb-space-4, 16px);
    background: var(--osb-surface-alt, #f8f6f2);
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-md, 8px);
    margin-bottom: var(--osb-space-4, 16px);
}

.osac-foc-toggle__label {
    font-size: var(--osb-text-sm, 14px);
    color: var(--osb-text-muted, #475569);
}

/* Switch Container - Pill Shape */
.osac-foc-toggle__buttons {
    display: inline-flex;
    background: var(--osb-border, #e2ddd5);
    border-radius: 20px;
    padding: 3px;
    gap: 0;
}

/* Both Buttons - Base */
.osac-foc-toggle__btn {
    padding: 6px 16px;
    border: none;
    background: transparent;
    color: var(--osb-text-light, #999999);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 17px;
    transition: all 0.2s ease;
    min-width: 44px;
}

/* Hover on inactive */
.osac-foc-toggle__btn:not(.osac-foc-toggle__btn--active):hover {
    color: var(--osb-text-muted, #6B7280);
}

/* Active State = Ocean Blue Pill */
.osac-foc-toggle__btn--active {
    background: var(--osb-brand-primary, #26577C);
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Modal Overlay */
.osac-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--osb-z-modal, 99999);
    padding: var(--osb-space-4, 16px);
}

/* Modal Box */
.osac-modal {
    background: var(--osb-surface, #ffffff);
    border-radius: var(--osb-radius-lg, 12px);
    max-width: 480px;
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: var(--osb-shadow-xl, 0 20px 40px rgba(0, 0, 0, 0.2));
}

.osac-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--osb-space-4, 16px) var(--osb-space-5, 20px);
    background: var(--osb-brand-primary, #26577C);
    color: var(--osb-text-white, #ffffff);
}

.osac-modal__title {
    font-size: var(--osb-text-lg, 18px);
    font-weight: var(--osb-font-semibold, 600);
    margin: 0;
}

.osac-modal__close {
    background: transparent;
    border: none;
    color: var(--osb-text-white, #ffffff);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.8;
    transition: opacity var(--osb-transition-fast, 0.15s ease);
}

.osac-modal__close:hover {
    opacity: 1;
}

.osac-modal__body {
    padding: var(--osb-space-5, 20px);
    font-size: var(--osb-text-sm, 14px);
    line-height: 1.6;
    color: var(--osb-text-main, #334155);
    overflow-y: auto;
    max-height: 50vh;
}

.osac-modal__section {
    margin-bottom: var(--osb-space-4, 16px);
}

.osac-modal__section:last-child {
    margin-bottom: 0;
}

.osac-modal__section h4 {
    margin: 0 0 var(--osb-space-2, 8px) 0;
    color: var(--osb-brand-primary, #26577C);
    font-size: var(--osb-text-base, 15px);
    font-weight: var(--osb-font-semibold, 600);
}

.osac-modal__section p {
    margin: 0 0 var(--osb-space-2, 8px) 0;
    color: var(--osb-text-muted, #64748b);
}

.osac-modal__section ul {
    margin: var(--osb-space-2, 8px) 0 0 0;
    padding-left: var(--osb-space-5, 20px);
    color: var(--osb-text-muted, #64748b);
}

.osac-modal__section ul li {
    margin-bottom: var(--osb-space-1, 4px);
}

.osac-modal__footer {
    padding: var(--osb-space-4, 16px) var(--osb-space-5, 20px);
    border-top: 1px solid var(--osb-border, #e2ddd5);
    text-align: right;
}

.osac-modal__btn {
    padding: var(--osb-space-3, 10px) var(--osb-space-6, 24px);
    background: var(--osb-brand-primary, #26577C);
    color: var(--osb-text-white, #ffffff);
    border: none;
    border-radius: var(--osb-radius-md, 6px);
    font-size: var(--osb-text-sm, 14px);
    font-weight: var(--osb-font-medium, 500);
    cursor: pointer;
    transition: background var(--osb-transition-fast, 0.15s ease);
}

.osac-modal__btn:hover {
    background: var(--osb-brand-primary-dark, #1e4a6a);
}

/* Error State */
.osac-agency-section--error {
    padding: var(--osb-space-4, 16px);
}

.osac-error-message {
    color: var(--osb-error, #ef4444);
    font-size: var(--osb-text-sm, 14px);
    margin: var(--osb-space-2, 8px) 0 0 0;
}

/* ===========================================
   INJECTED BOOKING DETAILS IN AVAILABILITY
   Shows dates/nights/guests in result boxes.
   =========================================== */
.osac-avail-details {
    font-size: 12px;
    color: var(--osb-text-muted, #6B7280);
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px solid var(--osb-border-light, #ece8e0);
    line-height: 1.4;
}

/* === popups.css === */
/* ============================================
   OSAC v2 - Hold Timer Popups
   Design: Premium Resort Series
   ============================================ */

/* ----------------------------------------
   OVERLAY
   ---------------------------------------- */

/* Global spinner must sit ABOVE all modal overlays */
#osb-global-overlay.show {
    z-index: 100002;
}

.osac-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
    animation: osac-fade-in 0.2s ease-out;
}

/* Hidden state - must override display: flex */
.osac-modal-overlay[hidden] {
    display: none !important;
}

@keyframes osac-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ----------------------------------------
   MODAL BASE
   ---------------------------------------- */
.osac-modal {
    background: #ffffff;
    border-radius: 12px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    animation: osac-slide-up 0.25s ease-out;
    overflow: hidden;
}

@keyframes osac-slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------------------------------------
   HEADER
   ---------------------------------------- */
.osac-modal__header {
    padding: 24px 24px 16px;
    text-align: center;
    border-bottom: 2px solid #D6A85B;
    background: #fffcf7;
}

.osac-modal__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.osac-modal__icon svg {
    width: 100%;
    height: 100%;
}

.osac-modal__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    letter-spacing: -0.01em;
}

/* ----------------------------------------
   BODY
   ---------------------------------------- */
.osac-modal__body {
    padding: 24px;
}

.osac-modal__subtitle {
    text-align: center;
    color: #6b7280;
    font-size: 0.9rem;
    margin: 0 0 16px;
}

/* Timer Display */
.osac-modal__timer {
    text-align: center;
    padding: 16px;
    border: 1.5px solid #D6A85B;
    border-radius: 8px;
    background: #ffffff;
    margin-bottom: 16px;
}

.osac-modal__timer-value {
    font-size: 2.5rem;
    font-weight: 700;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
    color: #1f2937;
    letter-spacing: 0.05em;
}

/* Notice Box (Info/Warning) */
.osac-modal__notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    line-height: 1.4;
}

.osac-modal__notice-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    opacity: 0.7;
}

.osac-modal__notice-icon svg {
    width: 100%;
    height: 100%;
}

.osac-modal__notice-text {
    color: #57534e;
}

/* ----------------------------------------
   FOOTER (Buttons)
   ---------------------------------------- */
.osac-modal__footer {
    padding: 0 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.osac-modal__footer-row {
    display: flex;
    gap: 10px;
}

.osac-modal__footer-row .osac-modal__btn {
    flex: 1;
}

/* Buttons */
.osac-modal__btn {
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    border: none;
}

/* Primary Button (Gold) */
.osac-modal__btn--primary {
    background: linear-gradient(135deg, #D6A85B 0%, #c49a4d 100%);
    color: #ffffff;
    width: 100%;
    order: -1;
}

.osac-modal__btn--primary:hover {
    background: linear-gradient(135deg, #c49a4d 0%, #b38d42 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(214, 168, 91, 0.3);
}

/* Secondary Button (Outline) */
.osac-modal__btn--secondary {
    background: #ffffff;
    color: #374151;
    border: 1.5px solid #e5e7eb;
}

.osac-modal__btn--secondary:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

/* Full-width button (for single-action modals) */
.osac-modal__btn--full {
    width: 100%;
    box-sizing: border-box;
}

/* ============================================
   POPUP A: WARNING (Extensions Available)
   Gold/Beige Theme
   ============================================ */
.osac-modal--warning .osac-modal__header {
    background: #fffcf7;
    border-bottom-color: #D6A85B;
}

.osac-modal--warning .osac-modal__icon svg {
    stroke: #D6A85B;
}

.osac-modal--warning .osac-modal__timer {
    border-color: #D6A85B;
}

.osac-modal--warning .osac-modal__notice {
    background: #FFF8E8;
    border: 1px solid #f5e6d3;
}

.osac-modal--warning .osac-modal__notice-icon svg {
    stroke: #D6A85B;
}

/* Last Extension Warning (slightly more attention) */
.osac-modal--warning.osac-modal--last-chance .osac-modal__notice {
    background: #FEF3E2;
    border-color: #f5dbb8;
}

/* ============================================
   POPUP B: FINAL (No Extensions Left)
   Soft-Red Theme
   ============================================ */
.osac-modal--final .osac-modal__header {
    background: #fffafa;
    border-bottom-color: rgba(216, 106, 106, 0.5);
}

.osac-modal--final .osac-modal__icon svg {
    stroke: #D86A6A;
}

.osac-modal--final .osac-modal__timer {
    border-color: #F4D7D7;
}

.osac-modal--final .osac-modal__timer-value {
    color: #C45C5C;
}

.osac-modal--final .osac-modal__notice {
    background: #FFF5F5;
    border: 1px solid #F4D7D7;
}

.osac-modal--final .osac-modal__notice-icon svg {
    stroke: #D86A6A;
}

.osac-modal--final .osac-modal__notice-text {
    color: #9a4c4c;
}

/* ============================================
   POPUP: EXPIRED
   Neutral/Gray Theme
   ============================================ */
.osac-modal--expired .osac-modal__header {
    background: #f9fafb;
    border-bottom-color: #d1d5db;
}

.osac-modal--expired .osac-modal__icon svg {
    stroke: #9ca3af;
}

.osac-modal--expired .osac-modal__timer {
    border-color: #e5e7eb;
}

.osac-modal--expired .osac-modal__timer-value {
    color: #9ca3af;
}

.osac-modal--expired .osac-modal__notice {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
}

/* ============================================
   EXTENSION TOAST (Small notification)
   ============================================ */
.osac-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #ffffff;
    border-radius: 8px;
    padding: 14px 18px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border-left: 4px solid #10b981;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 99998;
    animation: osac-toast-in 0.3s ease-out;
    max-width: 320px;
}

@keyframes osac-toast-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.osac-toast--closing {
    animation: osac-toast-out 0.2s ease-in forwards;
}

@keyframes osac-toast-out {
    to {
        opacity: 0;
        transform: translateY(10px);
    }
}

.osac-toast__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.osac-toast__icon svg {
    width: 100%;
    height: 100%;
    stroke: #10b981;
}

.osac-toast__content {
    flex: 1;
}

.osac-toast__title {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1f2937;
    margin: 0 0 2px;
}

.osac-toast__text {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0;
}

/* ============================================
   TIMER HEADER BUTTON
   ============================================ */
.osac-hold-timer-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.osac-hold-timer__extend {
    width: 26px;
    height: 26px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    color: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.osac-hold-timer__extend:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.osac-hold-timer__extend:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 480px) {
    .osac-modal {
        max-width: 100%;
        margin: 10px;
        border-radius: 10px;
    }

    .osac-modal__header {
        padding: 20px 20px 14px;
    }

    .osac-modal__body {
        padding: 20px;
    }

    .osac-modal__footer {
        padding: 0 20px 20px;
    }

    .osac-modal__timer-value {
        font-size: 2rem;
    }

    .osac-toast {
        left: 16px;
        right: 16px;
        bottom: 16px;
        max-width: none;
    }
}

/* ===========================================
   API ERROR POPUP & BOOKING LIMIT POPUP
   =========================================== */
.osac-api-error-overlay,
.osac-booking-limit-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100001;
    padding: 20px;
    animation: osac-fade-in 0.2s ease-out;
}

.osac-api-error-popup,
.osac-booking-limit-popup {
    background: #ffffff;
    border-radius: 12px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: osac-slide-up 0.25s ease-out;
    padding: 24px;
    text-align: center;
}

.osac-api-error-popup .osac-popup-icon--warning {
    color: var(--osb-warning, #ca8a04);
}

.osac-api-error-message {
    color: var(--osb-text-main, #374151);
    line-height: 1.6;
}

.osac-popup-contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin: 1rem 0;
}

.osac-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--osb-surface, #f9fafb);
    border: 1px solid var(--osb-border, #e5e7eb);
    border-radius: var(--osb-radius-md, 8px);
    color: var(--osb-text-main, #374151);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.osac-contact-link:hover {
    background: var(--osb-border-light, #f3f4f6);
    border-color: var(--osb-brand-primary, #d4a574);
    color: var(--osb-brand-primary, #d4a574);
}

.osac-contact-whatsapp {
    background: #25d366;
    border-color: #25d366;
    color: #fff;
}

.osac-contact-whatsapp:hover {
    background: #128c7e;
    border-color: #128c7e;
    color: #fff;
}

.osac-contact-whatsapp svg {
    fill: #fff;
}

/* API Error Popup - Buttons */
.osac-popup-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.osac-popup-btn {
    flex: 1;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
}

.osac-popup-btn--primary {
    background: linear-gradient(135deg, #D6A85B 0%, #c49a4d 100%);
    color: #ffffff;
}

.osac-popup-btn--primary:hover {
    background: linear-gradient(135deg, #c49a4d 0%, #b38d42 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(214, 168, 91, 0.3);
}

.osac-popup-btn--secondary {
    background: #ffffff;
    color: #374151;
    border: 1.5px solid #e5e7eb;
}

.osac-popup-btn--secondary:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

/* ===========================================
   BOOKING UPDATED MODAL (Redesigned)
   Hospitality-focused confirmation popup
   =========================================== */

/* Modal variant */
.osac-modal--booking-updated {
    max-width: 380px;
    position: relative;
}

.osac-modal--booking-updated .osac-modal__header {
    background: var(--osb-brand-primary-light, #e8f1f7);
    border-bottom: 2px solid var(--osb-brand-primary, #26577C);
    padding: 28px 24px 20px;
}

.osac-modal--booking-updated .osac-modal__icon--success {
    width: 52px;
    height: 52px;
    background: var(--osb-success-light, #d1fae5);
    border-radius: 50%;
    padding: 12px;
    margin-bottom: 12px;
}

.osac-modal--booking-updated .osac-modal__icon--success svg {
    stroke: var(--osb-success, #10b981);
}

.osac-modal--booking-updated .osac-modal__title {
    color: var(--osb-brand-primary, #26577C);
    font-size: var(--osb-text-xl, 1.25rem);
    margin-bottom: 6px;
}

.osac-modal--booking-updated .osac-modal__subtitle {
    color: var(--osb-text-muted, #6b7280);
    font-size: var(--osb-text-sm, 0.875rem);
    margin: 0;
}

/* Stay Summary - Compact, elegant */
.osac-booking-summary {
    text-align: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--osb-border-light, #ece8e0);
}

.osac-booking-summary__dates {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
}

.osac-booking-summary__date {
    font-weight: var(--osb-font-semibold, 600);
    color: var(--osb-text-dark, #1f2937);
    font-size: var(--osb-text-base, 1rem);
}

.osac-booking-summary__arrow {
    color: var(--osb-brand-primary, #26577C);
    font-size: var(--osb-text-lg, 1.125rem);
}

.osac-booking-summary__details {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.osac-booking-summary__item {
    color: var(--osb-text-muted, #6b7280);
    font-size: var(--osb-text-sm, 0.875rem);
}

.osac-booking-summary__item:not(:last-child)::after {
    content: '·';
    margin-left: 6px;
    color: var(--osb-border, #e5e7eb);
}

/* Total Card - Subtle, brand-aligned (not yellow/warning) */
.osac-booking-total {
    background: var(--osb-surface-alt, #f8f6f2);
    border: 1px solid var(--osb-border-light, #e5e7eb);
    border-radius: var(--osb-radius-md, 8px);
    padding: 20px;
    text-align: center;
    margin-top: 16px;
}

.osac-booking-total__label {
    display: block;
    font-size: var(--osb-text-xs, 0.75rem);
    font-weight: var(--osb-font-medium, 500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--osb-text-muted, #6b7280);
    margin-bottom: 8px;
}

.osac-booking-total__amount {
    display: block;
    font-size: var(--osb-text-2xl, 1.5rem);
    font-weight: var(--osb-font-bold, 700);
    color: var(--osb-brand-primary, #26577C);
    letter-spacing: -0.01em;
}

.osac-booking-total__note {
    display: block;
    font-size: var(--osb-text-xs, 0.75rem);
    color: var(--osb-text-muted, #6b7280);
    margin-top: 6px;
}

/* Footer button for booking-updated */
.osac-modal--booking-updated .osac-modal__footer {
    padding: 16px 24px 24px;
}

.osac-modal--booking-updated .osac-modal__btn--primary {
    background: var(--osb-brand-primary, #26577C);
}

.osac-modal--booking-updated .osac-modal__btn--primary:hover {
    background: var(--osb-brand-primary-dark, #1e4562);
    box-shadow: 0 4px 12px color-mix(in oklch, var(--osb-brand-primary) 25%, transparent);
}

/* ===========================================
   STATUS CHANGE MODAL (Redesigned)
   Hold → Confirmed / Confirmed → Hold
   =========================================== */

.osac-modal--status-change {
    max-width: 360px;
}

.osac-modal--status-change .osac-modal__header {
    background: var(--osb-brand-primary-light, #e8f1f7);
    border-bottom: 2px solid var(--osb-brand-primary, #26577C);
    padding: 28px 24px 20px;
}

.osac-modal--status-change .osac-modal__icon--success {
    width: 52px;
    height: 52px;
    background: var(--osb-success-light, #d1fae5);
    border-radius: 50%;
    padding: 12px;
    margin-bottom: 12px;
}

.osac-modal--status-change .osac-modal__icon--success svg {
    stroke: var(--osb-success, #10b981);
}

.osac-modal--status-change .osac-modal__title {
    color: var(--osb-brand-primary, #26577C);
    font-size: var(--osb-text-xl, 1.25rem);
    margin-bottom: 6px;
}

.osac-modal--status-change .osac-modal__subtitle {
    color: var(--osb-text-muted, #6b7280);
    font-size: var(--osb-text-sm, 0.875rem);
    margin: 0;
}

/* Status Display - Prominent centered badge */
.osac-status-display {
    text-align: center;
    padding: 32px 20px;
}

.osac-status-display__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: var(--osb-radius-full, 9999px);
    font-size: var(--osb-text-lg, 1.125rem);
    font-weight: var(--osb-font-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.osac-status-display__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: osac-pulse 2s ease-in-out infinite;
}

@keyframes osac-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Confirmed status (green) */
.osac-status-display__badge--confirmed {
    background: var(--osb-success-light, #d1fae5);
    color: var(--osb-success-dark, #047857);
    border: 2px solid var(--osb-success, #10b981);
}

.osac-status-display__badge--confirmed .osac-status-display__dot {
    background: var(--osb-success, #10b981);
}

/* Hold status (blue) */
.osac-status-display__badge--hold {
    background: var(--osb-brand-primary-light, #e8f1f7);
    color: var(--osb-brand-primary, #26577C);
    border: 2px solid var(--osb-brand-primary, #26577C);
}

.osac-status-display__badge--hold .osac-status-display__dot {
    background: var(--osb-brand-primary, #26577C);
}

/* Footer */
.osac-modal--status-change .osac-modal__footer {
    padding: 16px 24px 24px;
}

.osac-modal--status-change .osac-modal__btn--primary {
    background: var(--osb-brand-primary, #26577C);
}

.osac-modal--status-change .osac-modal__btn--primary:hover {
    background: var(--osb-brand-primary-dark, #1e4562);
    box-shadow: 0 4px 12px color-mix(in oklch, var(--osb-brand-primary) 25%, transparent);
}

/* ===========================================
   BOOKING CANCELLED MODAL (Redesigned)
   Calm, neutral tone - not dramatic
   =========================================== */

.osac-modal--booking-cancelled {
    max-width: 380px;
}

.osac-modal--booking-cancelled .osac-modal__header {
    background: var(--osb-surface-alt, #f8f6f2);
    border-bottom: 2px solid var(--osb-border, #e5e7eb);
    padding: 28px 24px 20px;
}

.osac-modal--booking-cancelled .osac-modal__icon--neutral {
    width: 52px;
    height: 52px;
    background: var(--osb-surface, #ece8e0);
    border-radius: 50%;
    padding: 12px;
    margin-bottom: 12px;
}

.osac-modal--booking-cancelled .osac-modal__icon--neutral svg {
    stroke: var(--osb-text-muted, #6b7280);
}

.osac-modal--booking-cancelled .osac-modal__title {
    color: var(--osb-text-dark, #374151);
    font-size: var(--osb-text-xl, 1.25rem);
    margin-bottom: 6px;
}

.osac-modal--booking-cancelled .osac-modal__subtitle {
    color: var(--osb-text-muted, #6b7280);
    font-size: var(--osb-text-sm, 0.875rem);
    margin: 0;
}

/* Cancelled info */
.osac-cancelled-info {
    text-align: center;
    padding: 24px 20px;
}

.osac-cancelled-info__message {
    color: var(--osb-text-muted, #6b7280);
    font-size: var(--osb-text-sm, 0.875rem);
    line-height: 1.6;
    margin: 0;
}

/* Footer */
.osac-modal--booking-cancelled .osac-modal__footer {
    padding: 16px 24px 24px;
}

.osac-modal--booking-cancelled .osac-modal__btn--primary {
    background: var(--osb-text-muted, #6b7280);
}

.osac-modal--booking-cancelled .osac-modal__btn--primary:hover {
    background: var(--osb-text-dark, #374151);
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.25);
}

/* ===========================================
   CONNECTION ISSUE / API ERROR MODAL
   =========================================== */

.osac-modal--connection-issue {
    max-width: 400px;
}

.osac-modal--connection-issue .osac-modal__header {
    background: var(--osb-warning-light, #fef3c7);
    border-bottom: 2px solid var(--osb-warning, #f59e0b);
    padding: 28px 24px 20px;
}

.osac-modal--connection-issue .osac-modal__icon--warning {
    width: 52px;
    height: 52px;
    background: #fff;
    border-radius: 50%;
    padding: 12px;
    margin-bottom: 12px;
}

.osac-modal--connection-issue .osac-modal__icon--warning svg {
    stroke: var(--osb-warning, #f59e0b);
}

.osac-modal--connection-issue .osac-modal__title {
    color: var(--osb-warning-dark, #b45309);
    font-size: var(--osb-text-xl, 1.25rem);
    margin-bottom: 6px;
}

.osac-modal--connection-issue .osac-modal__subtitle {
    color: var(--osb-text-muted, #6b7280);
    font-size: var(--osb-text-sm, 0.875rem);
    margin: 0;
}

.osac-connection-info {
    text-align: center;
    padding: 16px 0;
}

.osac-connection-info__message {
    color: var(--osb-text-muted, #6b7280);
    font-size: var(--osb-text-sm, 0.875rem);
    line-height: 1.6;
    margin: 0;
}

/* ===========================================
   BOOKING LIMIT MODAL
   =========================================== */

.osac-modal--booking-limit {
    max-width: 400px;
}

.osac-modal--booking-limit .osac-modal__header {
    background: var(--osb-brand-primary-light, #e8f1f7);
    border-bottom: 2px solid var(--osb-brand-primary, #26577C);
    padding: 28px 24px 20px;
}

.osac-modal--booking-limit .osac-modal__icon--info {
    width: 52px;
    height: 52px;
    background: #fff;
    border-radius: 50%;
    padding: 12px;
    margin-bottom: 12px;
}

.osac-modal--booking-limit .osac-modal__icon--info svg {
    stroke: var(--osb-brand-primary, #26577C);
}

.osac-modal--booking-limit .osac-modal__title {
    color: var(--osb-brand-primary, #26577C);
    font-size: var(--osb-text-xl, 1.25rem);
    margin-bottom: 6px;
}

.osac-modal--booking-limit .osac-modal__subtitle {
    color: var(--osb-text-muted, #6b7280);
    font-size: var(--osb-text-sm, 0.875rem);
    margin: 0;
}

.osac-modal--booking-limit .osac-modal__btn--primary {
    background: var(--osb-brand-primary, #26577C);
}

.osac-modal--booking-limit .osac-modal__btn--primary:hover {
    background: var(--osb-brand-primary-dark, #1e4562);
}

/* ===========================================
   CONTACT OPTIONS (Shared)
   =========================================== */

.osac-contact-options {
    text-align: center;
    padding: 16px 0;
    border-top: 1px solid var(--osb-border-light, #ece8e0);
}

.osac-contact-options__label {
    font-size: var(--osb-text-xs, 0.75rem);
    color: var(--osb-text-muted, #6b7280);
    margin: 0 0 12px 0;
}

.osac-contact-options__buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.osac-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--osb-radius-md, 8px);
    font-size: var(--osb-text-sm, 0.875rem);
    font-weight: var(--osb-font-medium, 500);
    text-decoration: none;
    transition: all 0.15s ease;
}

.osac-contact-btn--whatsapp {
    background: #25d366;
    color: #fff;
}

.osac-contact-btn--whatsapp:hover {
    background: #128c7e;
    color: #fff;
}

.osac-contact-btn--email {
    background: var(--osb-surface, #f9fafb);
    color: var(--osb-text-main, #374151);
    border: 1px solid var(--osb-border, #e5e7eb);
}

.osac-contact-btn--email:hover {
    background: var(--osb-border-light, #ece8e0);
    border-color: var(--osb-brand-primary, #26577C);
    color: var(--osb-brand-primary, #26577C);
}

/* ===========================================
   TIMER POPUPS (Warning & Expired)
   =========================================== */

.osac-modal--timer-warning {
    max-width: 380px;
}

.osac-modal--timer-warning .osac-modal__header {
    background: var(--osb-warning-light, #fef3c7);
    border-bottom: 2px solid var(--osb-warning, #f59e0b);
    padding: 28px 24px 20px;
}

.osac-modal--timer-warning .osac-modal__icon--timer {
    width: 52px;
    height: 52px;
    background: #fff;
    border-radius: 50%;
    padding: 12px;
    margin-bottom: 12px;
}

.osac-modal--timer-warning .osac-modal__icon--timer svg {
    stroke: var(--osb-warning, #f59e0b);
}

.osac-modal--timer-warning .osac-modal__title {
    color: var(--osb-warning-dark, #b45309);
    font-size: var(--osb-text-xl, 1.25rem);
    margin-bottom: 6px;
}

.osac-modal--timer-warning .osac-modal__subtitle {
    color: var(--osb-text-muted, #6b7280);
    font-size: var(--osb-text-sm, 0.875rem);
    margin: 0;
}

/* Timer Expired */
.osac-modal--timer-expired {
    max-width: 380px;
}

.osac-modal--timer-expired .osac-modal__header {
    background: var(--osb-surface-alt, #f8f6f2);
    border-bottom: 2px solid var(--osb-border, #e5e7eb);
    padding: 28px 24px 20px;
}

.osac-modal--timer-expired .osac-modal__icon--neutral {
    width: 52px;
    height: 52px;
    background: var(--osb-surface, #ece8e0);
    border-radius: 50%;
    padding: 12px;
    margin-bottom: 12px;
}

.osac-modal--timer-expired .osac-modal__icon--neutral svg {
    stroke: var(--osb-text-muted, #6b7280);
}

.osac-modal--timer-expired .osac-modal__title {
    color: var(--osb-text-dark, #374151);
    font-size: var(--osb-text-xl, 1.25rem);
    margin-bottom: 6px;
}

.osac-modal--timer-expired .osac-modal__subtitle {
    color: var(--osb-text-muted, #6b7280);
    font-size: var(--osb-text-sm, 0.875rem);
    margin: 0;
}

.osac-modal--timer-expired .osac-modal__btn--primary {
    background: var(--osb-text-muted, #6b7280);
}

.osac-modal--timer-expired .osac-modal__btn--primary:hover {
    background: var(--osb-text-dark, #374151);
}

/* Timer Display */
.osac-timer-display {
    text-align: center;
    padding: 20px;
    background: var(--osb-surface, #f9fafb);
    border: 1px solid var(--osb-border-light, #e5e7eb);
    border-radius: var(--osb-radius-md, 8px);
    margin-bottom: 16px;
}

.osac-timer-display__label {
    display: block;
    font-size: var(--osb-text-xs, 0.75rem);
    color: var(--osb-text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.osac-timer-display__value {
    font-size: 2.5rem;
    font-weight: var(--osb-font-bold, 700);
    font-family: 'SF Mono', 'Monaco', monospace;
    color: var(--osb-text-dark, #1f2937);
    letter-spacing: 0.05em;
}

.osac-timer-display--expired .osac-timer-display__value {
    color: var(--osb-text-muted, #9ca3af);
}

.osac-timer-notice {
    text-align: center;
    font-size: var(--osb-text-sm, 0.875rem);
    color: var(--osb-text-muted, #6b7280);
    margin: 0;
}

.osac-expired-message {
    text-align: center;
    font-size: var(--osb-text-sm, 0.875rem);
    color: var(--osb-text-muted, #6b7280);
    margin: 0;
}

/* ===========================================
   CONFIRM DIALOG
   =========================================== */

.osac-modal--confirm {
    max-width: 360px;
}

.osac-modal--confirm .osac-modal__header {
    background: var(--osb-brand-primary-light, #e8f1f7);
    border-bottom: 2px solid var(--osb-brand-primary, #26577C);
    padding: 28px 24px 20px;
}

.osac-modal--confirm .osac-modal__icon--question {
    width: 52px;
    height: 52px;
    background: #fff;
    border-radius: 50%;
    padding: 12px;
    margin-bottom: 12px;
}

.osac-modal--confirm .osac-modal__icon--question svg {
    stroke: var(--osb-brand-primary, #26577C);
}

.osac-modal--confirm .osac-modal__title {
    color: var(--osb-brand-primary, #26577C);
    font-size: var(--osb-text-xl, 1.25rem);
    margin-bottom: 6px;
}

.osac-modal--confirm .osac-modal__subtitle {
    color: var(--osb-text-muted, #6b7280);
    font-size: var(--osb-text-sm, 0.875rem);
    margin: 0;
}

.osac-modal--confirm .osac-modal__btn--primary {
    background: var(--osb-brand-primary, #26577C);
}

.osac-modal--confirm .osac-modal__btn--primary:hover {
    background: var(--osb-brand-primary-dark, #1e4562);
}

/* ===========================================
   TEXT BUTTON (Ghost style)
   =========================================== */

.osac-modal__btn--text {
    background: transparent;
    color: var(--osb-text-muted, #6b7280);
    border: none;
    padding: 10px 20px;
    font-size: var(--osb-text-sm, 0.875rem);
    width: 100%;
}

.osac-modal__btn--text:hover {
    color: var(--osb-text-dark, #374151);
    background: var(--osb-surface, #f9fafb);
}

/* ===========================================
   GENERIC SUCCESS MODAL
   =========================================== */

.osac-modal--generic-success {
    max-width: 380px;
}

.osac-modal--generic-success .osac-modal__header {
    background: var(--osb-success-light, #d1fae5);
    border-bottom: 2px solid var(--osb-success, #10b981);
    padding: 28px 24px 20px;
}

.osac-modal--generic-success .osac-modal__icon--success {
    width: 52px;
    height: 52px;
    background: #fff;
    border-radius: 50%;
    padding: 12px;
    margin-bottom: 12px;
}

.osac-modal--generic-success .osac-modal__icon--success svg {
    stroke: var(--osb-success, #10b981);
}

.osac-modal--generic-success .osac-modal__title {
    color: var(--osb-success-dark, #047857);
    font-size: var(--osb-text-xl, 1.25rem);
    margin-bottom: 6px;
}

.osac-modal--generic-success .osac-modal__subtitle {
    color: var(--osb-text-muted, #6b7280);
    font-size: var(--osb-text-sm, 0.875rem);
    margin: 0;
}

.osac-modal--generic-success .osac-modal__btn--primary {
    background: var(--osb-success, #10b981);
}

.osac-modal--generic-success .osac-modal__btn--primary:hover {
    background: var(--osb-success-dark, #047857);
}

/* ===========================================
   GENERIC ERROR MODAL
   =========================================== */

.osac-modal--generic-error {
    max-width: 400px;
}

.osac-modal--generic-error .osac-modal__header {
    background: var(--osb-error-light, #fee2e2);
    border-bottom: 2px solid var(--osb-error, #ef4444);
    padding: 28px 24px 20px;
}

.osac-modal--generic-error .osac-modal__icon--error {
    width: 52px;
    height: 52px;
    background: #fff;
    border-radius: 50%;
    padding: 12px;
    margin-bottom: 12px;
}

.osac-modal--generic-error .osac-modal__icon--error svg {
    stroke: var(--osb-error, #ef4444);
}

.osac-modal--generic-error .osac-modal__title {
    color: var(--osb-error-dark, #b91c1c);
    font-size: var(--osb-text-xl, 1.25rem);
    margin-bottom: 6px;
}

.osac-modal--generic-error .osac-modal__subtitle {
    color: var(--osb-text-muted, #6b7280);
    font-size: var(--osb-text-sm, 0.875rem);
    margin: 0;
}

.osac-modal--generic-error .osac-modal__btn--primary {
    background: var(--osb-error, #ef4444);
}

.osac-modal--generic-error .osac-modal__btn--primary:hover {
    background: var(--osb-error-dark, #b91c1c);
}

/* Error details box */
.osac-error-details {
    background: var(--osb-surface-alt, #f8f6f2);
    border: 1px solid var(--osb-border-light, #e5e7eb);
    border-radius: var(--osb-radius-md, 8px);
    padding: 12px 16px;
    margin-top: 16px;
}

.osac-error-details code {
    font-family: 'SF Mono', 'Monaco', monospace;
    font-size: var(--osb-text-xs, 0.75rem);
    color: var(--osb-text-muted, #6b7280);
    word-break: break-all;
}

/* ===========================================
   STAFF CONFIRMATION MODAL
   =========================================== */

.osac-modal--staff-confirm {
    max-width: 440px;
    max-height: 90vh;
    position: relative;
    display: flex;
    flex-direction: column;
}

.osac-modal--staff-confirm .osac-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--osb-radius-sm, 4px);
    color: var(--osb-text-muted, #6b7280);
    transition: all 0.15s ease;
    z-index: 10;
}

.osac-modal--staff-confirm .osac-modal__close:hover {
    background: var(--osb-surface-hover, #ece8e0);
    color: var(--osb-text-dark, #1f2937);
}

.osac-modal--staff-confirm .osac-modal__close svg {
    width: 20px;
    height: 20px;
}

.osac-modal--staff-confirm .osac-modal__header {
    background: var(--osb-brand-primary-light, #e8f1f7);
    border-bottom: 2px solid var(--osb-brand-primary, #26577C);
    padding: 28px 24px 20px;
    flex-shrink: 0;
}

.osac-modal--staff-confirm .osac-modal__icon--confirm {
    width: 52px;
    height: 52px;
    background: #fff;
    border-radius: 50%;
    padding: 12px;
    margin-bottom: 12px;
}

.osac-modal--staff-confirm .osac-modal__icon--confirm svg {
    stroke: var(--osb-brand-primary, #26577C);
}

.osac-modal--staff-confirm .osac-modal__title {
    color: var(--osb-brand-primary, #26577C);
    font-size: var(--osb-text-xl, 1.25rem);
    margin-bottom: 6px;
}

.osac-modal--staff-confirm .osac-modal__subtitle {
    color: var(--osb-text-muted, #6b7280);
    font-size: var(--osb-text-sm, 0.875rem);
    margin: 0;
}

.osac-modal--staff-confirm .osac-modal__body {
    padding: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0; /* Important for flexbox scrolling */
}

/* Sections */
.osac-staff-confirm__section {
    padding: 16px 24px;
    border-bottom: 1px solid var(--osb-border-light, #ece8e0);
}

.osac-staff-confirm__section:last-of-type {
    border-bottom: none;
}

.osac-staff-confirm__section--pricing {
    background: var(--osb-surface-alt, #f8f6f2);
}

.osac-staff-confirm__section-title {
    font-size: var(--osb-text-xs, 0.75rem);
    font-weight: var(--osb-font-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--osb-brand-primary, #26577C);
    margin: 0 0 12px 0;
}

/* Guest info */
.osac-staff-confirm__guest {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.osac-staff-confirm__guest-name {
    font-weight: var(--osb-font-semibold, 600);
    color: var(--osb-text-dark, #1f2937);
}

.osac-staff-confirm__guest-email {
    font-size: var(--osb-text-sm, 0.875rem);
    color: var(--osb-text-muted, #6b7280);
}

/* Table */
.osac-staff-confirm__table {
    width: 100%;
    border-collapse: collapse;
}

.osac-staff-confirm__table tr {
    border-bottom: 1px solid var(--osb-border-light, #ece8e0);
}

.osac-staff-confirm__table tr:last-child {
    border-bottom: none;
}

.osac-staff-confirm__label,
.osac-staff-confirm__value {
    padding: 8px 0;
    font-size: var(--osb-text-sm, 0.875rem);
}

.osac-staff-confirm__label {
    color: var(--osb-text-muted, #6b7280);
    text-align: left;
    width: 40%;
}

.osac-staff-confirm__value {
    color: var(--osb-text-dark, #1f2937);
    text-align: right;
    font-weight: var(--osb-font-medium, 500);
}

.osac-staff-confirm__value--discount {
    color: var(--osb-success, #10b981);
}

.osac-staff-confirm__row--net {
    border-top: 2px solid var(--osb-brand-primary, #26577C);
}

.osac-staff-confirm__value--net {
    font-size: var(--osb-text-lg, 1.125rem);
    font-weight: var(--osb-font-bold, 700);
    color: var(--osb-brand-primary, #26577C);
}

/* Status row */
.osac-staff-confirm__status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    border-bottom: 1px solid var(--osb-border-light, #ece8e0);
}

.osac-staff-confirm__status-label {
    font-size: var(--osb-text-sm, 0.875rem);
    color: var(--osb-text-muted, #6b7280);
}

/* Warning notice */
.osac-staff-confirm__notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 24px;
    background: var(--osb-warning-light, #fef3c7);
    font-size: var(--osb-text-sm, 0.875rem);
    color: var(--osb-warning-dark, #b45309);
}

.osac-staff-confirm__notice svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    stroke: var(--osb-warning, #f59e0b);
}

/* Footer */
.osac-modal--staff-confirm .osac-modal__footer {
    padding: 16px 24px 24px;
    border-top: 1px solid var(--osb-border-light, #ece8e0);
    flex-shrink: 0;
}

.osac-modal--staff-confirm .osac-modal__btn--primary {
    background: var(--osb-brand-primary, #26577C);
}

.osac-modal--staff-confirm .osac-modal__btn--primary:hover {
    background: var(--osb-brand-primary-dark, #1e4562);
}

/* ===========================================
   STAFF CONFIRM → SUCCESS STATE (green header)
   Inherits all --staff-confirm styles, only overrides header/icon/title
   =========================================== */
.osac-modal--staff-confirmed {
    max-width: 440px;
    max-height: 90vh;
    position: relative;
    display: flex;
    flex-direction: column;
}

.osac-modal--staff-confirmed .osac-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--osb-radius-sm, 4px);
    color: var(--osb-text-muted, #6b7280);
    transition: all 0.15s ease;
    z-index: 10;
}

.osac-modal--staff-confirmed .osac-modal__close:hover {
    background: rgba(255, 255, 255, 0.3);
    color: var(--osb-text-dark, #1f2937);
}

.osac-modal--staff-confirmed .osac-modal__close svg {
    width: 20px;
    height: 20px;
}

.osac-modal--staff-confirmed .osac-modal__header {
    background: var(--osb-success-light, #d1fae5);
    border-bottom: 2px solid var(--osb-success, #10b981);
    padding: 28px 24px 20px;
    flex-shrink: 0;
}

.osac-modal--staff-confirmed .osac-modal__icon--success {
    width: 52px;
    height: 52px;
    background: #fff;
    border-radius: 50%;
    padding: 12px;
    margin-bottom: 12px;
}

.osac-modal--staff-confirmed .osac-modal__icon--success svg {
    stroke: var(--osb-success, #10b981);
}

.osac-modal--staff-confirmed .osac-modal__title {
    color: var(--osb-success-dark, #065f46);
    font-size: var(--osb-text-xl, 1.25rem);
    margin-bottom: 6px;
}

.osac-modal--staff-confirmed .osac-modal__subtitle {
    color: var(--osb-text-muted, #6b7280);
    font-size: var(--osb-text-sm, 0.875rem);
    margin: 0;
}

.osac-modal--staff-confirmed .osac-modal__body {
    padding: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.osac-modal--staff-confirmed .osac-modal__footer {
    padding: 16px 24px 24px;
    border-top: 1px solid var(--osb-border-light, #ece8e0);
    flex-shrink: 0;
}

.osac-modal--staff-confirmed .osac-modal__btn--primary {
    background: var(--osb-success, #10b981);
}

.osac-modal--staff-confirmed .osac-modal__btn--primary:hover {
    background: var(--osb-success-dark, #065f46);
}

/* ===========================================
   CONFIRMATION MODAL - Details Table
   =========================================== */
.osac-confirm-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--osb-space-4);
}

.osac-confirm-table__row {
    border-bottom: 1px solid var(--osb-border-light);
}

.osac-confirm-table__row:last-child {
    border-bottom: none;
}

.osac-confirm-table__row--highlight {
    background: var(--osb-warning-light);
}

.osac-confirm-table__row--highlight .osac-confirm-table__value {
    font-weight: var(--osb-font-semibold);
    color: var(--osb-text-dark);
}

.osac-confirm-table__label,
.osac-confirm-table__value {
    padding: var(--osb-space-3) var(--osb-space-2);
    font-size: var(--osb-text-sm);
}

.osac-confirm-table__label {
    color: var(--osb-text-muted);
    width: 40%;
    text-align: left;
}

.osac-confirm-table__value {
    color: var(--osb-text-main);
    text-align: right;
}

/* Status badges */
.osac-status--hold {
    display: inline-block;
    padding: var(--osb-space-1) var(--osb-space-2);
    background: var(--osb-warning-light);
    color: var(--osb-warning-dark);
    border-radius: var(--osb-radius-sm);
    font-size: var(--osb-text-xs);
    font-weight: var(--osb-font-medium);
}

.osac-status--confirmed {
    display: inline-block;
    padding: var(--osb-space-1) var(--osb-space-2);
    background: var(--osb-success-light);
    color: var(--osb-success-dark);
    border-radius: var(--osb-radius-sm);
    font-size: var(--osb-text-xs);
    font-weight: var(--osb-font-medium);
}

/* ===========================================
   CONFIRMATION MODAL - Pricing Rows
   =========================================== */
.osac-confirm-table__row--discount {
    border-bottom: none;
}

.osac-confirm-table__row--discount .osac-confirm-table__value--discount {
    color: var(--osb-success-dark);
    font-weight: var(--osb-font-medium);
}

.osac-confirm-table__row--net {
    background: var(--osb-success-light);
    border-top: 2px solid var(--osb-success);
}

.osac-confirm-table__row--net .osac-confirm-table__label {
    color: var(--osb-text-dark);
    font-weight: var(--osb-font-semibold);
}

.osac-confirm-table__row--net .osac-confirm-table__value--net {
    color: var(--osb-success-dark);
    font-weight: var(--osb-font-bold);
    font-size: var(--osb-text-lg);
}

/* ===========================================
   LARGE MODAL (Dashboard Booking Detail)
   =========================================== */

/* Wrapper for positioning close button outside modal */
.osac-modal-wrapper {
    position: relative;
    max-width: 520px;
    width: 100%;
}

/* Close button - positioned outside modal box */
.osac-modal__close-btn {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 36px;
    height: 36px;
    background: white;
    border: 2px solid var(--osb-brand-primary, #26577C);
    border-radius: 50%;
    color: var(--osb-brand-primary, #26577C);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.osac-modal__close-btn:hover {
    background: var(--osb-brand-primary, #26577C);
    color: white;
}

.osac-modal__close-btn svg {
    width: 18px;
    height: 18px;
}

.osac-modal--lg {
    max-width: 100%;
    width: 100%;
}

.osac-modal--lg .osac-modal__header {
    padding: var(--osb-space-5, 20px) var(--osb-space-6, 24px) var(--osb-space-4, 16px) var(--osb-space-6, 24px);
    text-align: left;
    background: var(--osb-brand-primary-light, #e8f1f7);
    border-bottom: 2px solid var(--osb-brand-primary, #26577C);
}

.osac-modal--lg .osac-modal__title {
    font-family: var(--osb-font-heading, Inter, sans-serif);
    font-size: var(--osb-text-lg, 1.125rem);
    font-weight: var(--osb-font-semibold, 600);
    color: var(--osb-brand-primary, #26577C);
    margin: 0;
}

.osac-modal--lg .osac-modal__body {
    padding: var(--osb-space-5, 20px) var(--osb-space-6, 24px);
    padding-bottom: 80px; /* Extra space for action buttons */
    max-height: calc(100vh - 160px);
    overflow-y: auto;
}

/* Portrait Modifier - Taller, narrower modal */
.osac-modal--portrait {
    max-width: 420px;
}

.osac-modal--portrait .osac-modal__body {
    min-height: 400px;
    max-height: calc(100vh - 120px);
    padding-bottom: 100px; /* Ensure action button is fully visible */
}

/* Responsive */
@media (max-width: 480px) {
    .osac-modal--lg,
    .osac-modal--portrait {
        max-width: calc(100% - 32px);
        margin: 16px;
    }

    .osac-modal--lg .osac-modal__header {
        padding: var(--osb-space-4, 16px) var(--osb-space-10, 40px) var(--osb-space-3, 12px) var(--osb-space-4, 16px);
    }

    .osac-modal--portrait .osac-modal__body {
        min-height: 300px;
    }
}

/* ===========================================
   COMPACT MODAL VARIANT
   Standard compact design for all popups
   =========================================== */

.osac-modal--compact {
    max-width: 400px;
}

.osac-modal--compact .osac-modal__body {
    padding: 20px 24px;
}

/* Booking Reference (centered) */
.osac-booking-ref {
    text-align: center;
    padding: 12px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--osb-border-light, #ece8e0);
}

.osac-booking-ref__label {
    display: block;
    font-size: var(--osb-text-xs, 0.75rem);
    color: var(--osb-text-muted, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    margin-bottom: 4px;
}

.osac-booking-ref__value {
    display: block;
    font-weight: var(--osb-font-bold, 700);
    font-size: var(--osb-text-lg, 1.125rem);
    color: var(--osb-brand-primary, #26577C);
    font-family: var(--osb-font-mono, 'SF Mono', monospace);
    letter-spacing: 0.025em;
}

.osac-booking-ref__sub {
    display: block;
    font-size: var(--osb-text-sm, 0.875rem);
    color: var(--osb-text-muted, #6b7280);
    margin-top: 2px;
}

/* Discount Section */
.osac-booking-discount {
    padding: 12px 16px;
    background: var(--osb-success-light, #f0fdf4);
    border: 1px solid var(--osb-success, #10b981);
    border-radius: var(--osb-radius-md, 8px);
    margin: 12px 0;
}

.osac-booking-discount__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.osac-booking-discount__row:not(:last-child) {
    border-bottom: 1px solid rgba(16, 185, 129, 0.2);
}

.osac-booking-discount__label {
    font-size: var(--osb-text-sm, 0.875rem);
    color: var(--osb-text-muted, #6b7280);
}

.osac-booking-discount__value {
    font-size: var(--osb-text-sm, 0.875rem);
    font-weight: var(--osb-font-medium, 500);
    color: var(--osb-success-dark, #047857);
}

.osac-booking-discount__value--highlight {
    font-size: var(--osb-text-lg, 1.125rem);
    font-weight: var(--osb-font-bold, 700);
    color: var(--osb-success-dark, #047857);
}

/* Modal Icon Info variant */
.osac-modal__icon--info {
    width: 52px;
    height: 52px;
    background: var(--osb-brand-primary-light, #e8f1f7);
    border-radius: 50%;
    padding: 12px;
    margin-bottom: 12px;
}

.osac-modal__icon--info svg {
    stroke: var(--osb-brand-primary, #26577C);
}

/* ===========================================
   BOOKING DETAILS MODAL (My Bookings Page)
   Design: OSAC Design System
   Primary: Ocean Blue #26577C
   Accent: Gold #D6A85B
   =========================================== */

.osac-modal--booking-details {
    max-width: 480px;
    position: relative;
}

/* Close Button */
.osac-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--osb-radius-sm, 4px);
    color: var(--osb-text-muted, #6b7280);
    transition: all 0.15s ease;
    z-index: 10;
}

.osac-modal__close:hover {
    background: var(--osb-surface-hover, #ece8e0);
    color: var(--osb-text-dark, #1f2937);
}

.osac-modal__close svg {
    width: 20px;
    height: 20px;
}

/* Header with Status Badge */
.osac-modal--booking-details .osac-modal__header {
    background: var(--osb-brand-primary-light, #e8f1f7);
    border-bottom: 2px solid var(--osb-brand-primary, #26577C);
    padding: 24px 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.osac-modal--booking-details .osac-modal__title {
    color: var(--osb-brand-primary, #26577C);
    font-size: var(--osb-text-xl, 1.25rem);
    font-weight: var(--osb-font-semibold, 600);
    margin: 0;
}

/* Status Badges */
.osac-booking-details__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--osb-radius-full, 9999px);
    font-size: var(--osb-text-sm, 0.875rem);
    font-weight: var(--osb-font-medium, 500);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.osac-booking-details__status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.osac-booking-details__status--hold {
    background: var(--osb-brand-primary-light, #e8f1f7);
    color: var(--osb-brand-primary, #26577C);
    border: 1px solid var(--osb-brand-primary, #26577C);
}

.osac-booking-details__status--hold::before {
    background: var(--osb-brand-primary, #26577C);
}

.osac-booking-details__status--confirmed {
    background: var(--osb-success-light, #d1fae5);
    color: var(--osb-success-dark, #059669);
    border: 1px solid var(--osb-success, #10b981);
}

.osac-booking-details__status--confirmed::before {
    background: var(--osb-success, #10b981);
}

.osac-booking-details__status--cancelled {
    background: var(--osb-error-light, #fee2e2);
    color: var(--osb-error-dark, #b91c1c);
    border: 1px solid var(--osb-error, #ef4444);
}

.osac-booking-details__status--cancelled::before {
    background: var(--osb-error, #ef4444);
}

.osac-booking-details__status--pending {
    background: var(--osb-warning-light, #fef3c7);
    color: var(--osb-warning-dark, #b45309);
    border: 1px solid var(--osb-warning, #f59e0b);
}

.osac-booking-details__status--pending::before {
    background: var(--osb-warning, #f59e0b);
}

/* Body */
.osac-modal--booking-details .osac-modal__body {
    padding: 0;
}

/* Sections */
.osac-booking-details__section {
    padding: 20px 24px;
    border-bottom: 1px solid var(--osb-border-light, #ece8e0);
}

.osac-booking-details__section:last-child {
    border-bottom: none;
}

.osac-booking-details__section--pricing {
    background: var(--osb-surface-alt, #f8f6f2);
}

.osac-booking-details__section-title {
    font-size: var(--osb-text-xs, 0.75rem);
    font-weight: var(--osb-font-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--osb-brand-primary, #26577C);
    margin: 0 0 12px 0;
}

/* Booking Reference Display */
.osac-booking-details__reference {
    font-size: var(--osb-text-xl, 1.25rem);
    font-weight: var(--osb-font-bold, 700);
    color: var(--osb-brand-primary, #26577C);
    font-family: var(--osb-font-mono, 'SF Mono', Monaco, monospace);
    letter-spacing: 0.025em;
}

/* Details Table */
.osac-booking-details__table {
    width: 100%;
    border-collapse: collapse;
}

.osac-booking-details__table tr {
    border-bottom: 1px solid var(--osb-border-light, #ece8e0);
}

.osac-booking-details__table tr:last-child {
    border-bottom: none;
}

.osac-booking-details__label,
.osac-booking-details__value {
    padding: 10px 0;
    font-size: var(--osb-text-sm, 0.875rem);
}

.osac-booking-details__label {
    color: var(--osb-text-muted, #6b7280);
    text-align: left;
    width: 40%;
}

.osac-booking-details__value {
    color: var(--osb-text-dark, #1f2937);
    text-align: right;
    font-weight: var(--osb-font-medium, 500);
}

/* Pricing Table */
.osac-booking-details__table--pricing .osac-booking-details__total-row {
    border-top: 2px solid var(--osb-brand-primary, #26577C);
    border-bottom: none;
}

.osac-booking-details__table--pricing .osac-booking-details__total-row td {
    padding-top: 14px;
}

.osac-booking-details__total {
    font-size: var(--osb-text-xl, 1.25rem);
    font-weight: var(--osb-font-bold, 700);
    color: var(--osb-brand-primary, #26577C);
}

/* Footer */
.osac-modal--booking-details .osac-modal__footer {
    padding: 16px 24px 24px;
    border-top: 1px solid var(--osb-border-light, #ece8e0);
}

/* Button Override for Booking Details */
.osac-modal--booking-details .osac-modal__btn--secondary {
    background: var(--osb-brand-primary, #26577C);
    color: #ffffff;
    border: none;
    width: 100%;
}

.osac-modal--booking-details .osac-modal__btn--secondary:hover {
    background: var(--osb-brand-primary-dark, #1e4562);
}

/* Responsive */
@media (max-width: 480px) {
    .osac-modal--booking-details {
        max-width: 100%;
        margin: 10px;
    }

    .osac-booking-details__section {
        padding: 16px 20px;
    }

    .osac-booking-details__reference {
        font-size: var(--osb-text-lg, 1.125rem);
    }

    .osac-booking-details__total {
        font-size: var(--osb-text-lg, 1.125rem);
    }
}

/* ===========================================
   CHANGE BOOKING CONTACT MODAL (WF-006.3)
   Design: OSAC Premium Modal Pattern
   =========================================== */

.osac-modal--change-contact {
    max-width: 440px;
}

/* Font inheritance fix */
.osac-modal--change-contact,
.osac-modal--change-contact * {
    font-family: inherit;
}

/* Premium Header: Grid Layout (Icon | Title+Subtitle | Close) */
.osac-modal--change-contact .osac-modal__header {
    display: grid;
    grid-template-columns: 56px 1fr 32px;
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 4px;
    align-items: center;
    padding: 20px;
    background: var(--osb-brand-primary-light, #e8f1f7);
    border-bottom: 2px solid var(--osb-brand-primary, #26577C);
}

.osac-modal--change-contact .osac-modal__icon--contact {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 52px;
    height: 52px;
    background: #fff;
    border-radius: 50%;
    padding: 12px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px color-mix(in oklch, var(--osb-brand-primary) 12%, transparent);
}

.osac-modal--change-contact .osac-modal__icon--contact svg {
    width: 100%;
    height: 100%;
    stroke: var(--osb-brand-primary, #26577C);
}

.osac-modal--change-contact .osac-modal__title {
    grid-column: 2;
    grid-row: 1;
    color: var(--osb-brand-primary, #26577C);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin: 0;
}

.osac-modal--change-contact .osac-modal__subtitle {
    grid-column: 2;
    grid-row: 2;
    color: var(--osb-text-muted, #6b7280);
    font-size: 13px;
    line-height: 1.35;
    margin: 0;
    max-width: 52ch;
    opacity: 0.9;
}

.osac-modal--change-contact .osac-modal__close {
    grid-column: 3;
    grid-row: 1 / span 2;
    justify-self: end;
    align-self: start;
    width: 32px;
    height: 32px;
    border: none;
    background: #fff;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--osb-brand-primary, #26577C);
    transition: all 0.15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 10;
}

.osac-modal--change-contact .osac-modal__close:hover {
    background: var(--osb-brand-primary, #26577C);
    color: #fff;
    box-shadow: 0 2px 8px color-mix(in oklch, var(--osb-brand-primary) 25%, transparent);
}

.osac-modal--change-contact .osac-modal__close svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2.5;
}

/* Body */
.osac-modal--change-contact .osac-modal__body {
    padding: 20px;
    background: var(--osb-surface-alt, #f8f6f2);
}

/* Premium Section Cards */
.osac-change-contact__section {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid color-mix(in oklch, var(--osb-brand-primary) 12%, transparent);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.osac-change-contact__section:last-child {
    margin-bottom: 0;
}

.osac-change-contact__section-title {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--osb-brand-primary, #26577C);
    opacity: 0.85;
}

/* Travelers list - Selectable Cards */
.osac-change-contact__travelers {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.osac-change-contact__option {
    display: block;
    width: 100%;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid color-mix(in oklch, var(--osb-brand-primary) 10%, transparent);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.osac-change-contact__option:hover {
    background: color-mix(in oklch, var(--osb-brand-primary) 6%, transparent);
    border-color: color-mix(in oklch, var(--osb-brand-primary) 25%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px color-mix(in oklch, var(--osb-brand-primary) 8%, transparent);
}

.osac-change-contact__option-name {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: var(--osb-text-dark, #1f2937);
    margin-bottom: 2px;
}

.osac-change-contact__option-email {
    display: block;
    font-size: 13px;
    color: var(--osb-text-muted, #6b7280);
}

.osac-change-contact__empty {
    padding: 20px 16px;
    color: var(--osb-text-muted, #9ca3af);
    font-size: 13px;
    text-align: center;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
}

.osac-change-contact__loading {
    color: var(--osb-text-muted, #6b7280);
}

/* Email Form */
.osac-change-contact__email-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.osac-change-contact__email-form .osac-form-group {
    margin-bottom: 0;
}

.osac-change-contact__email-form .osac-input {
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    border: 1px solid color-mix(in oklch, var(--osb-brand-primary) 15%, transparent);
    border-radius: 8px;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.osac-change-contact__email-form .osac-input:focus {
    outline: none;
    border-color: var(--osb-brand-primary, #26577C);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--osb-brand-primary) 10%, transparent);
}

.osac-change-contact__email-form .osac-form-hint {
    margin-top: 4px;
    font-size: 12px;
    color: var(--osb-text-muted, #9ca3af);
    line-height: 1.4;
}

/* Premium CTA Button */
.osac-modal--change-contact .osac-modal__btn--primary {
    background: var(--osb-brand-primary, #26577C);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 14px 20px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.osac-modal--change-contact .osac-modal__btn--primary:hover {
    background: var(--osb-brand-primary-dark, #1e4562);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in oklch, var(--osb-brand-primary) 25%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════
   WF-006.4: Staff Search Section
   ═══════════════════════════════════════════════════════════════════ */

.osac-change-contact__search {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.osac-change-contact__search .osac-input {
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    border: 1px solid color-mix(in oklch, var(--osb-brand-primary) 15%, transparent);
    border-radius: 8px;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.osac-change-contact__search .osac-input:focus {
    outline: none;
    border-color: var(--osb-brand-primary, #26577C);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--osb-brand-primary) 10%, transparent);
}

.osac-change-contact__search-results {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
}

.osac-change-contact__search-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid color-mix(in oklch, var(--osb-brand-primary) 10%, transparent);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.osac-change-contact__search-item:hover {
    background: color-mix(in oklch, var(--osb-brand-primary) 6%, transparent);
    border-color: color-mix(in oklch, var(--osb-brand-primary) 25%, transparent);
}

.osac-change-contact__search-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--osb-text-dark, #1f2937);
}

.osac-change-contact__search-email {
    font-size: 13px;
    color: var(--osb-text-muted, #6b7280);
    flex: 1;
}

.osac-change-contact__searching,
.osac-change-contact__no-results,
.osac-change-contact__error {
    padding: 12px;
    font-size: 13px;
    color: var(--osb-text-muted, #6b7280);
    text-align: center;
}

.osac-change-contact__error {
    color: var(--osb-danger, #dc2626);
}

/* Role Badges in Search Results */
.osac-change-contact__search-item .osac-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.osac-badge--role-staff {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}

.osac-badge--role-agency {
    background: rgba(14, 165, 233, 0.1);
    color: #0ea5e9;
}

.osac-badge--role-guest {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

/* ═══════════════════════════════════════════════════════════════════
   WF-006.4: Guest Fallback Hint
   ═══════════════════════════════════════════════════════════════════ */

.osac-change-contact__fallback {
    margin-top: 8px;
}

.osac-change-contact__hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: color-mix(in oklch, var(--osb-brand-primary) 5%, transparent);
    border: 1px solid color-mix(in oklch, var(--osb-brand-primary) 10%, transparent);
    border-radius: 8px;
    font-size: 13px;
    color: var(--osb-text-muted, #6b7280);
    line-height: 1.5;
    margin: 0;
}

.osac-change-contact__hint svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--osb-brand-primary, #26577C);
    opacity: 0.7;
}

/* Responsive */
@media (max-width: 480px) {
    .osac-modal--change-contact {
        max-width: calc(100% - 32px);
        margin: 16px;
    }

    .osac-modal--change-contact .osac-modal__header {
        padding: 24px 20px 16px;
    }

    .osac-modal--change-contact .osac-modal__body {
        padding: 20px;
    }
}

/* ===========================================
   GUEST CHECK-IN MODAL (WF-007)
   Design: OSAC Premium Modal Pattern
   Mobile-first, form-focused layout
   =========================================== */

/* Check-in modal overlay - hidden by default, shown with --active class */
#osac-guest-checkin-modal {
    display: none;
}

#osac-guest-checkin-modal.osac-modal-overlay--active {
    display: flex;
}

.osac-modal--checkin {
    max-width: 920px;
    width: min(920px, calc(100vw - 2rem));
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.osac-modal--checkin .osac-modal__header {
    display: grid;
    grid-template-columns: 52px 1fr 32px;
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 4px;
    align-items: center;
    padding: 20px;
    background: var(--osb-brand-primary-light, #e8f1f7);
    border-bottom: 2px solid var(--osb-brand-primary, #26577C);
    flex-shrink: 0;
}

.osac-modal--checkin .osac-modal__icon--checkin {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 52px;
    height: 52px;
    background: #fff;
    border-radius: 50%;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px color-mix(in oklch, var(--osb-brand-primary) 12%, transparent);
}

.osac-modal--checkin .osac-modal__icon--checkin svg {
    width: 100%;
    height: 100%;
    stroke: var(--osb-brand-primary, #26577C);
}

.osac-modal--checkin .osac-modal__title {
    grid-column: 2;
    grid-row: 1;
    color: var(--osb-brand-primary, #26577C);
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.osac-modal--checkin .osac-modal__subtitle {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 16px;
    background: var(--osb-brand-primary, #26577C);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 20px;
    margin: 4px 0 0 0;
}

.osac-modal--checkin .osac-modal__close {
    position: static;
    grid-column: 3;
    grid-row: 1 / span 2;
    justify-self: end;
    align-self: start;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    color: var(--osb-text-muted, #6b7280);
    cursor: pointer;
    transition: all 0.15s ease;
}

.osac-modal--checkin .osac-modal__close:hover {
    background: rgba(0, 0, 0, 0.12);
    color: var(--osb-text-dark, #1f2937);
}

/* Body - Scrollable */
.osac-modal--checkin .osac-modal__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    background: var(--osb-surface-alt, #f8f6f2);
    min-height: 0;
}

/* Progress Bar */
.osac-checkin__progress {
    height: 4px;
    background: var(--osb-border-light, #e5e7eb);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}

.osac-checkin__progress-bar {
    height: 100%;
    width: 0%;
    background: var(--osb-success, #10b981);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.osac-checkin__progress-text {
    font-size: var(--osb-text-xs, 0.75rem);
    color: var(--osb-text-muted, #6b7280);
    margin: 0 0 16px 0;
}

/* Sections - Card Style */
.osac-checkin__section {
    background: #fff;
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-lg, 12px);
    padding: var(--osb-space-lg, 1.5rem);
    margin-bottom: var(--osb-space-md, 1rem);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 0 rgba(15, 23, 42, 0.03);
}

.osac-checkin__section:last-child {
    margin-bottom: 0;
}

.osac-checkin__section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--osb-brand-primary, #26577C);
}

.osac-checkin__section-title svg {
    flex-shrink: 0;
    opacity: 0.7;
}

/* Form Grid - Auto-wrapping */
.osac-checkin__grid {
    display: grid;
    gap: 1.25rem 1rem; /* row-gap column-gap */
    margin-bottom: 1.25rem;
}

.osac-checkin__grid:last-child {
    margin-bottom: 0;
}

.osac-checkin__grid--1 {
    grid-template-columns: 1fr;
}

.osac-checkin__grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.osac-checkin__grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

/* Form Elements */
.osac-checkin__section .osac-form-group {
    margin-bottom: 0;
    min-width: 0; /* Prevent overflow in grid */
}

.osac-checkin__section .osac-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--osb-text-dark, #374151);
    margin-bottom: 6px;
}

.osac-checkin__section .osac-required {
    color: var(--osb-error, #ef4444);
}

.osac-checkin__section .osac-input,
.osac-checkin__section .osac-select {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid var(--osb-border, #e5e7eb);
    border-radius: 8px;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.osac-checkin__section .osac-input:focus,
.osac-checkin__section .osac-select:focus {
    outline: none;
    border-color: var(--osb-brand-primary, #26577C);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--osb-brand-primary) 10%, transparent);
}

.osac-checkin__section .osac-input[readonly] {
    background: var(--osb-surface, #f9fafb);
    color: var(--osb-text-muted, #6b7280);
}

/* Signature Section */
.osac-checkin__signature-note {
    font-size: 13px;
    color: var(--osb-text-muted, #6b7280);
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.osac-signature-pad {
    position: relative;
    border: 2px dashed var(--osb-border, #d1d5db);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.osac-signature-pad--has-signature {
    border-color: var(--osb-success, #10b981);
    border-style: solid;
}

.osac-signature-pad__canvas {
    display: block;
    width: 100%;
    height: 150px;
    cursor: crosshair;
    touch-action: none;
}

.osac-signature-pad__clear {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--osb-text-muted, #6b7280);
    background: #fff;
    border: 1px solid var(--osb-border, #e5e7eb);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.osac-signature-pad__clear:hover {
    background: var(--osb-surface, #f9fafb);
    border-color: var(--osb-text-muted, #9ca3af);
}

/* Footer - Sticky */
.osac-modal--checkin .osac-modal__footer {
    flex-shrink: 0;
    padding: 16px 20px;
    background: #fff;
    border-top: 1px solid var(--osb-border-light, #ece8e0);
}

.osac-modal--checkin .osac-modal__footer-row {
    display: flex;
    gap: 10px;
}

.osac-modal--checkin .osac-modal__btn {
    flex: 1;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.osac-modal--checkin .osac-modal__btn--primary {
    background: var(--osb-brand-primary, #26577C);
    color: #fff;
}

.osac-modal--checkin .osac-modal__btn--primary:hover {
    background: var(--osb-brand-primary-dark, #1e4562);
}

.osac-modal--checkin .osac-modal__btn--secondary {
    background: #fff;
    color: var(--osb-text-main, #374151);
    border: 1px solid var(--osb-border, #e5e7eb);
}

.osac-modal--checkin .osac-modal__btn--secondary:hover {
    background: var(--osb-surface, #f9fafb);
    border-color: var(--osb-text-muted, #9ca3af);
}

/* Loading State */
.osac-checkin-form--loading {
    pointer-events: none;
    opacity: 0.6;
}

/* Large screens: more space */
@media (min-width: 1024px) {
    .osac-modal--checkin {
        max-width: 980px;
        width: min(980px, calc(100vw - 3rem));
    }
}

/* Tablet: 3-col grid collapses to 2 */
@media (max-width: 768px) {
    .osac-checkin__grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: True fullscreen */
@media (max-width: 640px) {
    #osac-guest-checkin-modal.osac-modal-overlay--active {
        padding: 0;
    }

    .osac-modal--checkin {
        width: 100vw;
        height: 100vh;
        max-width: none;
        max-height: none;
        margin: 0;
        border-radius: 0;
    }

    .osac-modal--checkin .osac-modal__header {
        border-radius: 0;
    }

    .osac-modal--checkin .osac-modal__body {
        padding: 1rem;
    }

    .osac-checkin__section {
        padding: var(--osb-space-md, 1rem);
    }

    .osac-checkin__grid {
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .osac-checkin__grid--2,
    .osac-checkin__grid--3 {
        grid-template-columns: 1fr;
    }

    .osac-modal--checkin .osac-modal__footer-row {
        flex-direction: column;
    }

    .osac-modal--checkin .osac-modal__btn {
        width: 100%;
    }

    /* Primary action first on mobile */
    .osac-modal--checkin .osac-modal__btn--primary {
        order: -1;
    }

    /* Hide print button on mobile */
    .osac-modal--checkin .osac-modal__btn--icon {
        display: none;
    }
}

/* Icon button (Print) */
.osac-modal--checkin .osac-modal__btn--icon {
    flex: 0 0 auto;
    width: 40px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--osb-text-muted, #6b7280);
    border: 1px solid var(--osb-border, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.osac-modal--checkin .osac-modal__btn--icon:hover {
    background: var(--osb-surface, #f9fafb);
    color: var(--osb-text-main, #374151);
    border-color: var(--osb-text-muted, #9ca3af);
}

/* Print-only elements: hidden on screen */
.osac-print-header,
.osac-print-section,
.osac-checkin__print-signatures {
    display: none;
}

/* ======================================================================
   PRINT STYLES - Guest Registration Form (Police Registration)
   Uses OSAC Design Tokens: Ocean Blue #26577C, Gold #D6A85B
   Optimized for A4 with readable font sizes
   ====================================================================== */
@page {
    margin: 15mm 18mm;
}

@media print {
    /* Hide everything except the checkin modal */
    body.osac-printing-checkin > *:not(#osac-guest-checkin-modal):not(#osac-checkin-wizard-modal),
    body.osac-printing-checkin #osac-dive-registration-modal {
        display: none !important;
    }

    body.osac-printing-checkin #osac-guest-checkin-modal,
    body.osac-printing-checkin #osac-checkin-wizard-modal {
        display: block !important;
        visibility: visible !important;
        position: static !important;
        width: 100%;
        height: auto;
        background: #fff;
        padding: 0;
    }

    body.osac-printing-checkin .osac-modal-overlay {
        position: static;
        background: none;
        padding: 0;
        display: block;
    }

    body.osac-printing-checkin .osac-signature-pad__clear {
        display: none !important;
    }

    /* ── Print Header ──────────────────────────────────────────── */
    body.osac-printing-checkin .osac-print-header {
        display: block;
        text-align: center;
        padding: 0 0 10px 0;
        margin-bottom: 16px;
    }

    body.osac-printing-checkin .osac-print-header__top {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin-bottom: 8px;
    }

    body.osac-printing-checkin .osac-print-header__logo {
        display: block;
        height: 56px;
        width: auto;
    }

    body.osac-printing-checkin .osac-print-header__info {
        text-align: left;
    }

    body.osac-printing-checkin .osac-print-header__name {
        font-size: 16px;
        font-weight: 700;
        color: #26577C;
        margin: 0;
        line-height: 1.3;
    }

    body.osac-printing-checkin .osac-print-header__address {
        font-size: 11px;
        color: #666;
        margin: 2px 0 0 0;
    }

    body.osac-printing-checkin .osac-print-header__contact {
        font-size: 11px;
        color: #666;
        margin: 0;
    }

    body.osac-printing-checkin .osac-print-header__divider {
        height: 2px;
        background: linear-gradient(to right, #26577C, #D6A85B, #26577C);
        margin: 4px 0 10px 0;
    }

    body.osac-printing-checkin .osac-print-header__title {
        font-size: 15px;
        font-weight: 700;
        color: #222;
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    body.osac-printing-checkin .osac-print-header__guest-name {
        font-size: 13px;
        font-weight: 600;
        color: #333;
        margin: 4px 0 0 0;
    }

    /* ── Signature Lines ───────────────────────────────────────── */
    body.osac-printing-checkin .osac-checkin__print-signatures {
        display: block;
        margin-top: 32px;
        page-break-inside: avoid;
    }

    body.osac-printing-checkin .osac-checkin__print-signatures-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    body.osac-printing-checkin .osac-checkin__print-sig-block {
        text-align: center;
    }

    body.osac-printing-checkin .osac-checkin__print-sig-line {
        border-bottom: 1px solid #333;
        height: 50px;
        margin-bottom: 6px;
    }

    body.osac-printing-checkin .osac-checkin__print-sig-label {
        font-size: 12px;
        font-weight: 600;
        color: #333;
        margin: 0;
    }

    body.osac-printing-checkin .osac-checkin__print-sig-date {
        font-size: 12px;
        color: #333;
        margin: 12px 0 0 0;
    }

}


/* ============================================
   CHECK-IN WIZARD (WF-007 v2)
   Conversational step-by-step check-in
   ============================================ */

/* ----------------------------------------
   WIZARD MODAL
   ---------------------------------------- */
.osac-modal--wizard {
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
}

.osac-wizard--loading {
    opacity: 0.6;
    pointer-events: none;
}

/* ----------------------------------------
   WIZARD HEADER
   ---------------------------------------- */
.osac-wizard__header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 20px 10px;
    border-bottom: 1px solid #e2ddd5;
    background: linear-gradient(135deg, #f8f6f2 0%, #ece8e0 100%);
    position: relative;
}

.osac-wizard__progress-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.osac-wizard__close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    padding: 4px;
    border-radius: 6px;
    transition: all 0.15s ease;
    z-index: 1;
}

.osac-wizard__close:hover {
    background: #e2ddd5;
    color: #475569;
}

/* Progress Dots */
.osac-wizard__progress-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.osac-wizard__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    transition: all 0.3s ease;
}

.osac-wizard__dot--active {
    background: #0891b2;
    width: 24px;
    border-radius: 4px;
}

.osac-wizard__dot--complete {
    background: #10b981;
    cursor: pointer;
}

.osac-wizard__dot--complete:hover {
    transform: scale(1.3);
}

.osac-wizard__step-label {
    font-size: 11px;
    color: #94a3b8;
    margin: 0;
    white-space: nowrap;
    text-align: center;
}

/* ----------------------------------------
   WIZARD BODY
   ---------------------------------------- */
.osac-wizard__body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    position: relative;
}

/* ----------------------------------------
   WIZARD STEPS
   ---------------------------------------- */
.osac-wizard__step {
    display: none;
    padding: 32px 28px;
    animation: osac-wizard-fade-in 0.3s ease;
}

.osac-wizard__step--active {
    display: block;
}

@keyframes osac-wizard-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Step Icon */
.osac-wizard__step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ecfeff 0%, #e0f2fe 100%);
    color: #0891b2;
    margin: 0 auto 16px;
}

/* Step Titles */
.osac-wizard__step-title {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 4px;
}

.osac-wizard__step-subtitle {
    text-align: center;
    font-size: 14px;
    color: #64748b;
    margin: 0 0 24px;
}

/* ----------------------------------------
   WIZARD FIELDS
   ---------------------------------------- */
.osac-wizard__fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.osac-wizard__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.osac-wizard__field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.osac-wizard__label {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
}

.osac-required {
    color: #ef4444;
}

.osac-wizard__input,
.osac-wizard__select,
.osac-wizard__textarea {
    padding: 10px 12px;
    border: 1.5px solid #e2ddd5;
    border-radius: 8px;
    font-size: 14px;
    color: #1e293b;
    background: #fff;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

.osac-wizard__input:focus,
.osac-wizard__select:focus,
.osac-wizard__textarea:focus {
    border-color: #0891b2;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
    outline: none;
}

.osac-wizard__textarea {
    resize: vertical;
    min-height: 60px;
}

/* ----------------------------------------
   CHOICE BUTTON GROUP (Gender)
   ---------------------------------------- */
.osac-wizard__btn-group {
    display: flex;
    gap: 8px;
}

.osac-wizard__choice-btn {
    flex: 1;
    padding: 10px 16px;
    border: 1.5px solid #e2ddd5;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.osac-wizard__choice-btn:hover {
    border-color: #0891b2;
    background: #ecfeff;
}

.osac-wizard__choice-btn.osac-wizard__choice--active {
    border-color: #0891b2;
    background: #0891b2;
    color: #fff;
}

/* ----------------------------------------
   CHOICE CARDS (Diver Interest)
   ---------------------------------------- */
.osac-wizard__choice-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.osac-wizard__choice-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 2px solid #e2ddd5;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
}

.osac-wizard__choice-card:hover {
    border-color: #0891b2;
    background: #f0fdfa;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(8, 145, 178, 0.1);
}

.osac-wizard__choice-card.osac-wizard__choice--active {
    border-color: #0891b2;
    background: linear-gradient(135deg, #ecfeff 0%, #f0fdfa 100%);
    box-shadow: 0 2px 12px rgba(8, 145, 178, 0.15);
}

.osac-wizard__choice-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #ece8e0;
    color: #64748b;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.osac-wizard__choice-card.osac-wizard__choice--active .osac-wizard__choice-icon {
    background: #0891b2;
    color: #fff;
}

.osac-wizard__choice-title {
    display: block;
    font-weight: 600;
    font-size: 15px;
    color: #1e293b;
}

.osac-wizard__choice-desc {
    display: block;
    font-size: 12px;
    color: #94a3b8;
    margin-top: 2px;
}

/* ----------------------------------------
   INFO CARD (full step confirmation view)
   ---------------------------------------- */
.osac-wizard__info-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border: 1.5px solid #e2ddd5;
    border-radius: 12px;
    overflow: hidden;
    text-align: left;
}

.osac-wizard__info-card-item {
    display: flex;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid #ece8e0;
}

.osac-wizard__info-card-item:last-child {
    border-bottom: none;
}

.osac-wizard__info-card-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f9ff;
    border-radius: 10px;
    color: #0891b2;
}

.osac-wizard__info-card-item strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
}

.osac-wizard__info-card-item p {
    margin: 0;
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
}

.osac-wizard__step-icon--info {
    background: #dbeafe;
    color: #2563eb;
}

/* ----------------------------------------
   CHOICE LIST (Medical Status)
   ---------------------------------------- */
.osac-wizard__choice-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.osac-wizard__choice-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1.5px solid #e2ddd5;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    text-align: left;
    font-size: 14px;
    color: #334155;
    transition: all 0.2s ease;
    width: 100%;
}

.osac-wizard__choice-list-item:hover {
    border-color: #0891b2;
    background: #ecfeff;
}

.osac-wizard__choice-list-item.osac-wizard__choice--active {
    border-color: #0891b2;
    background: #ecfeff;
}

.osac-wizard__choice-list-item--warning.osac-wizard__choice--active {
    border-color: #f59e0b;
    background: #fffbeb;
}

.osac-wizard__choice-radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s ease;
}

.osac-wizard__choice-list-item.osac-wizard__choice--active .osac-wizard__choice-radio {
    border-color: #0891b2;
    background: #0891b2;
}

.osac-wizard__choice-list-item.osac-wizard__choice--active .osac-wizard__choice-radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}

/* ----------------------------------------
   WELCOME CONFIRM CARDS
   ---------------------------------------- */
.osac-wizard__confirm-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.osac-wizard__confirm-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f8f6f2;
    border: 1px solid #e2ddd5;
    border-radius: 10px;
}

.osac-wizard__confirm-label {
    font-size: 13px;
    color: #94a3b8;
    font-weight: 500;
}

.osac-wizard__confirm-value {
    font-size: 14px;
    color: #1e293b;
    font-weight: 600;
}

.osac-wizard__confirm-card--stacked {
    flex-wrap: wrap;
    align-items: flex-start;
}

.osac-wizard__confirm-card--stacked .osac-wizard__confirm-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.osac-wizard__confirm-change {
    font-size: 11px;
    color: #0891b2;
    text-decoration: none;
    margin-top: 4px;
    white-space: nowrap;
}

.osac-wizard__confirm-change:hover {
    text-decoration: underline;
}

.osac-wizard__confirm-input {
    font-size: 14px;
    color: #1e293b;
    font-weight: 600;
    font-family: inherit;
    background: transparent;
    border: none;
    border-bottom: 1px dashed #cbd5e1;
    padding: 2px 0;
    text-align: right;
    outline: none;
    min-width: 0;
    max-width: 180px;
    transition: border-color 0.2s ease;
}

.osac-wizard__confirm-input:focus {
    border-bottom-color: #0891b2;
    border-bottom-style: solid;
}

.osac-wizard__confirm-input::placeholder {
    color: #cbd5e1;
    font-weight: 400;
}

.osac-wizard__confirm-hint {
    display: block;
    font-size: 11px;
    color: #64748b;
    margin-top: 4px;
    font-weight: 400;
}

[data-email-input] .osac-wizard__confirm-input {
    max-width: 220px;
}

/* ----------------------------------------
   INFO BOXES (Medical warnings)
   ---------------------------------------- */
.osac-wizard__info-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    font-size: 13px;
    color: #1e40af;
}

.osac-wizard__info-box svg {
    flex-shrink: 0;
    margin-top: 1px;
}

.osac-wizard__info-box p {
    margin: 0;
}

.osac-wizard__info-box--warning {
    background: #fffbeb;
    border-color: #fcd34d;
    color: #92400e;
}

/* ----------------------------------------
   REVIEW SUMMARY
   ---------------------------------------- */
.osac-wizard__review-summary {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.osac-wizard__review-section {
    background: #f8f6f2;
    border: 1px solid #e2ddd5;
    border-radius: 10px;
    padding: 12px 16px;
}

.osac-wizard__review-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 8px;
}

.osac-wizard__review-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
}

.osac-wizard__review-item {
    display: flex;
    flex-direction: column;
}

.osac-wizard__review-label {
    font-size: 11px;
    color: #94a3b8;
}

.osac-wizard__review-value {
    font-size: 14px;
    color: #1e293b;
    font-weight: 500;
}

/* ----------------------------------------
   SIGNATURE SECTION
   ---------------------------------------- */
.osac-wizard__signature-section {
    margin-top: 8px;
}

.osac-wizard__signature-note {
    font-size: 13px;
    color: #64748b;
    text-align: center;
    margin-bottom: 12px;
}

/* ----------------------------------------
   WIZARD FOOTER / NAVIGATION
   ---------------------------------------- */
.osac-wizard__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-top: 1px solid #e2ddd5;
    background: #fff;
    gap: 8px;
}

.osac-wizard__nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.osac-wizard__nav-btn--back {
    background: transparent;
    color: #64748b;
    padding: 10px 16px;
}

.osac-wizard__nav-btn--back:hover {
    background: #ece8e0;
    color: #334155;
}

.osac-wizard__nav-btn--next {
    background: #0891b2;
    color: #fff;
    margin-left: auto;
}

.osac-wizard__nav-btn--next:hover {
    background: #0e7490;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(8, 145, 178, 0.3);
}

.osac-wizard__nav-btn--complete {
    background: #10b981;
    color: #fff;
    margin-left: auto;
    padding: 12px 24px;
}

.osac-wizard__nav-btn--complete:hover {
    background: #059669;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.osac-wizard__nav-btn--icon {
    background: transparent;
    color: #94a3b8;
    padding: 8px;
    border-radius: 8px;
}

.osac-wizard__nav-btn--icon:hover {
    background: #ece8e0;
    color: #475569;
}

/* ----------------------------------------
   RESPONSIVE
   ---------------------------------------- */
@media (max-width: 640px) {
    .osac-modal-overlay:has(.osac-modal--wizard) {
        padding: 0;
    }

    .osac-modal--wizard {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
        height: 100%;
    }

    .osac-wizard__header {
        padding: 10px 16px 8px;
    }

    .osac-wizard__dot {
        width: 7px;
        height: 7px;
    }

    .osac-wizard__dot--active {
        width: 20px;
    }

    .osac-wizard__step {
        padding: 24px 18px;
    }

    .osac-wizard__step-icon {
        width: 50px;
        height: 50px;
    }

    .osac-wizard__step-title {
        font-size: 18px;
    }

    .osac-wizard__step-subtitle {
        font-size: 13px;
    }

    .osac-wizard__field-row {
        grid-template-columns: 1fr;
    }

    .osac-wizard__choice-card {
        padding: 12px 14px;
    }

    .osac-wizard__choice-card-title {
        font-size: 14px;
    }

    .osac-wizard__confirm-card {
        padding: 10px 14px;
    }

    .osac-wizard__confirm-input {
        max-width: 150px;
    }

    .osac-wizard__review-items {
        grid-template-columns: 1fr;
    }

    .osac-wizard__footer {
        padding: 12px 16px;
    }

    .osac-wizard__nav-btn {
        padding: 10px 16px;
        font-size: 13px;
    }

    .osac-wizard__nav-btn--primary {
        min-width: 120px;
    }
}

/* ----------------------------------------
   PRINT STYLES FOR WIZARD
   ---------------------------------------- */
@media print {
    /* Wizard modal: block layout for print (flex causes height collapse) */
    body.osac-printing-checkin .osac-modal--wizard {
        display: block !important;
        max-width: 100%;
        max-height: none;
        height: auto;
        width: 100%;
        border-radius: 0;
        box-shadow: none;
        border: none;
        position: static;
        margin: 0;
        overflow: visible;
    }

    body.osac-printing-checkin .osac-wizard__body {
        display: block !important;
        flex: none;
        overflow: visible;
        max-height: none;
        height: auto;
        padding: 0;
    }

    body.osac-printing-checkin .osac-wizard__form {
        display: block !important;
    }

    /* Hide ALL wizard steps - data is in print-only sections */
    body.osac-printing-checkin .osac-wizard__step {
        display: none !important;
    }

    /* Hide wizard UI chrome */
    body.osac-printing-checkin .osac-wizard__header,
    body.osac-printing-checkin .osac-wizard__footer {
        display: none !important;
    }

    /* ── Print-only registration sections ─────────────────────── */
    body.osac-printing-checkin .osac-print-section {
        display: block;
        margin-bottom: 10px;
        break-inside: avoid;
        border: 1px solid #e2ddd5;
        border-radius: 4px;
        padding: 10px 14px;
    }

    body.osac-printing-checkin .osac-print-section__title {
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: #26577C;
        border-bottom: 2px solid #D6A85B;
        padding-bottom: 4px;
        margin: 0 0 10px 0;
    }

    body.osac-printing-checkin .osac-print-section__grid {
        display: grid;
        gap: 8px 16px;
        margin-bottom: 8px;
    }

    body.osac-printing-checkin .osac-print-section__grid--1 {
        grid-template-columns: 1fr;
    }

    body.osac-printing-checkin .osac-print-section__grid--2 {
        grid-template-columns: 1fr 1fr;
    }

    body.osac-printing-checkin .osac-print-section__grid--3 {
        grid-template-columns: 1fr 1fr 1fr;
    }

    body.osac-printing-checkin .osac-print-section__label {
        display: block;
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #666;
        margin-bottom: 2px;
    }

    body.osac-printing-checkin .osac-print-section__value {
        display: block;
        font-size: 13px;
        color: #222;
        border-bottom: 1px solid #ccc;
        padding: 3px 4px 4px;
        min-height: 1.4em;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   DIVE REGISTRATION FORM — Screen Styles
   ═══════════════════════════════════════════════════════════════════ */

/* Screen: modal styling (loading state) */
.osac-modal--dive-reg {
    max-width: 420px;
    width: 90%;
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
}

.osac-dive-reg__screen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.osac-dive-reg__screen-header h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: #26577C;
}

.osac-dive-reg__screen-body {
    padding: 20px 0;
}

.osac-dive-reg__screen-msg {
    font-size: 14px;
    color: #555;
    margin: 0 0 12px;
}

.osac-dive-reg__spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #e2ddd5;
    border-top-color: #26577C;
    border-radius: 50%;
    animation: osac-spin 0.6s linear infinite;
    margin: 0 auto;
}

@keyframes osac-spin {
    to { transform: rotate(360deg); }
}

/* Screen: hide all print-only sections */
.osac-dive-reg__print-header,
.osac-dive-reg__section,
.osac-dive-reg__signature {
    display: none;
}

/* Dive pill button in terminal */
.osac-terminal__pill--dive {
    background: #1e7a8a;
    color: #fff;
    border: none;
}

.osac-terminal__pill--dive:hover {
    background: #166673;
}


/* ═══════════════════════════════════════════════════════════════════
   DIVE REGISTRATION FORM — Print Styles
   ═══════════════════════════════════════════════════════════════════ */

@media print {
    /* Hide everything except dive reg modal */
    body.osac-printing-dive-reg > *:not(#osac-dive-registration-modal) {
        display: none !important;
    }

    body.osac-printing-dive-reg #osac-guest-checkin-modal,
    body.osac-printing-dive-reg #osac-checkin-wizard-modal {
        display: none !important;
    }

    /* Kill animations & GPU effects that stall print rendering */
    body.osac-printing-dive-reg,
    body.osac-printing-dive-reg * {
        animation: none !important;
        transition: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.osac-printing-dive-reg #osac-dive-registration-modal {
        display: block !important;
        visibility: visible !important;
        position: static !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        float: none !important;
    }

    /* Override modal overlay (position:fixed → static for print) */
    body.osac-printing-dive-reg .osac-modal-overlay {
        position: static !important;
        background: none !important;
        padding: 0 !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        inset: auto !important;
        float: none !important;
    }

    body.osac-printing-dive-reg .osac-modal--dive-reg {
        display: block !important;
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
        position: static !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        text-align: left !important;
        float: none !important;
    }

    /* Hide screen-only elements */
    body.osac-printing-dive-reg .osac-dive-reg__screen-header,
    body.osac-printing-dive-reg .osac-dive-reg__screen-body {
        display: none !important;
    }

    /* Show print-only elements */
    body.osac-printing-dive-reg .osac-dive-reg__print-header,
    body.osac-printing-dive-reg .osac-dive-reg__section,
    body.osac-printing-dive-reg .osac-dive-reg__signature {
        display: block !important;
        overflow: visible !important;
    }

    /* ── Page setup ─────────────────────── */
    @page {
        size: A4;
        margin: 12mm 16mm;
    }

    /* ── Print Header ─────────────────────── */
    body.osac-printing-dive-reg .osac-dive-reg__print-header-top {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 6px;
    }

    body.osac-printing-dive-reg .osac-dive-reg__logo {
        width: 60px;
        height: 60px;
        object-fit: contain;
    }

    body.osac-printing-dive-reg .osac-dive-reg__header-info h2 {
        font-size: 16px;
        font-weight: 700;
        color: #26577C;
        margin: 0;
    }

    body.osac-printing-dive-reg .osac-dive-reg__header-info p {
        font-size: 10px;
        color: #666;
        margin: 1px 0 0;
    }

    body.osac-printing-dive-reg .osac-dive-reg__header-divider {
        border-top: 2px solid #D6A85B;
        margin: 6px 0;
    }

    body.osac-printing-dive-reg .osac-dive-reg__print-title {
        font-size: 15px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: #26577C;
        text-align: center;
        margin: 4px 0 10px;
    }

    /* ── Sections ─────────────────────── */
    body.osac-printing-dive-reg .osac-dive-reg__section {
        border: 1px solid #e2ddd5;
        border-radius: 4px;
        padding: 8px 12px;
        margin-bottom: 8px;
        /* No break-inside:avoid — long sections must be allowed to break across pages */
    }

    body.osac-printing-dive-reg .osac-dive-reg__section-title {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: #26577C;
        border-bottom: 2px solid #D6A85B;
        padding-bottom: 3px;
        margin: 0 0 8px;
    }

    /* ── Grids ─────────────────────── */
    body.osac-printing-dive-reg .osac-dive-reg__grid {
        display: grid;
        gap: 6px 14px;
        margin-bottom: 6px;
    }

    body.osac-printing-dive-reg .osac-dive-reg__grid--2 {
        grid-template-columns: 1fr 1fr;
    }

    body.osac-printing-dive-reg .osac-dive-reg__grid--3 {
        grid-template-columns: 1fr 1fr 1fr;
    }

    body.osac-printing-dive-reg .osac-dive-reg__label {
        display: block;
        font-size: 9px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #888;
        margin-bottom: 1px;
    }

    body.osac-printing-dive-reg .osac-dive-reg__value {
        display: block;
        font-size: 12px;
        color: #222;
        border-bottom: 1px solid #ccc;
        padding: 2px 3px 3px;
        min-height: 1.3em;
    }

    /* ── Text, Checkboxes, Lists ─────────────────────── */
    body.osac-printing-dive-reg .osac-dive-reg__text {
        font-size: 10px;
        color: #333;
        line-height: 1.5;
        margin: 0 0 6px;
    }

    body.osac-printing-dive-reg .osac-dive-reg__text--legal {
        font-size: 9.5px;
        color: #444;
        line-height: 1.45;
        margin: 0 0 4px;
    }

    body.osac-printing-dive-reg .osac-dive-reg__checkboxes {
        margin: 6px 0;
    }

    body.osac-printing-dive-reg .osac-dive-reg__checkbox {
        display: block;
        font-size: 10px;
        color: #333;
        line-height: 1.5;
        margin-bottom: 4px;
        padding-left: 20px;
        position: relative;
    }

    body.osac-printing-dive-reg .osac-dive-reg__checkbox-box {
        position: absolute;
        left: 0;
        top: 2px;
        width: 12px;
        height: 12px;
        border: 1.5px solid #666;
        border-radius: 2px;
        display: inline-block;
    }

    body.osac-printing-dive-reg .osac-dive-reg__notes-line {
        display: flex;
        align-items: baseline;
        gap: 6px;
        margin: 6px 0;
    }

    body.osac-printing-dive-reg .osac-dive-reg__line {
        flex: 1;
        border-bottom: 1px solid #999;
        min-height: 16px;
    }

    body.osac-printing-dive-reg .osac-dive-reg__line--full {
        width: 100%;
    }

    body.osac-printing-dive-reg .osac-dive-reg__notice {
        font-size: 9px;
        color: #666;
        border-left: 3px solid #D6A85B;
        padding: 4px 8px;
        margin: 6px 0 0;
        background: #fefcf7;
        line-height: 1.4;
    }

    /* ── Responsible Diver Code ─────────────────────── */
    body.osac-printing-dive-reg .osac-dive-reg__code-list {
        font-size: 10px;
        color: #333;
        line-height: 1.5;
        margin: 4px 0 0;
        padding-left: 18px;
    }

    body.osac-printing-dive-reg .osac-dive-reg__code-list li {
        margin-bottom: 3px;
    }

    body.osac-printing-dive-reg .osac-dive-reg__code-list strong {
        color: #26577C;
    }

    /* ── Signature (break-inside:avoid is set above in Sections) ── */
    body.osac-printing-dive-reg .osac-dive-reg__signature {
        margin-top: 14px;
        border-top: 1px solid #e2ddd5;
        padding-top: 10px;
        page-break-before: auto;
    }

    body.osac-printing-dive-reg .osac-dive-reg__sig-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    body.osac-printing-dive-reg .osac-dive-reg__sig-line {
        border-bottom: 1px dotted #333;
        height: 30px;
    }

    body.osac-printing-dive-reg .osac-dive-reg__sig-label {
        font-size: 9px;
        color: #666;
        margin: 3px 0 0;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    body.osac-printing-dive-reg .osac-dive-reg__sig-date {
        font-size: 10px;
        color: #333;
        margin-top: 10px;
    }
}

/* === spinner.css === */
/* ===================================================================
   OSAC v2 - SPINNER & OVERLAYS
   =================================================================== */

/* Scroll lock when overlay is active */
html.osb-lock-scroll,
body.osb-lock-scroll {
    overflow: hidden;
}

/* =========================================
   GLOBAL PAGE OVERLAY (Full-Screen)
   ========================================= */
#osb-global-overlay {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: var(--osb-z-spinner);

    /* Look */
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: saturate(160%) blur(2px);
    -webkit-backdrop-filter: saturate(160%) blur(2px);

    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    /* Smooth transition */
    transition: opacity var(--osb-transition-fast), visibility var(--osb-transition-fast);
}

/* Active state */
#osb-global-overlay.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Busy cursor */
body.osb-busy {
    cursor: progress;
}

/* =========================================
   SPINNER BOX
   ========================================= */
#osb-global-overlay .osb-preview-spinner {
    position: relative;
    width: 100px;
    height: 100px;
    touch-action: none;
}

/* Ring - Ocean Blue → Sand Gradient */
#osb-global-overlay .osb-preview-spinner::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 4px;
    background: conic-gradient(
        from 0deg,
        var(--osb-brand-primary-dark) 0deg,
        var(--osb-brand-primary) 90deg,
        var(--osb-border-light) 180deg,
        var(--osb-surface) 270deg,
        var(--osb-brand-primary-dark) 360deg
    );
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: osbspin 0.9s linear infinite;
}

/* Logo centered */
#osb-global-overlay .osb-spinner-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 55px;
    height: 55px;
    object-fit: contain;
    opacity: 1;
    z-index: 5;
}

/* =========================================
   RESTORE PREVIEW HELPER
   ========================================= */
.osb-container.osb-restore-preview .osb-custom-picker-section {
    display: none !important;
}

.osb-container.osb-restore-preview .osb-booking-preview-section {
    display: block !important;
}

/* =========================================
   MOTION PREFERENCES & KEYFRAMES
   ========================================= */
@media (prefers-reduced-motion: reduce) {
    #osb-global-overlay .osb-preview-spinner::before {
        animation: none;
        z-index: 1;
    }
}

@keyframes osbspin {
    to {
        transform: rotate(360deg);
    }
}

/* === teaser.css === */
/* ===================================================================
   OSAC v2 - TEASER COMPONENT (Modern Design)
   ===================================================================

   Design System:
   - Pill Switcher (fully rounded toggle buttons)
   - Cards Grid (2-col desktop, 1-col mobile)
   - Card Design (white, 16-18px radius, subtle shadows)
   - Badge Pills (outline + tint)
   - DEAL corner marker for promos

   =================================================================== */

/* ===================================================================
   1. RATE CARD (Price per night - vertical stack layout)
   =================================================================== */
.osb-rate-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 2px;
    margin-bottom: var(--osb-space-6);
}

/* Price Block Container - mittig zentriert */
.osb-teaser-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* Zeile 1: Label (PRICE PER NIGHT & BUNGALOW) – Teal eyebrow */
.osb-teaser-label {
    font-family: var(--osb-font-primary);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: #14b8a6;
    margin-bottom: 8px;
}

/* Zeile 2: Preis-Container (from + Betrag) */
.osb-teaser-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    line-height: 1.2;
    margin-bottom: 4px;
}

/* Preis-Betrag — Fraunces (premium, warm) */
.osb-teaser-amount {
    font-family: var(--os-font-display, 'Fraunces', serif);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
    color: #1C2E3F;
    font-variant-numeric: tabular-nums lining-nums;
}

/* Currency symbol — Plus Jakarta Sans (secondary) */
.osb-teaser-curr {
    font-family: var(--os-font-body, 'Plus Jakarta Sans', sans-serif);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.1;
    color: #1C2E3F;
}

/* "from" — Plus Jakarta Sans (label) */
.osb-teaser-from {
    font-family: var(--os-font-body, 'Plus Jakarta Sans', sans-serif);
    font-size: 14px;
    font-weight: 400;
    color: #6B7280;
}

/* Suffix (/ night) — Plus Jakarta Sans (label) */
.osb-teaser-unit {
    font-family: var(--os-font-body, 'Plus Jakarta Sans', sans-serif);
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6B7280;
}

/* ===================================================================
   2. INCLUDED PILLS (Benefits - matching OSAC Tabs style)
   =================================================================== */
.osb-teaser-includes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: var(--osb-space-3);
    width: 100%;
    justify-content: center;
    align-items: center;
}

.osb-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 6px 14px;
    border-radius: 20px;
    font-family: var(--osb-font-primary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    background-color: transparent;
    color: #14b8a6;
    border: 1px solid #14b8a6;
    transition: all 0.2s ease;
}

.osb-pill:hover {
    background-color: #14b8a6;
    color: #FFFFFF;
    border-color: #14b8a6;
}

/* ===================================================================
   3. TEASER CONTAINER
   =================================================================== */
.osb-teaser-prices {
    margin-top: var(--osb-space-4);
    margin-bottom: var(--osb-space-4);
    background-color: #FFFFFF;
    border: 1px solid #e2ddd5;
    border-radius: 12px;
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 72px;
    box-shadow: 0 4px 24px -4px rgba(28, 46, 63, 0.10);
}

.osb-teaser-box {
    /* Alias for teaser-prices */
}

.osb-teaser-error {
    display: none;
    color: var(--osb-error);
    font-size: var(--osb-text-sm);
    padding: var(--osb-space-2);
}

/* ===================================================================
   4. PILL SWITCHER (Fully Rounded Pill Design)
   =================================================================== */
.osb-teaser-switcher {
    display: inline-flex;
    justify-content: center;
    gap: 6px;
    padding: 5px;
    margin: 0 auto;
    background: var(--osb-surface-bg-alt, #f2efe9);
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: 9999px;
}

.osb-teaser-switcher.osb-hidden {
    display: none !important;
}

.osb-switch-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9999px;
    box-shadow: none;
    color: var(--osb-text-muted, #6B7280);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 28px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.osb-switch-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.6);
    border-color: var(--osb-border, #e2ddd5);
}

.osb-switch-btn.active {
    background: #fff;
    border: 1px solid #e2ddd5;
    color: #1C2E3F;
    font-weight: 700;
    border-bottom: 2px solid #14b8a6;
    box-shadow: none;
}

/* Hint text below switch */
.osb-teaser-hint {
    text-align: center;
    font-family: var(--osb-font-primary);
    font-size: 12px;
    color: #6B7280;
    font-style: italic;
    margin-top: 16px;
    margin-bottom: 8px;
    font-weight: 400;
    padding: 0 20px;
}

/* ===================================================================
   5. CARDS GRID (Modern Card Design)
   =================================================================== */
.osb-price-tabs {
    position: relative;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 8px;
    padding-top: 14px;
}

/* 7+ cards -> 3 columns */
.osb-price-tabs:has(> :nth-child(7)) {
    grid-template-columns: repeat(3, 1fr);
}

.osb-price-tabs > .osb-teaser-tab-wrap {
    display: contents;
}

/* --- Card Design (Premium/Clean) --- */
.osb-price-tabs .osb-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    padding: 20px;
    min-height: 80px;
    background: #FFFFFF;
    border: 1px solid #e2ddd5;
    border-radius: 10px;
    box-shadow: none;
    cursor: pointer;
    transition: border-color 0.2s ease;
    overflow: hidden;
}

.osb-price-tabs .osb-tab:hover {
    border-color: #14b8a6;
}

.osb-price-tabs .osb-tab[aria-selected="true"],
.osb-price-tabs .osb-tab.active {
    background: #FFFFFF;
    border: 2px solid #14b8a6;
    box-shadow: 0 0 0 1px #14b8a6;
}

/* Card Header Row (Title + Badge) */
.osb-tab-header {
    display: flex;
    align-items: baseline; /* baseline for text alignment with badge */
    justify-content: space-between;
    width: 100%;
    gap: 8px;
    margin-bottom: 4px;
}

.osb-price-tabs .osb-tab .osb-tab-title {
    font-family: var(--osb-font-display);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.25;
    color: #1C2E3F;
    flex: 1;
}

.osb-price-tabs .osb-tab[aria-selected="true"] .osb-tab-title,
.osb-price-tabs .osb-tab.active .osb-tab-title {
    color: #1C2E3F;
    font-weight: 400;
}

/* Card Subline (Date Range) */
.osb-price-tabs .osb-tab .osb-tab-range {
    font-family: var(--osb-font-primary);
    font-size: 13px;
    color: #6B7280;
    font-weight: 400;
    margin-top: 4px;
}

/* Grid Alignment: 3 cards -> last full width */
.osb-price-tabs:has(> :nth-child(3)):not(:has(> :nth-child(4))) > .osb-teaser-tab-wrap:last-child {
    grid-column: 1 / -1;
}

/* Grid Alignment: 5 cards -> last full width */
.osb-price-tabs:has(> :nth-child(5)):not(:has(> :nth-child(6))) > .osb-teaser-tab-wrap:last-child {
    grid-column: 1 / -1;
}

/* Responsive: Tablet */
@media (max-width: 991px) {
    .osb-price-tabs {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive: Mobile */
@media (max-width: 600px) {
    .osb-price-tabs {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .osb-price-tabs .osb-tab {
        padding: 14px 16px;
        min-height: 72px;
    }

    .osb-price-tabs .osb-tab .osb-tab-range {
        font-size: 12px;
    }
}

/* ===================================================================
   6. TAB PANELS (Price Details Popup)
   =================================================================== */
.osb-panels-container {
    /* Container for panels */
}

.osb-tab-panel {
    position: relative;
    background: var(--osb-surface);
    border: 1px solid var(--osb-border);
    border-radius: var(--osb-radius-lg);
    padding: var(--osb-space-5);
    box-shadow: var(--osb-shadow-lg);
    margin-top: var(--osb-space-3);
    transition: opacity var(--osb-transition-normal), transform var(--osb-transition-normal);
    opacity: 1;
}

.osb-tab-panel.osb-hidden {
    display: none !important;
    opacity: 0;
}

/* Arrow */
.osb-tab-panel::before {
    content: "";
    position: absolute;
    top: -8px;
    width: 14px;
    height: 14px;
    transform: rotate(45deg);
    background: var(--osb-surface);
    border-left: 1px solid var(--osb-border);
    border-top: 1px solid var(--osb-border);
}

.osb-tab-panel.arrow-left::before {
    left: 28px;
}

.osb-tab-panel.arrow-center::before {
    left: calc(50% - 7px);
}

.osb-tab-panel.arrow-right::before {
    right: 28px;
}

/* Panel Header */
.osb-panel-header {
    display: flex;
    align-items: baseline;
    gap: var(--osb-space-3);
    margin-bottom: var(--osb-space-3);
}

.osb-panel-title {
    font-family: var(--osb-font-display);
    font-size: 20px;
    font-weight: 400;
    color: #1C2E3F;
    margin: 0;
}

/* Badge in Panel Header - optical vertical alignment */
.osb-panel-header .osb-badge {
    transform: translateY(-2px);
}

/* Price List */
.osb-teaser-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
}

.osb-teaser-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--osb-space-3) 0;
    border-bottom: 1px dashed var(--osb-border);
}

.osb-teaser-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.osb-teaser-list .lbl {
    font-family: var(--osb-font-primary);
    color: #4A5568;
    font-size: 14px;
    font-weight: 400;
}

.osb-teaser-list .val {
    font-family: var(--osb-font-primary);
    font-size: 15px;
    font-weight: 600;
    color: #1C2E3F;
    text-align: right;
}

/* Simple List (Long Stay Discounts) */
.osb-teaser-list-simple {
    list-style: none;
    padding: 0;
    margin: var(--osb-space-2) 0;
}

.osb-teaser-list-simple li {
    position: relative;
    padding: var(--osb-space-2) 0 var(--osb-space-2) var(--osb-space-5);
    color: var(--osb-text-main);
    font-size: var(--osb-text-base);
    font-weight: var(--osb-font-medium);
    line-height: var(--osb-leading-normal);
}

.osb-teaser-list-simple li::before {
    content: "›";
    position: absolute;
    left: 0;
    top: var(--osb-space-1);
    color: var(--osb-brand-primary);
    font-size: 1.4em;
    line-height: 1;
    font-weight: bold;
}

/* ===================================================================
   7. BADGES (Pill Style with Outline + Tint)
   =================================================================== */

/* Base Badge Style */
.osb-badge,
.badge-promo,
.badge-season {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
    transition: all 0.15s ease;
    white-space: nowrap;
}

/* Default/Season Badge - Neutral Blue/Gray Tint */
.osb-badge,
.badge-season {
    background: rgba(100, 116, 139, 0.08);
    color: #475569;
    border: 1px solid rgba(100, 116, 139, 0.2);
}

/* LOW Season Badge */
.osb-badge[data-type="low"],
.badge-season.badge-low {
    background: rgba(59, 130, 246, 0.08);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

/* HIGH Season Badge */
.osb-badge[data-type="high"],
.badge-season.badge-high {
    background: rgba(245, 158, 11, 0.08);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

/* PEAK Season Badge */
.osb-badge[data-type="peak"],
.badge-season.badge-peak {
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* DEAL/Promo Badge - Green Tint */
.badge-promo,
.osb-badge[data-type="deal"],
.osb-badge[data-type="promo"] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

/* FAIR PRICE Badge - Ocean Blue (Standard Rates) */
.badge-fair-price,
.osb-badge[data-type="fair-price"] {
    background: rgba(47, 111, 163, 0.1);
    color: #2F6FA3;
    border: 1px solid rgba(47, 111, 163, 0.3);
}

/* Badge in Card Header (right aligned, optically adjusted) */
.osb-tab .osb-badge {
    flex-shrink: 0;
    margin-top: 0;
    transform: translateY(-1px); /* slight optical lift */
}

/* ===================================================================
   8. CLOSE BUTTONS
   =================================================================== */
/* Close All Header */
.osb-tabs-header {
    display: flex;
    justify-content: flex-end;
    padding: var(--osb-space-2) var(--osb-space-2) 0 0;
    margin-bottom: var(--osb-space-2);
}

.osb-tabs-header.osb-hidden {
    display: none !important;
}

/* Close Buttons (shared style) */
.osb-close-all-tabs,
.osb-close-panel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #FFFFFF;
    color: #6B7280;
    border: 1px solid #e2ddd5;
    border-radius: 50%;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
}

.osb-close-all-tabs:hover,
.osb-close-panel-btn:hover {
    border-color: #1C2E3F;
    color: #1C2E3F;
}

.osb-close-panel-btn {
    margin-left: auto;
}

/* ===================================================================
   9. UTILITY: Preview Mode Spacing
   =================================================================== */
.osb-has-preview .osb-custom-picker-section {
    margin-top: var(--osb-space-5);
}

/* ===================================================================
   10. AUTO-HIDE: When availability result is shown
   =================================================================== */
.osb-container.osb-has-result .osb-rate-card,
.osb-container.osb-has-result .osb-teaser-prices {
    display: none !important;
}

/* ===================================================================
   11. STANDALONE SHORTCODES
   [osac_price_badge] and [osac_teaser_box]
   =================================================================== */

/* --- Price Badge [osac_price_badge] --- */
.osac-price-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid #e2ddd5;
    border-radius: 12px;
    padding: 28px 32px;
    box-shadow: 0 4px 24px -4px rgba(28, 46, 63, 0.10);
    text-align: center;
}

.osac-price-badge__label {
    font-family: var(--osb-font-primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #14b8a6;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.osac-price-badge__price {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    line-height: 1;
}

.osac-price-badge__currency,
.osac-price-badge__amount {
    font-family: var(--osb-font-display);
    font-size: 36px;
    font-weight: 400;
    color: #1C2E3F;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums lining-nums;
}

.osac-price-badge__from,
.osac-price-badge__unit {
    font-family: var(--osb-font-primary);
    font-size: 14px;
    color: #6B7280;
    font-weight: 400;
}

/* --- Teaser Box [osac_teaser_box] --- */
.osac-teaser-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.osac-teaser-box__includes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    align-items: center;
}

.osac-teaser-box__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 6px 14px;
    border-radius: 20px;
    font-family: var(--osb-font-primary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    background-color: transparent;
    color: #14b8a6;
    border: 1px solid #14b8a6;
    transition: all 0.2s ease;
}

.osac-teaser-box__pill:hover {
    background-color: #14b8a6;
    color: #FFFFFF;
    border-color: #14b8a6;
}

.osac-teaser-box__rates {
    background-color: #FFFFFF;
    border: 1px solid #e2ddd5;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 72px;
    box-shadow: 0 4px 24px -4px rgba(28, 46, 63, 0.10);
}

/* Pill Switcher (Standalone Box) */
.osac-teaser-box__switcher {
    display: inline-flex;
    justify-content: center;
    gap: 6px;
    padding: 5px;
    margin: 0 auto;
    background: var(--osb-surface-bg-alt, #f2efe9);
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: 9999px;
}

.osac-teaser-box__switch-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9999px;
    box-shadow: none;
    color: var(--osb-text-muted, #6B7280);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 28px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.osac-teaser-box__switch-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.6);
    border-color: var(--osb-border, #e2ddd5);
}

.osac-teaser-box__switch-btn.active {
    background: #fff;
    border: 1px solid #e2ddd5;
    color: #1C2E3F;
    font-weight: 700;
    border-bottom: 2px solid #14b8a6;
    box-shadow: none;
}

.osac-teaser-box__error {
    display: none;
    color: var(--osb-error, #e53e3e);
    font-size: 14px;
    padding: 8px;
}

/* Hint text for standalone teaser box */
.osac-teaser-box__hint {
    text-align: center;
    font-size: 12px;
    color: #94a3b8;
    margin-top: 20px;
    margin-bottom: 4px;
    font-weight: 400;
}

/* ===================================================================
   12. PROMO/DEAL CARD STYLING
   Clean differentiation without overwhelming the design
   =================================================================== */

/* Promo Tab Cards - White cards with subtle accent */
.osb-teaser-tab-wrap[data-group="promo"] .osb-tab {
    background: #fff;
    border-color: #e2ddd5;
    position: relative;
}

.osb-teaser-tab-wrap[data-group="promo"] .osb-tab:hover {
    border-color: #86efac;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.1);
}

.osb-teaser-tab-wrap[data-group="promo"] .osb-tab[aria-selected="true"],
.osb-teaser-tab-wrap[data-group="promo"] .osb-tab.active {
    background: #fff;
    border: 2px solid #22c55e;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
}

.osb-teaser-tab-wrap[data-group="promo"] .osb-tab .osb-tab-title {
    color: #1e293b;
}

.osb-teaser-tab-wrap[data-group="promo"] .osb-tab[aria-selected="true"] .osb-tab-title,
.osb-teaser-tab-wrap[data-group="promo"] .osb-tab.active .osb-tab-title {
    color: #16a34a;
}

/* DEAL Corner Marker (mini triangle/tag) */
.osb-teaser-tab-wrap[data-group="promo"] .osb-tab::before {
    content: "DEAL";
    position: absolute;
    top: 0;
    right: 0;
    background: #22c55e;
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 3px 6px;
    border-radius: 0 16px 0 8px;
    text-transform: uppercase;
}

/* Promo Panel - Clean header */
.osb-tab-panel[data-osb-panel^="promo-"] .osb-panel-header,
.osb-tab-panel[data-osb-panel="longstay"] .osb-panel-header {
    background: transparent;
    margin: calc(-1 * var(--osb-space-5, 20px));
    margin-bottom: var(--osb-space-3, 12px);
    padding: var(--osb-space-4, 16px) var(--osb-space-5, 20px);
    border-radius: var(--osb-radius-lg, 12px) var(--osb-radius-lg, 12px) 0 0;
    border-bottom: 1px solid #e2ddd5;
}

.osb-tab-panel[data-osb-panel^="promo-"] .osb-panel-title,
.osb-tab-panel[data-osb-panel="longstay"] .osb-panel-title {
    color: #1e293b;
}

.osb-tab-panel[data-osb-panel^="promo-"] .osb-badge,
.osb-tab-panel[data-osb-panel="longstay"] .osb-badge {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

/* Standard Tab Cards */
.osb-teaser-tab-wrap[data-group="standard"] .osb-tab {
    background: #fff;
    border-color: #e2ddd5;
    position: relative;
    overflow: visible;
}

.osb-teaser-tab-wrap[data-group="standard"] .osb-tab:hover {
    border-color: var(--osb-brand-primary, #26577c);
}

/* FAIR PRICE Corner Marker for Standard Rates */
.osb-teaser-tab-wrap[data-group="standard"] .osb-tab::before {
    content: "FAIR PRICE";
    position: absolute;
    top: -8px;
    right: 12px;
    background: #14b8a6;
    color: #FFFFFF;
    font-family: var(--osb-font-primary);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
}

/* Special Offers switch button - green pill when active */
.osb-switch-btn[data-target="promo"].active {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid #22c55e;
    color: #16a34a;
}

.osb-switch-btn[data-target="promo"]:hover:not(.active) {
    color: #16a34a;
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.3);
}

/* ===================================================================
   13. MOBILE RESPONSIVE STYLES
   =================================================================== */

@media (max-width: 600px) {
    /* Rate Card - no change needed, already minimal */
    .osb-rate-card {
        margin-bottom: var(--osb-space-4);
    }

    /* Pills slightly smaller on mobile */
    .osb-pill {
        height: 26px;
        padding: 0 14px;
        font-size: 11px;
    }

    /* Teaser Container */
    .osb-teaser-prices,
    .osac-teaser-box__rates {
        padding: 16px 12px;
        border-radius: 16px;
    }

    /* Pill Switcher - compact on mobile */
    .osb-teaser-switcher,
    .osac-teaser-box__switcher {
        padding: 4px;
        gap: 4px;
        border-radius: 9999px;
    }

    .osb-switch-btn,
    .osac-teaser-box__switch-btn {
        font-size: 11px;
        padding: 8px 14px;
        border-radius: 9999px;
    }

    /* Hint text */
    .osb-teaser-hint,
    .osac-teaser-box__hint {
        font-size: 11px;
        margin-top: 10px;
    }

    /* Cards */
    .osb-price-tabs .osb-tab {
        border-radius: 14px;
    }

    /* Badge */
    .osb-badge,
    .badge-promo,
    .badge-season {
        font-size: 9px;
        padding: 3px 8px;
    }

    /* DEAL Corner Marker */
    .osb-teaser-tab-wrap[data-group="promo"] .osb-tab::before {
        font-size: 7px;
        padding: 2px 5px;
        border-radius: 0 14px 0 6px;
    }

    /* FAIR PRICE Corner Marker */
    .osb-teaser-tab-wrap[data-group="standard"] .osb-tab::before {
        font-size: 7px;
        padding: 2px 5px;
        border-radius: 0 14px 0 6px;
    }

    /* Date range shorter format hint */
    .osb-price-tabs .osb-tab .osb-tab-range {
        font-size: 11px;
    }
}

/* Small mobile */
@media (max-width: 380px) {
    .osb-switch-btn,
    .osac-teaser-box__switch-btn {
        font-size: 10px;
        padding: 7px 12px;
        letter-spacing: 0.02em;
    }

    .osb-price-tabs .osb-tab {
        padding: 12px 14px;
        min-height: 68px;
    }

    .osb-price-tabs .osb-tab .osb-tab-title {
        font-size: 14px;
    }
}

/* === info-bar.css === */
/**
 * OSAC v2 – Info Bar Component
 * 
 * Ersetzt: osac-selected-user-bar, osac-info-message, inline styled info boxes
 * 
 * Varianten:
 *   .osb-info-bar              – Standard (Ocean Blue)
 *   .osb-info-bar--success     – Grün (Bestätigung)
 *   .osb-info-bar--warning     – Gelb (Hinweis)
 *   .osb-info-bar--muted       – Grau (dezent)
 *   .osb-info-bar--teal        – Teal (Selected User)
 * 
 * Struktur:
 *   <div class="osb-info-bar osb-info-bar--teal">
 *       <span class="osb-info-bar__icon">👤</span>
 *       <span class="osb-info-bar__text">Booking for: John Doe</span>
 *       <button class="osb-info-bar__action">Change</button>
 *   </div>
 */

/* ==========================================================================
   BASE
   ========================================================================== */

.osb-info-bar {
    display: flex;
    align-items: center;
    gap: var(--osb-space-3, 12px);
    padding: var(--osb-space-3, 12px) var(--osb-space-4, 16px);
    border-radius: var(--osb-radius-md, 8px);
    font-size: var(--osb-font-size-sm, 14px);
    line-height: 1.4;
    
    /* Default: Ocean Blue (Brand Primary) */
    background-color: var(--osb-brand-primary-light, #e8f1f7);
    border: 1px solid var(--osb-brand-primary, #26577C);
    color: var(--osb-brand-primary-dark, #1a3d54);
}

/* ==========================================================================
   ICON
   ========================================================================== */

.osb-info-bar__icon {
    flex-shrink: 0;
    font-size: 1.1em;
}

/* ==========================================================================
   TEXT
   ========================================================================== */

.osb-info-bar__text {
    flex: 1;
    font-weight: 500;
}

.osb-info-bar__text strong,
.osb-info-bar__text b {
    font-weight: 600;
}

/* ==========================================================================
   ACTION BUTTON
   ========================================================================== */

.osb-info-bar__action {
    flex-shrink: 0;
    padding: var(--osb-space-1, 4px) var(--osb-space-3, 12px);
    border-radius: var(--osb-radius-sm, 4px);
    font-size: var(--osb-font-size-xs, 12px);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    
    /* Default: Ghost style */
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
}

.osb-info-bar__action:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   VARIANT: SUCCESS (Grün)
   ========================================================================== */

.osb-info-bar--success {
    background-color: var(--osb-success-light, #d1fae5);
    border-color: var(--osb-success, #10b981);
    color: var(--osb-success-dark, #065f46);
}

/* ==========================================================================
   VARIANT: WARNING (Gelb)
   ========================================================================== */

.osb-info-bar--warning {
    background-color: var(--osb-warning-light, #fef3c7);
    border-color: var(--osb-warning, #f59e0b);
    color: var(--osb-warning-dark, #92400e);
}

/* ==========================================================================
   VARIANT: MUTED (Grau)
   ========================================================================== */

.osb-info-bar--muted {
    background-color: var(--osb-gray-100, #f3f4f6);
    border-color: var(--osb-gray-300, #d1d5db);
    color: var(--osb-text-muted, #666666);
}

/* ==========================================================================
   VARIANT: TEAL (Selected User - ersetzt osac-selected-user-bar)
   ========================================================================== */

.osb-info-bar--teal {
    background-color: #e0f7f5;
    border-color: var(--osb-brand-accent, #14b8a6);
    color: #0d9488;
}

.osb-info-bar--teal .osb-info-bar__text {
    color: #0d9488;
}

/* ==========================================================================
   VARIANT: ERROR (Rot)
   ========================================================================== */

.osb-info-bar--error {
    background-color: var(--osb-error-light, #fee2e2);
    border-color: var(--osb-error, #ef4444);
    color: var(--osb-error-dark, #991b1b);
}

/* ==========================================================================
   SIZE MODIFIERS
   ========================================================================== */

.osb-info-bar--sm {
    padding: var(--osb-space-2, 8px) var(--osb-space-3, 12px);
    font-size: var(--osb-font-size-xs, 12px);
}

.osb-info-bar--lg {
    padding: var(--osb-space-4, 16px) var(--osb-space-5, 20px);
    font-size: var(--osb-font-size-base, 16px);
}

/* ==========================================================================
   LAYOUT MODIFIERS
   ========================================================================== */

/* Stacked: Icon/Text oben, Action unten */
.osb-info-bar--stacked {
    flex-wrap: wrap;
}

.osb-info-bar--stacked .osb-info-bar__action {
    width: 100%;
    margin-top: var(--osb-space-2, 8px);
    text-align: center;
}

/* No Icon */
.osb-info-bar--no-icon .osb-info-bar__icon {
    display: none;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 480px) {
    .osb-info-bar {
        flex-wrap: wrap;
    }
    
    .osb-info-bar__action {
        width: 100%;
        margin-top: var(--osb-space-2, 8px);
        text-align: center;
    }
}

/* ==========================================================================
   GUEST BAR (compact info + discount inline)
   ========================================================================== */
.osb-guest-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--osb-space-3, 12px);
    padding: var(--osb-space-3, 12px) var(--osb-space-4, 16px);
    background: #e0f7f5;
    border: 1px solid var(--osb-brand-accent, #14b8a6);
    border-radius: var(--osb-radius-md, 8px);
    font-size: var(--osb-font-size-sm, 14px);
    color: #0d9488;
}

.osb-guest-bar__info {
    display: flex;
    align-items: center;
    gap: var(--osb-space-2, 8px);
    flex: 1;
    min-width: 0;
}

.osb-guest-bar__icon {
    flex-shrink: 0;
    font-size: 1.1em;
}

.osb-guest-bar__details {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}

.osb-guest-bar__name {
    font-weight: 600;
    color: #0d7377;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.osb-guest-bar__email {
    font-size: 0.85em;
    color: #14998d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Discount section (right side) */
.osb-guest-bar__discount {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.osb-guest-bar__discount-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0d7377;
    white-space: nowrap;
}

.osb-guest-bar__discount-input {
    position: relative;
    display: flex;
    align-items: center;
}

.osb-guest-bar__discount-input input {
    width: 58px;
    padding: 4px 22px 4px 8px;
    border: 1px solid #99d5cf;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: right;
    color: #0d7377;
    background: #fff;
    outline: none;
    -moz-appearance: textfield;
}

.osb-guest-bar__discount-input input::-webkit-outer-spin-button,
.osb-guest-bar__discount-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.osb-guest-bar__discount-input input:focus {
    border-color: #14b8a6;
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.15);
}

.osb-guest-bar__discount-suffix {
    position: absolute;
    right: 6px;
    font-weight: 600;
    font-size: 0.8125rem;
    color: #14998d;
    pointer-events: none;
}

.osb-guest-bar__save-hint {
    font-size: 0.875rem;
    cursor: help;
    opacity: 0.7;
}

/* Responsive: stack on very small screens */
@media (max-width: 480px) {
    .osb-guest-bar {
        flex-wrap: wrap;
    }

    .osb-guest-bar__discount {
        width: 100%;
        justify-content: flex-end;
        padding-top: var(--osb-space-2, 8px);
        border-top: 1px dashed rgba(20, 184, 166, 0.3);
        margin-top: var(--osb-space-1, 4px);
    }

    .osb-dept-discounts__grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ═══════════════════════════════════════════════════════
   Per-Department Discount Grid (collapsible <details>)
   ═══════════════════════════════════════════════════════ */

.osb-dept-discounts {
    margin-top: var(--osb-space-2, 8px);
    border: 1px solid rgba(20, 184, 166, 0.15);
    border-radius: var(--osb-radius, 8px);
    background: rgba(20, 184, 166, 0.03);
    overflow: hidden;
}

.osb-dept-discounts__toggle {
    cursor: pointer;
    padding: var(--osb-space-2, 8px) var(--osb-space-3, 12px);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--osb-text-muted, #8a9bb0);
    display: flex;
    align-items: center;
    gap: var(--osb-space-2, 8px);
    user-select: none;
    list-style: none;
}

.osb-dept-discounts__toggle::-webkit-details-marker {
    display: none;
}

.osb-dept-discounts__toggle::before {
    content: '\25B6';
    font-size: 0.6rem;
    transition: transform 0.15s ease;
}

.osb-dept-discounts[open] > .osb-dept-discounts__toggle::before {
    transform: rotate(90deg);
}

.osb-dept-discounts__badge {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--osb-accent, #14b8a6);
    background: rgba(20, 184, 166, 0.12);
    padding: 1px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.osb-dept-discounts__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--osb-space-2, 8px);
    padding: 0 var(--osb-space-3, 12px) var(--osb-space-3, 12px);
}

.osb-dept-discounts__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.osb-dept-discounts__item label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--osb-text-muted, #8a9bb0);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.osb-dept-discounts__input-wrap {
    display: flex;
    align-items: center;
    gap: 2px;
}

.osb-dept-discounts__input-wrap input {
    width: 52px;
    padding: 3px 5px;
    border: 1px solid rgba(20, 184, 166, 0.25);
    border-radius: 4px;
    background: var(--osb-input-bg, rgba(15, 23, 42, 0.6));
    color: var(--osb-text-primary, #e2e8f0);
    font-size: 0.8rem;
    text-align: center;
    -moz-appearance: textfield;
}

.osb-dept-discounts__input-wrap input::-webkit-outer-spin-button,
.osb-dept-discounts__input-wrap input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.osb-dept-discounts__input-wrap input:focus {
    outline: none;
    border-color: var(--osb-accent, #14b8a6);
    box-shadow: 0 0 0 1px rgba(20, 184, 166, 0.3);
}

.osb-dept-discounts__input-wrap span {
    font-size: 0.75rem;
    color: var(--osb-text-muted, #8a9bb0);
}

/* === summary-box.css === */
/**
 * OSAC v2 – Summary Box Component
 * 
 * Ersetzt: osac-agency-commission, osac-discount-box, inline styled summary boxes
 * 
 * Varianten:
 *   .osb-summary-box                    – Standard (neutral)
 *   .osb-summary-box--commission        – Agency Commission (Teal)
 *   .osb-summary-box--discount          – Guest Discount (Ocean Blue)
 *   .osb-summary-box--foc               – FOC Plan B (Sand Yellow)
 *   .osb-summary-box--total             – Grand Total (dunkel)
 * 
 * Struktur:
 *   <div class="osb-summary-box osb-summary-box--commission">
 *       <div class="osb-summary-box__header">
 *           <span class="osb-summary-box__title">Commission Summary</span>
 *           <span class="osb-summary-box__badge">Plan A</span>
 *       </div>
 *       <div class="osb-summary-box__row">
 *           <span>Subtotal</span>
 *           <span>€ 1,200.00</span>
 *       </div>
 *       <div class="osb-summary-box__row osb-summary-box__row--highlight">
 *           <span>Commission (20%)</span>
 *           <span>- € 240.00</span>
 *       </div>
 *       <div class="osb-summary-box__divider"></div>
 *       <div class="osb-summary-box__total">
 *           <span>Net to Pay</span>
 *           <span>€ 960.00</span>
 *       </div>
 *   </div>
 */

/* ==========================================================================
   BASE
   ========================================================================== */

.osb-summary-box {
    background-color: var(--osb-surface, #ffffff);
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-lg, 12px);
    padding: var(--osb-space-4, 16px);
    font-size: var(--osb-font-size-sm, 14px);
    line-height: 1.5;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.osb-summary-box__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--osb-space-3, 12px);
    padding-bottom: var(--osb-space-3, 12px);
    border-bottom: 1px solid var(--osb-border, #e2ddd5);
}

.osb-summary-box__title {
    font-weight: 600;
    font-size: var(--osb-font-size-base, 16px);
    color: var(--osb-text-dark, #222222);
}

.osb-summary-box__badge {
    display: inline-flex;
    align-items: center;
    padding: var(--osb-space-1, 4px) var(--osb-space-2, 8px);
    border-radius: var(--osb-radius-full, 9999px);
    font-size: var(--osb-font-size-xs, 12px);
    font-weight: 500;
    background-color: var(--osb-gray-100, #f3f4f6);
    color: var(--osb-text-muted, #666666);
}

/* ==========================================================================
   ROWS
   ========================================================================== */

.osb-summary-box__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--osb-space-2, 8px) 0;
    color: var(--osb-text-main, #333333);
}

.osb-summary-box__row:first-of-type {
    padding-top: 0;
}

/* Highlight Row (Commission, Discount Amount) */
.osb-summary-box__row--highlight {
    font-weight: 500;
}

/* Muted Row (Reference values) */
.osb-summary-box__row--muted {
    color: var(--osb-text-muted, #666666);
    font-size: var(--osb-font-size-xs, 12px);
}

/* Positive Value (Green) */
.osb-summary-box__row--positive span:last-child {
    color: var(--osb-success, #10b981);
}

/* Negative Value (Shows savings) */
.osb-summary-box__row--negative span:last-child {
    color: var(--osb-success-dark, #059669);
}

/* ==========================================================================
   DIVIDER
   ========================================================================== */

.osb-summary-box__divider {
    height: 1px;
    background-color: var(--osb-border, #e2ddd5);
    margin: var(--osb-space-3, 12px) 0;
}

/* Dashed Divider */
.osb-summary-box__divider--dashed {
    background: none;
    border-top: 1px dashed var(--osb-border, #e2ddd5);
}

/* ==========================================================================
   TOTAL ROW
   ========================================================================== */

.osb-summary-box__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--osb-space-3, 12px);
    font-weight: 700;
    font-size: var(--osb-font-size-base, 16px);
    color: var(--osb-text-dark, #222222);
}

.osb-summary-box__total span:last-child {
    font-size: var(--osb-font-size-lg, 18px);
}

/* ==========================================================================
   VARIANT: COMMISSION (Teal)
   ========================================================================== */

.osb-summary-box--commission {
    background-color: #f0fdfa;
    border-color: var(--osb-brand-accent, #14b8a6);
}

.osb-summary-box--commission .osb-summary-box__header {
    border-bottom-color: color-mix(in oklch, var(--osb-brand-accent) 20%, transparent);
}

.osb-summary-box--commission .osb-summary-box__title {
    color: #0d9488;
}

.osb-summary-box--commission .osb-summary-box__badge {
    background-color: var(--osb-brand-accent, #14b8a6);
    color: #ffffff;
}

.osb-summary-box--commission .osb-summary-box__row--highlight {
    color: #0d9488;
}

.osb-summary-box--commission .osb-summary-box__divider {
    background-color: color-mix(in oklch, var(--osb-brand-accent) 20%, transparent);
}

.osb-summary-box--commission .osb-summary-box__total {
    color: #0d9488;
}

/* ==========================================================================
   VARIANT: DISCOUNT (Ocean Blue)
   ========================================================================== */

.osb-summary-box--discount {
    background-color: var(--osb-brand-primary-light, #e8f1f7);
    border-color: var(--osb-brand-primary, #26577C);
}

.osb-summary-box--discount .osb-summary-box__header {
    border-bottom-color: color-mix(in oklch, var(--osb-brand-primary) 20%, transparent);
}

.osb-summary-box--discount .osb-summary-box__title {
    color: var(--osb-brand-primary, #26577C);
}

.osb-summary-box--discount .osb-summary-box__badge {
    background-color: var(--osb-brand-primary, #26577C);
    color: #ffffff;
}

.osb-summary-box--discount .osb-summary-box__row--highlight {
    color: var(--osb-brand-primary, #26577C);
}

.osb-summary-box--discount .osb-summary-box__divider {
    background-color: color-mix(in oklch, var(--osb-brand-primary) 20%, transparent);
}

.osb-summary-box--discount .osb-summary-box__total {
    color: var(--osb-brand-primary, #26577C);
}

/* ==========================================================================
   VARIANT: FOC (Sand Yellow - Plan B)
   ========================================================================== */

.osb-summary-box--foc {
    background-color: var(--osb-brand-sand-light, #fef9e7);
    border-color: #F5C86A;
}

.osb-summary-box--foc .osb-summary-box__header {
    border-bottom-color: rgba(245, 200, 106, 0.4);
}

.osb-summary-box--foc .osb-summary-box__title {
    color: var(--osb-brand-sand-dark, #8B5022);
}

.osb-summary-box--foc .osb-summary-box__badge {
    background-color: #F5C86A;
    color: var(--osb-brand-sand-dark, #8B5022);
}

.osb-summary-box--foc .osb-summary-box__row--highlight {
    color: var(--osb-brand-sand-dark, #8B5022);
}

.osb-summary-box--foc .osb-summary-box__divider {
    background-color: rgba(245, 200, 106, 0.4);
}

.osb-summary-box--foc .osb-summary-box__total {
    color: var(--osb-brand-sand-dark, #8B5022);
}

/* ==========================================================================
   VARIANT: TOTAL (Dark - Grand Total)
   ========================================================================== */

.osb-summary-box--total {
    background-color: var(--osb-text-dark, #222222);
    border-color: var(--osb-text-dark, #222222);
    color: #ffffff;
}

.osb-summary-box--total .osb-summary-box__header {
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

.osb-summary-box--total .osb-summary-box__title {
    color: #ffffff;
}

.osb-summary-box--total .osb-summary-box__row {
    color: rgba(255, 255, 255, 0.8);
}

.osb-summary-box--total .osb-summary-box__divider {
    background-color: rgba(255, 255, 255, 0.2);
}

.osb-summary-box--total .osb-summary-box__total {
    color: #ffffff;
}

/* ==========================================================================
   VARIANT: COMPACT (weniger Padding)
   ========================================================================== */

.osb-summary-box--compact {
    padding: var(--osb-space-3, 12px);
}

.osb-summary-box--compact .osb-summary-box__header {
    margin-bottom: var(--osb-space-2, 8px);
    padding-bottom: var(--osb-space-2, 8px);
}

.osb-summary-box--compact .osb-summary-box__row {
    padding: var(--osb-space-1, 4px) 0;
}

/* ==========================================================================
   NESTED SUMMARY (z.B. FOC Details innerhalb Commission)
   ========================================================================== */

.osb-summary-box__nested {
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: var(--osb-radius-md, 8px);
    padding: var(--osb-space-3, 12px);
    margin: var(--osb-space-3, 12px) 0;
}

.osb-summary-box__nested .osb-summary-box__row {
    font-size: var(--osb-font-size-xs, 12px);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 480px) {
    .osb-summary-box {
        padding: var(--osb-space-3, 12px);
    }
    
    .osb-summary-box__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--osb-space-2, 8px);
    }
    
    .osb-summary-box__total span:last-child {
        font-size: var(--osb-font-size-base, 16px);
    }
}

/* === confirmation.css === */
/**
 * OSAC Confirmation View
 * Premium Resort Design - Two Box Layout
 *
 * Design Context: Public-facing (Brand Design)
 * Tokens: --os-* (Brand Tokens)
 * Tokenized: 2026-03-12
 */

/* =========================================================
   BOX 1: CONFIRMATION (Hauptbox)
   ========================================================= */
.osb-confirmation-box {
    max-width: 480px;
    margin: 2rem auto 1rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.04),
        0 12px 32px rgba(0, 0, 0, 0.06);
    animation: osb-confirmation-enter 0.3s ease-out;
}

@keyframes osb-confirmation-enter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header (centered) */
.osb-confirmation-header {
    text-align: center;
    padding: 2rem 1.5rem 1.5rem;
    background: var(--os-bg, #FDFCF9);
    border-bottom: 1px solid var(--os-border, #E2DDD3);
}

.osb-confirmation-checkmark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 1rem;
    background: var(--os-success, #10B981);
    border-radius: 50%;
    font-size: 1.5rem;
    color: #fff;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
}

.osb-confirmation-title {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--os-primary, #1C2E3F);
    letter-spacing: -0.01em;
}

.osb-confirmation-subtitle {
    margin: 0.375rem 0 0 0;
    font-size: 0.875rem;
    color: var(--os-text-muted, #7C8694);
    font-weight: 400;
}

/* Booking Details (clean table layout) */
.osb-confirmation-details {
    padding: 1.25rem 1.5rem;
}

.osb-confirmation-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--os-bg-cream, #F7F4EF);
}

.osb-confirmation-row:last-child {
    border-bottom: none;
}

.osb-confirmation-row--total {
    margin-top: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--os-border, #E2DDD3);
    border-bottom: none;
}

.osb-confirmation-label {
    font-size: 0.8125rem;
    color: var(--os-text-light, #A0A8B4);
    font-weight: 400;
    flex-shrink: 0;
}

.osb-confirmation-value {
    font-size: 0.9375rem;
    color: var(--os-primary, #1C2E3F);
    font-weight: 500;
    text-align: right;
}

.osb-confirmation-row--total .osb-confirmation-label {
    font-size: 0.875rem;
    color: var(--os-text-muted, #7C8694);
    font-weight: 500;
}

.osb-confirmation-price {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--os-primary, #1C2E3F);
}

/* Reference Info (centered, subtle) */
.osb-confirmation-refs {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    padding: 1rem 1.5rem;
    background: var(--os-bg, #FDFCF9);
    border-top: 1px solid var(--os-bg-cream, #F7F4EF);
}

.osb-confirmation-ref {
    text-align: center;
}

.osb-confirmation-ref-label {
    display: block;
    font-size: 0.6875rem;
    color: var(--os-text-light, #A0A8B4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.osb-confirmation-ref-value {
    font-size: 0.875rem;
    color: var(--os-primary, #1C2E3F);
    font-weight: 600;
    font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
}

/* =========================================================
   BOX 2: NEXT STEPS (unified container)
   White card matching confirmation box – holds cross-sell
   cards and tertiary footer links in one cohesive block
   ========================================================= */
.osb-nextsteps {
    max-width: 480px;
    margin: 0.875rem auto 1.5rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.04),
        0 12px 32px rgba(0, 0, 0, 0.06);
    animation: osb-confirmation-enter 0.3s ease-out 0.1s both;
}

.osb-nextsteps__headline {
    margin: 0 0 0.25rem 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--os-primary, #1C2E3F);
    text-align: center;
    letter-spacing: 0.01em;
}

/* ── Cross-Sell: Frosted Glass Cards (floating) ── */
.osb-crosssell__card {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1.25rem 1.375rem;
    border-radius: 12px;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transform: translateY(-5px);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.25s ease;
}

.osb-crosssell__card:hover {
    transform: translateY(0);
    text-decoration: none;
}

/* Resort: soft ocean tint — floating with colored shadow */
.osb-crosssell__card--resort {
    background: linear-gradient(135deg, rgba(235, 245, 255, 0.85) 0%, rgba(219, 234, 254, 0.65) 100%);
    border-color: rgba(59, 130, 246, 0.12);
    box-shadow:
        0 4px 8px rgba(59, 130, 246, 0.10),
        0 8px 24px rgba(59, 130, 246, 0.10),
        0 2px 4px rgba(0, 0, 0, 0.04);
}

.osb-crosssell__card--resort:hover {
    border-color: rgba(59, 130, 246, 0.25);
    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.06), 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* Homestay: soft garden tint — floating with colored shadow */
.osb-crosssell__card--homestay {
    background: linear-gradient(135deg, rgba(236, 253, 243, 0.85) 0%, rgba(209, 250, 229, 0.65) 100%);
    border-color: rgba(34, 197, 94, 0.12);
    box-shadow:
        0 4px 8px rgba(34, 197, 94, 0.10),
        0 8px 24px rgba(34, 197, 94, 0.10),
        0 2px 4px rgba(0, 0, 0, 0.04);
}

.osb-crosssell__card--homestay:hover {
    border-color: rgba(34, 197, 94, 0.25);
    box-shadow: 0 1px 4px rgba(34, 197, 94, 0.06), 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* Card Content */
.osb-crosssell__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Resort themed text */
.osb-crosssell__card--resort .osb-crosssell__name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1e40af;
    line-height: 1.3;
}

.osb-crosssell__card--resort .osb-crosssell__desc {
    font-size: 0.6875rem;
    color: #60a5fa;
    line-height: 1.3;
    letter-spacing: 0.015em;
}

/* Homestay themed text */
.osb-crosssell__card--homestay .osb-crosssell__name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--os-success-dark, #059669);
    line-height: 1.3;
}

.osb-crosssell__card--homestay .osb-crosssell__desc {
    font-size: 0.6875rem;
    color: #4ade80;
    line-height: 1.3;
    letter-spacing: 0.015em;
}

/* CTA Button (full-width, soft) */
.osb-crosssell__action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 10px;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.osb-crosssell__card--resort .osb-crosssell__action {
    color: #2563eb;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.18);
}

.osb-crosssell__card--resort:hover .osb-crosssell__action {
    background: rgba(59, 130, 246, 0.13);
    border-color: rgba(59, 130, 246, 0.30);
}

.osb-crosssell__card--homestay .osb-crosssell__action {
    color: #16a34a;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.18);
}

.osb-crosssell__card--homestay:hover .osb-crosssell__action {
    background: rgba(34, 197, 94, 0.13);
    border-color: rgba(34, 197, 94, 0.30);
}

/* ── Tertiary Footer Links (sub-items) ── */
.osb-nextsteps__footer {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--os-bg-cream, #F7F4EF);
}

.osb-nextsteps__link {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--os-primary, #1C2E3F);
    background: var(--os-bg-cream, #F7F4EF);
    border: 1px solid var(--os-border, #E2DDD3);
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.osb-nextsteps__link svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.6;
}

.osb-nextsteps__link:hover {
    color: var(--os-primary, #1C2E3F);
    background: var(--os-bg-cream, #F7F4EF);
    border-color: var(--os-border, #E2DDD3);
    text-decoration: none;
}

.osb-nextsteps__link:hover svg {
    opacity: 0.85;
}

/* =========================================================
   FOOTER LINK
   ========================================================= */
.osb-newbooking-link {
    display: block;
    max-width: 480px;
    margin: 0 auto;
    padding: 1.25rem 0;
    text-align: center;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--os-text-muted, #7C8694);
    text-decoration: none;
    transition: color 0.2s ease;
}

.osb-newbooking-link:hover {
    color: var(--os-success, #10B981);
    text-decoration: underline;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.osb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
}

/* Primary Button (Terracotta CTA) */
.osb-btn-primary {
    background: var(--os-cta, #B8856C);
    color: #fff;
    box-shadow: none;
    width: 100%;
}

.osb-btn-primary:hover {
    background: color-mix(in srgb, var(--os-cta, #B8856C) 85%, black);
    box-shadow: none;
    transform: none;
    color: #fff;
    text-decoration: none;
}

/* Secondary Button (Outline) */
.osb-btn-secondary {
    background: #fff;
    color: var(--os-primary, #1C2E3F);
    border: 1px solid var(--os-border, #E2DDD3);
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
}

.osb-btn-secondary:hover {
    background: #fff;
    border-color: var(--os-success, #10B981);
    color: var(--os-success, #10B981);
    text-decoration: none;
}

/* =========================================================
   CONFIRMATION CTA (centered, full-width button container)
   ========================================================= */
.osb-confirmation-cta {
    text-align: center;
    margin-top: 1.5rem;
}

/* =========================================================
   NEXT STEPS BOX (Manage Booking container)
   ========================================================= */
.osb-nextsteps-box {
    max-width: 480px;
    margin: 1rem auto 0;
    text-align: center;
}

.osb-nextsteps-buttons {
    display: flex;
    justify-content: center;
}

/* Manage Booking Button (stronger secondary CTA) */
.osb-btn-manage {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    background: var(--os-primary, #1C2E3F);
    color: #fff;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(30, 58, 95, 0.2);
}

.osb-btn-manage:hover {
    background: color-mix(in srgb, var(--os-primary, #1C2E3F) 85%, white);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(30, 58, 95, 0.3);
    transform: translateY(-1px);
}

/* =========================================================
   ACCOUNT HINT (for unregistered guests)
   ========================================================= */
.osb-account-hint {
    margin-bottom: 1rem;
    padding: 0.875rem 1rem;
    background: var(--osb-warning-light, #fef3c7);
    border: 1px solid var(--osb-warning, #f59e0b);
    border-radius: 8px;
    text-align: center;
}

.osb-account-hint__text {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--osb-warning-dark, #b45309);
    line-height: 1.5;
}

/* =========================================================
   COMPACT DESIGN (Standard Popup Layout)
   ========================================================= */
.osb-confirmation-box--compact {
    text-align: center;
}

.osb-confirmation-box--compact .osb-confirmation-header {
    border-bottom: none;
    padding-bottom: 1rem;
}

/* Confirmation Icon (SVG) */
.osb-confirmation-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 12px;
}

.osb-confirmation-icon svg {
    width: 100%;
    height: 100%;
}

.osb-confirmation-icon--success {
    background: #FFF8F3;
}

.osb-confirmation-icon--success svg {
    stroke: var(--os-cta, #B8856C);
}

.osb-confirmation-icon--hold {
    background: var(--osb-brand-primary-light);
}

.osb-confirmation-icon--hold svg {
    stroke: var(--osb-brand-primary);
}

/* Booking Reference (centered) */
.osb-booking-ref {
    text-align: center;
    padding: 12px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--os-border, #E2DDD3);
}

.osb-booking-ref__label {
    display: block;
    font-size: 0.6875rem;
    color: var(--os-text-light, #A0A8B4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    margin-bottom: 4px;
}

.osb-booking-ref__value {
    display: block;
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--osb-brand-primary);
    font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
    letter-spacing: 0.025em;
}

/* Stay Summary (compact inline layout) */
.osb-booking-summary {
    text-align: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--os-border, #E2DDD3);
}

.osb-booking-summary__dates {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
}

.osb-booking-summary__date {
    font-weight: 600;
    color: var(--os-primary, #1C2E3F);
    font-size: 1rem;
}

.osb-booking-summary__arrow {
    color: var(--osb-brand-primary);
    font-size: 1.125rem;
}

.osb-booking-summary__details {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.osb-booking-summary__item {
    color: var(--os-text-muted, #7C8694);
    font-size: 0.875rem;
}

.osb-booking-summary__item:not(:last-child)::after {
    content: '·';
    margin-left: 6px;
    color: var(--os-border, #E2DDD3);
}

/* Status Display Badge */
.osb-status-display {
    text-align: center;
    padding: 16px 0;
}

.osb-status-display__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.osb-status-display__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: osb-pulse 2s ease-in-out infinite;
}

@keyframes osb-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.osb-status-display__badge--confirmed {
    background: var(--os-success-light, #d1fae5);
    color: var(--os-success-dark, #059669);
    border: 2px solid var(--os-success, #10B981);
}

.osb-status-display__badge--confirmed .osb-status-display__dot {
    background: var(--os-success, #10B981);
}

.osb-status-display__badge--hold {
    background: var(--osb-brand-primary-light);
    color: var(--osb-brand-primary);
    border: 2px solid var(--osb-brand-primary);
}

.osb-status-display__badge--hold .osb-status-display__dot {
    background: var(--osb-brand-primary);
}

/* Booking Total Card */
.osb-booking-total {
    background: var(--os-bg-cream, #F7F4EF);
    border: 1px solid var(--os-border, #E2DDD3);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    margin: 16px 0;
}

.osb-booking-total__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--os-text-muted, #7C8694);
    margin-bottom: 8px;
}

.osb-booking-total__amount {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--osb-brand-primary);
    letter-spacing: -0.01em;
}

.osb-booking-total__note {
    display: block;
    font-size: 0.75rem;
    color: var(--os-text-muted, #7C8694);
    margin-top: 6px;
}

/* Agency variant (green tint) */
.osb-booking-total--agency {
    background: var(--os-success-light, #d1fae5);
    border-color: var(--os-success, #10B981);
}

.osb-booking-total--agency .osb-booking-total__label,
.osb-booking-total--agency .osb-booking-total__amount {
    color: var(--os-success-dark, #059669);
}

/* Commission Info (agencies) */
.osb-commission-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: var(--os-success-light, #d1fae5);
    border: 1px solid var(--os-success, #10B981);
    border-radius: 6px;
    margin-bottom: 12px;
}

.osb-commission-info__label {
    font-size: 0.8125rem;
    color: var(--os-text-muted, #7C8694);
}

.osb-commission-info__value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--os-success-dark, #059669);
}

/* Hold Timer Notice (subtle warm tone) */
.osb-hold-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--os-bg-cream, #F7F4EF);
    border: 1px solid var(--os-border, #E2DDD3);
    border-radius: 8px;
    margin: 16px 1.5rem;
}

.osb-hold-notice svg {
    width: 16px;
    height: 16px;
    stroke: var(--os-cta, #B8856C);
    flex-shrink: 0;
}

.osb-hold-notice span {
    font-size: 0.8125rem;
    color: var(--os-text-body, #4A5568);
    font-weight: 500;
}

/* Full-width button */
.osb-btn--full {
    width: 100%;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 520px) {

    .osb-confirmation-box,
    .osb-nextsteps,
    .osb-newbooking-link {
        margin-left: 1rem;
        margin-right: 1rem;
        max-width: none;
    }

    .osb-confirmation-header {
        padding: 1.5rem 1.25rem 1.25rem;
    }

    .osb-confirmation-checkmark {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }

    .osb-confirmation-title {
        font-size: 1.25rem;
    }

    .osb-confirmation-details {
        padding: 1rem 1.25rem;
    }

    .osb-confirmation-refs {
        flex-direction: row;
        gap: 1.5rem;
        padding: 1rem 1.25rem;
    }

    .osb-hold-notice {
        margin-left: 1.25rem;
        margin-right: 1.25rem;
    }

    .osb-nextsteps {
        padding: 1.25rem;
    }

    .osb-crosssell__card {
        padding: 1rem 1.125rem;
        gap: 0.75rem;
    }

    .osb-confirmation-price {
        font-size: 1.25rem;
    }
}

/* === timer.css === */
/**
 * OSAC Hold Timer Component
 * Displays countdown with color-coded urgency states.
 */

/* Base Timer Styles */
.osac-hold-timer {
    display: inline-flex;
    align-items: center;
    gap: var(--osb-space-2);
    padding: var(--osb-space-2) var(--osb-space-4);
    border-radius: var(--osb-radius-full);
    font-family: var(--osb-font-primary);
    font-size: var(--osb-text-sm);
    font-weight: var(--osb-font-semibold);
    text-decoration: none;
    transition: all var(--osb-transition-slow);
    box-shadow: var(--osb-shadow-md);
}

.osac-hold-timer:hover {
    transform: translateY(-2px);
    box-shadow: var(--osb-shadow-lg);
    text-decoration: none;
}

/* Hidden State (no active holds) */
.osac-hold-timer--hidden {
    display: none !important;
}

/* Timer Icon */
.osac-timer-icon {
    font-size: var(--osb-text-base);
    line-height: var(--osb-leading-none);
}

/* Timer Time Display */
.osac-timer-time {
    font-family: var(--osb-font-mono);
    font-size: 15px;
    font-weight: var(--osb-font-bold);
    letter-spacing: 0.5px;
}

/* Timer Label */
.osac-timer-label {
    font-size: var(--osb-text-xs);
    font-weight: var(--osb-font-medium);
    opacity: 0.9;
}

/* ===========================================
   COLOR STATES (Green → Yellow → Red)
   =========================================== */

/* SAFE: 100% - 33% remaining (Green) */
.osac-timer--safe {
    background: linear-gradient(135deg, var(--osb-success) 0%, var(--osb-success-dark) 100%);
    color: var(--osb-text-white);
}

.osac-timer--safe:hover {
    background: linear-gradient(135deg, var(--osb-success-dark) 0%, #047857 100%);
    color: var(--osb-text-white);
}

/* WARNING: 33% - 15% remaining (Yellow/Orange) */
.osac-timer--warning {
    background: linear-gradient(135deg, var(--osb-warning) 0%, var(--osb-warning-dark) 100%);
    color: var(--osb-text-white);
    animation: pulse-warning 2s ease-in-out infinite;
}

.osac-timer--warning:hover {
    background: linear-gradient(135deg, var(--osb-warning-dark) 0%, #92400e 100%);
    color: var(--osb-text-white);
}

/* CRITICAL: 15% - 0% remaining (Red) */
.osac-timer--critical {
    background: linear-gradient(135deg, var(--osb-error) 0%, var(--osb-error-dark) 100%);
    color: var(--osb-text-white);
    animation: pulse-critical 1s ease-in-out infinite;
}

.osac-timer--critical:hover {
    background: linear-gradient(135deg, var(--osb-error-dark) 0%, #991b1b 100%);
    color: var(--osb-text-white);
}

/* EXPIRED: Time is up */
.osac-timer--expired {
    background: linear-gradient(135deg, var(--osb-text-muted) 0%, #4b5563 100%);
    color: var(--osb-text-white);
    opacity: 0.8;
}

/* ===========================================
   ANIMATIONS
   =========================================== */

@keyframes pulse-warning {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
    }
    50% {
        box-shadow: 0 2px 16px rgba(245, 158, 11, 0.7);
    }
}

@keyframes pulse-critical {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 2px 20px rgba(239, 68, 68, 0.8);
        transform: scale(1.02);
    }
}

/* ===========================================
   RESPONSIVE
   =========================================== */

/* Mobile: Compact version */
@media (max-width: 768px) {
    .osac-hold-timer {
        padding: 6px 12px;
        gap: 6px;
    }

    .osac-timer-label {
        display: none; /* Hide "Reserved" text on mobile */
    }

    .osac-timer-time {
        font-size: 14px;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .osac-hold-timer {
        padding: 5px 10px;
        border-radius: 20px;
    }

    .osac-timer-icon {
        font-size: 14px;
    }
}

/* === manage-booking.css === */
/**
 * OSAC Manage Booking Styles (WF-020)
 *
 * Styles for [osac_manage_booking] shortcode.
 * Extends dashboard.css design system.
 */

/* ==========================================================================
   1. CONTAINER
   ========================================================================== */

.osac-manage-booking {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--osb-space-8, 32px) var(--osb-space-4, 16px) var(--osb-space-4, 16px);
    font-family: var(--osb-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

/* ==========================================================================
   2. HEADER CARD
   ========================================================================== */

.osac-manage-booking__header-card {
    background: var(--osb-surface, #ffffff);
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-lg, 10px);
    padding: var(--osb-space-5, 20px);
    margin-bottom: var(--osb-space-4, 16px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.osac-manage-booking__title {
    font-size: var(--osb-text-xl, 20px);
    font-weight: var(--osb-font-bold, 700);
    color: var(--osb-text-dark, #1e293b);
    margin: 0 0 var(--osb-space-1, 4px);
}

.osac-manage-booking__reference {
    font-size: var(--osb-text-base, 15px);
    font-weight: var(--osb-font-semibold, 600);
    color: var(--osb-brand-primary, #26577C);
}

/* ==========================================================================
   2a. COMPACT HEADER (v2 card-grid layout)
   ========================================================================== */

.osac-manage-booking__header-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--osb-space-3, 12px);
    padding: var(--osb-space-3, 12px) 0;
    margin-bottom: var(--osb-space-3, 12px);
}

.osac-manage-booking__header-left {
    display: flex;
    align-items: center;
    gap: var(--osb-space-3, 12px);
    flex-wrap: wrap;
    min-width: 0;
}

.osac-manage-booking__header-compact .osac-manage-booking__title {
    font-size: var(--osb-text-lg, 18px);
    margin: 0;
    white-space: nowrap;
}

.osac-manage-booking__header-right {
    display: flex;
    align-items: center;
    gap: var(--osb-space-2, 8px);
    flex-shrink: 0;
}

/* ==========================================================================
   2b-1. INFO ROW (Details + Add Guest compact cards above grid)
   ========================================================================== */

.osac-mb__info-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.osac-mb__info-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
}

.osac-mb__info-card:hover {
    border-color: var(--osb-brand-primary, #26577C);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.osac-mb__info-card .osac-nb__cat-icon {
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
}

.osac-mb__info-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.osac-mb__info-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--osb-text-dark, #1e293b);
}

.osac-mb__info-sub {
    font-size: 12px;
    color: var(--osb-text-muted, #64748b);
}

@media (max-width: 480px) {
    .osac-mb__info-row {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   2b-1b. SECTION HEADER (above category grid)
   ========================================================================== */

.osac-mb__section-header {
    margin-bottom: 12px;
}

.osac-mb__section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--osb-text-main, #1a1a2e);
    margin: 0 0 2px;
}

.osac-mb__section-sub {
    font-size: 13px;
    color: var(--osb-text-muted, #6b7280);
    margin: 0;
}

/* ==========================================================================
   2b-2. MODULE AREA + BACK BUTTON
   ========================================================================== */

.osac-mb__back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    margin-bottom: 16px;
    background: var(--osb-surface, #ffffff);
    border: 2px solid var(--osb-border, #e9ecef);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--osb-brand-primary, #26577C);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}

.osac-mb__back-btn:hover {
    border-color: var(--osb-brand-primary, #26577C);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* Terminal "Back to Bookings" button (guest-app.js + terminal-app.js) */
.osac-terminal-manage-booking__back.osac-btn--ghost {
    padding: 10px 18px;
    border: 2px solid var(--osb-border, #e9ecef);
    border-radius: 8px;
    font-weight: 600;
    color: var(--osb-brand-primary, #26577C);
    background: var(--osb-surface, #ffffff);
    transition: all 0.15s;
}

.osac-terminal-manage-booking__back.osac-btn--ghost:hover {
    border-color: var(--osb-brand-primary, #26577C);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   2b. BOOKING SUMMARY (compact details grid — legacy standalone)
   ========================================================================== */

.osac-booking-summary {
    margin-top: var(--osb-space-4, 16px);
    padding-top: var(--osb-space-4, 16px);
    border-top: 1px solid var(--osb-border, #e2ddd5);
}

.osac-booking-summary__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--osb-space-4, 16px);
    margin-bottom: var(--osb-space-3, 12px);
}

@media (max-width: 480px) {
    .osac-booking-summary__row {
        grid-template-columns: 1fr;
        gap: var(--osb-space-3, 12px);
    }
}

.osac-booking-summary__item {
    display: flex;
    align-items: flex-start;
    gap: var(--osb-space-3, 12px);
}

.osac-booking-summary__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    color: var(--osb-brand-primary, #26577C);
    background: color-mix(in oklch, var(--osb-brand-primary) 8%, transparent);
    border-radius: var(--osb-radius-md, 8px);
}

.osac-booking-summary__icon svg {
    display: block;
}

.osac-booking-summary__icon--muted {
    width: 24px;
    height: 24px;
    color: var(--osb-text-muted, #64748b);
    background: transparent;
}

.osac-booking-summary__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* Primary values: large, bold */
.osac-booking-summary__value {
    font-size: var(--osb-text-base, 15px);
    font-weight: var(--osb-font-semibold, 600);
    color: var(--osb-text-dark, #1e293b);
}

.osac-booking-summary__arrow {
    color: var(--osb-text-muted, #64748b);
    margin: 0 4px;
}

/* Secondary values: smaller, lighter */
.osac-booking-summary__value--secondary {
    font-size: var(--osb-text-sm, 14px);
    font-weight: var(--osb-font-medium, 500);
    color: var(--osb-text-muted, #64748b);
}

.osac-booking-summary__detail {
    font-weight: normal;
    opacity: 0.8;
}

/* Secondary row styling */
.osac-booking-summary__row--secondary {
    margin-bottom: var(--osb-space-2, 8px);
    padding-top: var(--osb-space-2, 8px);
    border-top: 1px dashed var(--osb-border, #e2ddd5);
}

.osac-booking-summary__item--secondary {
    align-items: center;
}

.osac-booking-summary__label {
    font-size: var(--osb-text-sm, 13px);
    color: var(--osb-text-muted, #64748b);
}

/* Price Details Button (pill style like status badge) */
.osac-booking-summary__details-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: var(--osb-space-1, 4px) var(--osb-space-3, 10px);
    border-radius: 9999px;
    font-size: var(--osb-text-xs, 12px);
    font-weight: var(--osb-font-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--osb-brand-primary, #26577C);
    background: color-mix(in oklch, var(--osb-brand-primary) 8%, transparent);
    border: 1px solid color-mix(in oklch, var(--osb-brand-primary) 20%, transparent);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.osac-booking-summary__details-btn:hover {
    background: color-mix(in oklch, var(--osb-brand-primary) 15%, transparent);
    border-color: color-mix(in oklch, var(--osb-brand-primary) 30%, transparent);
}

.osac-booking-summary__details-btn svg {
    transition: transform 0.2s ease;
}

.osac-booking-summary__details-btn[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* Price Details Wrapper (expandable) */
.osac-price-details-wrapper {
    padding: var(--osb-space-4, 16px);
    margin-top: var(--osb-space-3, 12px);
    background: var(--osb-bg-subtle, #f8f6f2);
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-md, 8px);
    animation: osac-expand 0.2s ease;
}

.osac-price-details-wrapper[hidden] {
    display: none;
}

/* Price Details Header with close button */
.osac-price-details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--osb-space-3, 12px);
    padding-bottom: var(--osb-space-3, 12px);
    border-bottom: 1px solid var(--osb-border, #e2ddd5);
}

.osac-price-details-title {
    font-size: var(--osb-text-base, 15px);
    font-weight: var(--osb-font-semibold, 600);
    color: var(--osb-text-dark, #1e293b);
}

.osac-price-details-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: var(--osb-border, #e2ddd5);
    color: var(--osb-text-muted, #64748b);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s ease;
}

.osac-price-details-close:hover {
    background: var(--osb-brand-primary, #26577C);
    color: white;
}

.osac-price-details-close svg {
    display: block;
}

/* Mobile: Larger touch target for close button */
@media (max-width: 768px) {
    .osac-price-details-close {
        width: 36px;
        height: 36px;
    }

    .osac-price-details-close svg {
        width: 18px;
        height: 18px;
    }
}

@keyframes osac-expand {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Footer row: compact meta info */
.osac-booking-summary__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--osb-space-2, 8px);
    padding-top: var(--osb-space-3, 12px);
    margin-top: var(--osb-space-2, 8px);
    border-top: 1px dashed var(--osb-border, #e2ddd5);
    font-size: var(--osb-text-sm, 13px);
    color: var(--osb-text-muted, #64748b);
}

.osac-booking-summary__meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.osac-booking-summary__meta--divider {
    opacity: 0.4;
}

.osac-manage-booking__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--osb-space-3, 12px) var(--osb-space-5, 20px);
    margin-top: var(--osb-space-4, 16px);
    font-size: var(--osb-text-sm, 14px);
    color: var(--osb-text-muted, #64748b);
}

.osac-manage-booking__meta-item {
    display: flex;
    align-items: center;
    gap: var(--osb-space-2, 8px);
}

.osac-manage-booking__meta-label {
    font-weight: var(--osb-font-medium, 500);
    color: var(--osb-text-dark, #1e293b);
}

/* ==========================================================================
   3. ALERTS / NOTICES
   ========================================================================== */

.osac-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--osb-space-3, 12px);
    padding: var(--osb-space-3, 12px) var(--osb-space-4, 16px);
    border-radius: var(--osb-radius-md, 8px);
    font-size: var(--osb-text-sm, 14px);
    margin-bottom: var(--osb-space-4, 16px);
}

.osac-alert--info {
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.2);
    color: #1e40af;
}

.osac-alert--warning {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: #92400e;
}

.osac-alert--success {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #065f46;
}

.osac-alert--error {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #991b1b;
}

/* Notification animations */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

.osac-notification {
    max-width: 400px;
}

.osac-alert__icon {
    flex-shrink: 0;
    font-size: 16px;
}

.osac-alert__content {
    flex: 1;
}

.osac-alert__title {
    font-weight: var(--osb-font-semibold, 600);
    margin-bottom: var(--osb-space-1, 4px);
}

.osac-alert p {
    margin: 0;
}

/* ==========================================================================
   4. SECTION CARDS
   ========================================================================== */

.osac-manage-booking__sections {
    display: flex;
    flex-direction: column;
    gap: var(--osb-space-4, 16px);
}

.osac-section-card {
    background: var(--osb-surface, #ffffff);
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-lg, 10px);
    padding: var(--osb-space-5, 20px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.osac-section-card--danger {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.02);
}

.osac-section-card__title {
    font-size: var(--osb-text-base, 15px);
    font-weight: var(--osb-font-semibold, 600);
    color: var(--osb-text-dark, #1e293b);
    margin: 0 0 var(--osb-space-4, 16px);
    padding-bottom: var(--osb-space-3, 12px);
    border-bottom: 1px solid var(--osb-border, #e2ddd5);
}

.osac-section-card--danger .osac-section-card__title {
    color: var(--osb-danger, #ef4444);
    border-bottom-color: rgba(239, 68, 68, 0.2);
}

/* ==========================================================================
   5. FORM ELEMENTS
   ========================================================================== */

.osac-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--osb-space-4, 16px);
}

.osac-form-field {
    display: flex;
    flex-direction: column;
    gap: var(--osb-space-2, 8px);
}

.osac-form-field--full {
    grid-column: 1 / -1;
}

.osac-form-field label {
    font-size: var(--osb-text-sm, 14px);
    font-weight: var(--osb-font-medium, 500);
    color: var(--osb-text-dark, #1e293b);
}

.osac-form-field input[type="text"],
.osac-form-field input[type="date"],
.osac-form-field input[type="email"],
.osac-form-field input[type="search"],
.osac-form-field select,
.osac-form-field textarea {
    width: 100%;
    height: 42px;
    padding: 0 var(--osb-space-3, 12px);
    border: 1px solid var(--osb-border, #d1d5db);
    border-radius: var(--osb-radius-md, 8px);
    font-size: var(--osb-text-sm, 14px);
    color: var(--osb-text-dark, #1e293b);
    background: var(--osb-surface, #ffffff);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.osac-form-field textarea {
    height: auto;
    min-height: 80px;
    padding: var(--osb-space-3, 12px);
    resize: vertical;
}

.osac-form-field input:focus,
.osac-form-field select:focus,
.osac-form-field textarea:focus {
    outline: none;
    border-color: var(--osb-brand-primary, #26577C);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--osb-brand-primary) 10%, transparent);
}

.osac-form-field input:disabled,
.osac-form-field select:disabled {
    background: var(--osb-surface-alt, #f8f6f2);
    cursor: not-allowed;
}

/* ==========================================================================
   6. HELPER TEXT
   ========================================================================== */

.osac-help-text {
    font-size: var(--osb-text-sm, 13px);
    color: var(--osb-text-muted, #6b7280);
    margin-top: var(--osb-space-2, 8px);
}

.osac-current-value {
    display: inline-flex;
    align-items: center;
    gap: var(--osb-space-2, 8px);
    padding: var(--osb-space-2, 8px) var(--osb-space-3, 12px);
    background: var(--osb-surface-alt, #f8f6f2);
    border-radius: var(--osb-radius-md, 6px);
    font-size: var(--osb-text-sm, 14px);
    color: var(--osb-text-dark, #1e293b);
    margin-bottom: var(--osb-space-3, 12px);
}

.osac-current-value__label {
    font-weight: var(--osb-font-medium, 500);
    color: var(--osb-text-muted, #64748b);
}

/* ==========================================================================
   7. SECTION ACTIONS
   ========================================================================== */

.osac-section-card__actions {
    display: flex;
    gap: var(--osb-space-3, 12px);
    margin-top: var(--osb-space-4, 16px);
    padding-top: var(--osb-space-4, 16px);
    border-top: 1px solid var(--osb-border, #e2ddd5);
}

.osac-section-card--danger .osac-section-card__actions {
    border-top-color: rgba(239, 68, 68, 0.15);
}

/* Warning text in danger section */
.osac-warning-text {
    font-size: var(--osb-text-sm, 14px);
    color: var(--osb-text-muted, #64748b);
    line-height: 1.5;
    margin: 0;
}

/* ==========================================================================
   8. FOOTER
   ========================================================================== */

.osac-manage-booking__footer {
    margin-top: var(--osb-space-5, 20px);
    padding-top: var(--osb-space-4, 16px);
    border-top: 1px solid var(--osb-border, #e2ddd5);
}

/* ==========================================================================
   9. USER SEARCH (inherits from dashboard)
   ========================================================================== */

.osac-user-search-wrap {
    position: relative;
}

.osac-user-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--osb-surface, #ffffff);
    border: 1px solid var(--osb-border, #e2ddd5);
    border-top: none;
    border-radius: 0 0 var(--osb-radius-md, 6px) var(--osb-radius-md, 6px);
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   10. BUTTON OVERRIDES (extends dashboard.css)
   ========================================================================== */

.osac-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.osac-btn--danger {
    background: var(--osb-danger, #ef4444);
    color: var(--osb-text-white, #ffffff);
}

.osac-btn--danger:hover:not(:disabled) {
    background: #dc2626;
}

/* ==========================================================================
   11. STATUS PILL (for header)
   ========================================================================== */

.osac-status-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--osb-space-1, 4px);
    padding: var(--osb-space-1, 4px) var(--osb-space-3, 10px);
    border-radius: 9999px;
    font-size: var(--osb-text-xs, 12px);
    font-weight: var(--osb-font-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.osac-status-pill--confirmed {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.osac-status-pill--hold {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.osac-status-pill--cancelled {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* ==========================================================================
   12. ERROR/MESSAGE STATES
   ========================================================================== */

.osac-manage-booking--message {
    max-width: 480px;
    margin: var(--osb-space-8, 48px) auto;
    text-align: center;
    padding: var(--osb-space-6, 32px);
    background: var(--osb-surface, #ffffff);
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-lg, 10px);
}

.osac-manage-booking--message p {
    margin: 0 0 var(--osb-space-4, 16px);
    color: var(--osb-text-muted, #64748b);
}

.osac-manage-booking--error {
    border-color: rgba(239, 68, 68, 0.3);
}

.osac-manage-booking--error p {
    color: var(--osb-danger, #ef4444);
}

/* ==========================================================================
   13. TABS
   ========================================================================== */

.osac-tabs {
    margin-bottom: var(--osb-space-4, 16px);
}

.osac-tabs__nav {
    display: flex;
    gap: var(--osb-space-1, 4px);
    background: var(--osb-surface-alt, #ece8e0);
    padding: var(--osb-space-1, 4px);
    border-radius: var(--osb-radius-lg, 10px);
    margin-bottom: var(--osb-space-4, 16px);
}

.osac-tabs__tab {
    flex: 1;
    padding: var(--osb-space-3, 12px) var(--osb-space-4, 16px);
    background: transparent;
    border: none;
    border-radius: var(--osb-radius-md, 8px);
    font-size: var(--osb-text-sm, 14px);
    font-weight: var(--osb-font-medium, 500);
    color: var(--osb-text-muted, #64748b);
    cursor: pointer;
    transition: all 0.15s ease;
}

.osac-tabs__tab:hover:not(.osac-tabs__tab--active) {
    color: var(--osb-text-dark, #1e293b);
    background: rgba(255, 255, 255, 0.5);
}

.osac-tabs__tab--active {
    background: var(--osb-surface, #ffffff);
    color: var(--osb-brand-primary, #26577C);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.osac-tabs__tab--danger {
    color: var(--osb-danger, #ef4444);
}

.osac-tabs__tab--danger.osac-tabs__tab--active {
    color: var(--osb-danger, #ef4444);
}

.osac-tabs__panel {
    display: none;
}

.osac-tabs__panel--active {
    display: block;
}

/* ==========================================================================
   14. HEADER TOP (with status pill)
   ========================================================================== */

.osac-manage-booking__header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--osb-space-3, 12px);
}

/* ==========================================================================
   15. CURRENT BOOKING INFO
   ========================================================================== */

.osac-current-booking-info {
    background: var(--osb-surface-alt, #f8f6f2);
    border-radius: var(--osb-radius-md, 8px);
    padding: var(--osb-space-3, 12px) var(--osb-space-4, 16px);
    margin-bottom: var(--osb-space-4, 16px);
}

.osac-current-booking-info__row {
    display: flex;
    align-items: center;
    gap: var(--osb-space-2, 8px);
    padding: var(--osb-space-1, 4px) 0;
    font-size: var(--osb-text-sm, 14px);
}

.osac-current-booking-info__row + .osac-current-booking-info__row {
    border-top: 1px solid var(--osb-border-light, #e2ddd5);
}

.osac-current-booking-info__label {
    font-weight: var(--osb-font-medium, 500);
    color: var(--osb-text-muted, #64748b);
    min-width: 70px;
}

.osac-current-booking-info__value {
    color: var(--osb-text-dark, #1e293b);
}

/* ==========================================================================
   16. DATE CHANGE FORM
   ========================================================================== */

.osac-date-change-form {
    margin-top: var(--osb-space-4, 16px);
}

.osac-availability-result {
    margin-top: var(--osb-space-4, 16px);
}

.osac-result {
    padding: var(--osb-space-3, 12px) var(--osb-space-4, 16px);
    border-radius: var(--osb-radius-md, 8px);
    font-size: var(--osb-text-sm, 14px);
}

.osac-result--success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #059669;
}

.osac-result--error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #dc2626;
}

.osac-result--warning {
    background: #FFF6E8;
    border: 1px solid #F5A623;
    color: #B87708;
}

.osac-result--info {
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.25);
    color: #1e40af;
}

/* ==========================================================================
   17. DANGER ZONE
   ========================================================================== */

.osac-danger-zone {
    background: rgba(239, 68, 68, 0.03);
    border-radius: var(--osb-radius-md, 8px);
    padding: var(--osb-space-4, 16px);
}

.osac-warning-list {
    margin: var(--osb-space-2, 8px) 0 var(--osb-space-3, 12px);
    padding-left: var(--osb-space-5, 20px);
    color: var(--osb-text-muted, #64748b);
    font-size: var(--osb-text-sm, 14px);
}

.osac-warning-list li {
    margin-bottom: var(--osb-space-1, 4px);
}

.osac-warning-text--strong {
    font-weight: var(--osb-font-semibold, 600);
    color: var(--osb-danger, #ef4444);
}

.osac-confirm-field {
    margin-top: var(--osb-space-4, 16px);
}

.osac-confirm-field label {
    display: block;
    font-size: var(--osb-text-sm, 14px);
    font-weight: var(--osb-font-medium, 500);
    color: var(--osb-text-dark, #1e293b);
    margin-bottom: var(--osb-space-2, 8px);
}

.osac-confirm-field input {
    width: 200px;
    height: 42px;
    padding: 0 var(--osb-space-3, 12px);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--osb-radius-md, 8px);
    font-size: var(--osb-text-sm, 14px);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.osac-confirm-field input:focus {
    outline: none;
    border-color: var(--osb-danger, #ef4444);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* ==========================================================================
   18. USER SEARCH ITEMS
   ========================================================================== */

.osac-user-search-item {
    padding: var(--osb-space-2, 8px) var(--osb-space-3, 12px);
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.osac-user-search-item:hover {
    background: var(--osb-surface-alt, #f8f6f2);
}

.osac-user-search-item__name {
    font-weight: var(--osb-font-medium, 500);
    color: var(--osb-text-dark, #1e293b);
    font-size: var(--osb-text-sm, 14px);
}

.osac-user-search-item__email {
    font-size: var(--osb-text-xs, 12px);
    color: var(--osb-text-muted, #64748b);
}

.osac-user-search-empty {
    padding: var(--osb-space-3, 12px);
    text-align: center;
    color: var(--osb-text-muted, #64748b);
    font-size: var(--osb-text-sm, 14px);
}

.osac-input--selected {
    border-color: var(--osb-brand-primary, #26577C);
    background: color-mix(in oklch, var(--osb-brand-primary) 5%, transparent);
}

.osac-current-value__email {
    color: var(--osb-text-muted, #64748b);
}

/* ==========================================================================
   19. UTILITY CLASSES
   ========================================================================== */

.osac-mt-md {
    margin-top: var(--osb-space-4, 16px);
}

/* ==========================================================================
   20. CHECK AVAILABILITY BUTTON (blue CTA)
   ========================================================================== */

.osac-manage-booking .osac-check-availability-btn {
    background: var(--osb-brand-primary, #26577C) !important;
    border-color: var(--osb-brand-primary, #26577C) !important;
    color: var(--osb-surface, #ffffff) !important;
}

.osac-manage-booking .osac-check-availability-btn:hover:not(:disabled) {
    background: #1e4666 !important;
    border-color: #1e4666 !important;
}

.osac-manage-booking .osac-check-availability-btn:disabled {
    opacity: 0.6;
}

/* ==========================================================================
   21. FLATPICKR OVERRIDES (for manage page)
   ========================================================================== */

.osac-manage-booking .flatpickr-input {
    background: var(--osb-surface, #ffffff) !important;
}

.osac-manage-booking .flatpickr-input + .flatpickr-input {
    height: 42px;
    padding: 0 var(--osb-space-3, 12px);
    border: 1px solid var(--osb-border, #d1d5db);
    border-radius: var(--osb-radius-md, 8px);
    font-size: var(--osb-text-sm, 14px);
}

/* ==========================================================================
   21. RESPONSIVE
   ========================================================================== */

@media (max-width: 600px) {
    .osac-manage-booking {
        padding: var(--osb-space-6, 24px) var(--osb-space-3, 12px) var(--osb-space-3, 12px);
    }

    .osac-manage-booking__header-card,
    .osac-section-card {
        padding: var(--osb-space-4, 16px);
    }

    .osac-form-grid {
        grid-template-columns: 1fr;
    }

    .osac-manage-booking__meta {
        flex-direction: column;
        gap: var(--osb-space-2, 8px);
    }

    .osac-section-card__actions {
        flex-direction: column;
    }

    .osac-section-card__actions .osac-btn {
        width: 100%;
    }
}

/* ==========================================================================
   22. PRICE PREVIEW MODAL (WF-020 v2.3)
   Note: Uses .osac-price-modal to avoid conflict with .osac-modal in popups.css
   ========================================================================== */

.osac-price-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.osac-price-modal--visible {
    opacity: 1;
    visibility: visible;
}

.osac-price-modal--closing {
    opacity: 0;
}

.osac-price-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(2px);
}

.osac-price-modal__content {
    position: relative;
    width: 90%;
    max-width: 440px;
    background: var(--osb-surface, #ffffff);
    border-radius: var(--osb-radius-lg, 12px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.osac-price-modal--visible .osac-price-modal__content {
    transform: scale(1);
}

.osac-price-modal__header {
    padding: var(--osb-space-4, 16px) var(--osb-space-5, 20px);
    border-bottom: 1px solid var(--osb-border, #e2ddd5);
}

.osac-price-modal__title {
    margin: 0;
    font-size: var(--osb-text-lg, 18px);
    font-weight: var(--osb-font-semibold, 600);
    color: var(--osb-text-dark, #1e293b);
}

.osac-price-modal__body {
    padding: var(--osb-space-5, 20px);
}

.osac-price-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--osb-space-3, 12px);
    padding: var(--osb-space-4, 16px) var(--osb-space-5, 20px);
    border-top: 1px solid var(--osb-border, #e2ddd5);
    background: var(--osb-surface-alt, #f8f6f2);
    border-radius: 0 0 var(--osb-radius-lg, 12px) var(--osb-radius-lg, 12px);
}

/* Price Preview Content */
.osac-price-preview {
    display: flex;
    flex-direction: column;
    gap: var(--osb-space-4, 16px);
}

.osac-price-preview__dates {
    display: flex;
    flex-direction: column;
    gap: var(--osb-space-2, 8px);
}

.osac-price-preview__date-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--osb-space-2, 8px) var(--osb-space-3, 12px);
    background: var(--osb-surface-alt, #f8f6f2);
    border-radius: var(--osb-radius-md, 6px);
    font-size: var(--osb-text-sm, 14px);
}

.osac-price-preview__date-row--new {
    background: var(--osb-brand-light, #e8f4fc);
    border: 1px solid color-mix(in oklch, var(--osb-brand-primary) 20%, transparent);
}

.osac-price-preview__label {
    color: var(--osb-text-muted, #64748b);
    font-weight: var(--osb-font-medium, 500);
}

.osac-price-preview__value {
    color: var(--osb-text-dark, #1e293b);
}

.osac-price-preview__value strong {
    margin-left: var(--osb-space-2, 8px);
    font-size: var(--osb-text-base, 15px);
}

/* Price Change Indicators */
.osac-price-change {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--osb-space-3, 12px) var(--osb-space-4, 16px);
    border-radius: var(--osb-radius-md, 8px);
    font-weight: var(--osb-font-semibold, 600);
}

.osac-price-change--increase {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #dc2626;
}

.osac-price-change--decrease {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #059669;
}

.osac-price-change--none {
    background: var(--osb-surface-alt, #f8f6f2);
    border: 1px solid var(--osb-border, #e2ddd5);
    color: var(--osb-text-muted, #64748b);
    justify-content: center;
}

.osac-price-change__label {
    font-size: var(--osb-text-sm, 14px);
}

.osac-price-change__amount {
    font-size: var(--osb-text-lg, 18px);
}

/* FX Rate Note */
.osac-price-preview__fx-note {
    font-size: var(--osb-text-xs, 12px);
    color: var(--osb-text-muted, #94a3b8);
    text-align: center;
    padding: var(--osb-space-2, 8px) 0;
    border-top: 1px dashed var(--osb-border, #e2ddd5);
}

/* Wide modal for full breakdown */
.osac-price-modal__content--wide {
    max-width: 480px;
}

/* Full price preview (like booking flow) */
.osac-price-preview--full {
    display: flex;
    flex-direction: column;
    gap: var(--osb-space-3, 12px);
}

/* Preview Sections */
.osac-preview-section {
    background: var(--osb-surface-alt, #f8f6f2);
    border-radius: var(--osb-radius-md, 8px);
    padding: var(--osb-space-3, 12px) var(--osb-space-4, 16px);
}

.osac-preview-section__title {
    font-size: var(--osb-text-xs, 12px);
    font-weight: var(--osb-font-semibold, 600);
    color: var(--osb-brand-primary, #26577C);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: var(--osb-space-2, 8px);
    padding-bottom: var(--osb-space-2, 8px);
    border-bottom: 1px solid var(--osb-border, #e2ddd5);
}

/* Booking Details (dates) */
.osac-preview-dates__row {
    display: flex;
    justify-content: space-between;
    padding: var(--osb-space-1, 4px) 0;
    font-size: var(--osb-text-sm, 14px);
}

.osac-preview-dates__label {
    color: var(--osb-text-muted, #64748b);
    font-size: var(--osb-text-xs, 12px);
    text-transform: uppercase;
}

.osac-preview-dates__value {
    color: var(--osb-text-dark, #1e293b);
    font-weight: var(--osb-font-medium, 500);
}

/* Price Breakdown */
.osac-breakdown {
    display: flex;
    flex-direction: column;
    gap: var(--osb-space-1, 4px);
}

.osac-breakdown__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--osb-space-1, 4px) 0;
    font-size: var(--osb-text-sm, 14px);
}

.osac-breakdown__label {
    color: var(--osb-text-dark, #1e293b);
}

.osac-breakdown__rate-code {
    display: inline-block;
    margin-left: var(--osb-space-1, 4px);
    font-size: var(--osb-text-xs, 11px);
    color: var(--osb-text-muted, #94a3b8);
    text-transform: uppercase;
}

.osac-breakdown__count {
    margin-left: var(--osb-space-1, 4px);
    color: var(--osb-text-muted, #64748b);
}

.osac-breakdown__value {
    color: var(--osb-text-dark, #1e293b);
    font-weight: var(--osb-font-medium, 500);
}

.osac-breakdown__row--subtotal {
    margin-top: var(--osb-space-2, 8px);
    padding-top: var(--osb-space-2, 8px);
    border-top: 1px solid var(--osb-border, #e2ddd5);
    font-weight: var(--osb-font-semibold, 600);
}

.osac-breakdown__row--discount .osac-breakdown__label,
.osac-breakdown__row--discount .osac-breakdown__value--discount {
    color: #059669;
}

/* Price Summary */
.osac-summary {
    display: flex;
    flex-direction: column;
    gap: var(--osb-space-1, 4px);
}

.osac-summary__row {
    display: flex;
    justify-content: space-between;
    padding: var(--osb-space-1, 4px) 0;
    font-size: var(--osb-text-sm, 14px);
}

.osac-summary__label {
    color: var(--osb-text-muted, #64748b);
}

.osac-summary__value {
    color: var(--osb-text-dark, #1e293b);
    font-weight: var(--osb-font-medium, 500);
}

.osac-summary__row--total {
    margin-top: var(--osb-space-2, 8px);
    padding-top: var(--osb-space-2, 8px);
    border-top: 1px solid var(--osb-border, #e2ddd5);
}

.osac-summary__row--total .osac-summary__label {
    font-weight: var(--osb-font-bold, 700);
    color: var(--osb-text-dark, #1e293b);
}

.osac-summary__row--total .osac-summary__value {
    font-size: var(--osb-text-lg, 18px);
    font-weight: var(--osb-font-bold, 700);
    color: var(--osb-brand-primary, #26577C);
}

.osac-summary__nights {
    text-align: right;
    font-size: var(--osb-text-xs, 12px);
    color: var(--osb-text-muted, #94a3b8);
    margin-top: -2px;
}

/* Original Price Reference */
.osac-preview-original {
    display: flex;
    justify-content: space-between;
    padding: var(--osb-space-2, 8px) var(--osb-space-3, 12px);
    background: var(--osb-surface-alt, #ece8e0);
    border-radius: var(--osb-radius-sm, 4px);
    font-size: var(--osb-text-xs, 12px);
    color: var(--osb-text-muted, #64748b);
}

.osac-preview-original__label {
    font-weight: var(--osb-font-medium, 500);
}

/* Modal Responsive */
@media (max-width: 480px) {
    .osac-price-modal__content {
        width: 95%;
        margin: var(--osb-space-4, 16px);
    }

    .osac-price-modal__footer {
        flex-direction: column;
    }

    .osac-price-modal__footer .osac-btn {
        width: 100%;
    }

    .osac-price-change__label {
        font-size: var(--osb-text-xs, 12px);
    }

    .osac-price-change__amount {
        font-size: var(--osb-text-base, 15px);
    }
}

/* ==========================================================================
   23. DATE CHANGE PREVIEW (WF-020 v2.4 - Server-Rendered)
   ========================================================================== */

/* Date Change Preview Container */
.osac-date-change-preview {
    display: flex;
    flex-direction: column;
    gap: var(--osb-space-3, 12px);
}

/* Date Change Delta Banner */
.osac-date-change-delta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--osb-space-3, 12px) var(--osb-space-4, 16px);
    border-radius: var(--osb-radius-md, 8px);
    font-weight: var(--osb-font-semibold, 600);
}

.osac-date-change-delta--increase {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    color: #b45309;
}

.osac-date-change-delta--decrease {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #059669;
}

.osac-date-change-delta--none {
    background: rgba(100, 116, 139, 0.08);
    border: 1px solid rgba(100, 116, 139, 0.2);
    color: #475569;
    justify-content: center;
}

.osac-delta__label {
    font-size: var(--osb-text-sm, 14px);
}

.osac-delta__amount {
    font-size: var(--osb-text-lg, 18px);
}

/* Original Booking Reference */
.osac-date-change-original {
    display: flex;
    justify-content: space-between;
    padding: var(--osb-space-2, 8px) var(--osb-space-3, 12px);
    background: var(--osb-surface-alt, #ece8e0);
    border-radius: var(--osb-radius-sm, 4px);
    font-size: var(--osb-text-sm, 14px);
    color: var(--osb-text-muted, #64748b);
}

.osac-original__label {
    font-weight: var(--osb-font-medium, 500);
}

/* Confirmation Slider Container */
.osac-date-change-confirm {
    margin-top: var(--osb-space-2, 8px);
    padding: var(--osb-space-3, 12px) var(--osb-space-4, 16px);
    background: transparent;
    border: none;
    display: flex;
    justify-content: center;
}

.osac-date-change-confirm .osac-confirm-slider {
    max-width: 320px;
    width: 100%;
}

.osac-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--osb-space-2, 8px);
    cursor: pointer;
}

.osac-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--osb-brand-primary, #26577C);
    cursor: pointer;
}

.osac-checkbox__label {
    font-size: var(--osb-text-sm, 14px);
    color: var(--osb-text-dark, #1e293b);
    line-height: 1.4;
}

/* Date Change Preview: Mobile */
@media (max-width: 480px) {
    .osac-date-change-delta {
        flex-direction: column;
        text-align: center;
        gap: var(--osb-space-1, 4px);
        padding: var(--osb-space-3, 12px);
    }

    .osac-delta__label {
        font-size: var(--osb-text-xs, 12px);
    }

    .osac-delta__amount {
        font-size: var(--osb-text-base, 15px);
    }

    .osac-date-change-original {
        flex-direction: column;
        text-align: center;
        gap: var(--osb-space-1, 4px);
    }

    .osac-commission-box .osac-commission-box__row {
        flex-direction: column;
        gap: 2px;
        text-align: center;
    }
}

/* FX Rate Note */
.osac-date-change-fx-note {
    text-align: center;
    padding: var(--osb-space-2, 8px) 0;
    font-size: var(--osb-text-xs, 12px);
    color: var(--osb-text-muted, #94a3b8);
    border-top: 1px dashed var(--osb-border, #e2ddd5);
}

/* Modal Loading State */
.osac-price-modal__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--osb-space-8, 48px) var(--osb-space-4, 16px);
    color: var(--osb-text-muted, #64748b);
    font-size: var(--osb-text-sm, 14px);
}

/* Preview box inside date change context */
.osac-preview--date-change {
    background: var(--osb-surface, #ffffff);
    border-radius: var(--osb-radius-md, 8px);
    border: 1px solid var(--osb-border, #e2ddd5);
    overflow: hidden;
}

.osac-preview--date-change .osac-preview-header {
    padding: var(--osb-space-3, 12px) var(--osb-space-4, 16px);
    background: var(--osb-surface-alt, #f8f6f2);
    border-bottom: 1px solid var(--osb-border, #e2ddd5);
}

.osac-preview--date-change .osac-preview-title {
    font-size: var(--osb-text-base, 15px);
    margin: 0;
}

.osac-preview--date-change .osac-preview-box {
    margin: 0;
    padding: var(--osb-space-4, 16px);
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.osac-preview--date-change .osac-preview-box + .osac-preview-box {
    border-top: 1px solid var(--osb-border, #e2ddd5);
}

/* Hub layout: Restore box design (matches New Booking) */
[data-hub-confirm] .osac-preview--date-change .osac-preview-box {
    background: var(--osb-surface, #fff);
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-lg, 12px);
    padding: var(--osb-space-5, 20px);
    margin-bottom: var(--osb-space-4, 16px);
    box-shadow: var(--osb-shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
}

[data-hub-confirm] .osac-preview--date-change .osac-preview-box + .osac-preview-box {
    border-top: 1px solid var(--osb-border, #e2ddd5);
}

/* Hide identifier bar in date change context */
.osac-preview--date-change .osb-preview-identifier {
    display: none;
}

/* Hide staff info bar in date change context */
.osac-preview--date-change .osb-staff-info-bar {
    display: none;
}

/* Hide actions area in date change context (handled by modal footer) */
.osac-preview--date-change .osb-actions-area-wrapper {
    display: none;
}


/* ============================================================
   24. CAPACITY EDIT MODE (WF-020 v2.5)
   Only overrides for locked state - uses OSB classes from booking-form
   ============================================================ */

/* Section Header with Action Button (Edit) */
.osb-section-header--with-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.osb-section-header--with-action h4 {
    margin: 0;
}

/* Small Ghost Button for Edit */
.osb-btn-sm {
    padding: var(--osb-space-1, 4px) var(--osb-space-3, 12px) !important;
    font-size: var(--osb-text-xs, 12px) !important;
    min-height: auto !important;
    height: auto !important;
}

.osb-btn-ghost {
    background: transparent !important;
    border: 1px solid var(--osb-border, #e2ddd5) !important;
    color: var(--osb-text-muted, #64748b) !important;
}

.osb-btn-ghost:hover {
    background: var(--osb-surface-alt, #f8f6f2) !important;
    color: var(--osb-text-dark, #1e293b) !important;
}

/* Locked State: Grayed out, no interaction */
.osac-capacity-grid--locked {
    opacity: 0.7;
    pointer-events: none;
}

.osac-capacity-grid--locked .osb-stepper-input-wrapper {
    background: var(--osb-surface-alt, #f8f6f2) !important;
}

/* Unlocked State: Active editing */
.osac-capacity-grid:not(.osac-capacity-grid--locked) {
    opacity: 1;
    pointer-events: auto;
}

/* Edit Mode Indicator - highlight steppers when unlocked */
.osac-capacity-grid:not(.osac-capacity-grid--locked) .osb-stepper-input-wrapper:not(.osb-stepper-readonly) {
    border-color: var(--osb-brand-primary, #26577C) !important;
    box-shadow: 0 0 0 2px color-mix(in oklch, var(--osb-brand-primary) 10%, transparent) !important;
}

/* Smooth transition for lock/unlock */
.osac-capacity-grid {
    transition: opacity 0.2s ease;
}

/* Edit button active state (when in edit mode) */
.osac-edit-capacity-btn.osb-btn-active {
    background: var(--osb-brand-primary, #26577C) !important;
    color: var(--osb-surface, #ffffff) !important;
    border-color: var(--osb-brand-primary, #26577C) !important;
}


/* ============================================================
   25. MODULE LAYOUT (Sidebar + Content Panel - WF-020 v2.5)
   ============================================================ */

.osac-module-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--osb-space-4, 16px);
    min-height: 400px;
}

/* Sidebar Navigation */
.osac-sidebar {
    background: var(--osb-surface, #ffffff);
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-lg, 10px);
    padding: var(--osb-space-2, 8px);
    height: fit-content;
    position: sticky;
    top: var(--osb-space-4, 16px);
}

.osac-sidebar__nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--osb-space-1, 4px);
}

.osac-sidebar__item {
    display: flex;
    align-items: center;
    gap: var(--osb-space-3, 12px);
    width: 100%;
    padding: var(--osb-space-3, 12px) var(--osb-space-3, 12px);
    background: transparent;
    border: none;
    border-radius: var(--osb-radius-md, 8px);
    font-size: var(--osb-text-sm, 14px);
    font-weight: var(--osb-font-medium, 500);
    color: var(--osb-text-muted, #64748b);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.osac-sidebar__item:hover:not(.osac-sidebar__item--active) {
    background: var(--osb-surface-alt, #f8f6f2);
    color: var(--osb-text-dark, #1e293b);
}

.osac-sidebar__item--active {
    background: var(--osb-brand-primary-tint, rgba(38, 87, 124, 0.08));
    color: var(--osb-brand-primary, #26577C);
    font-weight: var(--osb-font-semibold, 600);
}

.osac-sidebar__icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.osac-sidebar__label {
    flex: 1;
}

/* Content Panel */
.osac-content-panel {
    background: var(--osb-surface, #ffffff);
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-lg, 10px);
    padding: var(--osb-space-5, 20px);
    min-height: 300px;
}

/* Module Panels */
.osac-module {
    display: none;
}

.osac-module--active {
    display: block;
}

/* Module Placeholder (Empty State) */
.osac-module-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--osb-space-8, 32px);
    min-height: 200px;
    color: var(--osb-text-muted, #64748b);
}

.osac-module-placeholder__icon {
    font-size: 48px;
    margin-bottom: var(--osb-space-4, 16px);
    opacity: 0.6;
}

.osac-module-placeholder h3 {
    font-size: var(--osb-text-lg, 18px);
    font-weight: var(--osb-font-semibold, 600);
    color: var(--osb-text-dark, #1e293b);
    margin: 0 0 var(--osb-space-2, 8px);
}

.osac-module-placeholder p {
    font-size: var(--osb-text-sm, 14px);
    margin: 0;
    max-width: 280px;
}

/* OTA Restriction Placeholder */
.osac-module-placeholder--ota {
    min-height: 260px;
    border: 2px dashed var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-lg, 12px);
    margin: var(--osb-space-4, 16px) 0;
}

.osac-module-placeholder--ota .osac-module-placeholder__icon {
    font-size: inherit;
    opacity: 0.4;
    color: var(--osb-text-muted, #64748b);
}

.osac-module-placeholder--ota .osac-module-placeholder__icon svg {
    width: 48px;
    height: 48px;
}

.osac-module-placeholder--ota h3 {
    color: var(--osb-text-dark, #1e293b);
}

.osac-module-placeholder--ota p {
    max-width: 380px;
    line-height: 1.5;
}

.osac-module-placeholder--ota .osac-module-placeholder__hint {
    margin-top: var(--osb-space-3, 12px);
    padding-top: var(--osb-space-3, 12px);
    border-top: 1px solid var(--osb-border, #e2ddd5);
    font-style: italic;
    opacity: 0.8;
}

/* Responsive: Stack on Mobile */
@media (max-width: 768px) {
    .osac-module-layout {
        grid-template-columns: 1fr;
    }

    .osac-sidebar {
        position: static;
        overflow-x: auto;
    }

    .osac-sidebar__nav {
        flex-direction: row;
        gap: var(--osb-space-1, 4px);
    }

    .osac-sidebar__item {
        flex-direction: column;
        padding: var(--osb-space-2, 8px) var(--osb-space-3, 12px);
        min-width: max-content;
    }

    .osac-sidebar__icon {
        font-size: 20px;
    }

    .osac-sidebar__label {
        font-size: var(--osb-text-xs, 12px);
    }
}


/* ============================================================
   26. ACTION HEADER (WF-020 v2.6)
   Three action buttons: Change Details, Set Status, Cancel
   ============================================================ */

.osac-action-header {
    display: flex;
    gap: var(--osb-space-2, 8px);
    margin-bottom: var(--osb-space-4, 16px);
    padding-bottom: var(--osb-space-4, 16px);
    border-bottom: 1px solid var(--osb-border, #e2ddd5);
}

/* Action Button Base */
.osac-action-btn {
    display: flex;
    align-items: center;
    gap: var(--osb-space-2, 8px);
    padding: var(--osb-space-2, 8px) var(--osb-space-3, 12px);
    background: var(--osb-surface-alt, #f8f6f2);
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-md, 8px);
    font-size: var(--osb-text-sm, 14px);
    font-weight: var(--osb-font-medium, 500);
    color: var(--osb-text-muted, #64748b);
    cursor: pointer;
    transition: all 0.15s ease;
}

.osac-action-btn:hover:not(:disabled) {
    background: var(--osb-surface, #ffffff);
    border-color: var(--osb-border-dark, #cbd5e1);
    color: var(--osb-text-dark, #1e293b);
}

.osac-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.osac-action-btn__icon {
    font-size: 16px;
    line-height: 1;
}

.osac-action-btn__label {
    white-space: nowrap;
}

/* Action Button Variants */
.osac-action-btn--change:hover:not(:disabled) {
    border-color: var(--osb-brand-primary, #26577C);
    color: var(--osb-brand-primary, #26577C);
}

.osac-action-btn--change.osac-action-btn--active {
    background: var(--osb-brand-primary, #26577C);
    border-color: var(--osb-brand-primary, #26577C);
    color: var(--osb-surface, #ffffff);
}

/* Confirm button: Subtle green accent (important action) */
.osac-action-btn--status.osac-action-btn--to-confirm {
    border-color: var(--osb-success, #10b981);
    color: var(--osb-success-dark, #047857);
    background: var(--osb-success-light, #d1fae5);
}

.osac-action-btn--status.osac-action-btn--to-confirm:hover:not(:disabled) {
    border-color: #059669;
    color: #065f46;
    background: #a7f3d0;
}

/* Set to Hold: Subtle gold accent (important action) */
.osac-action-btn--status.osac-action-btn--to-hold {
    border-color: var(--osb-warning, #f59e0b);
    color: var(--osb-warning-dark, #b45309);
    background: var(--osb-warning-light, #fef3c7);
}

.osac-action-btn--status.osac-action-btn--to-hold:hover:not(:disabled) {
    border-color: #d97706;
    color: #92400e;
    background: #fde68a;
}

/* Cancel: Subtle rose accent (important action) */
.osac-action-btn--cancel {
    border-color: #fca5a5;
    color: #dc2626;
    background: #fef2f2;
}

.osac-action-btn--cancel:hover:not(:disabled) {
    border-color: var(--osb-error, #ef4444);
    color: #b91c1c;
    background: #fee2e2;
}

/* Active State: Status Button (Confirm = green, Hold = orange) */
.osac-action-btn--status.osac-action-btn--to-confirm.osac-action-btn--active {
    background: #059669;
    border-color: #059669;
    color: var(--osb-surface, #ffffff);
}

.osac-action-btn--status.osac-action-btn--to-hold.osac-action-btn--active {
    background: #d97706;
    border-color: #d97706;
    color: var(--osb-surface, #ffffff);
}

/* Active State: Cancel Button */
.osac-action-btn--cancel.osac-action-btn--active {
    background: var(--osb-danger, #ef4444);
    border-color: var(--osb-danger, #ef4444);
    color: var(--osb-surface, #ffffff);
}

/* Active Button Hover: Keep text white */
.osac-action-btn--active:hover:not(:disabled) {
    color: var(--osb-surface, #ffffff) !important;
}

/* ============================================================
   26b. PRICE DETAILS (Modal/Expandable)
   ============================================================ */

.osac-price-details {
    font-size: var(--osb-text-sm, 14px);
}

.osac-price-details__section {
    padding: var(--osb-space-3, 12px) 0;
    border-bottom: 1px solid var(--osb-border, #e2ddd5);
}

.osac-price-details__section:last-of-type {
    border-bottom: none;
}

.osac-price-details__section-title {
    display: flex;
    align-items: center;
    gap: var(--osb-space-2, 8px);
    font-size: var(--osb-text-sm, 13px);
    font-weight: var(--osb-font-semibold, 600);
    color: var(--osb-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 var(--osb-space-2, 8px);
}

.osac-price-details__badge {
    font-size: var(--osb-text-xs, 11px);
    font-weight: var(--osb-font-medium, 500);
    color: var(--osb-brand-primary, #26577C);
    background: color-mix(in oklch, var(--osb-brand-primary) 10%, transparent);
    padding: 2px 8px;
    border-radius: var(--osb-radius-sm, 4px);
    text-transform: none;
    letter-spacing: normal;
}

.osac-price-details__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--osb-space-1, 4px) 0;
}

.osac-price-details__row--sub {
    padding-left: var(--osb-space-3, 12px);
    font-size: var(--osb-text-xs, 12px);
}

.osac-price-details__row--subtotal,
.osac-price-details__row--total {
    padding-top: var(--osb-space-2, 8px);
    margin-top: var(--osb-space-2, 8px);
    border-top: 1px dashed var(--osb-border, #e2ddd5);
    font-weight: var(--osb-font-semibold, 600);
}

.osac-price-details__row--deduction {
    color: var(--osb-text-muted, #64748b);
}

.osac-price-details__row--discount .osac-price-details__value {
    color: #059669;
}

.osac-price-details__label {
    color: var(--osb-text-dark, #1e293b);
}

.osac-price-details__value {
    font-weight: var(--osb-font-medium, 500);
    color: var(--osb-text-dark, #1e293b);
}

.osac-price-details__value--muted {
    color: var(--osb-text-muted, #64748b);
    font-weight: normal;
    font-style: italic;
}

.osac-price-details__value--deduction {
    color: var(--osb-text-muted, #64748b);
}

.osac-price-details__value--total {
    font-size: var(--osb-text-base, 15px);
    color: var(--osb-brand-primary, #26577C);
}

/* Final Total */
.osac-price-details__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--osb-space-4, 16px) 0 0;
    margin-top: var(--osb-space-3, 12px);
    border-top: 2px solid var(--osb-border, #e2ddd5);
}

.osac-price-details__total-label {
    font-size: var(--osb-text-base, 15px);
    font-weight: var(--osb-font-bold, 700);
    color: var(--osb-text-dark, #1e293b);
}

.osac-price-details__total-value {
    font-size: var(--osb-text-lg, 18px);
    font-weight: var(--osb-font-bold, 700);
    color: var(--osb-brand-primary, #26577C);
}

/* ============================================================
   27. ACTION PANELS (Confirmation Panels for Status/Cancel)
   ============================================================ */

/* Action Panel → action-panel.css */

/* Manage-booking specific: danger input */
.osac-input--danger {
    width: 180px;
    height: 40px;
    padding: 0 var(--osb-space-3, 12px);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--osb-radius-md, 8px);
    font-size: var(--osb-text-sm, 14px);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.osac-input--danger:focus {
    outline: none;
    border-color: var(--osb-danger, #ef4444);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.osac-slider-label {
    display: block;
    font-size: var(--osb-text-sm, 14px);
    font-weight: var(--osb-font-medium, 500);
    color: var(--osb-text-dark, #1e293b);
    margin-bottom: var(--osb-space-2, 8px);
}

/* ============================================================
   28. MODE STATES (Form visibility based on active mode)
   Modes: view (default), status, cancel
   ============================================================ */

/* View Mode (default): Form visible and editable */
.osac-module[data-mode="view"] .osac-booking-form-wrapper {
    display: block;
}

.osac-module[data-mode="view"] .osac-action-panel {
    display: none;
}

/* Status Mode: Form hidden, status panel visible */
.osac-module[data-mode="status"] .osac-booking-form-wrapper {
    display: none;
}

.osac-module[data-mode="status"] .osac-action-panel--status {
    display: block;
}

.osac-module[data-mode="status"] .osac-action-panel--cancel {
    display: none;
}

/* Cancel Mode: Form hidden, cancel panel visible */
.osac-module[data-mode="cancel"] .osac-booking-form-wrapper {
    display: none;
}

.osac-module[data-mode="cancel"] .osac-action-panel--cancel {
    display: block;
}

.osac-module[data-mode="cancel"] .osac-action-panel--status {
    display: none;
}

/* Hub Panel mode states (mirrors .osac-module rules above) */
.osac-hub-panel[data-mode="view"] .osac-action-panel {
    display: none;
}

.osac-hub-panel[data-mode="status"] .osac-booking-form-wrapper,
.osac-hub-panel[data-mode="status"] .osac-hub-step,
.osac-hub-panel[data-mode="status"] .osac-hub-breadcrumbs {
    display: none;
}

.osac-hub-panel[data-mode="status"] .osac-action-panel--status {
    display: block;
}

.osac-hub-panel[data-mode="status"] .osac-action-panel--cancel {
    display: none;
}

.osac-hub-panel[data-mode="cancel"] .osac-booking-form-wrapper,
.osac-hub-panel[data-mode="cancel"] .osac-hub-step,
.osac-hub-panel[data-mode="cancel"] .osac-hub-breadcrumbs {
    display: none;
}

.osac-hub-panel[data-mode="cancel"] .osac-action-panel--cancel {
    display: block;
}

.osac-hub-panel[data-mode="cancel"] .osac-action-panel--status {
    display: none;
}

/* Responsive Action Header */
@media (max-width: 600px) {
    .osac-action-header {
        flex-wrap: wrap;
    }

    .osac-action-btn {
        flex: 1;
        min-width: calc(50% - var(--osb-space-2, 8px));
        justify-content: center;
    }

    .osac-action-btn--cancel {
        flex-basis: 100%;
    }

    .osac-action-panel__footer {
        flex-direction: column;
    }

    .osac-action-panel__footer .osac-btn {
        width: 100%;
    }
}

/* ==========================================================================
   29. AVAILABILITY SUMMARY (für Check Availability Result)
   Uses Public Flow colors as Source of Truth
   ========================================================================== */

/* Container für Availability Result anpassen */
#os-availability-result-manage-3078,
[id^="os-availability-result-manage-"] {
    margin-top: var(--osb-space-4, 16px);
    max-width: 100%;
    overflow: hidden;
}

/* Availability Summary Wrapper - prevent overflow */
.osac-manage-booking .osb-availability-summary {
    margin-top: 0;
    max-width: 100%;
    overflow: hidden;
}

/* Status Boxes in Manage Booking anpassen */
.osac-manage-booking .osb-status-box {
    margin-top: var(--osb-space-3, 12px);
    margin-bottom: var(--osb-space-3, 12px);
    max-width: 100%;
    box-sizing: border-box;
}

.osac-manage-booking .osb-status-box:first-child {
    margin-top: 0;
}

/* =========================================
   STATUS BOX COLORS - Public Flow (Source of Truth)
   Available: #EAF7F1 bg, #1FA971 border
   Suggestion: #FFF6E8 bg, #F5A623 border
   Error: #FDECEC bg, #E5533D border
   ========================================= */

/* AVAILABLE / SUCCESS - Green */
.osac-manage-booking .osb-status-box--success:not(.osb-status-box--alt) {
    background: #EAF7F1;
    border-color: #1FA971;
    border-left-color: #1FA971;
}

.osac-manage-booking .osb-status-box--success:not(.osb-status-box--alt) .osb-status-box__icon {
    color: #1FA971;
}

.osac-manage-booking .osb-status-box--success:not(.osb-status-box--alt) .osb-status-box__title {
    color: #0D7B54;
}

.osac-manage-booking .osb-status-box--success:not(.osb-status-box--alt) .osb-status-box__message {
    color: #1A8E64;
}

.osac-manage-booking .osb-status-box--success:not(.osb-status-box--alt) .osb-status-badge {
    background: #D3F0E2;
    color: #0D7B54;
    border-color: #1FA971;
}

/* SUCCESS BOX BUTTON - Green themed (View Summary) */
.osac-manage-booking .osb-status-box--success:not(.osb-status-box--alt) .osb-status-box__actions .osb-btn,
.osac-manage-booking .osb-status-box--success:not(.osb-status-box--alt) .osb-status-box__actions a {
    background: rgba(31, 169, 113, 0.12) !important;
    color: #0D7B54 !important;
    border: 1.5px solid #1FA971 !important;
}

.osac-manage-booking .osb-status-box--success:not(.osb-status-box--alt) .osb-status-box__actions .osb-btn:hover,
.osac-manage-booking .osb-status-box--success:not(.osb-status-box--alt) .osb-status-box__actions a:hover {
    background: rgba(31, 169, 113, 0.25) !important;
    border-color: #0D7B54 !important;
    color: #065f46 !important;
}

/* SUGGESTION / WARNING - Yellow/Orange */
.osac-manage-booking .osb-status-box--warning:not(.osb-status-box--alt),
.osac-manage-booking .osb-status-box--suggest {
    background: #FFF6E8;
    border-color: #F5A623;
    border-left-color: #F5A623;
}

.osac-manage-booking .osb-status-box--warning:not(.osb-status-box--alt) .osb-status-box__icon,
.osac-manage-booking .osb-status-box--suggest .osb-status-box__icon {
    color: #F5A623;
}

.osac-manage-booking .osb-status-box--warning:not(.osb-status-box--alt) .osb-status-box__title,
.osac-manage-booking .osb-status-box--suggest .osb-status-box__title {
    color: #B87708;
}

.osac-manage-booking .osb-status-box--warning:not(.osb-status-box--alt) .osb-status-box__message,
.osac-manage-booking .osb-status-box--suggest .osb-status-box__message {
    color: #C98C12;
}

.osac-manage-booking .osb-status-box--warning:not(.osb-status-box--alt) .osb-status-badge,
.osac-manage-booking .osb-status-box--suggest .osb-status-badge {
    background: #FEE9C2;
    color: #B87708;
    border-color: #F5A623;
}

/* WARNING BOX BUTTON - Yellow/Orange themed (View Suggestion) */
.osac-manage-booking .osb-status-box--warning:not(.osb-status-box--alt) .osb-status-box__actions .osb-btn,
.osac-manage-booking .osb-status-box--suggest .osb-status-box__actions .osb-btn {
    background: #F5A623 !important;
    color: #ffffff !important;
    border: none !important;
}

.osac-manage-booking .osb-status-box--warning:not(.osb-status-box--alt) .osb-status-box__actions .osb-btn:hover,
.osac-manage-booking .osb-status-box--suggest .osb-status-box__actions .osb-btn:hover {
    background: #D9900E !important;
}

/* ERROR / UNAVAILABLE - Red */
.osac-manage-booking .osb-status-box--error:not(.osb-status-box--alt) {
    background: #FDECEC;
    border-color: #E5533D;
    border-left-color: #E5533D;
}

.osac-manage-booking .osb-status-box--error:not(.osb-status-box--alt) .osb-status-box__icon {
    color: #E5533D;
}

.osac-manage-booking .osb-status-box--error:not(.osb-status-box--alt) .osb-status-box__title {
    color: #A83A2A;
}

.osac-manage-booking .osb-status-box--error:not(.osb-status-box--alt) .osb-status-box__message {
    color: #C14432;
}

.osac-manage-booking .osb-status-box--error:not(.osb-status-box--alt) .osb-status-badge {
    background: #FADBD7;
    color: #A83A2A;
    border-color: #E5533D;
}

/* ALTERNATIVE BOX - Softer version of same colors */
.osac-manage-booking .osb-status-box--success.osb-status-box--alt {
    background: #F5FBF8;
    border-color: rgba(31, 169, 113, 0.4);
    border-left-color: rgba(31, 169, 113, 0.7);
}

.osac-manage-booking .osb-status-box--warning.osb-status-box--alt {
    background: #FFFBF2;
    border-color: rgba(245, 166, 35, 0.4);
    border-left-color: rgba(245, 166, 35, 0.7);
}

/* =========================================
   ALTERNATIVE INFO TEXT (No buttons)
   ========================================= */

/* Alternative Notice - Uses suggestion colors (yellow/orange) */
.osac-alt-notice {
    margin: var(--osb-space-3, 12px) 0 0;
    padding: var(--osb-space-3, 12px);
    background: #FFF6E8;
    border: 1px solid #F5A623;
    border-left: 3px solid #F5A623;
    border-radius: var(--osb-radius-md, 8px);
}

.osac-alt-notice__title {
    font-weight: var(--osb-font-semibold, 600);
    color: #B87708;
    margin-bottom: var(--osb-space-2, 8px);
}

.osac-alt-notice small,
.osac-alt-notice p {
    display: block;
    font-size: var(--osb-text-sm, 13px);
    line-height: 1.5;
    margin: 0;
    color: #92400E;
}

/* Hide action buttons in alternative box for manage booking */
.osac-manage-booking .osb-status-box--alt .osb-status-box__actions {
    display: none;
}

/* Save Hint in Primary Box - Use success green */
.osac-save-hint {
    margin-top: var(--osb-space-3, 12px);
    padding-top: var(--osb-space-3, 12px);
    border-top: 1px dashed rgba(31, 169, 113, 0.3);
    font-size: var(--osb-text-sm, 13px);
    color: #1A8E64;
}

.osac-save-hint strong {
    color: #0D7B54;
}

/* Save New Dates Button (primary style - keeps brand primary) */
.osac-manage-booking .osac-save-dates-btn {
    background: var(--osb-brand-primary, #26577C) !important;
    border-color: var(--osb-brand-primary, #26577C) !important;
    color: var(--osb-surface, #ffffff) !important;
}

.osac-manage-booking .osac-save-dates-btn:hover:not(:disabled) {
    background: #1e4666 !important;
    border-color: #1e4666 !important;
}

/* =========================================
   INLINE PRICE PREVIEW (after availability check)
   Uses same styles as public booking flow
   ========================================= */

.osac-inline-price-preview {
    margin-top: var(--osb-space-4, 16px);
}

.osac-preview-loading {
    padding: var(--osb-space-4, 16px);
    background: var(--osb-surface-alt, #f8f6f2);
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-md, 8px);
    text-align: center;
    color: var(--osb-text-muted, #64748b);
    font-size: var(--osb-text-sm, 14px);
}

.osac-preview-error {
    padding: var(--osb-space-4, 16px);
    background: #FDECEC;
    border: 1px solid #E5533D;
    border-radius: var(--osb-radius-md, 8px);
    text-align: center;
    color: #A83A2A;
    font-size: var(--osb-text-sm, 14px);
}

.osac-preview-error-details {
    margin-top: var(--osb-space-2, 8px);
    padding: var(--osb-space-2, 8px);
    background: rgba(0, 0, 0, 0.05);
    border-radius: var(--osb-radius-sm, 4px);
    font-size: var(--osb-text-xs, 12px);
    font-family: monospace;
    word-break: break-all;
    color: #6B2D22;
}

/* Override for inline preview context */
.osac-inline-price-preview .osac-preview--date-change {
    background: var(--osb-surface, #ffffff);
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-lg, 10px);
    overflow: hidden;
}

.osac-inline-price-preview .osac-preview-header {
    padding: var(--osb-space-3, 12px) var(--osb-space-4, 16px);
    background: var(--osb-brand-primary, #26577C);
    color: var(--osb-text-white, #ffffff);
}

.osac-inline-price-preview .osac-preview-title {
    margin: 0;
    font-size: var(--osb-text-base, 15px);
    font-weight: var(--osb-font-semibold, 600);
    color: var(--osb-text-white, #ffffff);
}

/* Identifier bar styling */
.osac-inline-price-preview .osb-preview-identifier {
    padding: var(--osb-space-2, 8px) var(--osb-space-4, 16px);
    background: var(--osb-brand-primary-light, #e8f4f8);
    font-size: var(--osb-text-sm, 13px);
    color: var(--osb-brand-primary, #26577C);
    border-bottom: 1px solid var(--osb-border, #e2ddd5);
}

/* Box sections */
.osac-inline-price-preview .osac-preview-box {
    padding: var(--osb-space-4, 16px);
    border-bottom: 1px solid var(--osb-border, #e2ddd5);
}

.osac-inline-price-preview .osac-preview-box:last-of-type {
    border-bottom: none;
}

.osac-inline-price-preview .osac-box-heading {
    font-size: var(--osb-text-xs, 12px);
    font-weight: var(--osb-font-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--osb-text-muted, #64748b);
    margin: 0 0 var(--osb-space-3, 12px);
    padding: 0 var(--osb-space-4, 16px) var(--osb-space-2, 8px) var(--osb-space-4, 16px);
    border-bottom: 1px dashed var(--osb-border, #e2ddd5);
}

/* Info grid (booking details) */
.osac-inline-price-preview .osac-info-grid {
    display: flex;
    flex-direction: column;
    gap: var(--osb-space-2, 8px);
}

.osac-inline-price-preview .osac-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--osb-space-1, 4px) var(--osb-space-4, 16px);
    font-size: var(--osb-text-sm, 14px);
}

.osac-inline-price-preview .osac-label {
    font-size: var(--osb-text-xs, 12px);
    font-weight: var(--osb-font-medium, 500);
    color: var(--osb-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.osac-inline-price-preview .osac-value {
    font-weight: var(--osb-font-semibold, 600);
    color: var(--osb-text-dark, #1e293b);
}

.osac-inline-price-preview .osac-info-row.osac-highlight {
    background: var(--osb-brand-primary-light, #e8f4f8);
    padding: var(--osb-space-2, 8px) var(--osb-space-4, 16px);
    border-radius: var(--osb-radius-sm, 4px);
    border: 1px solid var(--osb-border, #e2ddd5);
}

/* Breakdown grid (price details) */
.osac-inline-price-preview .osac-breakdown-grid {
    display: flex;
    flex-direction: column;
    gap: var(--osb-space-2, 8px);
}

.osac-inline-price-preview .osac-breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--osb-space-1, 4px) var(--osb-space-4, 16px);
    font-size: var(--osb-text-sm, 14px);
}

.osac-inline-price-preview .osac-breakdown-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.osac-inline-price-preview .osac-item-name {
    font-weight: var(--osb-font-medium, 500);
    color: var(--osb-text-dark, #1e293b);
}

.osac-inline-price-preview .osac-item-detail {
    font-size: var(--osb-text-xs, 12px);
    color: var(--osb-text-muted, #94a3b8);
}

.osac-inline-price-preview .osac-breakdown-price {
    font-weight: var(--osb-font-semibold, 600);
    color: var(--osb-text-dark, #1e293b);
}

/* Subtotal row */
.osac-inline-price-preview .osac-subtotal-row {
    margin-top: var(--osb-space-2, 8px);
    padding-top: var(--osb-space-2, 8px);
    border-top: 1px dashed var(--osb-border, #e2ddd5);
}

/* Total row (discount rows) - ensure horizontal padding */
.osac-inline-price-preview .osac-total-row {
    padding: var(--osb-space-3, 12px) var(--osb-space-4, 16px);
}

/* Discount row - green */
.osac-inline-price-preview .osac-discount-row .osac-item-name,
.osac-inline-price-preview .osac-discount-row .osac-discount-price {
    color: #1FA971;
}

/* FOC row - muted green */
.osac-inline-price-preview .osac-foc-row .osac-item-name {
    color: #64748b;
}

.osac-inline-price-preview .osac-foc-price {
    color: #1FA971;
    font-weight: var(--osb-font-semibold, 600);
}

/* Grand total row */
.osac-inline-price-preview .osac-grand-total-row {
    background: var(--osb-brand-primary-light, #e8f4f8);
    padding: var(--osb-space-3, 12px) var(--osb-space-4, 16px);
    margin: var(--osb-space-3, 12px) calc(-1 * var(--osb-space-4, 16px)) calc(-1 * var(--osb-space-4, 16px));
    border-top: 2px solid var(--osb-brand-primary, #26577C);
}

.osac-inline-price-preview .osac-grand-total {
    font-size: var(--osb-text-lg, 18px);
    font-weight: var(--osb-font-bold, 700);
    color: var(--osb-brand-primary, #26577C);
}

/* Hide staff info bar and actions in inline preview */
.osac-inline-price-preview .osb-staff-info-bar,
.osac-inline-price-preview .osb-actions-area-wrapper {
    display: none;
}

/* Preview Actions (Back button) */
.osac-preview-actions {
    display: flex;
    justify-content: space-between;
    gap: var(--osb-space-3, 12px);
    margin-top: var(--osb-space-4, 16px);
    padding-top: var(--osb-space-4, 16px);
    border-top: 1px solid var(--osb-border, #e2ddd5);
}

/* Single button - centered */
.osac-preview-actions--single {
    justify-content: center;
}

.osac-preview-actions--single .osb-btn {
    flex: 0 1 auto;
    min-width: 200px;
    max-width: 320px;
}

.osac-preview-actions .osb-btn {
    flex: 1;
    padding: var(--osb-space-3, 12px) var(--osb-space-4, 16px);
    font-size: var(--osb-text-sm, 14px);
    font-weight: var(--osb-font-semibold, 600);
    border-radius: var(--osb-radius-md, 8px);
    cursor: pointer;
    transition: all 0.15s ease;
}

.osac-preview-actions .osb-btn-ghost {
    background: var(--osb-surface, #ffffff);
    border: 1px solid var(--osb-border, #d1d5db);
    color: var(--osb-text-muted, #64748b);
}

.osac-preview-actions .osb-btn-ghost:hover {
    background: var(--osb-surface-alt, #f8f6f2);
    border-color: var(--osb-border-dark, #9ca3af);
    color: var(--osb-text-dark, #1e293b);
}

.osac-preview-actions .osb-btn-cta {
    background: var(--osb-brand-primary, #26577C);
    border: 1px solid var(--osb-brand-primary, #26577C);
    color: var(--osb-text-white, #ffffff);
}

.osac-preview-actions .osb-btn-cta:hover {
    background: #1e4666;
    border-color: #1e4666;
}

.osac-preview-actions .osb-btn-cta:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Responsive preview actions */
@media (max-width: 480px) {
    .osac-preview-actions {
        flex-direction: column;
    }

    .osac-preview-actions .osb-btn {
        width: 100%;
    }
}

/* =========================================
   COMMISSION PREVIEW (for agency bookings)
   ========================================= */

.osac-commission-preview {
    margin-top: var(--osb-space-4, 16px);
    padding: var(--osb-space-4, 16px);
    background: linear-gradient(135deg, #e0f2f1 0%, #e8f5e9 100%);
    border: 1px solid #1FA971;
    border-left: 4px solid #1FA971;
    border-radius: var(--osb-radius-md, 8px);
}

.osac-commission-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--osb-space-3, 12px);
}

.osac-commission-label {
    display: flex;
    align-items: center;
    gap: var(--osb-space-2, 8px);
}

.osac-commission-label-text {
    font-size: var(--osb-text-sm, 14px);
    font-weight: var(--osb-font-medium, 500);
    color: #0D7B54;
}

.osac-commission-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    font-size: var(--osb-text-xs, 12px);
    font-weight: var(--osb-font-bold, 700);
    background: #1FA971;
    color: #ffffff;
    border-radius: 12px;
}

.osac-commission-amount {
    font-size: var(--osb-text-base, 15px);
    font-weight: var(--osb-font-semibold, 600);
    color: #1FA971;
}

.osac-commission-net-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--osb-space-3, 12px);
    border-top: 1px dashed rgba(31, 169, 113, 0.3);
}

.osac-commission-net-label {
    font-size: var(--osb-text-sm, 14px);
    color: #047857;
}

.osac-commission-net-value {
    font-size: var(--osb-text-lg, 18px);
    font-weight: var(--osb-font-bold, 700);
    color: #0D7B54;
}

.osac-commission-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--osb-space-2, 8px) 0;
    font-size: var(--osb-text-sm, 14px);
    color: var(--osb-gray-700, #374151);
    border-bottom: 1px solid rgba(31, 169, 113, 0.15);
}

.osac-commission-row:last-of-type {
    border-bottom: none;
}

.osac-commission-row--foc {
    color: #0D7B54;
    font-style: italic;
}

/* ===================================================================
   PRICE BREAKDOWN - MANAGE BOOKING CONTEXT
   Left-aligned with proper padding (consistent with other views)
   =================================================================== */
.osac-price-breakdown--manage-booking .osac-box-heading {
    text-align: left;
    padding-left: var(--osb-space-4, 16px);
}

.osac-price-breakdown--manage-booking .osac-breakdown-row {
    text-align: left;
    padding-left: var(--osb-space-4, 16px);
}

.osac-price-breakdown--manage-booking .osac-breakdown-label {
    text-align: left;
}

.osac-price-breakdown--manage-booking .osac-total-row,
.osac-price-breakdown--manage-booking .osac-subtotal-row {
    text-align: left;
    padding-left: var(--osb-space-4, 16px);
}

/* Ensure preview boxes have left-aligned content */
.osac-price-breakdown--manage-booking .osac-preview-box {
    text-align: left;
}

.osac-price-breakdown--manage-booking .osac-preview-total-box {
    text-align: left;
}

/* ===================================================================
   PLAN CHANGE WARNING DIALOG
   Shown when agency loses Group Leader eligibility
   =================================================================== */
.osac-warning-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: osac-fade-in 0.2s ease-out;
}

@keyframes osac-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.osac-warning-dialog {
    background: #fff;
    border-radius: var(--osb-radius-lg, 12px);
    padding: var(--osb-space-6, 24px);
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    animation: osac-slide-up 0.3s ease-out;
}

@keyframes osac-slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.osac-warning-dialog__icon {
    font-size: 48px;
    margin-bottom: var(--osb-space-3, 12px);
}

.osac-warning-dialog__title {
    font-size: var(--osb-text-lg, 18px);
    font-weight: var(--osb-font-bold, 700);
    color: var(--osb-text-dark, #1e293b);
    margin: 0 0 var(--osb-space-3, 12px);
}

.osac-warning-dialog__message {
    font-size: var(--osb-text-base, 15px);
    color: var(--osb-text-muted, #64748b);
    margin: 0 0 var(--osb-space-4, 16px);
    line-height: 1.5;
}

.osac-warning-dialog__detail {
    font-size: var(--osb-text-sm, 13px);
    color: var(--osb-text-muted, #64748b);
    background: var(--osb-surface-alt, #f8f6f2);
    border-radius: var(--osb-radius, 6px);
    padding: var(--osb-space-3, 12px);
    margin: 0 0 var(--osb-space-5, 20px);
    text-align: left;
}

.osac-warning-dialog__detail strong {
    color: var(--osb-text-dark, #1e293b);
}

.osac-warning-dialog__actions {
    display: flex;
    gap: var(--osb-space-3, 12px);
    justify-content: center;
}

.osac-warning-dialog__actions .osb-btn {
    flex: 1;
    max-width: 180px;
}

.osac-warning-dialog__actions .osb-btn-ghost {
    background: transparent;
    border: 1px solid var(--osb-border, #e2ddd5);
    color: var(--osb-text-muted, #64748b);
}

.osac-warning-dialog__actions .osb-btn-ghost:hover {
    background: var(--osb-surface-alt, #f8f6f2);
    border-color: var(--osb-text-muted, #64748b);
}

.osac-warning-dialog__actions .osb-btn-primary {
    background: var(--osb-brand-primary, #26577C);
    border: none;
    color: #fff;
}

.osac-warning-dialog__actions .osb-btn-primary:hover {
    background: var(--osb-brand-primary-dark, #1d4561);
}

/* Upgrade dialog variant (positive/celebratory) */
.osac-warning-dialog--upgrade {
    border-top: 4px solid var(--osb-success, #10b981);
}

.osac-warning-dialog--upgrade .osac-warning-dialog__title {
    color: var(--osb-success, #10b981);
}

.osac-warning-dialog__actions .osb-btn-success {
    background: var(--osb-success, #10b981);
    border: none;
    color: #fff;
}

.osac-warning-dialog__actions .osb-btn-success:hover {
    background: var(--osb-success-dark, #059669);
}

/* ═══════════════════════════════════════════════════════════════════
   BOOKING GROUPS (WF-009)
   ═══════════════════════════════════════════════════════════════════ */

/* Group badge in header */
.osac-manage-booking__header-badges {
    display: flex;
    align-items: center;
    gap: var(--osac-space-sm, 0.5rem);
}

.osac-group-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--osac-color-primary-light, #dbeafe);
    color: var(--osac-color-primary-dark, #1e40af);
    border-radius: var(--osac-radius-full, 9999px);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.osac-group-badge svg {
    flex-shrink: 0;
}

/* Hide legacy summary rows inside hub confirm — replaced by hub summary lines */
[data-hub-confirm] .osac-summary-row {
    display: none;
}

/* Gap between hub summary lines */
.osac-hub-step .osac-snb__step-summary + .osac-snb__step-summary {
    margin-top: 8px;
}

.osac-hub-step .osac-snb__step-summary {
    margin-bottom: 8px;
}

/* Date wrapper spacing inside hub step */
.osac-hub-step .osb-date-wrapper {
    margin-top: var(--osac-space-md, 1rem);
}

/* Linked Bookings Section */
.osac-linked-bookings {
    margin-top: var(--osac-space-lg, 1.5rem);
    background: var(--osac-bg-card, #fff);
    border: 1px solid var(--osac-border-color, #e2ddd5);
    border-radius: var(--osac-radius-md, 8px);
    overflow: hidden;
}

.osac-linked-bookings[hidden] {
    display: none;
}

.osac-linked-bookings__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--osac-space-md, 1rem);
    border-bottom: 1px solid var(--osac-border-color, #e2ddd5);
}

.osac-linked-bookings__subtitle {
    font-size: 13px;
    color: var(--osb-text-muted, #6b7280);
    margin: 2px 0 0;
}

.osac-linked-bookings__title {
    display: flex;
    align-items: center;
    gap: var(--osac-space-sm, 0.5rem);
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--osac-text-primary, #1e293b);
}

.osac-linked-bookings__group-id {
    font-weight: 400;
    font-size: 0.75rem;
    font-family: var(--osac-font-mono, monospace);
    color: var(--osac-text-secondary, #64748b);
}

/* Search panel */
.osac-linked-bookings__search {
    padding: var(--osac-space-md, 1rem);
    border-bottom: 1px solid var(--osac-border-color, #e2ddd5);
    background: var(--osac-bg-subtle, #f8f6f2);
}

.osac-linked-bookings__search[hidden] {
    display: none;
}

.osac-linked-bookings__search .osac-input {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    border: 1px solid var(--osac-border-color, #e2ddd5);
    border-radius: var(--osac-radius-md, 8px);
    background: #fff;
    font-family: inherit;
}

.osac-linked-bookings__search .osac-input:focus {
    outline: none;
    border-color: var(--osac-color-primary, #2563eb);
    box-shadow: 0 0 0 3px var(--osac-color-primary-alpha, rgba(37, 99, 235, 0.1));
}

.osac-linked-bookings__search-results {
    margin-top: var(--osac-space-sm, 0.5rem);
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--osac-border-color, #e2ddd5);
    border-radius: var(--osac-radius-md, 8px);
    background: #fff;
}

.osac-linked-bookings__search-results[hidden] {
    display: none;
}

/* Search result item */
.osac-link-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--osac-space-sm, 0.5rem) var(--osac-space-md, 1rem);
    background: none;
    border: none;
    border-bottom: 1px solid var(--osac-border-color, #e2ddd5);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
    font-family: inherit;
}

.osac-link-result:last-child {
    border-bottom: none;
}

.osac-link-result:hover {
    background: var(--osac-bg-subtle, #f8f6f2);
}

.osac-link-result__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.osac-link-result__ref {
    font-weight: 600;
    font-family: var(--osac-font-mono, monospace);
    font-size: 0.8125rem;
    color: var(--osac-text-primary, #1e293b);
}

.osac-link-result__meta {
    font-size: 0.75rem;
    color: var(--osac-text-secondary, #64748b);
}

.osac-link-result__action {
    flex-shrink: 0;
    color: var(--osac-color-primary, #2563eb);
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.osac-link-result:hover .osac-link-result__action {
    opacity: 1;
}

/* Linked booking item */
.osac-linked-bookings__list {
    display: flex;
    flex-direction: column;
}

.osac-linked-bookings__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--osac-space-sm, 0.5rem) var(--osac-space-md, 1rem);
    border-bottom: 1px solid var(--osac-border-color, #e2ddd5);
    transition: background-color 0.15s ease;
}

.osac-linked-bookings__item:last-child {
    border-bottom: none;
}

.osac-linked-bookings__item:hover {
    background: var(--osac-bg-subtle, #f8f6f2);
}

.osac-linked-bookings__item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.osac-linked-bookings__item-top {
    display: flex;
    align-items: center;
    gap: var(--osac-space-sm, 0.5rem);
}

.osac-linked-bookings__item-ref {
    font-weight: 600;
    font-family: var(--osac-font-mono, monospace);
    font-size: 0.8125rem;
    color: var(--osac-color-primary, #2563eb);
}

.osac-linked-bookings__item-details {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--osac-text-secondary, #64748b);
    flex-wrap: wrap;
}

.osac-linked-bookings__item-sep {
    color: var(--osac-border-color, #e2ddd5);
}

.osac-linked-bookings__item-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Small status pill variant */
.osac-status-pill--sm {
    padding: 1px 6px;
    font-size: 0.625rem;
}

/* Empty state */
.osac-linked-bookings__empty {
    padding: var(--osac-space-md, 1rem);
    text-align: center;
}

.osac-linked-bookings__empty p {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--osac-text-secondary, #64748b);
}

/* ═══════════════════════════════════════════════════════
   WF-020 Phase 2: Folio Badge + Extra Bed Toggle
   ═══════════════════════════════════════════════════════ */

.osac-folio-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background: var(--osac-blue-50, #eff6ff);
    color: var(--osac-blue-700, #1d4ed8);
    cursor: pointer;
    text-decoration: none;
    margin-left: 4px;
}

.osac-folio-badge:hover {
    background: var(--osac-blue-100, #dbeafe);
}

.osac-extra-bed-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--osac-text-muted, #94a3b8);
    cursor: pointer;
}

.osac-extra-bed-toggle input:checked + .osac-extra-bed-toggle__label {
    color: var(--osac-warning, #f59e0b);
    font-weight: 600;
}

/* ==========================================================================
   DETAILS TAB — Summary Box + Department Card-Grid + Sub-Panels
   ========================================================================== */

/* ── Summary Box ── */
.osac-details-summary {
    background: var(--osb-surface, #ffffff);
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-lg, 10px);
    padding: 16px;
    margin-bottom: 20px;
}

.osac-details-summary__header {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--osb-border, #e2ddd5);
}

.osac-details-summary__title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.osac-details-summary__ref {
    font-size: 16px;
    font-weight: 700;
    color: var(--osb-brand-primary, #26577C);
}

.osac-details-summary__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 600px) {
    .osac-details-summary__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.osac-details-summary__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.osac-details-summary__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--osb-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.osac-details-summary__value {
    font-size: 14px;
    font-weight: 500;
    color: var(--osb-text-dark, #1e293b);
}

.osac-details-summary__value--strong {
    font-weight: 700;
    color: var(--osb-brand-primary, #26577C);
    font-size: 15px;
}

/* ── Details Card Grid (uses shared osac-nb__cat-grid) ── */
.osac-details-tab__grid {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 600px) {
    .osac-details-tab__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Sub-Panel Styles ── */
.osac-details-tab__panel-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--osb-text-dark, #1e293b);
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--osb-border, #e2ddd5);
}

.osac-details-tab__dept-item {
    background: var(--osb-surface, #ffffff);
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 10px;
}

.osac-details-tab__item-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.osac-details-tab__item-price {
    font-weight: 600;
    color: var(--osb-brand-primary, #26577C);
    white-space: nowrap;
}

.osac-details-tab__item-meta {
    display: inline-block;
    margin-left: 8px;
    font-size: 12px;
    color: var(--osb-text-muted, #64748b);
    font-weight: 400;
}

.osac-details-tab__item-detail {
    margin-top: 6px;
    font-size: 12px;
    color: var(--osb-text-muted, #64748b);
}

.osac-details-tab__empty {
    text-align: center;
    padding: 24px 16px;
    color: var(--osb-text-muted, #64748b);
    font-size: 14px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px dashed var(--osb-border, #e2ddd5);
}

/* ── Details Row (reused from legacy, kept for Guest panel) ── */
.osac-details-tab__section {
    margin-bottom: 0;
}

.osac-details-tab__section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--osb-text-dark, #1e293b);
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.osac-details-tab__row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.osac-details-tab__row:last-child {
    border-bottom: none;
}

.osac-details-tab__label {
    font-size: 13px;
    color: var(--osb-text-muted, #64748b);
}

.osac-details-tab__value {
    font-size: 13px;
    font-weight: 500;
    color: var(--osb-text-dark, #1e293b);
    text-align: right;
}

.osac-details-tab__value--strong {
    font-weight: 700;
    color: var(--osb-brand-primary, #26577C);
}

/* ── Total Overview (department summary list) ── */
.osac-details-total {
    background: var(--osb-surface, #ffffff);
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: 10px;
    overflow: hidden;
}

.osac-details-total__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
}

.osac-details-total__row:last-child {
    border-bottom: none;
}

.osac-details-total__row--has-items {
    cursor: pointer;
    transition: background 0.15s;
}

.osac-details-total__row--has-items:hover {
    background: #f8f9fa;
}

.osac-details-total__row--deduction {
    background: #fef9f0;
}

.osac-details-total__dept {
    display: flex;
    align-items: center;
    gap: 10px;
}

.osac-details-total__icon {
    font-size: 20px;
    line-height: 1;
    width: 28px;
    text-align: center;
}

.osac-details-total__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--osb-text-dark, #1e293b);
}

.osac-details-total__amount {
    font-size: 14px;
    font-weight: 600;
    color: var(--osb-text-dark, #1e293b);
}

.osac-details-total__amount--empty {
    font-weight: 400;
    color: var(--osb-text-muted, #94a3b8);
    font-style: italic;
}

.osac-details-total__grand {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: var(--osb-brand-primary, #26577C);
    color: #ffffff;
}

.osac-details-total__grand-label {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.osac-details-total__grand-value {
    font-size: 18px;
    font-weight: 700;
}

/* ── Booked vs Actual Toggle ── */
.osac-bva-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px;
    margin: 0 0 4px;
}

.osac-bva-toggle__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--osb-text-muted, #94a3b8);
    transition: color 0.2s;
    user-select: none;
}

.osac-bva-toggle--actual .osac-bva-toggle__label--actual {
    color: var(--osb-brand-primary, #26577C);
}

.osac-bva-toggle--booked .osac-bva-toggle__label--booked {
    color: var(--osb-brand-primary, #26577C);
}

.osac-bva-toggle__switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

.osac-bva-toggle__input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.osac-bva-toggle__slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #cbd5e1;
    border-radius: 22px;
    transition: background 0.25s;
}

.osac-bva-toggle__slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.osac-bva-toggle__input:checked + .osac-bva-toggle__slider {
    background: var(--osb-brand-primary, #26577C);
}

.osac-bva-toggle__input:checked + .osac-bva-toggle__slider::before {
    transform: translateX(18px);
}

.osac-bva-toggle__deviation-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f59e0b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    margin-left: 4px;
}

/* ── Deviation Badge on Cards ── */
.osac-bva-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: #f59e0b;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.osac-nb__cat-card {
    position: relative;
}

/* Department accent — top border on summary cards */
.osac-nb__cat-card[data-details-card="bungalow"]    { border-top: 3px solid var(--osb-dept-bungalow, #1C2E3F); }
.osac-nb__cat-card[data-details-card="dive-course"]  { border-top: 3px solid var(--osb-dept-dive-course, #0D9488); }
.osac-nb__cat-card[data-details-card="dive-package"] { border-top: 3px solid var(--osb-dept-dive, #0891B2); }
.osac-nb__cat-card[data-details-card="tours"]        { border-top: 3px solid var(--osb-dept-tour, #B8856C); }

/* ── Deviation Dot in Total Panel ── */
.osac-bva-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f59e0b;
    margin-left: 2px;
    flex-shrink: 0;
}

.osac-details-total__row--deviation {
    background: #fffbeb;
}

/* ── Mode Label (pill in panel titles) ── */
.osac-bva-mode-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.osac-bva-mode-label--actual {
    background: rgba(38, 87, 124, 0.1);
    color: var(--osb-brand-primary, #26577C);
}

.osac-bva-mode-label--booked {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}

/* ── Billing Record Total Row ── */
.osac-details-tab__dept-item--total {
    background: var(--osb-brand-primary, #26577C);
    color: #fff;
    border-color: var(--osb-brand-primary, #26577C);
}

.osac-details-tab__dept-item--total .osac-details-tab__item-price {
    color: #fff;
}

/* ── Folio Row in Total Overview ── */
.osac-details-total__row--folio {
    background: #f0fdf4;
    border-left: 3px solid #22c55e;
}

/* ==========================================================================
   DIVE RECORDS TAB
   ========================================================================== */

.osac-dive-records__header {
    margin-bottom: 20px;
}

.osac-dive-records__title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px;
}

.osac-dive-records__sub {
    font-size: 13px;
    color: var(--osb-text-secondary, #64748b);
    margin: 0;
}

.osac-dive-records__loading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 32px 0;
    justify-content: center;
    color: var(--osb-text-secondary, #64748b);
    font-size: 14px;
}

.osac-dive-records__empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--osb-text-secondary, #64748b);
}

.osac-dive-records__empty svg {
    margin-bottom: 12px;
}

.osac-dive-records__empty p {
    font-size: 14px;
    margin: 0;
}

.osac-dive-records__guest-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: var(--osb-bg-card, #fff);
    border: 1px solid var(--osb-border, #e2e8f0);
    border-radius: 10px;
    margin-bottom: 10px;
    transition: box-shadow 0.15s;
}

.osac-dive-records__guest-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.osac-dive-records__guest-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--osb-text-primary, #1e293b);
}

.osac-dive-records__guest-stats {
    font-size: 13px;
    color: var(--osb-text-secondary, #64748b);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 0;
}

.osac-dive-records__sep {
    margin: 0 6px;
}

.osac-dive-records__guest-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .osac-dive-records__guest-card {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .osac-dive-records__guest-actions {
        justify-content: flex-end;
    }
}

/* ==========================================================================
   40. HUB HEADER — Collapsible booking overview
   ========================================================================== */

.osac-hub-header {
    background: var(--osb-terminal-surface, #f8f9fa);
    border: 1px solid var(--osb-border, #e2ddd5);
    border-left: 4px solid var(--osb-teal, #14b8a6);
    border-radius: var(--osb-radius-lg, 10px);
    margin-bottom: var(--osb-space-4, 16px);
    overflow: hidden;
}

.osac-hub-header__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--osb-space-3, 12px) var(--osb-space-4, 16px);
    gap: var(--osb-space-3, 12px);
}

.osac-hub-header__ref {
    display: flex;
    align-items: center;
    gap: var(--osb-space-2, 8px);
    flex-wrap: wrap;
    min-width: 0;
}

.osac-hub-header__ref-code {
    font-size: var(--osb-text-base, 15px);
    font-weight: var(--osb-font-bold, 700);
    color: var(--osb-brand-primary, #26577C);
    letter-spacing: 0.02em;
}

.osac-hub-header__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--osb-text-muted, #64748b);
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.osac-hub-header__toggle:hover {
    background: var(--osb-border, #e2ddd5);
    color: var(--osb-text-dark, #1e293b);
}

.osac-hub-header__toggle-icon {
    transition: transform 0.2s ease;
}

.osac-hub-header--collapsed .osac-hub-header__toggle-icon {
    transform: rotate(-180deg);
}

.osac-hub-header__body {
    padding: 0 var(--osb-space-4, 16px) var(--osb-space-4, 16px);
    display: flex;
    flex-direction: column;
    gap: var(--osb-space-3, 12px);
    border-top: 1px solid var(--osb-border, #e2ddd5);
    transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.2s ease;
    overflow: hidden;
}

.osac-hub-header--collapsed .osac-hub-header__body {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top-color: transparent;
}

.osac-hub-header__section {
    display: flex;
    align-items: flex-start;
    gap: var(--osb-space-3, 12px);
    padding: var(--osb-space-2, 8px) 0;
}

.osac-hub-header__section + .osac-hub-header__section {
    border-top: 1px dashed var(--osb-border, #e2ddd5);
    padding-top: var(--osb-space-3, 12px);
}

.osac-hub-header__icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.osac-hub-header__detail {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.osac-hub-header__label {
    font-size: var(--osb-text-sm, 14px);
    font-weight: var(--osb-font-semibold, 600);
    color: var(--osb-text-dark, #1e293b);
}

.osac-hub-header__sub {
    font-size: var(--osb-text-xs, 12px);
    color: var(--osb-text-muted, #64748b);
}

.osac-hub-header__amount {
    font-size: var(--osb-text-sm, 14px);
    font-weight: var(--osb-font-semibold, 600);
    color: var(--osb-text-dark, #1e293b);
    flex-shrink: 0;
    white-space: nowrap;
}

.osac-hub-header__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--osb-space-3, 12px);
    margin-top: var(--osb-space-1, 4px);
    border-top: 2px solid var(--osb-border, #e2ddd5);
}

.osac-hub-header__total-label {
    font-size: var(--osb-text-xs, 12px);
    font-weight: var(--osb-font-bold, 700);
    color: var(--osb-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.osac-hub-header__total-amount {
    font-size: var(--osb-text-lg, 18px);
    font-weight: var(--osb-font-bold, 700);
    color: var(--osb-text-dark, #1e293b);
}

/* --- Offering Actions (inside hub header body) --- */

.osac-hub-header__offering {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--osb-space-3, 12px);
    padding-top: var(--osb-space-3, 12px);
    margin-top: var(--osb-space-2, 8px);
    border-top: 1px dashed var(--osb-border-light, #e2e8f0);
}

.osac-hub-header__offering-info {
    display: flex;
    align-items: center;
    gap: var(--osb-space-2, 8px);
    flex-wrap: wrap;
}

.osac-hub-header__offering-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--osb-brand-primary, #26577C);
    color: #fff;
    font-size: var(--osb-text-xs, 12px);
    font-weight: var(--osb-font-bold, 700);
    border-radius: var(--osb-radius-sm, 4px);
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.osac-hub-header__offering-status {
    font-size: var(--osb-text-xs, 12px);
    font-weight: var(--osb-font-medium, 500);
    color: var(--osb-text-muted, #64748b);
}

.osac-hub-header__offering-status--sent {
    color: var(--osb-success, #10b981);
}

.osac-hub-header__offering-status--accepted {
    color: var(--osb-success, #10b981);
    font-weight: var(--osb-font-bold, 700);
}

.osac-hub-header__offering-date {
    font-size: var(--osb-text-xs, 12px);
    color: var(--osb-text-light, #94a3b8);
}

.osac-hub-header__offering-buttons {
    display: flex;
    gap: var(--osb-space-2, 8px);
    flex-shrink: 0;
}

.osac-hub-header__offering-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--osb-border, #cbd5e1);
    border-radius: var(--osb-radius-sm, 4px);
    background: var(--osb-surface, #ffffff);
    font-size: var(--osb-text-xs, 12px);
    font-weight: var(--osb-font-medium, 500);
    color: var(--osb-text-dark, #1e293b);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    white-space: nowrap;
}

.osac-hub-header__offering-btn:hover {
    background: var(--osb-surface-alt, #f1f5f9);
    border-color: var(--osb-brand-primary, #26577C);
    color: var(--osb-brand-primary, #26577C);
}

.osac-hub-header__offering-btn svg {
    flex-shrink: 0;
}

.osac-hub-header__offering-btn--send {
    background: var(--osb-brand-primary, #26577C);
    color: #fff;
    border-color: var(--osb-brand-primary, #26577C);
}

.osac-hub-header__offering-btn--send:hover {
    background: var(--osb-brand-primary-dark, #1e4a6b);
    color: #fff;
}

.osac-hub-header__offering-btn--send svg {
    stroke: currentColor;
}

/* ==========================================================================
   41. HUB TABS — Tab navigation below header
   ========================================================================== */

.osac-hub-tabs {
    display: flex;
    gap: var(--osb-space-1, 4px);
    background: var(--osb-surface-alt, #ece8e0);
    padding: var(--osb-space-1, 4px);
    border-radius: var(--osb-radius-lg, 10px);
    margin-bottom: var(--osb-space-4, 16px);
}

.osac-hub-tabs__tab {
    flex: 1;
    padding: var(--osb-space-2, 8px) var(--osb-space-3, 12px);
    background: transparent;
    border: none;
    border-radius: var(--osb-radius-md, 8px);
    font-size: var(--osb-text-sm, 14px);
    font-weight: var(--osb-font-medium, 500);
    color: var(--osb-text-muted, #64748b);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    white-space: nowrap;
}

.osac-hub-tabs__tab:hover:not(.osac-hub-tabs__tab--active):not(.osac-hub-tabs__tab--disabled) {
    color: var(--osb-text-dark, #1e293b);
    background: rgba(255, 255, 255, 0.5);
}

.osac-hub-tabs__tab--active {
    background: var(--osb-surface, #ffffff);
    color: var(--osb-brand-primary, #26577C);
    font-weight: var(--osb-font-semibold, 600);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Department-specific active tab colors */
.osac-hub-tabs__tab--active[data-hub-tab="bungalow"]  { color: var(--osb-dept-bungalow, #1C2E3F); }
.osac-hub-tabs__tab--active[data-hub-tab="diving"]     { color: var(--osb-dept-dive, #0891B2); }
.osac-hub-tabs__tab--active[data-hub-tab="courses"]    { color: var(--osb-dept-dive-course, #0D9488); }
.osac-hub-tabs__tab--active[data-hub-tab="tours"]      { color: var(--osb-dept-tour, #B8856C); }
.osac-hub-tabs__tab--active[data-hub-tab="guests"]     { color: var(--osb-brand-primary, #26577C); }

.osac-hub-tabs__icon {
    font-size: 1em;
    line-height: 1;
    margin-right: 4px;
}

.osac-hub-tabs__tab--disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ==========================================================================
   42. HUB PANELS — Tab content areas
   ========================================================================== */

.osac-hub-panel[hidden] {
    display: none;
}

/* ==========================================================================
   43. HUB BREADCRUMBS — 3-step breadcrumb bar (reuses snb* CSS classes)
   ========================================================================== */

.osac-hub-breadcrumbs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 14px 20px 10px;
    background: var(--osb-deep, #132a3e);
    border-radius: 8px 8px 0 0;
    margin-bottom: var(--osb-space-4, 16px);
}

/* ==========================================================================
   44. HUB STEPS — Bungalow 3-step flow containers
   ========================================================================== */

.osac-hub-step[hidden] {
    display: none;
}

/* ==========================================================================
   45. HUB CURRENT BOOKING — Read-only compact display
   ========================================================================== */

.osac-hub-current {
    display: flex;
    align-items: center;
    gap: var(--osb-space-2, 8px);
    padding: var(--osb-space-2, 8px) var(--osb-space-3, 12px);
    background: var(--osb-surface-alt, #f8f6f2);
    border-radius: var(--osb-radius-md, 8px);
    margin-bottom: var(--osb-space-4, 16px);
    font-size: var(--osb-text-sm, 14px);
}

.osac-hub-current__label {
    font-weight: var(--osb-font-semibold, 600);
    color: var(--osb-text-muted, #64748b);
    white-space: nowrap;
}

.osac-hub-current__value {
    color: var(--osb-text-dark, #1e293b);
}

/* ==========================================================================
   46. HUB CONFIRM — Price comparison in Step 3
   ========================================================================== */

.osac-hub-confirm {
    min-height: 100px;
}

/* ==========================================================================
   47. HUB RESPONSIVE
   ========================================================================== */

@media (max-width: 600px) {
    .osac-hub-header__top {
        padding: var(--osb-space-2, 8px) var(--osb-space-3, 12px);
    }

    .osac-hub-header__body {
        padding: 0 var(--osb-space-3, 12px) var(--osb-space-3, 12px);
    }

    .osac-hub-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .osac-hub-tabs__tab {
        font-size: 13px;
        padding: var(--osb-space-2, 8px);
    }

    .osac-hub-current {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .osac-hub-breadcrumbs {
        padding: 10px 12px 8px;
    }
}

/* ── Messages Tab ── */
.osac-booking-messages__header {
    margin-bottom: 12px;
}

.osac-booking-messages__title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 2px;
    color: var(--osb-text-dark, #1a1a1a);
}

.osac-booking-messages__subtitle {
    font-size: 12px;
    color: var(--osb-text-muted, #7C8694);
    margin: 0;
}

.osac-booking-messages__loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px;
    color: var(--osb-text-muted, #7C8694);
    font-size: 13px;
}

.osac-booking-messages__loading[hidden] {
    display: none;
}

.osac-booking-messages__spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--osb-border-light, #e5e7eb);
    border-top-color: var(--osb-brand-primary, #26577c);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.osac-booking-messages__empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--osb-text-muted, #7C8694);
}

.osac-booking-messages__empty svg {
    margin-bottom: 8px;
    opacity: 0.4;
}

/* Message item */
.osp-msg {
    padding: 10px 12px;
    border-bottom: 1px solid var(--osb-border-light, #f0f0f0);
}

.osp-msg:last-child {
    border-bottom: none;
}

.osp-msg__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.osp-msg__from {
    font-size: 12px;
    font-weight: 600;
    color: var(--osb-text-dark, #1a1a1a);
}

.osp-msg__date {
    font-size: 11px;
    color: var(--osb-text-muted, #7C8694);
    white-space: nowrap;
}

.osp-msg__subject {
    font-size: 13px;
    color: var(--osb-text-dark, #1a1a1a);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.osp-msg__summary {
    font-size: 11px;
    color: var(--osb-text-muted, #7C8694);
    margin: 4px 0 0;
    line-height: 1.4;
}

.osp-msg__badge {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 100px;
    flex-shrink: 0;
}

.osp-msg__badge--new { background: #dbeafe; color: #1e40af; }
.osp-msg__badge--draft { background: #fef3c7; color: #92400e; }
.osp-msg__badge--sent { background: #d1fae5; color: #065f46; }
.osp-msg__badge--channel { background: #e0e7ff; color: #3730a3; }

.osp-msg__intent {
    font-size: 10px;
    color: var(--osb-text-muted, #7C8694);
    font-style: italic;
}

.osp-msg__gmail-link {
    padding: 12px;
    text-align: center;
    border-top: 1px solid var(--osb-border-light, #f0f0f0);
}

.osp-msg__gmail-link a {
    font-size: 12px;
    color: var(--osb-brand-primary, #26577c);
    text-decoration: none;
}

.osp-msg__gmail-link a:hover {
    text-decoration: underline;
}


/* === people-tab.css === */
/**
 * People Tab Styles (WF-006.3)
 *
 * Styles for the booking contact and travelers management interface.
 * WF-006.3: Separates Booking Contact from Travelers with toggle.
 *
 * @package OceanSun\OSAC
 * @since 3.7.0
 */

/* ═══════════════════════════════════════════════════════════════════
   PEOPLE TAB CONTAINER
   ═══════════════════════════════════════════════════════════════════ */

.osac-people-tab {
    display: flex;
    flex-direction: column;
    gap: var(--osac-space-md, 1rem);
}

/* ═══════════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════════ */

.osac-people-tab__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--osac-space-md, 1rem);
    background: var(--osac-bg-subtle, #f8f6f2);
    border-radius: var(--osac-radius-md, 8px);
    border: 1px solid var(--osac-border-color, #e2ddd5);
}

.osac-people-tab__info {
    display: flex;
    flex-direction: column;
    gap: var(--osac-space-xs, 0.25rem);
}

.osac-people-tab__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--osac-text-primary, #1e293b);
}

.osac-people-tab__capacity {
    font-size: 0.875rem;
    color: var(--osac-text-secondary, #64748b);
}

.osac-people-tab__capacity--over {
    color: var(--osac-color-danger, #dc2626);
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION HEADERS (WF-006.3)
   ═══════════════════════════════════════════════════════════════════ */

.osac-people-tab__contact-section,
.osac-people-tab__travelers-section {
    display: flex;
    flex-direction: column;
    gap: var(--osac-space-sm, 0.5rem);
}

.osac-people-tab__section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--osac-space-sm, 0.5rem) 0;
}

.osac-people-tab__section-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.osac-people-tab__section-info {
    display: flex;
    align-items: center;
    gap: var(--osac-space-md, 1rem);
}

.osac-people-tab__section-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--osac-text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════════════════════════════════
   BOOKING CONTACT CARD (WF-006.3)
   ═══════════════════════════════════════════════════════════════════ */

.osac-contact-card {
    display: flex;
    align-items: flex-start;
    gap: var(--osac-space-md, 1rem);
    padding: var(--osac-space-md, 1rem);
    background: var(--osac-bg-card, #fff);
    border: 1px solid var(--osac-border-color, #e2ddd5);
    border-left: 3px solid var(--osac-color-primary, #2563eb);
    border-radius: var(--osac-radius-md, 8px);
}

.osac-contact-card--empty {
    border-left-color: var(--osac-border-color, #e2ddd5);
    color: var(--osac-text-secondary, #64748b);
}

.osac-contact-card__avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--osac-bg-subtle, #ece8e0);
}

.osac-contact-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.osac-contact-card__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--osac-space-xs, 0.25rem);
}

.osac-contact-card__name {
    display: flex;
    align-items: center;
    gap: var(--osac-space-sm, 0.5rem);
    flex-wrap: wrap;
}

.osac-contact-card__display-name {
    font-weight: 600;
    color: var(--osac-text-primary, #1e293b);
}

.osac-contact-card__badges {
    display: flex;
    gap: var(--osac-space-xs, 0.25rem);
}

.osac-contact-card__meta {
    display: flex;
    gap: var(--osac-space-md, 1rem);
    font-size: 0.875rem;
    color: var(--osac-text-secondary, #64748b);
}

.osac-contact-card__code {
    font-family: var(--osac-font-mono, monospace);
}

.osac-contact-card__toggle {
    margin-top: var(--osac-space-sm, 0.5rem);
    padding-top: var(--osac-space-sm, 0.5rem);
    border-top: 1px solid var(--osac-border-color, #e2ddd5);
}

.osac-contact-card__toggle-hint {
    margin: var(--osac-space-xs, 0.25rem) 0 0 0;
    padding-left: calc(36px + var(--osac-space-sm, 0.5rem)); /* Align with toggle label */
    font-size: 0.75rem;
    color: var(--osac-text-tertiary, #94a3b8);
    line-height: 1.4;
}

/* WF-006.3: Actions for contact card */
.osac-contact-card__actions {
    flex-shrink: 0;
    margin-left: auto;
}

.osac-contact-card__actions .osac-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--osac-space-xs, 0.25rem);
}

/* ═══════════════════════════════════════════════════════════════════
   TOGGLE SWITCH (WF-006.3)
   ═══════════════════════════════════════════════════════════════════ */

.osac-toggle {
    display: flex;
    align-items: center;
    gap: var(--osac-space-sm, 0.5rem);
    cursor: pointer;
}

.osac-toggle__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.osac-toggle__slider {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--osac-color-gray-medium, #cbd5e1);
    border-radius: 9999px;
    transition: background-color 0.2s ease;
}

.osac-toggle__slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.osac-toggle__input:checked + .osac-toggle__slider {
    background: var(--osac-color-primary, #2563eb);
}

.osac-toggle__input:checked + .osac-toggle__slider::after {
    transform: translateX(16px);
}

.osac-toggle__input:focus + .osac-toggle__slider {
    box-shadow: 0 0 0 3px var(--osac-color-primary-alpha, rgba(37, 99, 235, 0.2));
}

.osac-toggle__label {
    font-size: 0.875rem;
    color: var(--osac-text-secondary, #64748b);
}

/* ═══════════════════════════════════════════════════════════════════
   OVER-CAPACITY WARNING (WF-006.3)
   ═══════════════════════════════════════════════════════════════════ */

.osac-people-tab__warning {
    display: flex;
    align-items: center;
    gap: var(--osac-space-sm, 0.5rem);
    padding: var(--osac-space-sm, 0.5rem) var(--osac-space-md, 1rem);
    background: var(--osac-color-warning-light, #fef3c7);
    border: 1px solid var(--osac-color-warning, #f59e0b);
    border-radius: var(--osac-radius-md, 8px);
    color: var(--osac-color-warning-dark, #92400e);
    font-size: 0.875rem;
}

.osac-people-tab__warning svg {
    flex-shrink: 0;
    stroke: currentColor;
}

.osac-people-tab__warning--bungalow-capacity {
    align-items: flex-start;
    background: #fef2f2;
    border-color: #ef4444;
    color: #991b1b;
    padding: var(--osac-space-md, 1rem);
}

.osac-people-tab__warning--bungalow-capacity svg {
    margin-top: 2px;
}

.osac-people-tab__warning-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.osac-people-tab__warning-content strong {
    font-size: 0.9375rem;
}

.osac-people-tab__warning-content p {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.osac-people-tab__warning--reassign {
    align-items: flex-start;
    background: #eff6ff;
    border-color: #3b82f6;
    color: #1e40af;
    padding: var(--osac-space-md, 1rem);
}

.osac-people-tab__warning--reassign svg {
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   TRAVELERS LIST (WF-006.3)
   ═══════════════════════════════════════════════════════════════════ */

.osac-people-tab__travelers {
    display: flex;
    flex-direction: column;
    gap: var(--osac-space-sm, 0.5rem);
}

/* ═══════════════════════════════════════════════════════════════════
   GUEST LIST
   ═══════════════════════════════════════════════════════════════════ */

.osac-people-tab__list {
    min-height: 200px;
}

.osac-people-tab__guests {
    display: flex;
    flex-direction: column;
    gap: var(--osac-space-sm, 0.5rem);
}

/* Loading State */
.osac-people-tab__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--osac-space-sm, 0.5rem);
    padding: var(--osac-space-xl, 2rem);
    color: var(--osac-text-secondary, #64748b);
}

/* Empty State */
.osac-people-tab__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--osac-space-md, 1rem);
    padding: var(--osac-space-xl, 2rem);
    text-align: center;
    color: var(--osac-text-secondary, #64748b);
}

.osac-people-tab__empty-icon {
    opacity: 0.5;
}

.osac-people-tab__empty p {
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   GUEST CARD
   ═══════════════════════════════════════════════════════════════════ */

.osac-guest-card {
    display: flex;
    align-items: center;
    gap: var(--osac-space-md, 1rem);
    padding: var(--osac-space-md, 1rem);
    background: var(--osac-bg-card, #fff);
    border: 1px solid var(--osac-border-color, #e2ddd5);
    border-radius: var(--osac-radius-md, 8px);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.osac-guest-card:hover {
    border-color: var(--osac-border-hover, #cbd5e1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.osac-guest-card--holder {
    border-left: 3px solid var(--osac-color-primary, #2563eb);
}

/* Avatar */
.osac-guest-card__avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--osac-bg-subtle, #ece8e0);
}

.osac-guest-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Info */
.osac-guest-card__info {
    flex: 1;
    min-width: 0;
}

.osac-guest-card__name {
    display: flex;
    align-items: center;
    gap: var(--osac-space-sm, 0.5rem);
    flex-wrap: wrap;
}

.osac-guest-card__display-name {
    font-weight: 600;
    color: var(--osac-text-primary, #1e293b);
}

.osac-guest-card__badges {
    display: flex;
    gap: var(--osac-space-xs, 0.25rem);
}

.osac-guest-card__meta {
    display: flex;
    gap: var(--osac-space-md, 1rem);
    margin-top: var(--osac-space-xs, 0.25rem);
    font-size: 0.875rem;
    color: var(--osac-text-secondary, #64748b);
}

.osac-guest-card__code {
    font-family: var(--osac-font-mono, monospace);
}

/* WF-007: Check-in progress indicator */
.osac-guest-card__progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
    padding: 6px 10px;
    background: #f8f6f2;
    border: 1px solid #e2ddd5;
    border-radius: 6px;
    font-size: 0.8125rem;
}

.osac-guest-card__progress-bar {
    height: 6px;
    background: #e2ddd5;
    border-radius: 3px;
    overflow: hidden;
}

.osac-guest-card__progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
    background: #94a3b8;
}

/* Color stages */
.osac-guest-card__progress--low .osac-guest-card__progress-fill {
    background: #f97316;
}
.osac-guest-card__progress--low {
    background: #fff7ed;
    border-color: #fed7aa;
}

.osac-guest-card__progress--mid .osac-guest-card__progress-fill {
    background: #3b82f6;
}
.osac-guest-card__progress--mid {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.osac-guest-card__progress--high .osac-guest-card__progress-fill {
    background: #22c55e;
}
.osac-guest-card__progress--high {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.osac-guest-card__progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.osac-guest-card__progress-count {
    font-weight: 600;
    color: var(--osac-text-primary, #1e293b);
}

.osac-guest-card__progress-hint {
    color: var(--osac-text-secondary, #64748b);
    font-size: 0.75rem;
}

/* Bungalow Assignment Row */
.osac-guest-card__bungalow-row,
.osac-traveler-card__bungalow-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.osac-bungalow-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.osac-bungalow-select {
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: var(--osb-text-dark, #222);
    cursor: pointer;
    min-width: 170px;
}
.osac-bungalow-select:focus {
    outline: none;
    border-color: var(--osb-brand-primary, #26577C);
    box-shadow: 0 0 0 2px color-mix(in oklch, var(--osb-brand-primary) 15%, transparent);
}
.osac-bungalow-select:disabled {
    opacity: 0.6;
    cursor: wait;
}

.osac-bungalow-change-select {
    padding: 4px 24px 4px 10px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #cbd5e1;
    border-radius: 20px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center;
    color: #475569;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.osac-bungalow-change-select:hover {
    border-color: #94a3b8;
    color: #334155;
}
.osac-bungalow-change-select:focus {
    outline: none;
    border-color: var(--osb-brand-primary, #26577C);
    box-shadow: 0 0 0 2px color-mix(in oklch, var(--osb-brand-primary) 12%, transparent);
}
.osac-bungalow-change-select:disabled {
    opacity: 0.5;
    cursor: wait;
}
.osac-bungalow-change-pending {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 12px;
    font-size: 12px;
    font-weight: 500;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 20px;
}
.osac-bungalow-change-pending .osac-bungalow-change-arrow {
    color: #b45309;
    font-size: 11px;
    font-weight: 700;
}
.osac-bungalow-cancel-request {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-left: 2px;
    border: 1px solid transparent;
    background: transparent;
    color: #b45309;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    border-radius: 50%;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.osac-bungalow-cancel-request:hover {
    background: rgba(180, 83, 9, 0.1);
    border-color: rgba(180, 83, 9, 0.2);
}

.osac-bungalow-change-resolved {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 12px;
    font-size: 12px;
    font-weight: 500;
    color: #166534;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 20px;
}
.osac-bungalow-change-resolved .osac-bungalow-change-arrow {
    color: #16a34a;
    font-size: 11px;
    font-weight: 700;
}
.osac-bungalow-change-resolved .osac-bungalow-cancel-request {
    color: #166534;
}
.osac-bungalow-change-resolved .osac-bungalow-cancel-request:hover {
    background: rgba(22, 101, 52, 0.1);
    border-color: rgba(22, 101, 52, 0.2);
}

/* Extra Bed Toggle */
.osac-extra-bed-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--osac-text-muted, #6b7280);
    cursor: pointer;
    margin-left: 6px;
    white-space: nowrap;
}
.osac-extra-bed-toggle input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
}
.osac-extra-bed-toggle input:checked + .osac-extra-bed-toggle__label {
    color: var(--osac-warning, #d97706);
    font-weight: 600;
}

/* Actions */
.osac-guest-card__actions {
    flex-shrink: 0;
}

.osac-guest-card__remove {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.osac-guest-card:hover .osac-guest-card__remove {
    opacity: 1;
}

.osac-guest-card__remove[hidden] {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════
   TRAVELER CARD (WF-006.3 - same as guest card, new naming)
   ═══════════════════════════════════════════════════════════════════ */

.osac-traveler-card {
    display: flex;
    align-items: center;
    gap: var(--osac-space-md, 1rem);
    padding: var(--osac-space-md, 1rem);
    background: var(--osac-bg-card, #fff);
    border: 1px solid var(--osac-border-color, #e2ddd5);
    border-radius: var(--osac-radius-md, 8px);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.osac-traveler-card:hover {
    border-color: var(--osac-border-hover, #cbd5e1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.osac-traveler-card--holder {
    border-left: 3px solid var(--osac-color-primary, #2563eb);
}

.osac-traveler-card--removing,
.osac-guest-card--removing {
    opacity: 0.5;
    pointer-events: none;
}

/* Avatar */
.osac-traveler-card__avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--osac-bg-subtle, #ece8e0);
}

.osac-traveler-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Info */
.osac-traveler-card__info {
    flex: 1;
    min-width: 0;
}

.osac-traveler-card__name {
    display: flex;
    align-items: center;
    gap: var(--osac-space-sm, 0.5rem);
    flex-wrap: wrap;
}

.osac-traveler-card__display-name {
    font-weight: 600;
    color: var(--osac-text-primary, #1e293b);
}

.osac-traveler-card__badges {
    display: flex;
    gap: var(--osac-space-xs, 0.25rem);
}

.osac-traveler-card__meta {
    display: flex;
    gap: var(--osac-space-md, 1rem);
    margin-top: var(--osac-space-xs, 0.25rem);
    font-size: 0.875rem;
    color: var(--osac-text-secondary, #64748b);
}

.osac-traveler-card__code {
    font-family: var(--osac-font-mono, monospace);
}

/* Actions */
.osac-traveler-card__actions {
    flex-shrink: 0;
}

.osac-traveler-card__remove {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.osac-traveler-card:hover .osac-traveler-card__remove {
    opacity: 1;
}

.osac-traveler-card__remove[hidden] {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════
   GUEST CARD ACTIONS (WF-007)
   ═══════════════════════════════════════════════════════════════════ */

.osac-guest-card__actions {
    display: flex;
    align-items: center;
    gap: var(--osac-space-sm, 0.5rem);
    flex-shrink: 0;
}

/* Check-In button */
.osac-guest-card__checkin,
.osac-traveler-card__checkin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Check-In completed icon */
.osac-guest-card__checkin-done,
.osac-traveler-card__checkin-done {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--osac-color-success, #22c55e);
}

/* Print button - subtle, visible on hover */
.osac-guest-card__print,
.osac-traveler-card__print {
    opacity: 0.4;
    transition: opacity 0.15s ease;
    color: var(--osb-text-muted, #6b7280);
}

.osac-guest-card__print:hover,
.osac-traveler-card__print:hover,
.osac-guest-card:hover .osac-guest-card__print,
.osac-traveler-card:hover .osac-traveler-card__print {
    opacity: 1;
    color: var(--osb-brand-primary, #26577C);
}

/* Hide remove button by default, show on hover */
.osac-guest-card__remove {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.osac-guest-card:hover .osac-guest-card__remove {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════════════ */

.osac-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--osac-radius-full, 9999px);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Role badges (Achse A) */
.osac-badge--role-contact {
    background: var(--osac-color-primary-light, #dbeafe);
    color: var(--osac-color-primary-dark, #1e40af);
}

.osac-badge--role-member {
    background: var(--osac-color-gray-light, #ece8e0);
    color: var(--osac-color-gray-dark, #475569);
}

/* Status badges (Achse B) */
.osac-badge--status-registered {
    background: var(--osac-color-success-light, #dcfce7);
    color: var(--osac-color-success-dark, #166534);
}

.osac-badge--status-unregistered {
    background: transparent;
    color: var(--osac-color-gray-dark, #64748b);
    border: 1px solid var(--osac-color-gray-medium, #cbd5e1);
}

.osac-badge--status-invited {
    background: var(--osac-color-info-light, #dbeafe);
    color: var(--osac-color-info-dark, #1e40af);
}

/* Minor badge (can combine with role+status) */
.osac-badge--minor {
    background: var(--osac-color-warning-light, #fef3c7);
    color: var(--osac-color-warning-dark, #92400e);
}

/* Check-in status badges (WF-007) */
.osac-badge--checkin-completed {
    background: var(--osac-color-success-light, #dcfce7);
    color: var(--osac-color-success-dark, #166534);
}

.osac-badge--checkin-incomplete {
    background: var(--osac-color-warning-light, #fef3c7);
    color: var(--osac-color-warning-dark, #92400e);
}

.osac-badge--checkin-pending {
    background: var(--osac-color-gray-light, #ece8e0);
    color: var(--osac-color-gray-dark, #64748b);
}

.osac-badge[hidden] {
    display: none;
}

/* Ensure [hidden] attribute works for action elements (CSS display overrides) */
.osac-guest-card__checkin-done[hidden],
.osac-traveler-card__checkin-done[hidden],
.osac-guest-card__checkin[hidden],
.osac-traveler-card__checkin[hidden],
.osac-guest-card__remove[hidden],
.osac-traveler-card__remove[hidden] {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════
   ADD PANEL
   ═══════════════════════════════════════════════════════════════════ */

.osac-people-tab__add-panel {
    background: var(--osac-bg-card, #fff);
    border: 1px solid var(--osac-border-color, #e2ddd5);
    border-radius: var(--osac-radius-md, 8px);
    overflow: hidden;
    margin-top: var(--osac-space-md, 1rem);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.osac-people-tab__add-panel[hidden] {
    display: none;
}

/* Search Input Styling in Add Panel */
.osac-people-tab__search .osac-input,
.osac-people-tab__add-content .osac-input {
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    border: 1px solid var(--osac-border-color, #e2ddd5);
    border-radius: var(--osac-radius-md, 8px);
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
}

.osac-people-tab__search .osac-input:focus,
.osac-people-tab__add-content .osac-input:focus {
    outline: none;
    border-color: var(--osac-color-primary, #2563eb);
    box-shadow: 0 0 0 3px var(--osac-color-primary-alpha, rgba(37, 99, 235, 0.1));
}

.osac-people-tab__search .osac-input::placeholder,
.osac-people-tab__add-content .osac-input::placeholder {
    color: var(--osac-text-secondary, #94a3b8);
}

.osac-people-tab__add-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--osac-space-md, 1rem);
    border-bottom: 1px solid var(--osac-border-color, #e2ddd5);
}

.osac-people-tab__add-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.osac-people-tab__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--osac-radius-sm, 4px);
    color: var(--osac-text-secondary, #64748b);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.osac-people-tab__close:hover {
    background: var(--osac-bg-subtle, #ece8e0);
    color: var(--osac-text-primary, #1e293b);
}

/* Tabs */
.osac-people-tab__add-tabs {
    display: flex;
    border-bottom: 1px solid var(--osac-border-color, #e2ddd5);
}

.osac-people-tab__add-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--osac-space-sm, 0.5rem);
    padding: var(--osac-space-md, 1rem);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--osac-text-secondary, #64748b);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.osac-people-tab__add-tab:hover {
    background: var(--osac-bg-subtle, #f8f6f2);
    color: var(--osac-text-primary, #1e293b);
}

.osac-people-tab__add-tab--active {
    color: var(--osac-color-primary, #2563eb);
    border-bottom-color: var(--osac-color-primary, #2563eb);
}

/* Content */
.osac-people-tab__add-content {
    padding: var(--osac-space-md, 1rem);
}

.osac-people-tab__add-content[hidden] {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════
   SEARCH INPUT & RESULTS
   ═══════════════════════════════════════════════════════════════════ */

.osac-search-input {
    position: relative;
    display: flex;
    align-items: center;
}

.osac-search-input svg {
    position: absolute;
    left: 12px;
    color: var(--osac-text-secondary, #64748b);
    pointer-events: none;
}

.osac-search-input input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid var(--osac-border-color, #e2ddd5);
    border-radius: var(--osac-radius-md, 8px);
    font-size: 0.875rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.osac-search-input input:focus {
    outline: none;
    border-color: var(--osac-color-primary, #2563eb);
    box-shadow: 0 0 0 3px var(--osac-color-primary-alpha, rgba(37, 99, 235, 0.1));
}

.osac-search-spinner {
    position: absolute;
    right: 12px;
}

.osac-search-spinner[hidden] {
    display: none;
}

.osac-search-hint {
    margin: var(--osac-space-sm, 0.5rem) 0 0;
    font-size: 0.75rem;
    color: var(--osac-text-secondary, #64748b);
}

.osac-search-results {
    margin-top: var(--osac-space-sm, 0.5rem);
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--osac-border-color, #e2ddd5);
    border-radius: var(--osac-radius-md, 8px);
}

.osac-search-results[hidden] {
    display: none;
}

.osac-search-results__empty {
    padding: var(--osac-space-md, 1rem);
    text-align: center;
    color: var(--osac-text-secondary, #64748b);
    font-size: 0.875rem;
}

/* Search Result Item */
.osac-search-result {
    display: flex;
    align-items: center;
    gap: var(--osac-space-sm, 0.5rem);
    width: 100%;
    padding: var(--osac-space-sm, 0.5rem) var(--osac-space-md, 1rem);
    background: none;
    border: none;
    border-bottom: 1px solid var(--osac-border-color, #e2ddd5);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.osac-search-result:last-child {
    border-bottom: none;
}

.osac-search-result:hover {
    background: var(--osac-bg-subtle, #f8f6f2);
}

.osac-search-result__avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--osac-bg-subtle, #ece8e0);
}

.osac-search-result__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.osac-search-result__info {
    flex: 1;
    min-width: 0;
}

.osac-search-result__name {
    display: block;
    font-weight: 500;
    color: var(--osac-text-primary, #1e293b);
}

.osac-search-result__meta {
    display: block;
    font-size: 0.75rem;
    color: var(--osac-text-secondary, #64748b);
}

.osac-search-result__add {
    flex-shrink: 0;
    color: var(--osac-color-primary, #2563eb);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.osac-search-result:hover .osac-search-result__add {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   CREATE FORM
   ═══════════════════════════════════════════════════════════════════ */

.osac-people-tab__create-form {
    display: flex;
    flex-direction: column;
    gap: var(--osac-space-md, 1rem);
}

.osac-form-row {
    display: flex;
    gap: var(--osac-space-md, 1rem);
}

.osac-form-row--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.osac-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--osac-space-xs, 0.25rem);
}

.osac-form-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--osac-text-primary, #1e293b);
}

.osac-form-group label .required {
    color: var(--osac-color-danger, #dc2626);
}

.osac-form-group input[type="text"],
.osac-form-group input[type="email"] {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--osac-border-color, #e2ddd5);
    border-radius: var(--osac-radius-md, 8px);
    font-size: 0.875rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.osac-form-group input:focus {
    outline: none;
    border-color: var(--osac-color-primary, #2563eb);
    box-shadow: 0 0 0 3px var(--osac-color-primary-alpha, rgba(37, 99, 235, 0.1));
}

.osac-form-hint {
    margin: 0;
    font-size: 0.75rem;
    color: var(--osac-text-secondary, #64748b);
}

/* Checkbox */
.osac-form-group--checkbox {
    flex-direction: row;
    align-items: center;
}

.osac-checkbox {
    display: flex;
    align-items: center;
    gap: var(--osac-space-sm, 0.5rem);
    cursor: pointer;
}

.osac-checkbox input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.osac-checkbox__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 2px solid var(--osac-border-color, #e2ddd5);
    border-radius: var(--osac-radius-sm, 4px);
    background: var(--osac-bg-card, #fff);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.osac-checkbox input:checked + .osac-checkbox__mark {
    border-color: var(--osac-color-primary, #2563eb);
    background: var(--osac-color-primary, #2563eb);
}

.osac-checkbox input:checked + .osac-checkbox__mark::after {
    content: '';
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
}

.osac-checkbox__label {
    font-size: 0.875rem;
    color: var(--osac-text-primary, #1e293b);
}

/* Form Actions */
.osac-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--osac-space-sm, 0.5rem);
    padding-top: var(--osac-space-md, 1rem);
    border-top: 1px solid var(--osac-border-color, #e2ddd5);
}

/* ═══════════════════════════════════════════════════════════════════
   SPINNER
   ═══════════════════════════════════════════════════════════════════ */

.osac-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--osac-border-color, #e2ddd5);
    border-top-color: var(--osac-color-primary, #2563eb);
    border-radius: 50%;
    animation: osac-spin 0.6s linear infinite;
}

.osac-spinner--sm {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

@keyframes osac-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   BUTTON LOADING STATE
   ═══════════════════════════════════════════════════════════════════ */

.osac-btn__loading {
    display: inline-flex;
    align-items: center;
    gap: var(--osac-space-sm, 0.5rem);
}

.osac-btn__loading[hidden] {
    display: none;
}

.osac-btn--loading .osac-btn__text {
    display: none;
}

.osac-btn--loading .osac-btn__loading {
    display: inline-flex;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    .osac-people-tab__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--osac-space-md, 1rem);
    }

    .osac-people-tab__header .osac-btn {
        width: 100%;
        justify-content: center;
    }

    .osac-guest-card {
        flex-wrap: wrap;
    }

    .osac-guest-card__actions {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        margin-top: var(--osac-space-sm, 0.5rem);
        padding-top: var(--osac-space-sm, 0.5rem);
        border-top: 1px solid var(--osac-border-color, #e2ddd5);
    }

    .osac-guest-card__remove {
        opacity: 1;
    }

    .osac-form-row--2col {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   CONFIRM DIALOG
   ═══════════════════════════════════════════════════════════════════ */

.osac-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.osac-confirm-dialog {
    background: var(--osac-bg-card, #fff);
    border-radius: var(--osac-radius-lg, 12px);
    padding: var(--osac-space-lg, 1.5rem);
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    animation: osac-dialog-appear 0.15s ease-out;
}

@keyframes osac-dialog-appear {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.osac-confirm-message {
    margin: 0 0 var(--osac-space-lg, 1.5rem) 0;
    font-size: 1rem;
    color: var(--osac-text-primary, #1e293b);
    text-align: center;
    line-height: 1.5;
}

.osac-confirm-actions {
    display: flex;
    gap: var(--osac-space-sm, 0.5rem);
    justify-content: center;
}

.osac-confirm-actions .osac-btn {
    min-width: 100px;
}

/* Change Contact Modal styles moved to popups.css for consistency */


/* === services-tab.css === */
/**
 * Tours & Transfers Tab Styles (WF-017 Phase 2)
 *
 * Uses core design tokens from variables.css.
 * Matches the card-based design of the Guests (People) tab.
 *
 * @package OceanSun\OSAC
 * @since 3.9.0
 */

/* Ensure [hidden] works even on elements with explicit display values */
.osac-services-tab [hidden],
.osac-services-tab__add-form [hidden],
.osac-service-card [hidden] {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SERVICES TAB CONTAINER
   ═══════════════════════════════════════════════════════════════════ */

.osac-services-tab {
    display: flex;
    flex-direction: column;
    gap: var(--osb-space-4, 16px);
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION HEADERS
   ═══════════════════════════════════════════════════════════════════ */

.osac-services-tab__section {
    display: flex;
    flex-direction: column;
    gap: var(--osb-space-2, 8px);
}

.osac-services-tab__section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--osb-space-2, 8px);
    border-bottom: 1px solid var(--osb-border, #e2ddd5);
}

.osac-services-tab__section-info {
    display: flex;
    align-items: center;
    gap: var(--osb-space-2, 8px);
}

.osac-services-tab__section-title {
    margin: 0;
    font-size: var(--osb-text-xs, 0.75rem);
    font-weight: var(--osb-font-bold, 700);
    text-transform: uppercase;
    letter-spacing: var(--osb-tracking-wide, 0.025em);
    color: var(--osb-text-muted, #666666);
}

.osac-services-tab__count {
    font-size: var(--osb-text-xs, 0.75rem);
    font-weight: var(--osb-font-semibold, 600);
    color: var(--osb-text-light, #999999);
}

/* (Sub-tabs removed — driver assignment is now inline in service cards) */

/* ═══════════════════════════════════════════════════════════════════
   ADD SECTION SEPARATOR
   ═══════════════════════════════════════════════════════════════════ */

.osac-services-tab__add-section {
    margin-top: var(--osb-space-2, 8px);
    padding-top: var(--osb-space-2, 8px);
}

/* ═══════════════════════════════════════════════════════════════════
   CATEGORY FILTER BUTTONS
   ═══════════════════════════════════════════════════════════════════ */

.osac-services-tab__categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--osb-space-2, 8px);
}

.osac-services-tab__cat-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--osb-space-1, 4px);
    padding: var(--osb-space-2, 8px) var(--osb-space-4, 16px);
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-full, 9999px);
    background: var(--osb-surface, #ffffff);
    color: var(--osb-text-muted, #666666);
    font-size: var(--osb-text-sm, 14px);
    font-weight: var(--osb-font-medium, 500);
    cursor: pointer;
    transition: all 0.2s ease;
}

.osac-services-tab__cat-btn:hover {
    background: var(--osb-surface-hover, #ece8e0);
    border-color: var(--osb-border, #e2ddd5);
}

.osac-services-tab__cat-btn--active {
    background: var(--osb-brand-primary, #26577C);
    color: var(--osb-text-white, #ffffff);
    border-color: var(--osb-brand-primary, #26577C);
}

.osac-services-tab__cat-btn--active:hover {
    background: var(--osb-brand-primary-dark, #1e4562);
    border-color: var(--osb-brand-primary-dark, #1e4562);
}

.osac-services-tab__cat-btn svg {
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   SEARCH INPUT
   ═══════════════════════════════════════════════════════════════════ */

.osac-services-tab__search {
    position: relative;
}

.osac-services-tab .osac-input {
    width: 100%;
    padding: 12px 14px;
    font-size: var(--osb-text-sm, 14px);
    font-family: inherit;
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-md, 8px);
    background: var(--osb-surface, #ffffff);
    color: var(--osb-text-dark, #222222);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.osac-services-tab .osac-input:focus {
    outline: none;
    border-color: var(--osb-brand-primary, #26577C);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--osb-brand-primary) 10%, transparent);
}

.osac-services-tab .osac-input::placeholder {
    color: var(--osb-text-light, #999999);
}

/* ═══════════════════════════════════════════════════════════════════
   PRODUCT RESULTS
   ═══════════════════════════════════════════════════════════════════ */

.osac-services-tab__results {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-md, 8px);
    background: var(--osb-border, #e2ddd5);
}

.osac-services-tab__results-loading {
    display: flex;
    justify-content: center;
    padding: var(--osb-space-4, 16px);
    background: var(--osb-surface, #ffffff);
}

.osac-services-tab__no-results,
.osac-services-tab__error {
    padding: var(--osb-space-3, 12px) var(--osb-space-4, 16px);
    margin: 0;
    font-size: var(--osb-text-sm, 14px);
    color: var(--osb-text-light, #999999);
    background: var(--osb-surface, #ffffff);
    text-align: center;
}

.osac-services-tab__error {
    color: var(--osb-danger, #ef4444);
}

/* Product result item */
.osac-product-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--osb-space-3, 12px) var(--osb-space-4, 16px);
    background: var(--osb-surface, #ffffff);
    border: none;
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: var(--osb-font-primary, inherit);
    font-size: var(--osb-text-sm, 14px);
    transition: background 0.15s ease;
}

.osac-product-result:hover {
    background: var(--osb-surface-hover, #ece8e0);
}

.osac-product-result__name {
    font-size: var(--osb-text-sm, 14px);
    font-weight: var(--osb-font-medium, 500);
    color: var(--osb-text-dark, #222222);
}

.osac-product-result__price {
    font-size: var(--osb-text-sm, 14px);
    font-weight: var(--osb-font-semibold, 600);
    color: var(--osb-brand-primary, #26577C);
    white-space: nowrap;
    margin-left: var(--osb-space-3, 12px);
}

/* ═══════════════════════════════════════════════════════════════════
   ADD SERVICE FORM
   ═══════════════════════════════════════════════════════════════════ */

.osac-services-tab__add-form {
    display: flex;
    flex-direction: column;
    gap: var(--osb-space-4, 16px);
    padding: var(--osb-space-5, 20px);
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-md, 8px);
    background: var(--osb-surface-alt, #f8f6f2);
}

.osac-services-tab__selected-product {
    display: flex;
    align-items: center;
    gap: var(--osb-space-3, 12px);
    padding: var(--osb-space-3, 12px) var(--osb-space-4, 16px);
    background: var(--osb-surface, #ffffff);
    border: 1.5px solid var(--osb-brand-primary, #26577C);
    border-radius: var(--osb-radius-md, 8px);
}

.osac-services-tab__product-name {
    font-weight: var(--osb-font-semibold, 600);
    font-size: var(--osb-text-sm, 14px);
    color: var(--osb-text-dark, #222222);
    flex: 1;
}

.osac-services-tab__product-price {
    font-size: var(--osb-text-sm, 14px);
    font-weight: var(--osb-font-bold, 700);
    color: var(--osb-brand-primary, #26577C);
}

.osac-services-tab__clear-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--osb-text-light, #999999);
    cursor: pointer;
    font-size: 1.25rem;
    border-radius: var(--osb-radius-full, 9999px);
    transition: all 0.15s ease;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.osac-services-tab__clear-btn:hover {
    background: var(--osb-surface-hover, #ece8e0);
    color: var(--osb-danger, #ef4444);
}

/* Direction Toggle */
.osac-services-tab__direction-btns {
    display: flex;
    gap: var(--osb-space-2, 8px);
}

.osac-services-tab__dir-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--osb-space-1, 4px);
    padding: var(--osb-space-2, 8px) var(--osb-space-3, 12px);
    border: 2px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-md, 8px);
    background: var(--osb-surface, #ffffff);
    color: var(--osb-text-muted, #666666);
    font-size: var(--osb-text-sm, 14px);
    font-weight: var(--osb-font-medium, 500);
    cursor: pointer;
    transition: all 0.2s ease;
}

.osac-services-tab__dir-btn:hover {
    border-color: var(--osb-brand-primary, #26577C);
    background: var(--osb-brand-primary-light, #e8f1f7);
}

.osac-services-tab__dir-btn--active {
    background: var(--osb-brand-primary, #26577C);
    color: var(--osb-text-white, #ffffff);
    border-color: var(--osb-brand-primary, #26577C);
}

.osac-services-tab__dir-btn--active:hover {
    background: var(--osb-brand-primary-dark, #1e4562);
    border-color: var(--osb-brand-primary-dark, #1e4562);
}

.osac-services-tab__dir-btn svg {
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   FIELD GROUPS (Date, Travelers, Direction)
   ═══════════════════════════════════════════════════════════════════ */

.osac-services-tab__field-group {
    display: flex;
    flex-direction: column;
    gap: var(--osb-space-2, 8px);
}

.osac-services-tab__field-group > .osac-label {
    display: block;
    margin-bottom: 0;
    font-size: 15px;
    font-weight: var(--osb-font-semibold, 600);
    color: var(--osb-text-main, #333333);
    line-height: 1.4;
}

/* Traveler Checkboxes */
.osac-services-tab__travelers {
    display: flex;
    flex-wrap: wrap;
    gap: var(--osb-space-2, 8px);
    align-items: center;
}

.osac-services-tab__traveler-check {
    display: inline-flex;
    align-items: center;
    gap: var(--osb-space-2, 8px);
    padding: var(--osb-space-3, 12px);
    border: 2px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-md, 8px);
    background: var(--osb-surface, #ffffff);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: var(--osb-text-sm, 14px);
    color: var(--osb-text-main, #333333);
    user-select: none;
}

.osac-services-tab__traveler-check:hover {
    border-color: var(--osb-brand-primary, #26577C);
    background: var(--osb-brand-primary-light, #e8f1f7);
}

.osac-services-tab__traveler-check:has(input:checked) {
    border-color: var(--osb-brand-primary, #26577C);
    background: var(--osb-brand-primary-light, #e8f1f7);
    color: var(--osb-brand-primary, #26577C);
    font-weight: var(--osb-font-semibold, 600);
}

.osac-services-tab__traveler-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--osb-brand-primary, #26577C);
    margin: 0;
    cursor: pointer;
}

.osac-services-tab__traveler-name {
    white-space: nowrap;
}

.osac-services-tab__select-all {
    display: inline-flex;
    align-items: center;
    gap: var(--osb-space-1, 4px);
    padding: var(--osb-space-2, 8px) var(--osb-space-4, 16px);
    border: 1.5px solid var(--osb-brand-primary, #26577C);
    border-radius: var(--osb-radius-full, 9999px);
    background: var(--osb-surface, #ffffff);
    color: var(--osb-brand-primary, #26577C);
    font-size: var(--osb-text-sm, 14px);
    font-weight: var(--osb-font-semibold, 600);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.osac-services-tab__select-all:hover {
    background: var(--osb-brand-primary, #26577C);
    color: var(--osb-text-white, #ffffff);
    box-shadow: 0 2px 4px rgba(38, 87, 124, 0.2);
}

/* Form row */
.osac-services-tab__form-row {
    display: flex;
    gap: var(--osb-space-4, 16px);
    align-items: flex-end;
}

.osac-form-group--sm {
    flex-shrink: 0;
}

.osac-form-group--grow {
    flex: 1;
}

.osac-services-tab__form-actions {
    display: flex;
    gap: var(--osb-space-3, 12px);
    padding-top: var(--osb-space-2, 8px);
}

/* ═══════════════════════════════════════════════════════════════════
   SERVICE CARDS (list of added services)
   ═══════════════════════════════════════════════════════════════════ */

.osac-services-tab__list {
    display: flex;
    flex-direction: column;
    gap: var(--osb-space-2, 8px);
}

.osac-services-tab__empty {
    text-align: center;
    padding: var(--osb-space-6, 24px);
    color: var(--osb-text-light, #999999);
    font-size: var(--osb-text-sm, 14px);
}

.osac-services-tab__empty p {
    margin: 0;
}

.osac-services-tab__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--osb-space-2, 8px);
    padding: var(--osb-space-4, 16px);
    font-size: var(--osb-text-sm, 14px);
    color: var(--osb-text-light, #999999);
}

.osac-service-card {
    display: flex;
    align-items: center;
    gap: var(--osb-space-4, 16px);
    padding: var(--osb-space-4, 16px);
    background: var(--osb-surface, #ffffff);
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-md, 8px);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.osac-service-card:hover {
    border-color: var(--osb-border, #e2ddd5);
    box-shadow: var(--osb-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

/* Direction-colored left border */
.osac-service-card--pickup {
    border-left: 3px solid #10b981;
}

.osac-service-card--dropoff {
    border-left: 3px solid #f59e0b;
}

/* Card icon */
.osac-service-card__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--osb-radius-md, 8px);
    background: var(--osb-surface-alt, #f8f6f2);
    color: var(--osb-text-muted, #666666);
}

.osac-service-card--pickup .osac-service-card__icon {
    background: #ecfdf5;
    color: #10b981;
}

.osac-service-card--dropoff .osac-service-card__icon {
    background: #fffbeb;
    color: #f59e0b;
}

/* Card info */
.osac-service-card__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--osb-space-1, 4px);
}

.osac-service-card__header {
    display: flex;
    align-items: center;
    gap: var(--osb-space-2, 8px);
    flex-wrap: wrap;
}

.osac-service-card__name {
    font-size: var(--osb-text-sm, 14px);
    font-weight: var(--osb-font-semibold, 600);
    color: var(--osb-text-dark, #222222);
}

.osac-service-card__badges {
    display: inline-flex;
    gap: var(--osb-space-1, 4px);
}

/* Direction badges */
.osac-badge--direction-pickup {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--osb-space-2, 8px);
    font-size: var(--osb-text-xs, 12px);
    font-weight: var(--osb-font-semibold, 600);
    text-transform: uppercase;
    letter-spacing: var(--osb-tracking-wide, 0.025em);
    border-radius: var(--osb-radius-full, 9999px);
    background: #ecfdf5;
    color: #059669;
}

.osac-badge--direction-dropoff {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--osb-space-2, 8px);
    font-size: var(--osb-text-xs, 12px);
    font-weight: var(--osb-font-semibold, 600);
    text-transform: uppercase;
    letter-spacing: var(--osb-tracking-wide, 0.025em);
    border-radius: var(--osb-radius-full, 9999px);
    background: #fffbeb;
    color: #d97706;
}

.osac-service-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--osb-space-2, 8px);
    font-size: var(--osb-text-sm, 14px);
    color: var(--osb-text-muted, #666666);
}

.osac-service-card__qty {
    font-weight: var(--osb-font-medium, 500);
}

.osac-service-card__price {
    font-weight: var(--osb-font-bold, 700);
    color: var(--osb-brand-primary, #26577C);
}

.osac-service-card__notes {
    font-size: var(--osb-text-sm, 14px);
    font-style: italic;
    color: var(--osb-text-light, #999999);
}

.osac-service-card__notes::before {
    content: '\201C';
}

.osac-service-card__notes::after {
    content: '\201D';
}

.osac-service-card__notes[hidden] {
    display: none;
}

/* Inline driver assignment row (within service card) */
.osac-service-card__driver {
    display: flex;
    align-items: center;
    gap: var(--osb-space-2, 8px);
    padding: var(--osb-space-3, 12px) var(--osb-space-3, 12px);
    border-top: 1px dashed var(--osb-border, #e2ddd5);
    margin-top: var(--osb-space-2, 8px);
    background: var(--osb-surface-alt, #f8f6f2);
    border-radius: var(--osb-radius-md, 8px);
}

.osac-service-card__driver[hidden] {
    display: none;
}

.osac-service-card__driver-select-wrap {
    display: flex;
    align-items: center;
    gap: var(--osb-space-2, 8px);
    flex: 1;
}

.osac-service-card__driver-icon {
    flex-shrink: 0;
    color: var(--osb-text-muted, #666666);
}

.osac-service-card__driver-dropdown {
    flex: 1;
    height: 36px;
    padding: 0 var(--osb-space-8, 32px) 0 var(--osb-space-3, 12px);
    font-size: var(--osb-text-sm, 14px);
    font-family: inherit;
    font-weight: var(--osb-font-medium, 500);
    border: 1.5px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-md, 8px);
    background: var(--osb-surface, #ffffff);
    color: var(--osb-text-dark, #222222);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.osac-service-card__driver-dropdown:hover {
    border-color: var(--osb-brand-primary, #26577C);
}

.osac-service-card__driver-dropdown:focus {
    outline: none;
    border-color: var(--osb-brand-primary, #26577C);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--osb-brand-primary) 10%, transparent);
}

.osac-service-card__wa-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--osb-radius-full, 9999px);
    background: #e8f8ed;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.osac-service-card__wa-link:hover {
    background: #c8f0d4;
}

.osac-service-card__wa-link[hidden] {
    display: none;
}

/* Date display on card */
.osac-service-card__date {
    display: inline-flex;
    align-items: center;
    gap: var(--osb-space-1, 4px);
    font-size: var(--osb-text-sm, 14px);
    font-weight: var(--osb-font-medium, 500);
    color: var(--osb-text-muted, #666666);
}

.osac-service-card__date::before {
    content: '\1F4C5';
    font-size: var(--osb-text-xs, 12px);
}

.osac-service-card__date[hidden] {
    display: none;
}

/* Travelers display on card */
.osac-service-card__travelers {
    display: flex;
    align-items: center;
    gap: var(--osb-space-1, 4px);
    font-size: var(--osb-text-sm, 14px);
    font-weight: var(--osb-font-medium, 500);
    color: var(--osb-text-muted, #666666);
}

.osac-service-card__travelers-icon {
    font-size: var(--osb-text-xs, 12px);
}

.osac-service-card__travelers[hidden] {
    display: none;
}

.osac-service-card__footer {
    display: flex;
    align-items: center;
    gap: var(--osb-space-3, 12px);
    font-size: var(--osb-text-xs, 12px);
    color: var(--osb-text-light, #999999);
    margin-top: var(--osb-space-1, 4px);
}

/* WhatsApp link on driver cards */
.osac-service-card__whatsapp {
    display: inline-flex;
    align-items: center;
    gap: var(--osb-space-1, 4px);
    font-size: var(--osb-text-sm, 14px);
    color: var(--osb-text-muted, #666666);
}

.osac-service-card__whatsapp[hidden] {
    display: none;
}

.osac-service-card__whatsapp svg {
    color: #25D366;
    flex-shrink: 0;
}

.osac-service-card__whatsapp a {
    color: var(--osb-brand-primary, #26577C);
    text-decoration: none;
    font-weight: var(--osb-font-medium, 500);
}

.osac-service-card__whatsapp a:hover {
    text-decoration: underline;
}

/* Flight info row */
.osac-service-card__flight-info {
    display: flex;
    align-items: center;
    gap: var(--osb-space-2, 8px);
    font-size: var(--osb-text-sm, 14px);
    font-weight: var(--osb-font-semibold, 600);
    color: var(--osb-brand-primary, #26577C);
}

.osac-service-card__flight-info[hidden] {
    display: none;
}

.osac-service-card__flight-info svg {
    flex-shrink: 0;
    color: var(--osb-text-muted, #666666);
}

/* Inline edit form */
.osac-service-card__edit-form {
    display: flex;
    flex-direction: column;
    gap: var(--osb-space-2, 8px);
    padding: var(--osb-space-3, 12px);
    margin-top: var(--osb-space-2, 8px);
    background: var(--osb-surface-alt, #f8f6f2);
    border: 1px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-md, 8px);
}

.osac-service-card__edit-form[hidden] {
    display: none;
}

.osac-service-card__edit-form .osac-form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.osac-service-card__edit-form .osac-label {
    font-size: var(--osb-text-xs, 12px);
    font-weight: var(--osb-font-semibold, 600);
    color: var(--osb-text-muted, #666666);
}

.osac-service-card__edit-actions {
    display: flex;
    gap: var(--osb-space-2, 8px);
    margin-top: var(--osb-space-1, 4px);
}

/* Small input variant for edit forms */
.osac-input--sm {
    height: 36px;
    padding: 0 10px;
    font-size: var(--osb-text-sm, 14px);
}

/* Driver confirmation button */
.osac-service-card__confirm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 2px solid var(--osb-border, #e2ddd5);
    border-radius: var(--osb-radius-full, 9999px);
    background: var(--osb-surface, #ffffff);
    color: var(--osb-text-light, #999999);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.osac-service-card__confirm-btn:hover {
    border-color: #10b981;
    color: #10b981;
    background: #ecfdf5;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.15);
}

.osac-service-card__confirm-btn--confirmed {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.25);
}

.osac-service-card__confirm-btn--confirmed:hover {
    background: #059669;
    border-color: #059669;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.3);
}

.osac-service-card__confirm-btn[hidden] {
    display: none;
}

.osac-service-card__actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--osb-space-1, 4px);
}

/* ═══════════════════════════════════════════════════════════════════
   TRANSFER STATUS BAR
   ═══════════════════════════════════════════════════════════════════ */

.osac-services-tab__transfer-status {
    display: flex;
    align-items: center;
    gap: var(--osb-space-3, 12px);
    padding: var(--osb-space-3, 12px) var(--osb-space-4, 16px);
    border-radius: var(--osb-radius-md, 8px);
    border: 1px solid var(--osb-border, #e2ddd5);
    background: var(--osb-surface-alt, #f8f6f2);
}

.osac-services-tab__transfer-status--open {
    background: #fff8e1;
    border-color: #ffcc80;
}

.osac-services-tab__transfer-status--booked {
    background: #e8f5e9;
    border-color: #a5d6a7;
}

.osac-services-tab__transfer-icon {
    font-size: 24px;
    line-height: 1;
}

.osac-services-tab__transfer-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.osac-services-tab__transfer-label {
    font-size: var(--osb-text-xs, 12px);
    font-weight: var(--osb-font-semibold, 600);
    text-transform: uppercase;
    letter-spacing: var(--osb-tracking-wide, 0.025em);
    color: var(--osb-text-muted, #666666);
}

.osac-services-tab__transfer-value {
    font-size: var(--osb-text-sm, 14px);
    font-weight: var(--osb-font-semibold, 600);
    color: var(--osb-text-dark, #222222);
}

.osac-services-tab__transfer-status--open .osac-services-tab__transfer-value {
    color: #e65100;
}

.osac-services-tab__transfer-status--booked .osac-services-tab__transfer-value {
    color: #2e7d32;
}

.osac-services-tab__notify-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

/* (Old driver assignment rows removed — now inline in service cards) */

/* Match stepper height for adjacent inputs */
.osac-services-tab .osac-input--match-stepper {
    height: 50px;
    padding: 0 14px;
    border-radius: var(--osb-radius-lg, 12px);
}

/* ═══════════════════════════════════════════════════════════════════
   FLATPICKR DATE FIELD OVERRIDE
   ═══════════════════════════════════════════════════════════════════ */

.osac-services-tab__field-group .osac-input[readonly] {
    background: var(--osb-surface, #ffffff);
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════
   SPINNER (small variant)
   ═══════════════════════════════════════════════════════════════════ */

.osac-spinner--sm {
    width: 16px;
    height: 16px;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .osac-services-tab__form-row {
        flex-direction: column;
    }

    .osac-services-tab__direction-btns {
        flex-wrap: wrap;
    }

    .osac-services-tab__categories {
        gap: var(--osb-space-1, 4px);
    }

    .osac-services-tab__cat-btn {
        padding: var(--osb-space-1, 4px) var(--osb-space-3, 12px);
        font-size: var(--osb-text-xs, 12px);
    }

    .osac-service-card {
        flex-wrap: wrap;
    }

    .osac-service-card__actions {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        border-top: 1px solid var(--osb-border, #e2ddd5);
        padding-top: var(--osb-space-2, 8px);
    }
}


/* === details-tab.css === */
/* ===================================================================
   OSAC v2 - Details Tab (Read-Only Booking Info)
   =================================================================== */

.osac-details-tab {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Section */
.osac-details-tab__section {
    background: var(--osb-surface-white, #fff);
    border: 1px solid var(--osb-border-light, #e5e7eb);
    border-radius: var(--osb-radius-lg, 12px);
    padding: 1.25rem 1.5rem;
}

.osac-details-tab__section-title {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--osb-text-muted, #666);
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--osb-border-light, #e5e7eb);
}

/* Row (key-value) */
.osac-details-tab__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.osac-details-tab__row + .osac-details-tab__row {
    border-top: 1px solid var(--osb-border-lighter, #f3f4f6);
}

.osac-details-tab__label {
    font-size: 0.875rem;
    color: var(--osb-text-muted, #666);
    flex-shrink: 0;
}

.osac-details-tab__value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--osb-text-main, #333);
    text-align: right;
}

.osac-details-tab__value--strong {
    font-weight: 700;
    font-size: 1rem;
    color: var(--osb-text-dark, #222);
}

/* Responsive */
@media (max-width: 480px) {
    .osac-details-tab__section {
        padding: 1rem;
    }

    .osac-details-tab__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .osac-details-tab__value {
        text-align: left;
    }
}


/* === dive-tab.css === */
/* ===================================================================
   OSAC v2 - Dive Course / Dive Package Tab
   =================================================================== */

.osac-dive-tab {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 2.5rem;
}

/* Header */
.osac-dive-tab__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.osac-dive-tab__header .osac-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 600;
    white-space: nowrap;
}

.osac-dive-tab__header-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.osac-dive-tab__title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--osb-text-main, #333);
}

.osac-dive-tab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.375rem;
    border-radius: 9999px;
    background: var(--osb-brand-primary-light, #eef4fa);
    color: var(--osb-brand-primary, #26577C);
    font-size: 0.75rem;
    font-weight: 600;
}

/* List */
.osac-dive-tab__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── Dive Card ────────────────────────────────────── */

.osac-dive-card {
    background: var(--osb-surface-white, #fff);
    border: 1px solid var(--osb-border-light, #e5e7eb);
    border-radius: var(--osb-radius-lg, 12px);
    padding: 1.25rem;
    transition: border-color 0.15s ease;
}

.osac-dive-card:hover {
    border-color: var(--osb-brand-primary-light, #b8d0e5);
}

/* Card Header */
.osac-dive-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.osac-dive-card__title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.osac-dive-card__name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--osb-text-dark, #222);
}

.osac-dive-card__type-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background: var(--osb-brand-primary-tint, rgba(38,87,124,0.06));
    color: var(--osb-brand-primary, #26577C);
}

/* Card Details Grid */
.osac-dive-card__details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-bottom: 0.5rem;
}

.osac-dive-card__detail {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--osb-text-muted, #666);
}

.osac-dive-card__detail svg {
    flex-shrink: 0;
    color: var(--osb-text-light, #999);
}

/* Guests & Notes */
.osac-dive-card__guests,
.osac-dive-card__notes {
    font-size: 0.8125rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--osb-border-lighter, #f3f4f6);
}

.osac-dive-card__guests-label,
.osac-dive-card__notes-label {
    font-weight: 600;
    color: var(--osb-text-muted, #666);
    margin-right: 0.25rem;
}

.osac-dive-card__guests-value,
.osac-dive-card__notes-value {
    color: var(--osb-text-main, #333);
}

/* Actions */
.osac-dive-card__actions {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--osb-border-lighter, #f3f4f6);
    margin-top: 0.25rem;
}

/* ── Inline Edit Form ─────────────────────────────── */

.osac-dive-card__edit-form {
    margin-top: 0.75rem;
    padding: 1rem;
    background: var(--osb-surface-light, #fafbfc);
    border: 1px solid var(--osb-border-light, #e5e7eb);
    border-radius: var(--osb-radius-md, 8px);
}

.osac-dive-card__edit-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* ── Add Dive Course Section ─────────────────────── */

.osac-dive-tab__add-section {
    margin-top: 0.25rem;
}

.osac-dive-tab__add-form {
    margin-top: 0.75rem;
    padding: 1.25rem;
    background: var(--osb-surface-light, #fafbfc);
    border: 1px solid var(--osb-border-light, #e5e7eb);
    border-radius: var(--osb-radius-lg, 12px);
}

.osac-dive-tab__add-price {
    padding: 0.5rem 0;
}

.osac-dive-tab__add-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    padding: 0.375rem 0;
    border-top: 1px solid var(--osb-border-lighter, #f3f4f6);
}

.osac-dive-tab__add-price-row strong {
    font-size: 1rem;
    color: var(--osb-text-dark, #222);
}

/* Responsive */
@media (max-width: 480px) {
    .osac-dive-card {
        padding: 1rem;
    }

    .osac-dive-card__details {
        flex-direction: column;
        gap: 0.375rem;
    }

    .osac-dive-card__header {
        flex-direction: column;
        gap: 0.375rem;
    }

    .osac-dive-tab__add-row--inline {
        flex-direction: column;
    }
}


/* === shared-tabs.css === */
/* ═══════════════════════════════════════════════════════
   SHARED TAB SEPARATOR
   Visual divider between tab groups (daily → management → utility).
   Used in both Staff Terminal and Guest Terminal.
   ═══════════════════════════════════════════════════════ */

.osac-terminal__tab-separator {
    display: block;
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    margin: auto 4px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════
   CONTEXT-SPECIFIC OVERRIDES
   ═══════════════════════════════════════════════════════ */

/* Guest Terminal — warmer tone, no dark navy header */
.osac-terminal--guest .osac-terminal__header {
    background: var(--osb-brand-primary);
}

.osac-terminal--guest .osac-terminal__tabs {
    background: var(--osb-brand-primary-dark);
}

.osac-terminal--agency_parent .osac-terminal__header,
.osac-terminal--agency_child .osac-terminal__header {
    background: var(--osb-brand-primary);
}

.osac-terminal--agency_parent .osac-terminal__tabs,
.osac-terminal--agency_child .osac-terminal__tabs {
    background: var(--osb-brand-primary-dark);
}

/* ═══════════════════════════════════════════════════════
   SUB-TABS (inside panels — Bungalow / Dive / Tour etc.)
   Button style, NOT pill style.
   ═══════════════════════════════════════════════════════ */

.osac-sub-tabs {
    display: flex;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid var(--osb-border);
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.osac-sub-tab {
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    border-radius: 6px;
    border: 2px solid var(--osb-brand-primary);
    color: var(--osb-brand-primary);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.osac-sub-tab:hover {
    background: var(--osb-brand-primary-light);
}

.osac-sub-tab--active {
    background: var(--osb-brand-primary);
    color: #fff;
}

.osac-sub-tab:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════
   SUB-PANEL CONTAINERS
   ═══════════════════════════════════════════════════════ */

.osac-sub-panel {
    display: none;
}

.osac-sub-panel--active {
    display: block;
}

/* ═══════════════════════════════════════════════════════
   SHARED LOADING & EMPTY STATES
   ═══════════════════════════════════════════════════════ */

.osac-terminal__loading {
    padding: 40px 20px;
    text-align: center;
    color: var(--osb-text-muted);
    font-size: 14px;
}

.osac-terminal__error {
    padding: 20px;
    text-align: center;
    color: var(--osb-error-dark);
    background: var(--osb-error-light);
    border-radius: var(--osb-radius-md);
    font-size: 14px;
}

.osac-terminal__empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--osb-text-light);
    font-size: 14px;
}

/* ═══════════════════════════════════════════════════════
   SHARED ACTION BUTTONS (inside panels)
   ═══════════════════════════════════════════════════════ */

.osac-terminal__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--osb-btn-padding-mini);
    font-size: var(--osb-text-sm);
    font-weight: var(--osb-font-semibold);
    font-family: inherit;
    border-radius: var(--osb-radius-md);
    border: none;
    cursor: pointer;
    transition: all var(--osb-transition-normal);
}

.osac-terminal__btn--primary {
    background: var(--osb-btn-cta-bg);
    color: var(--osb-btn-cta-text);
}

.osac-terminal__btn--primary:hover {
    background: var(--osb-btn-cta-bg-hover);
}

.osac-terminal__btn--outline {
    background: transparent;
    color: var(--osb-brand-primary);
    border: 2px solid var(--osb-brand-primary);
}

.osac-terminal__btn--outline:hover {
    background: var(--osb-brand-primary);
    color: #fff;
}

.osac-terminal__btn--ghost {
    background: var(--osb-btn-ghost-bg);
    color: var(--osb-btn-ghost-text);
    border: 1px solid var(--osb-btn-ghost-border);
}

.osac-terminal__btn--ghost:hover {
    background: var(--osb-btn-ghost-bg-hover);
    color: var(--osb-btn-ghost-text-hover);
    border-color: var(--osb-btn-ghost-border-hover);
}

.osac-terminal__btn:disabled {
    background: var(--osb-btn-disabled-bg);
    color: var(--osb-btn-disabled-text);
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════
   PERMISSION-AWARE ELEMENTS
   Elements that show/hide based on terminal context.
   Applied via JS: el.classList.toggle('osac-hidden', !OsacTerminalCore.can('action'))
   ═══════════════════════════════════════════════════════ */

.osac-hidden {
    display: none !important;
}


/* === public-booking.css === */
/* ===================================================================
   Public Booking Widget — Ocean Sun Dive Resort
   ===================================================================
   Single-panel booking component for public accommodation pages.
   Uses data-state attribute for view management (no JS show/hide).

   States: input → results → summary → confirmation
   BEM prefix: os-bw (Ocean Sun Booking Widget)
   Tokens: --os-* (theme) for brand consistency.
   =================================================================== */

/* ── State Visibility ── */
.os-bw[data-state="input"] .os-bw__results,
.os-bw[data-state="input"] .os-bw__summary,
.os-bw[data-state="input"] .os-bw__confirmation { display: none; }

.os-bw[data-state="results"] .os-bw__inputs,
.os-bw[data-state="results"] .os-bw__summary,
.os-bw[data-state="results"] .os-bw__confirmation { display: none; }

.os-bw[data-state="summary"] .os-bw__inputs,
.os-bw[data-state="summary"] .os-bw__results,
.os-bw[data-state="summary"] .os-bw__confirmation { display: none; }

.os-bw[data-state="confirmation"] .os-bw__inputs,
.os-bw[data-state="confirmation"] .os-bw__results,
.os-bw[data-state="confirmation"] .os-bw__summary { display: none; }

/* ── Steppers Grid ── */
.os-bw__steppers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.os-bw__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.os-bw__field label {
  font-family: var(--os-font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--os-primary, #1C2E3F);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.os-bw__label-hint {
  font-size: 10px;
  font-weight: 500;
  color: var(--os-text-muted, #7C8694);
  text-transform: uppercase;
  margin-left: 4px;
}

.os-bw__label--muted {
  color: var(--os-text-muted, #7C8694);
}

/* ── Stepper Input (reuses plugin .osb-stepper-input-wrapper) ── */
.os-bw .osb-stepper-input-wrapper {
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--os-border, #E2DDD3);
  background: var(--os-bg, #FDFCF9);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.os-bw .osb-stepper-button {
  width: 40px;
  height: 100%;
  border: none;
  background: transparent;
  font-size: 18px;
  font-weight: 500;
  color: var(--os-primary, #1C2E3F);
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.os-bw .osb-stepper-button:hover {
  background: var(--os-bg-cream, #F7F4EF);
}

.os-bw .osb-stepper-input-wrapper input {
  flex: 1;
  text-align: center;
  border: none;
  background: transparent;
  font-family: var(--os-font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--os-primary, #1C2E3F);
  -moz-appearance: textfield;
}

.os-bw .osb-stepper-input-wrapper input::-webkit-inner-spin-button,
.os-bw .osb-stepper-input-wrapper input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.os-bw .osb-stepper-readonly {
  opacity: 0.6;
}

/* ── Calendar ── */
.os-bw__calendar {
  margin-bottom: 20px;
}

.os-bw__calendar .osb-date-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.os-bw__calendar .osb-form-group label {
  font-family: var(--os-font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--os-primary, #1C2E3F);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  display: block;
}

.os-bw__calendar .osb-input,
.os-bw__calendar .flatpickr-input {
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--os-border, #E2DDD3);
  border-radius: 8px;
  background: var(--os-bg, #FDFCF9);
  font-family: var(--os-font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 14px;
  color: var(--os-primary, #1C2E3F);
  width: 100%;
  cursor: pointer;
}

.os-bw__calendar .osb-input:focus,
.os-bw__calendar .flatpickr-input:focus {
  outline: none;
  border-color: var(--os-cta, #B8856C);
  box-shadow: 0 0 0 3px rgba(184, 133, 108, 0.12);
}

/* ── Warm Prompt ── */
.os-bw__prompt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--os-bg-cream, #F7F4EF);
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--os-text-body, #4A5568);
}

.os-bw__prompt-icon {
  font-size: 20px;
  flex-shrink: 0;
}

/* ── Check Availability Button ── */
.os-bw__check-btn {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 8px;
  background: var(--os-cta, #B8856C);
  color: #fff;
  font-family: var(--os-font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  letter-spacing: 0.02em;
}

.os-bw__check-btn:hover {
  background: color-mix(in srgb, var(--os-cta, #B8856C) 85%, black);
}

.os-bw__check-btn:active {
  transform: scale(0.98);
}

.os-bw__check-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Results Section ── */
.os-bw__result-content {
  margin-bottom: 16px;
}

.os-bw__alternative {
  margin-bottom: 16px;
}

/* ── Compact Status Cards (resort-style) ── */
.os-bw .osb-status-box {
  border-radius: 8px;
  font-family: var(--os-font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 13px;
  line-height: 1.4;
  padding: 12px 14px;
  margin-bottom: 8px;
}

.os-bw .osb-status-box:last-child {
  margin-bottom: 0;
}

.os-bw .osb-status-box--success {
  background: var(--os-bg, #FDFCF9);
  border: 1px solid var(--os-border, #E2DDD3);
  color: var(--os-primary, #1C2E3F);
}

.os-bw .osb-status-box--warning {
  background: #FFFBEB;
  border: 1px solid #FEF3C7;
  color: var(--os-primary, #1C2E3F);
}

.os-bw .osb-status-box--error {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #991B1B;
}

/* Header row: icon + name + badge */
.os-bw .osb-status-box__header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.os-bw .osb-status-box__icon {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

.os-bw .osb-status-box__title {
  font-family: var(--os-font-display, 'Lora', Georgia, serif);
  font-weight: 600;
  font-size: 14px;
  color: var(--os-primary, #1C2E3F);
  margin: 0;
}

.os-bw .osb-status-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 100px;
  margin-left: auto;
  flex-shrink: 0;
}

.os-bw .osb-status-box--success .osb-status-badge {
  background: transparent;
  color: var(--os-text-muted, #7C8694);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.os-bw .osb-status-box--warning .osb-status-badge {
  background: #FEF3C7;
  color: #92400E;
}

.os-bw .osb-status-box--error .osb-status-badge {
  background: #FECACA;
  color: #991B1B;
}

/* Body row: info text + action button inline */
.os-bw .osb-status-box__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.os-bw .osb-status-box__info {
  font-size: 12px;
  color: var(--os-text-body, #4A5568);
  flex: 1;
}

.os-bw .osb-status-box__extra-bed {
  color: var(--os-text-muted, #7C8694);
  font-size: 11px;
}

/* Compact inline action buttons */
.os-bw .osb-status-box__body .osb-btn {
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--os-font-body, 'Plus Jakarta Sans', sans-serif);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
  text-decoration: none;
  line-height: 1.4;
  flex-shrink: 0;
}

.os-bw .osb-status-box__body .osb-btn-summary,
.os-bw .osb-status-box__body .osb-trigger-preview-button {
  background: var(--os-cta, #B8856C);
  color: #fff;
}

.os-bw .osb-status-box__body .osb-btn-summary:hover,
.os-bw .osb-status-box__body .osb-trigger-preview-button:hover {
  background: color-mix(in srgb, var(--os-cta, #B8856C) 85%, black);
}

.os-bw .osb-status-box__body .osb-btn-suggest {
  background: var(--os-bg-cream, #F7F4EF);
  color: var(--os-primary, #1C2E3F);
  border: 1px solid var(--os-border, #E2DDD3);
}

.os-bw .osb-status-box__body .osb-btn-suggest:hover {
  border-color: var(--os-cta, #B8856C);
}

.os-bw .osb-status-box__body .osb-btn-alt {
  background: transparent;
  color: var(--os-cta, #B8856C);
  padding: 6px 0;
  font-weight: 500;
}

.os-bw .osb-status-box__body .osb-btn-alt:hover {
  color: color-mix(in srgb, var(--os-cta, #B8856C) 80%, black);
}

/* Hide legacy full-width button layout — compact cards use inline __body */
.os-bw .osb-status-box__actions { display: none; }
.os-bw .osb-btn__subtext,
.os-bw .osb-btn-subtext { display: none; }

/* Error/unavailable boxes still use __message (no __body) */
.os-bw .osb-status-box--error .osb-status-box__message {
  font-size: 12px;
  color: #991B1B;
  margin: 0;
}

/* ── Change Dates Link ── */
.os-bw__change-btn {
  display: inline-block;
  background: none;
  border: none;
  padding: 8px 0;
  font-family: var(--os-font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--os-text-muted, #7C8694);
  cursor: pointer;
  transition: color 0.15s;
}

.os-bw__change-btn:hover {
  color: var(--os-primary, #1C2E3F);
}

/* ── Summary Section — Clean resort-style pricing ── */
.os-bw__preview-content {
  margin-bottom: 8px;
}

/* Hide the template's Change dates button — actions area has its own */
.os-bw__summary > .os-bw__change-btn { display: none; }

/* ── RESET: strip all plugin chrome from preview boxes ── */
.os-bw .osac-preview-box {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
}

.os-bw .osac-breakdown-grid {
  display: block;
  gap: 0;
}

.os-bw .osac-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transition: none;
}

.os-bw .osac-breakdown-row:hover {
  border: none;
  box-shadow: none;
  background: transparent;
}

.os-bw .osac-total-row {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 4px 0;
}

.os-bw .osac-subtotal-row {
  border: none;
  border-bottom: none;
  padding-bottom: 4px;
  margin-bottom: 0;
}

.os-bw .osb-btn-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
}

/* ── Override plugin preview/summary styles within our widget ── */

/* Hide staff-only elements in summary */
.os-bw .osac-summary-row__change { display: none; }
.os-bw .osac-summary-row__step { display: none; }
.os-bw .osac-summary-row--guest { display: none; }
.os-bw .osb-actions-area-wrapper .osb-back-to-form-link { display: none; }

/* ── Property + Dates header ── */
.os-bw .osac-summary-row--property {
  border: none;
  background: transparent;
  margin-bottom: 0;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--os-border, #E2DDD3);
}

.os-bw .osac-summary-row__primary {
  font-family: var(--os-font-display, 'Lora', Georgia, serif);
  font-weight: 600;
  font-size: 14px;
  color: var(--os-primary, #1C2E3F);
}

.os-bw .osac-summary-row__secondary {
  font-size: 12px;
  color: var(--os-text-body, #4A5568);
}

/* ── Price Breakdown: clean rows, no box ── */
.os-bw .osac-preview-breakdown-box {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 10px 0 0;
  margin-bottom: 0;
  font-family: var(--os-font-body, 'Plus Jakarta Sans', sans-serif);
}

/* Hide "Price Breakdown (per night)" heading */
.os-bw .osac-preview-breakdown-box .osac-box-heading {
  display: none;
}

/* Breakdown rows: clean lines, no boxes */
.os-bw .osac-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  padding: 4px 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.os-bw .osac-breakdown-row:hover {
  border-color: transparent;
  box-shadow: none;
}

.os-bw .osac-breakdown-label .osac-item-name {
  font-size: 13px;
  color: var(--os-text-body, #4A5568);
}

.os-bw .osac-breakdown-label .osac-item-detail {
  font-size: 11px;
  color: var(--os-text-muted, #7C8694);
}

.os-bw .osac-breakdown-price {
  font-size: 13px;
  color: var(--os-primary, #1C2E3F);
  font-weight: 500;
}

/* Nightly Subtotal row: hide when there's no discount (single line item = redundant) */
.os-bw .osac-subtotal-row {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
  color: var(--os-text-muted, #7C8694);
}

/* Long Stay Discount: clean text, no badge, no box */
.os-bw .osac-long-stay-discount-row {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 4px 0;
  margin: 2px 0;
}

/* Hide the pill badge — show percentage as green inline text */
.os-bw .osac-long-stay-badge {
  background: none;
  color: #16a34a;
  font-size: 13px;
  padding: 0;
  border-radius: 0;
  font-weight: 500;
}

.os-bw .osac-discount-thanks {
  display: none;
}

.os-bw .osac-discount-applied,
.os-bw .osac-total-value.osac-discount-applied,
.os-bw .osac-total-row.osac-discount-row .osac-total-value,
.os-bw .osac-total-row.osac-discount-row .osac-discount-applied {
  color: #16a34a;
  font-weight: 400;
  font-size: 12px;
}

/* Reset .osac-total-value base size inside .os-bw */
.os-bw .osac-total-value {
  font-size: 13px;
  font-weight: 500;
}

.os-bw .osac-long-stay-icon {
  display: none;
}

/* "Long Stay Discount" label: green, lighter weight */
.os-bw .osac-total-label {
  font-size: 12px;
  font-weight: 400;
  color: #16a34a;
  color: var(--os-text-body, #4A5568);
}

/* Nightly Rate Total after discount: no border, just spacing */
.os-bw .osac-nightly-rate-total-row {
  border-top: none;
  padding-top: 4px;
  margin-top: 2px;
}

/* Remove pseudo-element separator at bottom of breakdown */
.os-bw .osac-preview-breakdown-box::after {
  display: none;
}

/* ── Price Summary box: show ONLY grand total row ── */
.os-bw .osac-preview-total-box {
  display: block;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
}

/* Hide heading and non-total rows */
.os-bw .osac-preview-total-box .osac-box-heading { display: none; }
.os-bw .osac-preview-total-box > .osac-breakdown-row:not(.osac-grand-total-row) { display: none; }
.os-bw .osac-preview-total-box > .osac-total-row:not(.osac-grand-total-row) { display: none; }
.os-bw .osac-guest-discount-row { display: none; }

/* Grand total row: line separator above, NO hover effects */
.os-bw .osac-grand-total-row {
  border-top: 1px solid var(--os-border, #E2DDD3);
  border-bottom: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
  margin-top: 10px;
  padding-top: 10px;
  padding-bottom: 4px;
  background: transparent;
  box-shadow: none;
}

.os-bw .osac-grand-total-row:hover {
  border-top: 1px solid var(--os-border, #E2DDD3);
  border-bottom: none;
  border-left: none;
  border-right: none;
  background: transparent;
  box-shadow: none;
}

/* "GRAND TOTAL" → display as "Total" (lowercase via CSS) */
.os-bw .osac-grand-total-row .osac-item-name,
.os-bw .osac-grand-total-row .osac-grand-label {
  font-family: var(--os-font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--os-primary, #1C2E3F);
  text-transform: capitalize;
  font-size: 0;
}

/* Replace "GRAND TOTAL" text with "Total" via pseudo-element */
.os-bw .osac-grand-total-row .osac-grand-label::after {
  content: 'Total';
  font-size: 14px;
}

.os-bw .osac-grand-total-row .osac-item-badge--total { display: none; }

.os-bw .osac-grand-total-row .osac-breakdown-price,
.os-bw .osac-grand-total-row .osac-grand-total {
  font-size: 15px;
  font-weight: 700;
  color: var(--os-primary, #1C2E3F);
}

.os-bw .osac-grand-total-row .osac-item-detail {
  font-size: 11px;
  color: var(--os-text-muted, #7C8694);
  font-weight: 400;
}

/* ── Actions area: clean bottom ── */
.os-bw .osb-actions-area-wrapper {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 14px 0 0;
}

/* Reserve button */
.os-bw .osb-add-to-cart-button,
.os-bw .osb-btn-cta,
.os-bw #osac-add-to-cart {
  width: 100%;
  height: 44px;
  border: none;
  border-radius: 6px;
  background: var(--os-cta, #B8856C);
  color: #fff;
  font-family: var(--os-font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.os-bw .osb-add-to-cart-button:hover,
.os-bw .osb-btn-cta:hover,
.os-bw #osac-add-to-cart:hover {
  background: color-mix(in srgb, var(--os-cta, #B8856C) 85%, black);
}

/* Change Dates: plain text link (own class, no .osb-btn inheritance) */
.os-bw .os-bw__back-link {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px 0 0;
  margin: 0;
  background: none;
  border: none;
  font-family: var(--os-font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 12px;
  font-weight: 400;
  color: var(--os-text-muted, #7C8694);
  cursor: pointer;
  transition: color 0.15s;
}

.os-bw .os-bw__back-link:hover {
  color: var(--os-text-body, #4A5568);
}

/* Hide commission box in public context */
.os-bw .osac-preview-commission-box {
  display: none;
}

/* Free extra bed row */
.os-bw .osac-free-extra-bed-row .osac-free-label {
  color: var(--os-cta, #B8856C);
  font-weight: 600;
}

/* (legacy styles removed — pricing now uses .osac-* classes from PriceBreakdownRenderer) */

/* ── Confirmation Section ── */
.os-bw__confirmation {
  text-align: center;
}

/* Strip confirmation box chrome in public widget */
.os-bw .osb-confirmation-box {
  border: none;
  box-shadow: none;
  border-radius: 0;
  background: transparent;
  margin: 0;
  max-width: none;
}

.os-bw .osb-nextsteps-box {
  max-width: none;
  margin: 12px 0 0;
}

/* More space before CTA button */
.os-bw .osb-confirmation-cta {
  margin-top: 1rem;
  padding: 0 16px;
}

.os-bw .osb-confirmation-cta .osb-btn {
  border-radius: 6px;
}

/* Nextsteps buttons spacing */
.os-bw .osb-nextsteps-box {
  padding: 0 16px;
}

/* ── Loading State ── */
.os-bw__check-btn.osb-btn-loading {
  position: relative;
  color: transparent;
}

.os-bw__check-btn.osb-btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: os-bw-spin 0.6s linear infinite;
}

@keyframes os-bw-spin {
  to { transform: rotate(360deg); }
}

/* ── Mobile ── */
@media (max-width: 480px) {
  .os-bw__steppers {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .os-bw__calendar .osb-date-wrapper {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .os-bw__check-btn {
    height: 52px;
    font-size: 16px;
  }
}