:root {
    --primary: #3b82f6;
    --primary-light: #dbeafe;
    --bg-surface: #ffffff;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --border: #f1f5f9;
    --gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    --radius-xl: 32px;
}

/* Theme Classes */
.theme-blue {
    --primary: #3b82f6;
    --primary-light: #dbeafe;
    --gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}
.theme-gold {
    --primary: #b45309;
    --primary-light: #fef3c7;
    --gradient: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
}
.theme-emerald {
    --primary: #059669;
    --primary-light: #d1fae5;
    --gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Plus Jakarta Sans', sans-serif; background: #fafafa; color: var(--text-main); line-height: 1.6; }

.container { max-width: 1240px; margin: 0 auto; padding: 0 2rem; }
.text-gradient { background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }


.theme-picker { position: fixed; right: 20px; bottom: 20px; z-index: 2000; }

.picker-toggle { background: var(--primary); color: white; border: none; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }

.picker-menu { position: absolute; bottom: 65px; right: 0; background: white; padding: 15px; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.15); display: none; min-width: 180px; }

.picker-menu.active { display: block; }

.theme-options { display: flex; gap: 10px; margin-top: 10px; }

.theme-dot { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; }

.theme-dot:hover { transform: scale(1.1); }

.dot-blue { background: #3b82f6; }

.dot-gold { background: #f59e0b; }

.dot-emerald { background: #10b981; }

.navbar { position: fixed; top: 0; width: 100%; height: 90px; background: rgba(255,255,255,0.8); backdrop-filter: blur(20px); z-index: 1000; display: flex; align-items: center; border-bottom: 1px solid var(--border); }

.nav-container { width: 100%; display: flex; justify-content: space-between; align-items: center; }

.logo { display: flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 800; font-size: 1.5rem; }

.logo-icon { background: var(--gradient); color: white; padding: 8px; border-radius: 12px; }

.nav-links { display: flex; align-items: center; gap: 1.5rem; }

.nav-links button:not(.btn-primary) {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 12px;
    transition: 0.3s;
    font-family: inherit;
}

.nav-links button:not(.btn-primary):hover {
    color: var(--primary);
    background: var(--primary-light);
}

.hero { padding: 180px 0 100px; overflow: hidden; }

.hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 4rem; align-items: center; }
.badge { display: inline-flex; align-items: center; gap: 8px; background: var(--primary-light); color: var(--primary); padding: 8px 16px; border-radius: 99px; font-weight: 700; font-size: 0.85rem; margin-bottom: 2rem; }

.hero h1 { font-size: 4.5rem; line-height: 1; font-weight: 800; margin-bottom: 1.5rem; letter-spacing: -2px; }

.hero-btns { display: flex; gap: 1rem; margin-top: 3rem; }

/* Global Button Styles */
button { font-family: inherit; }

.btn-main, .btn-primary, .btn-submit, .btn-apply { 
    background: var(--gradient) !important; 
    color: white !important; 
    border: none !important; 
    padding: 16px 32px; 
    border-radius: 18px; 
    font-weight: 700; 
    cursor: pointer; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    gap: 10px; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    text-decoration: none;
}

.btn-main:hover, .btn-primary:hover, .btn-submit:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 8px 24px rgba(0,0,0,0.2); 
    filter: brightness(1.1);
}

.btn-main:active { transform: translateY(-1px); }

.btn-secondary { 
    background: white !important; 
    color: var(--text-main) !important;
    border: 2px solid var(--border) 


    !important; 
    padding: 16px 32px; 
    border-radius: 18px; 
    font-weight: 700; 
    cursor: pointer; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    font-size: 1rem;
}

.btn-secondary:hover { 
    background: #f8fafc !important; 
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

.packages { padding: 120px 0; background: #fff; }

.section-header { text-align: center; margin-bottom: 4rem; }

.tab-container { background: #f1f5f9; padding: 8px; border-radius: 20px; display: inline-flex; margin-top: 2rem; }

.tab-btn { padding: 12px 28px; border: none; background: transparent; font-weight: 700; border-radius: 14px; cursor: pointer; color: var(--text-muted); transition: 0.3s; }

.tab-btn.active { background: white; color: var(--primary); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }

.package-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 2.5rem; }

.package-card { background: #fcfcfc; border: 1px solid var(--border); padding: 3rem; border-radius: var(--radius-xl); transition: 0.4s; }

.package-card:hover { transform: translateY(-10px); background: #fff; border-color: var(--primary); box-shadow: 0 30px 60px rgba(0,0,0,0.05); }

.price { font-size: 3.5rem; font-weight: 800; margin: 1.5rem 0; }

/* Forms & Booking */

.booking { padding: 140px 0; background: #0f172a; color: white; }

.booking-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }

.info-stack { display: flex; gap: 1rem; margin-top: 2rem; }

.info-tag { background: rgba(255,255,255,0.05); padding: 10px 20px; border-radius: 12px; font-weight: 600; font-size: 0.85rem; display: flex; align-items: center; gap: 8px; }

.booking-card { background: white; color: var(--text-main); padding: 3.5rem; border-radius: var(--radius-xl); }

.form-group { margin-bottom: 1.5rem; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }

input, select { 
    width: 100%; 
    padding: 16px 20px; 
    border-radius: 14px; 
    border: 2px solid var(--border); 
    font-family: inherit; 
    font-size: 1rem; 
    outline: none; 
    transition: 0.3s; 
    background: white;
}
input:focus, select:focus { border-color: var(--primary); }

.coupon-section { background: #f8fafc; padding: 24px; border-radius: 20px; margin: 2rem 0; }

.view-coupons-btn {
    background: none;
    border: none;
    color: var(--primary);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: underline;
}

@media (max-width: 900px) {
    .hero-grid, .booking-grid { grid-template-columns: 1fr; text-align: center; }
    .hero h1 { font-size: 3rem; }
    .hero-btns { justify-content: center; }
    .hero-visual { order: -1; }
}


update {
     background-color: #f8fafc;
    color: #0f172a;
    padding: 20px;
    border-radius: 10px;
    margin: 20px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1).
}

.update-1 {
    /* Dimensions - Slightly smaller vertical profile */
    width: 400px;
    height: 225px;
    padding: 30px 25px;
    margin: 20px auto;
    
    /* Layout & Shape */
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 35px; /* Smooth "circle outline" edges */
    overflow: hidden;
    box-sizing: border-box;
    align-items: center;
    text-align: center;
    
    /* Aesthetic */
    background: #1c2128;
    color: #ffffff;
    font-family: sans-serif;
    border: 2px solid #ff0044;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 
                0 0 15px rgba(255, 0, 68, 0.3);
    
    transition: transform 0.3s ease;
  }

  .update-1:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 
                0 0 25px rgba(255, 0, 68, 0.5);
  }

  /* Text Elements */
  .update-1 .date {
    color: #ff0044;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 15px;
  }

  .update-1 h2 {
    font-size: 24px;
    line-height: 1.1;
    margin: 0 0 15px 0;
    font-weight: 800;
  }

  .update-1 p {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    z-index: 2;
  }

  /* Watermark Icon */
  .update-1 .mobile-icon {
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 130px;
    opacity: 0.12;
    transform: rotate(-15deg);
    z-index: 1;
    pointer-events: none;
  }


  .date-booking{margin-top:18px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .date-booking label{font-weight:600;margin-right:4px}
  .date-booking input[type="date"], .date-booking input[type="time"]{padding:8px;border-radius:6px;border:1px solid rgba(0,0,0,0.12)}
  #reserve-btn{padding:8px 12px;border-radius:8px;border:none;cursor:pointer;background:#2563eb;color:#fff}
  .reserve-msg{margin-left:6px;font-size:0.95rem;color:green}
  @media (max-width:720px){.date-booking{width:100%;gap:6px}}

  
  /* Small responsive & iOS-friendly adjustments */
        html,body{ -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; }
        button,input,select,textarea{ -webkit-tap-highlight-color: transparent; -webkit-appearance: none; font-size:16px }
        input[type="date"], input[type="time"]{ -webkit-appearance:textfield }
        .date-booking{margin-top:18px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
        .date-booking label{font-weight:600;margin-right:4px}
        .date-booking input[type="date"], .date-booking input[type="time"]{padding:8px;border-radius:6px;border:1px solid rgba(0,0,0,0.12)}
        #reserve-btn{padding:8px 12px;border-radius:8px;border:none;cursor:pointer;background:#2563eb;color:#fff}
        .reserve-msg{margin-left:6px;font-size:0.95rem;color:green}

        /* Mobile nav / hamburger */
        .nav-toggle{display:none;background:transparent;border:none;padding:8px;border-radius:6px;cursor:pointer}
        .nav-toggle i{display:inline-flex}
        @media (max-width:899px){
            .nav-links{display:none;position:fixed;top:64px;right:12px;background:var(--card-bg,#fff);backdrop-filter:blur(6px);box-shadow:0 6px 18px rgba(0,0,0,0.12);padding:16px;border-radius:10px;flex-direction:column;gap:8px;z-index:60}
            .nav-links button{width:180px;text-align:left}
            .nav-container{position:relative}
            .nav-toggle{display:inline-flex;align-items:center}
            .nav-links.open{display:flex}
            body.nav-open{overflow:hidden}
        }

        /* Layout tweaks: preserve desktop, stack on mobile */
        @media (min-width: 900px){
            .booking-grid{display:grid;grid-template-columns:1fr 380px;gap:28px;align-items:start}
            .date-booking input[type="date"], .date-booking input[type="time"]{min-width:150px}
        }
        @media (max-width: 899px){
            .booking-grid{display:block}
            .booking-card{margin-top:18px}
            .date-booking{width:100%;justify-content:flex-start}
            .date-booking input[type="date"], .date-booking input[type="time"]{flex:1;min-width:120px}
        }

        /* Hero: ensure text wraps and scales nicely on small screens */
        .hero .hero-grid{display:flex;gap:20px;align-items:center}
        .hero .hero-content{flex:1;min-width:0}
        .hero h1{font-size:clamp(1.6rem, 6vw, 3.2rem);line-height:1.05;margin:0 0 12px;white-space:normal;overflow-wrap:break-word}
        .hero p{font-size:clamp(0.95rem, 2.5vw, 1.05rem)}
        .hero-visual{flex:0 0 420px;display:flex;justify-content:center}
        .hero-visual img{max-width:100%;height:auto;border-radius:10px;display:block}

        @media (max-width:899px){
            .hero .hero-grid{flex-direction:column;align-items:flex-start}
            .hero-visual{width:100%;flex:auto;margin-top:14px}
            .hero-visual img{width:100%;height:auto}
            .hero h1{font-size:clamp(1.4rem, 7vw, 2.2rem)}
        }

        /* Center the updates message */
        .update-container .update-1, .update-container .update-1 h4{display:flex;align-items:center;justify-content:center;text-align:center}

        .theme-options {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-top: 12px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 8px;
}

.theme-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.theme-dot:hover {
    transform: scale(1.15);
    border-color: #333;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* FIXED MOBILE NAVIGATION */
.nav-links {
    display: none; /* Hidden by default on mobile */
    align-items: center;
    gap: 1.5rem;
}

.nav-links.open {
    display: flex;
    position: fixed;
    top: 90px;
    right: 0;
    flex-direction: column;
    background: white;
    min-width: 220px;
    padding: 20px;
    border-radius: 0 0 0 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    z-index: 999;
    gap: 12px;
}

.nav-toggle {
    display: none;
    background: transparent;
    border: none;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
}

.nav-toggle i {
    display: inline-flex;
}

.nav-toggle.open i {
    transform: rotate(90deg);
    transition: transform 0.3s ease;
}

/* MOBILE BREAKPOINT - Show hamburger, hide nav-links */
@media (max-width: 899px) {
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    .nav-links {
        display: none !important;
    }
    
    .nav-links.open {
        display: flex !important;
    }
}

/* DESKTOP BREAKPOINT - Hide hamburger, show nav-links */
@media (min-width: 900px) {
    .nav-toggle {
        display: none !important;
    }
    
    .nav-links {
        display: flex !important;
    }
    
    .nav-links.open {
        position: static;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        flex-direction: row;
        min-width: auto;
        top: auto;
        right: auto;
    }
}

:root {
    --primary: #ec4899;
    --primary-light: #fce7f3;
    --bg-surface: #ffffff;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --border: #f1f5f9;
    --gradient: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
    --radius-xl: 32px;
}

/* IMPORTANT: Remove all hardcoded color theme classes and use CSS variables instead */

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Plus Jakarta Sans', sans-serif; background: #fafafa; color: var(--text-main); line-height: 1.6; }

.container { max-width: 1240px; margin: 0 auto; padding: 0 2rem; }
.text-gradient { background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* ── THEME PICKER ────────────────────────────────────────────────────────── */
.theme-picker { position: fixed; right: 20px; bottom: 20px; z-index: 2000; }

.picker-toggle { 
    background: var(--gradient);
    color: white; 
    border: none; 
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); 
    transition: all 0.3s ease;
}

.picker-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

.picker-menu { 
    position: absolute; 
    bottom: 65px; 
    right: 0; 
    background: white; 
    padding: 15px; 
    border-radius: 20px; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.15); 
    display: none; 
    min-width: 280px; 
}

.picker-menu.active { display: block; }

.theme-options {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    max-height: 350px;
    overflow-y: auto;
    padding: 8px 4px 8px 0;
}

.theme-options::-webkit-scrollbar {
    width: 6px;
}

.theme-options::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}

.theme-options::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 10px;
}

.theme-dot { 
    width: 36px; 
    height: 36px; 
    border-radius: 50%; 
    cursor: pointer; 
    border: 3px solid transparent;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.theme-dot:hover { 
    transform: scale(1.2) translateY(-4px);
    border-color: #0f172a;
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

/* ── NAVBAR ────────────────────────────────────────────────────────────── */
.navbar { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    height: 90px; 
    background: rgba(255,255,255,0.8); 
    backdrop-filter: blur(20px); 
    z-index: 1000; 
    display: flex; 
    align-items: center; 
    border-bottom: 1px solid var(--border); 
}

.nav-container { 
    width: 100%; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.logo { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    cursor: pointer; 
    font-weight: 800; 
    font-size: 1.5rem; 
}

.logo-icon { 
    background: var(--gradient); 
    color: white; 
    padding: 8px; 
    border-radius: 12px; 
}

.nav-links {
    display: none;
    align-items: center;
    gap: 1.5rem;
}

.nav-links.open {
    display: flex;
    position: fixed;
    top: 90px;
    right: 0;
    flex-direction: column;
    background: white;
    min-width: 220px;
    padding: 20px;
    border-radius: 0 0 0 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    z-index: 999;
    gap: 12px;
}

.nav-links button:not(.btn-primary) {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 12px;
    transition: 0.3s;
    font-family: inherit;
}

.nav-links button:not(.btn-primary):hover {
    color: var(--primary);
    background: var(--primary-light);
}

.nav-toggle {
    display: none;
    background: transparent;
    border: none;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--primary);
}

/* ── HERO SECTION ────────────────────────────────────────────────────────── */
.hero { 
    padding: 180px 0 100px; 
    overflow: hidden; 
}

.hero-grid { 
    display: grid; 
    grid-template-columns: 1.2fr 1fr; 
    gap: 4rem; 
    align-items: center; 
}

.badge { 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    background: var(--primary-light); 
    color: var(--primary); 
    padding: 8px 16px; 
    border-radius: 99px; 
    font-weight: 700; 
    font-size: 0.85rem; 
    margin-bottom: 2rem; 
}

.hero h1 { 
    font-size: 4.5rem; 
    line-height: 1; 
    font-weight: 800; 
    margin-bottom: 1.5rem; 
    letter-spacing: -2px; 
}

.hero-btns { 
    display: flex; 
    gap: 1rem; 
    margin-top: 3rem; 
}

/* ── BUTTONS ────────────────────────────────────────────────────────────── */
button { font-family: inherit; }

.btn-main, .btn-primary, .btn-submit, .btn-apply { 
    background: var(--gradient) !important; 
    color: white !important; 
    border: none !important; 
    padding: 16px 32px; 
    border-radius: 18px; 
    font-weight: 700; 
    cursor: pointer; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    gap: 10px; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    text-decoration: none;
}

.btn-main:hover, .btn-primary:hover, .btn-submit:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 8px 24px rgba(0,0,0,0.2); 
    filter: brightness(1.1);
}

.btn-main:active { 
    transform: translateY(-1px); 
}

.btn-secondary { 
    background: white !important; 
    color: var(--text-main) !important;
    border: 2px solid var(--border) !important; 
    padding: 16px 32px; 
    border-radius: 18px; 
    font-weight: 700; 
    cursor: pointer; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    font-size: 1rem;
}

.btn-secondary:hover { 
    background: #f8fafc !important; 
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

.btn-apply-color {
    background: var(--gradient) !important;
    color: white !important;
    border: none !important;
    padding: 12px 20px !important;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.btn-apply-color:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* ── PACKAGES SECTION ────────────────────────────────────────────────────── */
.packages { 
    padding: 120px 0; 
    background: #fff; 
}

.section-header { 
    text-align: center; 
    margin-bottom: 4rem; 
}

.tab-container { 
    background: #f1f5f9; 
    padding: 8px; 
    border-radius: 20px; 
    display: inline-flex; 
    margin-top: 2rem; 
}

.tab-btn { 
    padding: 12px 28px; 
    border: none; 
    background: transparent; 
    font-weight: 700; 
    border-radius: 14px; 
    cursor: pointer; 
    color: var(--text-muted); 
    transition: 0.3s; 
}

.tab-btn.active { 
    background: white; 
    color: var(--primary); 
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); 
}

.package-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); 
    gap: 2.5rem; 
}

.package-card { 
    background: #fcfcfc; 
    border: 1px solid var(--border); 
    padding: 3rem; 
    border-radius: var(--radius-xl); 
    transition: 0.4s; 
}

.package-card:hover { 
    transform: translateY(-10px); 
    background: #fff; 
    border-color: var(--primary); 
    box-shadow: 0 30px 60px rgba(0,0,0,0.05); 
}

.price { 
    font-size: 3.5rem; 
    font-weight: 800; 
    margin: 1.5rem 0; 
    color: var(--primary);
}

/* ── BOOKING SECTION ────────────────────────────────────────────────────── */
.booking { 
    padding: 140px 0; 
    background: #0f172a; 
    color: white; 
}

.booking-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 6rem; 
    align-items: center; 
}

.info-stack { 
    display: flex; 
    gap: 1rem; 
    margin-top: 2rem; 
}

.info-tag { 
    background: rgba(255,255,255,0.05); 
    padding: 10px 20px; 
    border-radius: 12px; 
    font-weight: 600; 
    font-size: 0.85rem; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}

.booking-card { 
    background: white; 
    color: var(--text-main); 
    padding: 3.5rem; 
    border-radius: var(--radius-xl); 
}

.form-group { 
    margin-bottom: 1.5rem; 
}

.form-row { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 1rem; 
    margin-bottom: 1rem; 
}

input, select { 
    width: 100%; 
    padding: 16px 20px; 
    border-radius: 14px; 
    border: 2px solid var(--border); 
    font-family: inherit; 
    font-size: 1rem; 
    outline: none; 
    transition: 0.3s; 
    background: white;
}

input:focus, select:focus { 
    border-color: var(--primary); 
}

.coupon-section { 
    background: #f8fafc; 
    padding: 24px; 
    border-radius: 20px; 
    margin: 2rem 0; 
}

.view-coupons-btn {
    background: none;
    border: none;
    color: var(--primary);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: underline;
}

/* ── CUSTOM COLOR PICKER ────────────────────────────────────────────────── */
.custom-color-section {
    margin-bottom: 16px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 16px;
    border: 1px solid var(--border);
}

.custom-color-section label {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.custom-color-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

#custom-color-input {
    width: 50px;
    height: 50px;
    padding: 4px;
    border: 2px solid var(--primary);
    border-radius: 12px;
    cursor: pointer;
    flex-shrink: 0;
}

#custom-color-text {
    flex: 1;
    padding: 12px !important;
    border: 2px solid var(--border) !important;
    border-radius: 12px;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
}

#custom-color-text:focus {
    border-color: var(--primary) !important;
    background: white !important;
}

.picker-divider {
    height: 1px;
    border: none;
    background: var(--border);
    margin: 12px 0;
}

.picker-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

/* ── UPDATES SECTION ────────────────────────────────────────────────────── */
.updates-section {
    padding: 120px 0;
    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    position: relative;
    overflow: hidden;
}

.updates-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 6s ease-in-out infinite;
    z-index: 0;
}

.updates-section::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 8s ease-in-out infinite reverse;
    z-index: 0;
}

.update-container {
    margin: 60px auto;
    max-width: 700px;
    position: relative;
    z-index: 1;
}

.update-card {
    perspective: 1200px;
    cursor: pointer;
}

.update-card-inner {
    background: white;
    border-radius: 28px;
    padding: 50px 40px;
    text-align: center;
    border: 2px solid var(--primary);
    box-shadow: 
        0 0 30px rgba(236, 72, 153, 0.15),
        0 20px 60px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    *

/* ANIMATED UPDATES SECTION */
.updates-section {
    padding: 120px 0;
    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    position: relative;
    overflow: hidden;
}

.updates-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 6s ease-in-out infinite;
    z-index: 0;
}

.updates-section::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 8s ease-in-out infinite reverse;
    z-index: 0;
}

