/* OSAC CSS Bundle - Generated 2026-03-28 03:52:18 - Do not edit directly */
/* Bundle: core-bundle.css */
/* Sources: 4 files */

/* === variables.css === */
/* ===================================================================
   OSAC v2 - CSS VARIABLES (Ocean Sun Design System)
   ===================================================================

   Elementor Integration (automatic):
   When Elementor is active, its global design tokens are picked up
   automatically via CSS var() fallbacks. No PHP detection needed.

   Color mapping:
     --e-global-color-primary    →  --osb-brand-primary  (CTA, links)
     --e-global-color-secondary  →  --osb-brand-accent   (check buttons)
     --e-global-color-text       →  --osb-text-main      (body text)

   Typography mapping:
     --e-global-typography-primary-font-family  →  --osb-font-heading
     --e-global-typography-text-font-family     →  --osb-font-primary

   Derived shades (-dark, -light, -tint) are computed with color-mix()
   so they stay harmonious when Elementor overrides the base colors.

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

:root {

     /* =========================================
       1. BRAND COLORS (Elementor-Aware)
       ========================================= */

     /* Primary – Elementor global primary or Ocean Blue */
     --osb-brand-primary: var(--e-global-color-primary, #26577C);
     --osb-brand-primary-dark: color-mix(in srgb, var(--osb-brand-primary) 80%, black);
     --osb-brand-primary-light: color-mix(in srgb, var(--osb-brand-primary) 10%, white);
     --osb-brand-primary-tint: color-mix(in oklch, var(--osb-brand-primary) 6%, transparent);

     /* Accent – Elementor global secondary or Teal */
     --osb-brand-accent: var(--e-global-color-secondary, #14b8a6);
     --osb-brand-accent-dark: color-mix(in srgb, var(--osb-brand-accent) 80%, black);
     --osb-brand-accent-light: color-mix(in srgb, var(--osb-brand-accent) 15%, white);

     /* Coral – functional (warnings), not Elementor-controlled */
     --osb-brand-coral: #E16544;
     --osb-brand-coral-dark: #c9503a;
     --osb-brand-coral-light: #fdeee9;

     /* Sand – functional accent, not Elementor-controlled */
     --osb-brand-sand: #FCEB89;
     --osb-brand-sand-dark: #8B5022;
     --osb-brand-sand-light: #fef9e7;

     /* Department Colors — consistent across cards, tabs, badges */
     --osb-dept-bungalow:     #1C2E3F;
     --osb-dept-bungalow-light: color-mix(in srgb, #1C2E3F 10%, white);
     --osb-dept-dive-course:  #0D9488;
     --osb-dept-dive-course-light: color-mix(in srgb, #0D9488 10%, white);
     --osb-dept-dive:         #0891B2;
     --osb-dept-dive-light:   color-mix(in srgb, #0891B2 10%, white);
     --osb-dept-tour:         #B8856C;
     --osb-dept-tour-light:   color-mix(in srgb, #B8856C 10%, white);
     --osb-dept-package:      #C9A96E;
     --osb-dept-package-light: color-mix(in srgb, #C9A96E 10%, white);

     /* =========================================
       2. TEXT COLORS (Elementor-Aware)
       ========================================= */
     --osb-text-dark: var(--os-text, #1C2E3F);
     /* Headlines, Labels – inherits from theme */
     --osb-text-main: var(--os-text-body, #4A5568);
     /* Body Text – inherits from theme */
     --osb-text-muted: var(--os-text-muted, #6B7280);
     /* Secondary Text, subtitles */
     --osb-text-light: #999999;
     /* Muted, Placeholders */
     --osb-text-white: #ffffff;
     /* On dark backgrounds */

     /* =========================================
       3. SURFACE COLORS (Backgrounds)
       ========================================= */
     --osb-surface: var(--os-bg-white, #ffffff);
     /* Card Background — inherits from theme */
     --osb-surface-bg: var(--os-bg, #f8f6f2);
     /* Page Background — inherits from theme */
     --osb-surface-alt: var(--os-bg, #f8f6f2);
     /* Page Background — inherits from theme */
     --osb-surface-bg-alt: var(--os-bg-cream, #f2efe9);
     /* Alternate Section Background — inherits from theme */
     --osb-surface-hover: #ede9e1;
     /* Hover State (warm) */

     --osb-border: var(--os-border, #e2ddd5);
     /* Default Border — inherits from theme */
     --osb-border-light: var(--os-border-light, #ece8e0);
     /* Subtle Border (warm) */
     --osb-border-focus: var(--osb-interactive, #B8856C);
     /* Focus State – defaults to Terracotta (brand CTA color) */

     /* Interactive accent — used for form hover/focus states.
        Frontpage: Terracotta (warm, on-brand).
        Terminal: overridden to Navy via .osac-terminal scope. */
     --osb-interactive: #B8856C;
     --osb-interactive-tint: color-mix(in srgb, var(--osb-interactive) 8%, white);
     --osb-interactive-ring: color-mix(in srgb, var(--osb-interactive) 15%, transparent);

     /* Deep Ocean (hero sections, dark CTA bars) */
     --osb-deep: #132a3e;
     --osb-deep-soft: #1a3650;

     /* Terminal-specific brand shades */
     --osb-navy: #0f3460;
     --osb-navy-dark: #16213e;
     --osb-navy-ink: #1a1a2e;
     --osb-accent-coral: #e94560;
     --osb-accent-cyan: #0891b2;
     --osb-accent-cyan-dark: #0e7490;

     /* Terminal-specific surface tokens */
     --osb-terminal-bg: #ffffff;
     --osb-terminal-surface: var(--osb-surface-bg);         /* #f8f6f2 warm */
     --osb-terminal-surface-alt: var(--osb-surface-bg-alt); /* #f2efe9 warm */
     --osb-terminal-hover: var(--osb-surface-hover);        /* #ede9e1 warm */
     --osb-terminal-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

     /* =========================================
       4. STATUS COLORS
       ========================================= */
     --osb-success: #10b981;
     /* Green */
     --osb-success-light: #d1fae5;
     /* Green Background */
     --osb-success-dark: #059669;
     /* Green Text */

     --osb-warning: #f59e0b;
     /* Amber */
     --osb-warning-light: #fef3c7;
     /* Amber Background */
     --osb-warning-dark: #b45309;
     /* Amber Text */

     --osb-error: #ef4444;
     /* Red */
     --osb-error-light: #fee2e2;
     /* Red Background */
     --osb-error-dark: #b91c1c;
     /* Red Text */

     --osb-info: var(--osb-brand-primary);
     --osb-info-light: var(--osb-brand-primary-light);
     --osb-info-dark: var(--osb-brand-primary-dark);

     /* =========================================
       5. BUTTON COLORS
       ========================================= */
     /* CTA Button (Teal – aligned with new web design) */
     --osb-btn-cta-bg: var(--osb-brand-accent);
     --osb-btn-cta-bg-hover: var(--osb-brand-accent-dark);
     --osb-btn-cta-text: #ffffff;
     --osb-btn-cta-shadow: color-mix(in oklch, var(--osb-brand-accent) 30%, transparent);

     /* Check Button (Teal / Elementor Secondary) */
     --osb-btn-check-bg: var(--osb-brand-accent);
     --osb-btn-check-bg-hover: var(--osb-brand-accent-dark);
     --osb-btn-check-text: #ffffff;
     --osb-btn-check-shadow: color-mix(in oklch, var(--osb-brand-accent) 25%, transparent);

     /* Summary Button (Soft Mint) */
     --osb-btn-summary-bg: #ACEFE8;
     --osb-btn-summary-bg-hover: #9AEBE2;
     --osb-btn-summary-text: #007F7F;
     --osb-btn-summary-border: #0AA897;

     /* Ghost Button (Transparent) */
     --osb-btn-ghost-bg: transparent;
     --osb-btn-ghost-bg-hover: var(--osb-brand-primary-light);
     --osb-btn-ghost-text: var(--osb-text-muted);
     --osb-btn-ghost-text-hover: var(--osb-brand-primary);
     --osb-btn-ghost-border: var(--osb-border);
     --osb-btn-ghost-border-hover: var(--osb-brand-primary);

     /* Alternative Button (Ocean Blue Outline / Elementor Primary) */
     --osb-btn-alt-bg: var(--osb-brand-primary-tint);
     --osb-btn-alt-bg-hover: color-mix(in oklch, var(--osb-brand-primary) 12%, transparent);
     --osb-btn-alt-text: var(--osb-brand-primary);
     --osb-btn-alt-border: var(--osb-brand-primary);

     /* Suggestion Button (Warm Sand) */
     --osb-btn-suggest-bg: var(--osb-brand-sand-light);
     --osb-btn-suggest-bg-hover: #fef3c7;
     --osb-btn-suggest-text: var(--osb-brand-sand-dark);
     --osb-btn-suggest-border: #F5C86A;

     /* Disabled State */
     --osb-btn-disabled-bg: #e2ddd5;
     --osb-btn-disabled-text: #94a3b8;

     /* Button Sizing */
     --osb-btn-padding: 14px 28px;
     --osb-btn-padding-mini: 8px 16px;
     --osb-btn-font-size: var(--osb-text-base);
     --osb-btn-font-size-mini: var(--osb-text-sm);
     --osb-btn-font-weight: var(--osb-font-semibold);
     --osb-btn-radius: var(--osb-radius-md);

     /* =========================================
       6. TYPOGRAPHY (Elementor-Aware)
       ========================================= */
     /* Font Families – Theme-aware with system fallbacks */
     --osb-font-primary: var(--os-font-body, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
     --osb-font-heading: var(--os-font-body, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
     --osb-font-display: var(--os-font-display, 'Fraunces', Georgia, serif);
     --osb-font-mono: "SF Mono", Monaco, "Cascadia Code", monospace;

     /* Font Sizes (Chucky's Scale) */
     --osb-text-xs: 0.75rem;
     /* 12px */
     --osb-text-sm: 0.875rem;
     /* 14px - Subtext, Pills */
     --osb-text-base: 1rem;
     /* 16px - Body, Buttons */
     --osb-text-lg: 1.125rem;
     /* 18px */
     --osb-text-xl: 1.25rem;
     /* 20px - Price Text */
     --osb-text-2xl: 1.375rem;
     /* 22px - H3 */
     --osb-text-3xl: 1.75rem;
     /* 28px - H2 */
     --osb-text-4xl: 2.625rem;
     /* 42px - H1 Desktop */
     --osb-text-5xl: 3rem;
     /* 48px - H1 Large */

     /* Font Weights */
     --osb-font-normal: 400;
     /* Body */
     --osb-font-medium: 500;
     /* Pills */
     --osb-font-semibold: 600;
     /* H2, H3, Buttons */
     --osb-font-bold: 700;
     /* H1, Prices */

     /* Line Heights */
     --osb-leading-none: 1;
     --osb-leading-tight: 1.2;
     /* H1 */
     --osb-leading-snug: 1.3;
     /* H2, H3 */
     --osb-leading-normal: 1.55;
     /* Body Text */
     --osb-leading-relaxed: 1.625;

     /* Letter Spacing */
     --osb-tracking-tight: -0.5px;
     /* H1 */
     --osb-tracking-normal: 0;
     --osb-tracking-wide: 0.025em;

     /* =========================================
       7. SPACING (Consistent Rhythm)
       ========================================= */
     --osb-space-0: 0;
     --osb-space-1: 4px;
     --osb-space-2: 8px;
     --osb-space-3: 12px;
     --osb-space-4: 16px;
     --osb-space-5: 20px;
     --osb-space-6: 24px;
     --osb-space-8: 32px;
     --osb-space-10: 40px;
     --osb-space-12: 48px;
     --osb-space-16: 64px;

     /* =========================================
       8. BORDER RADIUS
       ========================================= */
     --osb-radius-none: 0;
     --osb-radius-sm: 4px;
     --osb-radius-md: 8px;
     --osb-radius-lg: 12px;
     --osb-radius-xl: 16px;
     --osb-radius-2xl: 24px;
     --osb-radius-full: 9999px;

     /* =========================================
       9. SHADOWS
       ========================================= */
     --osb-shadow-none: none;
     --osb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
     --osb-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
     --osb-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
     --osb-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
     --osb-shadow-card: 0 4px 24px -4px rgba(28, 46, 63, 0.10);
     --osb-shadow-button: 0 4px 6px color-mix(in oklch, var(--osb-brand-accent) 15%, transparent);
     --osb-shadow-focus: 0 0 0 3px rgba(20, 184, 166, 0.1);

     /* =========================================
       10. TRANSITIONS
       ========================================= */
     --osb-transition-fast: 0.15s ease;
     --osb-transition-normal: 0.2s ease;
     --osb-transition-slow: 0.3s ease;

     /* =========================================
       11. Z-INDEX SCALE
       ========================================= */
     --osb-z-dropdown: 100;
     --osb-z-sticky: 200;
     --osb-z-modal: 300;
     --osb-z-tooltip: 400;
     --osb-z-spinner: 100000;

     /* =========================================
       12. PILL STYLES (Ocean Blue System)
       ========================================= */
     --osb-pill-bg: var(--osb-brand-primary-tint);
     --osb-pill-border: var(--osb-brand-primary);
     --osb-pill-text: var(--osb-brand-primary);
     --osb-pill-font-size: var(--osb-text-sm);
     --osb-pill-font-weight: var(--osb-font-medium);

     /* =========================================
       13. PRICE STYLES
       ========================================= */
     --osb-price-color: var(--osb-brand-primary);
     --osb-price-font-size: var(--osb-text-xl);
     --osb-price-font-weight: var(--osb-font-bold);

     /* Price Line (Two-tier hierarchy) */
     --osb-price-label-color: #14b8a6;        /* Meta label – Teal accent */
     --osb-price-label-size: 11px;            /* Meta label size (eyebrow) */
     --osb-price-amount-size: 36px;           /* Main price size (DM Serif) */
     --osb-price-amount-weight: 400;          /* Main price weight (DM Serif normal) */
     --osb-price-modifier-size: 14px;         /* "from" / "/ night" size */
     --osb-price-modifier-weight: 400;        /* "from" / "/ night" weight */
}

/* === base.css === */
/* ===================================================================
   OSAC v2 - BASE RESET & CONTAINER
   ===================================================================
   
   Provides:
   - Box-sizing reset
   - Container base styles
   - FOUC prevention
   - Utility classes
   
   =================================================================== */

/* =========================================
   1. GLOBAL RESET (Inside Container)
   ========================================= */
.osb-container,
.osb-container *,
.osb-container *::before,
.osb-container *::after {
    box-sizing: border-box;
}

/* =========================================
   2. BASE CONTAINER
   ========================================= */
.osb-container {
    /* Typography - Inter from Design System */
    font-family: var(--osb-font-primary);
    font-size: var(--osb-text-base);
    font-weight: var(--osb-font-normal);
    line-height: var(--osb-leading-normal);
    color: var(--osb-text-main);
    
    /* Layout – aligned with website Description Section (1140px content area) */
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 40px;
    
    /* FOUC Prevention (Flash of Unstyled Content) */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}

/* Container loaded state (added by JS) */
.osb-container.osb-container-loaded {
    opacity: 1;
    visibility: visible;
}

/* =========================================
   3. TYPOGRAPHY BASE
   ========================================= */
.osb-container h1,
.osb-container h2,
.osb-container h3,
.osb-container h4 {
    font-family: var(--osb-font-display);
    color: var(--osb-text-dark);
    margin: 0 0 var(--osb-space-4) 0;
    line-height: var(--osb-leading-tight);
    font-weight: 400;
}

.osb-container h5,
.osb-container h6 {
    font-family: var(--osb-font-primary);
    color: var(--osb-text-dark);
    margin: 0 0 var(--osb-space-4) 0;
    line-height: var(--osb-leading-tight);
}

.osb-container h1 {
    font-size: var(--osb-text-4xl);
    letter-spacing: var(--osb-tracking-tight);
}

.osb-container h2 {
    font-size: var(--osb-text-3xl);
    line-height: var(--osb-leading-snug);
}

.osb-container h3 {
    font-size: 24px;
    line-height: var(--osb-leading-snug);
}

.osb-container h4 {
    font-size: 24px;
    line-height: var(--osb-leading-snug);
}

.osb-container p {
    margin: 0 0 var(--osb-space-4) 0;
}

.osb-container a {
    color: var(--osb-brand-primary);
    text-decoration: none;
    transition: color var(--osb-transition-fast);
}

.osb-container a:hover {
    color: var(--osb-brand-primary-dark);
    text-decoration: underline;
}

/* =========================================
   3b. MOBILE RESPONSIVE CONTAINER
   ========================================= */
@media (max-width: 768px) {
    .osb-container {
        padding: 0 16px;
    }
}

/* =========================================
   4. UTILITY CLASSES
   ========================================= */
/* Hidden (Display None) */
.osb-hidden {
    display: none !important;
}

/* Visually Hidden (Screen Reader Only) */
.osb-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Disable Transitions (for JS state changes) */
.osb-suspend-transitions,
.osb-suspend-transitions * {
    transition: none !important;
}

/* Text Utilities */
.osb-text-muted {
    color: var(--osb-text-muted) !important;
}

.osb-text-light {
    color: var(--osb-text-light) !important;
}

.osb-text-primary {
    color: var(--osb-brand-primary) !important;
}

.osb-text-success {
    color: var(--osb-success) !important;
}

.osb-text-warning {
    color: var(--osb-warning) !important;
}

.osb-text-error {
    color: var(--osb-error) !important;
}

/* Font Weight Utilities */
.osb-font-normal { font-weight: var(--osb-font-normal) !important; }
.osb-font-medium { font-weight: var(--osb-font-medium) !important; }
.osb-font-semibold { font-weight: var(--osb-font-semibold) !important; }
.osb-font-bold { font-weight: var(--osb-font-bold) !important; }

/* Text Size Utilities */
.osb-text-xs { font-size: var(--osb-text-xs) !important; }
.osb-text-sm { font-size: var(--osb-text-sm) !important; }
.osb-text-base { font-size: var(--osb-text-base) !important; }
.osb-text-lg { font-size: var(--osb-text-lg) !important; }
.osb-text-xl { font-size: var(--osb-text-xl) !important; }

/* ==========================================================================
   RESTORE MODE (Currency Switch)
   Hides form immediately when Restore pending — prevents flicker.
   Moved from osac-v2-main.css (which was removed).
   ========================================================================== */
html.osac-restoring .osb-custom-picker-section {
    display: none !important;
}

html.osac-restoring .osb-rate-card,
html.osac-restoring .osb-teaser-prices {
    display: none !important;
}

/* === layout.css === */
/* ===================================================================
   OSAC v2 - LAYOUT & SPACING UTILITIES
   ===================================================================
   
   Provides:
   - Section spacing
   - Grid system
   - Flexbox helpers
   - Spacing utilities
   - Responsive breakpoints
   
   =================================================================== */

/* =========================================
   1. SECTION SPACING
   ========================================= */
.osb-section {
    margin-bottom: var(--osb-space-6);
    width: 100%;
}

.osb-section:last-child {
    margin-bottom: 0;
}

/* =========================================
   2. GRID SYSTEM
   ========================================= */
.osb-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--osb-space-4);
}

.osb-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--osb-space-4);
}

.osb-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--osb-space-4);
}

/* Auto-fit Grid (Responsive) */
.osb-grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--osb-space-4);
}

/* =========================================
   3. FLEXBOX HELPERS
   ========================================= */
.osb-flex {
    display: flex;
}

.osb-flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--osb-space-4);
    align-items: center;
}

.osb-flex-col {
    display: flex;
    flex-direction: column;
    gap: var(--osb-space-4);
}

.osb-flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.osb-flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.osb-flex-start {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.osb-flex-end {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Flex Item Utilities */
.osb-flex-1 { flex: 1; }
.osb-flex-auto { flex: auto; }
.osb-flex-none { flex: none; }

/* =========================================
   4. SPACING UTILITIES
   ========================================= */
/* Margin */
.osb-m-0 { margin: 0 !important; }
.osb-m-1 { margin: var(--osb-space-1) !important; }
.osb-m-2 { margin: var(--osb-space-2) !important; }
.osb-m-3 { margin: var(--osb-space-3) !important; }
.osb-m-4 { margin: var(--osb-space-4) !important; }
.osb-m-6 { margin: var(--osb-space-6) !important; }
.osb-m-8 { margin: var(--osb-space-8) !important; }

/* Margin Top */
.osb-mt-0 { margin-top: 0 !important; }
.osb-mt-1 { margin-top: var(--osb-space-1) !important; }
.osb-mt-2 { margin-top: var(--osb-space-2) !important; }
.osb-mt-3 { margin-top: var(--osb-space-3) !important; }
.osb-mt-4 { margin-top: var(--osb-space-4) !important; }
.osb-mt-6 { margin-top: var(--osb-space-6) !important; }
.osb-mt-8 { margin-top: var(--osb-space-8) !important; }

/* Margin Bottom */
.osb-mb-0 { margin-bottom: 0 !important; }
.osb-mb-1 { margin-bottom: var(--osb-space-1) !important; }
.osb-mb-2 { margin-bottom: var(--osb-space-2) !important; }
.osb-mb-3 { margin-bottom: var(--osb-space-3) !important; }
.osb-mb-4 { margin-bottom: var(--osb-space-4) !important; }
.osb-mb-6 { margin-bottom: var(--osb-space-6) !important; }
.osb-mb-8 { margin-bottom: var(--osb-space-8) !important; }

/* Margin Left */
.osb-ml-0 { margin-left: 0 !important; }
.osb-ml-2 { margin-left: var(--osb-space-2) !important; }
.osb-ml-4 { margin-left: var(--osb-space-4) !important; }
.osb-ml-auto { margin-left: auto !important; }

/* Margin Right */
.osb-mr-0 { margin-right: 0 !important; }
.osb-mr-2 { margin-right: var(--osb-space-2) !important; }
.osb-mr-4 { margin-right: var(--osb-space-4) !important; }
.osb-mr-auto { margin-right: auto !important; }

/* Padding */
.osb-p-0 { padding: 0 !important; }
.osb-p-1 { padding: var(--osb-space-1) !important; }
.osb-p-2 { padding: var(--osb-space-2) !important; }
.osb-p-3 { padding: var(--osb-space-3) !important; }
.osb-p-4 { padding: var(--osb-space-4) !important; }
.osb-p-6 { padding: var(--osb-space-6) !important; }
.osb-p-8 { padding: var(--osb-space-8) !important; }

/* Padding X (Horizontal) */
.osb-px-2 { padding-left: var(--osb-space-2) !important; padding-right: var(--osb-space-2) !important; }
.osb-px-4 { padding-left: var(--osb-space-4) !important; padding-right: var(--osb-space-4) !important; }
.osb-px-6 { padding-left: var(--osb-space-6) !important; padding-right: var(--osb-space-6) !important; }

/* Padding Y (Vertical) */
.osb-py-2 { padding-top: var(--osb-space-2) !important; padding-bottom: var(--osb-space-2) !important; }
.osb-py-4 { padding-top: var(--osb-space-4) !important; padding-bottom: var(--osb-space-4) !important; }
.osb-py-6 { padding-top: var(--osb-space-6) !important; padding-bottom: var(--osb-space-6) !important; }

/* =========================================
   5. GAP UTILITIES
   ========================================= */
.osb-gap-1 { gap: var(--osb-space-1) !important; }
.osb-gap-2 { gap: var(--osb-space-2) !important; }
.osb-gap-3 { gap: var(--osb-space-3) !important; }
.osb-gap-4 { gap: var(--osb-space-4) !important; }
.osb-gap-6 { gap: var(--osb-space-6) !important; }

/* =========================================
   6. WIDTH & HEIGHT UTILITIES
   ========================================= */
.osb-w-full { width: 100% !important; }
.osb-w-auto { width: auto !important; }
.osb-h-full { height: 100% !important; }
.osb-h-auto { height: auto !important; }

/* =========================================
   7. RESPONSIVE BREAKPOINTS
   ========================================= */
@media (max-width: 768px) {
    /* Stack grids on mobile */
    .osb-grid-2,
    .osb-grid-3,
    .osb-grid-4 {
        grid-template-columns: 1fr;
    }
    
    /* Stack flex rows on mobile */
    .osb-flex-row {
        flex-direction: column;
    }
    
    /* Hide on mobile */
    .osb-hide-mobile {
        display: none !important;
    }
    
    /* Show only on mobile */
    .osb-show-mobile {
        display: block !important;
    }
}

@media (min-width: 769px) {
    /* Hide on desktop */
    .osb-hide-desktop {
        display: none !important;
    }
    
    /* Show only on desktop */
    .osb-show-desktop {
        display: block !important;
    }
}

/* === utilities.css === */
/* ===================================================================
   OSAC v2 - UTILITY CLASSES (Gold Standard)
   ===================================================================
   
   Reusable utility classes for spacing, text, and layout.
   Based on variables.css spacing scale.
   
   =================================================================== */

/* =========================================
   1. MARGIN UTILITIES
   ========================================= */

/* Margin Top */
.osb-mt-0 { margin-top: 0 !important; }
.osb-mt-1 { margin-top: var(--osb-space-1, 4px) !important; }
.osb-mt-2 { margin-top: var(--osb-space-2, 8px) !important; }
.osb-mt-3 { margin-top: var(--osb-space-3, 12px) !important; }
.osb-mt-4 { margin-top: var(--osb-space-4, 16px) !important; }
.osb-mt-5 { margin-top: var(--osb-space-5, 20px) !important; }
.osb-mt-6 { margin-top: var(--osb-space-6, 24px) !important; }
.osb-mt-8 { margin-top: var(--osb-space-8, 32px) !important; }

/* Margin Bottom */
.osb-mb-0 { margin-bottom: 0 !important; }
.osb-mb-1 { margin-bottom: var(--osb-space-1, 4px) !important; }
.osb-mb-2 { margin-bottom: var(--osb-space-2, 8px) !important; }
.osb-mb-3 { margin-bottom: var(--osb-space-3, 12px) !important; }
.osb-mb-4 { margin-bottom: var(--osb-space-4, 16px) !important; }
.osb-mb-5 { margin-bottom: var(--osb-space-5, 20px) !important; }
.osb-mb-6 { margin-bottom: var(--osb-space-6, 24px) !important; }
.osb-mb-8 { margin-bottom: var(--osb-space-8, 32px) !important; }

/* Margin Left */
.osb-ml-0 { margin-left: 0 !important; }
.osb-ml-1 { margin-left: var(--osb-space-1, 4px) !important; }
.osb-ml-2 { margin-left: var(--osb-space-2, 8px) !important; }
.osb-ml-3 { margin-left: var(--osb-space-3, 12px) !important; }
.osb-ml-4 { margin-left: var(--osb-space-4, 16px) !important; }

/* Margin Right */
.osb-mr-0 { margin-right: 0 !important; }
.osb-mr-1 { margin-right: var(--osb-space-1, 4px) !important; }
.osb-mr-2 { margin-right: var(--osb-space-2, 8px) !important; }
.osb-mr-3 { margin-right: var(--osb-space-3, 12px) !important; }
.osb-mr-4 { margin-right: var(--osb-space-4, 16px) !important; }

/* Margin X (Left + Right) */
.osb-mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.osb-mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Margin Y (Top + Bottom) */
.osb-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.osb-my-2 { margin-top: var(--osb-space-2, 8px) !important; margin-bottom: var(--osb-space-2, 8px) !important; }
.osb-my-4 { margin-top: var(--osb-space-4, 16px) !important; margin-bottom: var(--osb-space-4, 16px) !important; }

/* =========================================
   2. PADDING UTILITIES
   ========================================= */

/* Padding All */
.osb-p-0 { padding: 0 !important; }
.osb-p-1 { padding: var(--osb-space-1, 4px) !important; }
.osb-p-2 { padding: var(--osb-space-2, 8px) !important; }
.osb-p-3 { padding: var(--osb-space-3, 12px) !important; }
.osb-p-4 { padding: var(--osb-space-4, 16px) !important; }
.osb-p-5 { padding: var(--osb-space-5, 20px) !important; }
.osb-p-6 { padding: var(--osb-space-6, 24px) !important; }

/* Padding Top */
.osb-pt-0 { padding-top: 0 !important; }
.osb-pt-2 { padding-top: var(--osb-space-2, 8px) !important; }
.osb-pt-4 { padding-top: var(--osb-space-4, 16px) !important; }

/* Padding Bottom */
.osb-pb-0 { padding-bottom: 0 !important; }
.osb-pb-2 { padding-bottom: var(--osb-space-2, 8px) !important; }
.osb-pb-4 { padding-bottom: var(--osb-space-4, 16px) !important; }

/* Padding X (Left + Right) */
.osb-px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.osb-px-2 { padding-left: var(--osb-space-2, 8px) !important; padding-right: var(--osb-space-2, 8px) !important; }
.osb-px-4 { padding-left: var(--osb-space-4, 16px) !important; padding-right: var(--osb-space-4, 16px) !important; }

/* Padding Y (Top + Bottom) */
.osb-py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.osb-py-2 { padding-top: var(--osb-space-2, 8px) !important; padding-bottom: var(--osb-space-2, 8px) !important; }
.osb-py-4 { padding-top: var(--osb-space-4, 16px) !important; padding-bottom: var(--osb-space-4, 16px) !important; }

/* =========================================
   3. TEXT UTILITIES
   ========================================= */

/* Text Alignment */
.osb-text-left { text-align: left !important; }
.osb-text-center { text-align: center !important; }
.osb-text-right { text-align: right !important; }

/* Text Size */
.osb-text-xs { font-size: var(--osb-text-xs, 0.75rem) !important; }
.osb-text-sm { font-size: var(--osb-text-sm, 0.875rem) !important; }
.osb-text-base { font-size: var(--osb-text-base, 1rem) !important; }
.osb-text-lg { font-size: var(--osb-text-lg, 1.125rem) !important; }
.osb-text-xl { font-size: var(--osb-text-xl, 1.25rem) !important; }

/* Text Color */
.osb-text-dark { color: var(--osb-text-dark, #222222) !important; }
.osb-text-main { color: var(--osb-text-main, #333333) !important; }
.osb-text-muted { color: var(--osb-text-muted, #666666) !important; }
.osb-text-light { color: var(--osb-text-light, #999999) !important; }
.osb-text-white { color: var(--osb-text-white, #ffffff) !important; }
.osb-text-primary { color: var(--osb-brand-primary, #26577C) !important; }
.osb-text-success { color: var(--osb-success, #10b981) !important; }
.osb-text-warning { color: var(--osb-warning, #f59e0b) !important; }
.osb-text-error { color: var(--osb-error, #ef4444) !important; }

/* Font Weight */
.osb-font-normal { font-weight: var(--osb-font-normal, 400) !important; }
.osb-font-medium { font-weight: var(--osb-font-medium, 500) !important; }
.osb-font-semibold { font-weight: var(--osb-font-semibold, 600) !important; }
.osb-font-bold { font-weight: var(--osb-font-bold, 700) !important; }

/* =========================================
   4. DISPLAY UTILITIES
   ========================================= */

.osb-hidden { display: none !important; }
.osb-block { display: block !important; }
.osb-inline { display: inline !important; }
.osb-inline-block { display: inline-block !important; }
.osb-flex { display: flex !important; }
.osb-inline-flex { display: inline-flex !important; }
.osb-grid { display: grid !important; }

/* =========================================
   5. FLEXBOX UTILITIES
   ========================================= */

/* Flex Direction */
.osb-flex-row { flex-direction: row !important; }
.osb-flex-col { flex-direction: column !important; }

/* Justify Content */
.osb-justify-start { justify-content: flex-start !important; }
.osb-justify-center { justify-content: center !important; }
.osb-justify-end { justify-content: flex-end !important; }
.osb-justify-between { justify-content: space-between !important; }

/* Align Items */
.osb-items-start { align-items: flex-start !important; }
.osb-items-center { align-items: center !important; }
.osb-items-end { align-items: flex-end !important; }

/* Gap */
.osb-gap-1 { gap: var(--osb-space-1, 4px) !important; }
.osb-gap-2 { gap: var(--osb-space-2, 8px) !important; }
.osb-gap-3 { gap: var(--osb-space-3, 12px) !important; }
.osb-gap-4 { gap: var(--osb-space-4, 16px) !important; }

/* =========================================
   6. WIDTH UTILITIES
   ========================================= */

.osb-w-full { width: 100% !important; }
.osb-w-auto { width: auto !important; }
.osb-max-w-full { max-width: 100% !important; }

/* =========================================
   7. BORDER UTILITIES
   ========================================= */

.osb-border { border: 1px solid var(--osb-border, #e2ddd5) !important; }
.osb-border-0 { border: none !important; }
.osb-border-t { border-top: 1px solid var(--osb-border, #e2ddd5) !important; }
.osb-border-b { border-bottom: 1px solid var(--osb-border, #e2ddd5) !important; }
.osb-border-dashed { border-style: dashed !important; }

.osb-rounded { border-radius: var(--osb-radius-md, 8px) !important; }
.osb-rounded-sm { border-radius: var(--osb-radius-sm, 4px) !important; }
.osb-rounded-lg { border-radius: var(--osb-radius-lg, 12px) !important; }
.osb-rounded-full { border-radius: var(--osb-radius-full, 9999px) !important; }

/* =========================================
   8. BACKGROUND UTILITIES
   ========================================= */

.osb-bg-white { background-color: var(--osb-surface, #ffffff) !important; }
.osb-bg-gray { background-color: var(--osb-surface-alt, #f8f6f2) !important; }
.osb-bg-primary { background-color: var(--osb-brand-primary, #26577C) !important; }
.osb-bg-primary-light { background-color: var(--osb-brand-primary-light, #e8f1f7) !important; }
.osb-bg-success-light { background-color: var(--osb-success-light, #d1fae5) !important; }
.osb-bg-warning-light { background-color: var(--osb-warning-light, #fef3c7) !important; }
.osb-bg-error-light { background-color: var(--osb-error-light, #fee2e2) !important; }

/* =========================================
   9. FORM SECTION (Booking Status Wrapper)
   ========================================= */

.osb-form-section {
    padding: var(--osb-space-4, 16px) 0;
    border-bottom: 1px dashed var(--osb-border, #e2ddd5);
    margin-bottom: var(--osb-space-4, 16px);
}

.osb-form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}