.update-container {
    margin: 60px auto;
    max-width: 700px;
    position: relative;
    z-index: 1;
}

.update-card {
    perspective: 1200px;
    cursor: pointer;
}

.update-card-inner {
    background: white;
    border-radius: 28px;
    padding: 50px 40px;
    text-align: center;
    border: 2px solid var(--primary);
    box-shadow: 
        0 0 30px rgba(236, 72, 153, 0.15),
        0 20px 60px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.update-card:hover .update-card-inner {
    transform: translateY(-8px);
    box-shadow: 
        0 0 40px rgba(236, 72, 153, 0.25),
        0 30px 80px rgba(0, 0, 0, 0.12);
    border-color: var(--primary);
}

/* Shimmer background effect */
.update-card-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: shimmer 3s infinite;
    pointer-events: none;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.update-icon {
    font-size: 3.5rem;
    margin-bottom: 20px;
    display: inline-block;
    animation: bounce 2s ease-in-out infinite;
}

.update-icon i {
    color: var(--primary);
    display: inline-block;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.update-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.update-date {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.update-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary) 0%, rgba(236, 72, 153, 0.8) 100%);
    color: white;
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 0.95rem;
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(236, 72, 153, 0.3);
    animation: pulse-glow 2s ease-in-out infinite;
}

.badge-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: shine 1.5s infinite;
}

@keyframes shine {
    0% { left: -100%; }
    100% { left: 100%; }
}

@keyframes pulse-glow {
    0%, 100% { 
        box-shadow: 0 8px 20px rgba(236, 72, 153, 0.3);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 12px 30px rgba(236, 72, 153, 0.5);
        transform: scale(1.02);
    }
}

.update-description {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 30px;
    letter-spacing: 0.3px;
}

.update-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    margin-top: 30px;
}

.feature-tag {
    background: var(--primary-light);
    color: var(--primary);
    padding: 12px 16px;
    border-radius: 16px;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.feature-tag:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(236, 72, 153, 0.3);
}

.feature-tag i {
    font-size: 1.1rem;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-30px); }
}

/* Stagger animation for entry */
.update-card {
    animation: slideInUp 0.8s ease-out 0.2s backwards;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .updates-section {
        padding: 80px 0;
    }
    
    .update-card-inner {
        padding: 35px 25px;
        border-radius: 20px;
    }
    
    .update-icon {
        font-size: 2.5rem;
    }
    
    .update-title {
        font-size: 1.4rem;
    }
    
    .update-features {
        grid-template-columns: 1fr;
    }
    
    .updates-section::before,
    .updates-section::after {
        width: 300px;
        height: 300px;
    }
}

/* ── FORCE COLOR CHANGES (Add this at the BOTTOM of style.css) ──────────────── */

/* Override all theme classes to ensure colors apply */
.theme-blue, .theme-blue * { --primary: #3b82f6 !important; --primary-light: #dbeafe !important; --gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important; }
.theme-gold, .theme-gold * { --primary: #b45309 !important; --primary-light: #fef3c7 !important; --gradient: linear-gradient(135deg, #f59e0b 0%, #b45309 100%) !important; }
.theme-emerald, .theme-emerald * { --primary: #059669 !important; --primary-light: #d1fae5 !important; --gradient: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; }
.theme-pink, .theme-pink * { --primary: #ec4899 !important; --primary-light: #fce7f3 !important; --gradient: linear-gradient(135deg, #ec4899 0%, #be185d 100%) !important; }
.theme-rose, .theme-rose * { --primary: #f43f5e !important; --primary-light: #ffe4e6 !important; --gradient: linear-gradient(135deg, #f43f5e 0%, #be185d 100%) !important; }
.theme-pink-light, .theme-pink-light * { --primary: #f472b6 !important; --primary-light: #fbcfe8 !important; --gradient: linear-gradient(135deg, #f472b6 0%, #ec4899 100%) !important; }
.theme-pink-hot, .theme-pink-hot * { --primary: #ff1493 !important; --primary-light: #ffe4f0 !important; --gradient: linear-gradient(135deg, #ff1493 0%, #db0075 100%) !important; }
.theme-pink-magenta, .theme-pink-magenta * { --primary: #e91e8c !important; --primary-light: #ffc0e0 !important; --gradient: linear-gradient(135deg, #e91e8c 0%, #b7015f 100%) !important; }
.theme-fuchsia, .theme-fuchsia * { --primary: #d946ef !important; --primary-light: #fae8ff !important; --gradient: linear-gradient(135deg, #d946ef 0%, #a21caf 100%) !important; }
.theme-fuchsia-light, .theme-fuchsia-light * { --primary: #e879f9 !important; --primary-light: #faf5ff !important; --gradient: linear-gradient(135deg, #e879f9 0%, #d946ef 100%) !important; }
.theme-violet, .theme-violet * { --primary: #a855f7 !important; --primary-light: #ede9fe !important; --gradient: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%) !important; }
.theme-violet-light, .theme-violet-light * { --primary: #c084fc !important; --primary-light: #f3e8ff !important; --gradient: linear-gradient(135deg, #c084fc 0%, #a855f7 100%) !important; }
.theme-purple, .theme-purple * { --primary: #9333ea !important; --primary-light: #f3e8ff !important; --gradient: linear-gradient(135deg, #9333ea 0%, #6d28d9 100%) !important; }
.theme-purple-light, .theme-purple-light * { --primary: #b78edb !important; --primary-light: #faf5ff !important; --gradient: linear-gradient(135deg, #b78edb 0%, #9333ea 100%) !important; }
.theme-indigo, .theme-indigo * { --primary: #6366f1 !important; --primary-light: #e0e7ff !important; --gradient: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important; }
.theme-indigo-light, .theme-indigo-light * { --primary: #818cf8 !important; --primary-light: #f0f4ff !important; --gradient: linear-gradient(135deg, #818cf8 0%, #6366f1 100%) !important; }
.theme-cyan, .theme-cyan * { --primary: #06b6d4 !important; --primary-light: #cffafe !important; --gradient: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important; }
.theme-cyan-light, .theme-cyan-light * { --primary: #22d3ee !important; --primary-light: #ecf9fc !important; --gradient: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%) !important; }
.theme-teal, .theme-teal * { --primary: #14b8a6 !important; --primary-light: #ccfbf1 !important; --gradient: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important; }
.theme-teal-light, .theme-teal-light * { --primary: #2dd4bf !important; --primary-light: #e0f2f1 !important; --gradient: linear-gradient(135deg, #2dd4bf 0%, #14b8a6 100%) !important; }
.theme-green, .theme-green * { --primary: #16a34a !important; --primary-light: #dcfce7 !important; --gradient: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important; }
.theme-green-light, .theme-green-light * { --primary: #4ade80 !important; --primary-light: #f0fdf4 !important; --gradient: linear-gradient(135deg, #4ade80 0%, #22c55e 100%) !important; }
.theme-lime, .theme-lime * { --primary: #84cc16 !important; --primary-light: #f7fee7 !important; --gradient: linear-gradient(135deg, #84cc16 0%, #65a30d 100%) !important; }
.theme-yellow, .theme-yellow * { --primary: #facc15 !important; --primary-light: #fefce8 !important; --gradient: linear-gradient(135deg, #facc15 0%, #eab308 100%) !important; }
.theme-amber, .theme-amber * { --primary: #f59e0b !important; --primary-light: #fef3c7 !important; --gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; }
.theme-orange, .theme-orange * { --primary: #f97316 !important; --primary-light: #ffedd5 !important; --gradient: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important; }
.theme-red, .theme-red * { --primary: #ef4444 !important; --primary-light: #fee2e2 !important; --gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; }
.theme-red-light, .theme-red-light * { --primary: #f87171 !important; --primary-light: #fee2e2 !important; --gradient: linear-gradient(135deg, #f87171 0%, #ef4444 100%) !important; }
.theme-pink-dark, .theme-pink-dark * { --primary: #9d174d !important; --primary-light: #fce7f3 !important; --gradient: linear-gradient(135deg, #9d174d 0%, #831843 100%) !important; }
.theme-pink-bubble, .theme-pink-bubble * { --primary: #ff69b4 !important; --primary-light: #ffe4f0 !important; --gradient: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%) !important; }
.theme-coral, .theme-coral * { --primary: #ff7f50 !important; --primary-light: #ffe4d6 !important; --gradient: linear-gradient(135deg, #ff7f50 0%, #ff6347 100%) !important; }
.theme-salmon, .theme-salmon * { --primary: #fa8072 !important; --primary-light: #ffe4d6 !important; --gradient: linear-gradient(135deg, #fa8072 0%, #ff6347 100%) !important; }
.theme-strawberry, .theme-strawberry * { --primary: #ff6b9d !important; --primary-light: #ffe4f0 !important; --gradient: linear-gradient(135deg, #ff6b9d 0%, #ff1493 100%) !important; }
.theme-cherry, .theme-cherry * { --primary: #d71e3f !important; --primary-light: #ffe4e6 !important; --gradient: linear-gradient(135deg, #d71e3f 0%, #a01528 100%) !important; }
.theme-wine, .theme-wine * { --primary: #722c46 !important; --primary-light: #fce7f3 !important; --gradient: linear-gradient(135deg, #722c46 0%, #4a1a2e 100%) !important; }
.theme-plum, .theme-plum * { --primary: #8b3a62 !important; --primary-light: #fae8ff !important; --gradient: linear-gradient(135deg, #8b3a62 0%, #5f1247 100%) !important; }
.theme-lavender, .theme-lavender * { --primary: #b19cd9 !important; --primary-light: #f3e8ff !important; --gradient: linear-gradient(135deg, #b19cd9 0%, #a855f7 100%) !important; }
.theme-orchid, .theme-orchid * { --primary: #da70d6 !important; --primary-light: #fae8ff !important; --gradient: linear-gradient(135deg, #da70d6 0%, #d946ef 100%) !important; }
.theme-magenta-dark, .theme-magenta-dark * { --primary: #c4006f !important; --primary-light: #ffe4f0 !important; --gradient: linear-gradient(135deg, #c4006f 0%, #8b0052 100%) !important; }
.theme-mauve, .theme-mauve * { --primary: #9370db !important; --primary-light: #f3e8ff !important; --gradient: linear-gradient(135deg, #9370db 0%, #7c3aed 100%) !important; }
.theme-slate, .theme-slate * { --primary: #64748b !important; --primary-light: #f1f5f9 !important; --gradient: linear-gradient(135deg, #64748b 0%, #475569 100%) !important; }
.theme-gray, .theme-gray * { --primary: #6b7280 !important; --primary-light: #f3f4f6 !important; --gradient: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important; }
.theme-zinc, .theme-zinc * { --primary: #71717a !important; --primary-light: #fafafa !important; --gradient: linear-gradient(135deg, #71717a 0%, #52525b 100%) !important; }
.theme-stone, .theme-stone * { --primary: #78716c !important; --primary-light: #fafaf9 !important; --gradient: linear-gradient(135deg, #78716c 0%, #57534e 100%) !important; }
.theme-neutral, .theme-neutral * { --primary: #737373 !important; --primary-light: #f5f5f5 !important; --gradient: linear-gradient(135deg, #737373 0%, #525252 100%) !important; }
.theme-ocean, .theme-ocean * { --primary: #0369a1 !important; --primary-light: #e0f2fe !important; --gradient: linear-gradient(135deg, #0369a1 0%, #075985 100%) !important; }
.theme-sky, .theme-sky * { --primary: #0284c7 !important; --primary-light: #e0f2fe !important; --gradient: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important; }
.theme-mint, .theme-mint * { --primary: #10b981 !important; --primary-light: #d1fae5 !important; --gradient: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; }
.theme-forest, .theme-forest * { --primary: #047857 !important; --primary-light: #d1fae5 !important; --gradient: linear-gradient(135deg, #047857 0%, #065f46 100%) !important; }
.theme-sage, .theme-sage * { --primary: #16a34a !important; --primary-light: #dcfce7 !important; --gradient: linear-gradient(135deg, #16a34a 0%, #166534 100%) !important; }
.theme-olive, .theme-olive * { --primary: #7c2d12 !important; --primary-light: #fed7aa !important; --gradient: linear-gradient(135deg, #7c2d12 0%, #431407 100%) !important; }
.theme-bronze, .theme-bronze * { --primary: #92400e !important; --primary-light: #fed7aa !important; --gradient: linear-gradient(135deg, #92400e 0%, #5a2d0c 100%) !important; }
.theme-copper, .theme-copper * { --primary: #b45309 !important; --primary-light: #fed7aa !important; --gradient: linear-gradient(135deg, #b45309 0%, #7c2d12 100%) !important; }
.theme-sunset, .theme-sunset * { --primary: #ea580c !important; --primary-light: #ffedd5 !important; --gradient: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important; }
.theme-fire, .theme-fire * { --primary: #dc2626 !important; --primary-light: #fee2e2 !important; --gradient: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important; }
.theme-crimson, .theme-crimson * { --primary: #be185d !important; --primary-light: #fce7f3 !important; --gradient: linear-gradient(135deg, #be185d 0%, #831843 100%) !important; }
.theme-scarlet, .theme-scarlet * { --primary: #c41e3a !important; --primary-light: #fee2e2 !important; --gradient: linear-gradient(135deg, #c41e3a 0%, #7f1d1d 100%) !important; }