/* --- RUSTIC PARADISE THEME SYSTEM --- */
:root {
    --bg-color: #FDFBF7; /* Warm Cream */
    --card-bg: rgba(255, 255, 255, 0.7);
    --text-primary: #2C1810; /* Dark Espresso */
    --text-secondary: #8B5E3C; /* Muted Earth */
    --accent: #8B4513; /* SaddleBrown */
    --highlight: #D4A373; /* Gold/Tan */
    --glass-border: rgba(139, 69, 19, 0.1); 
    --safe-area-bottom: env(safe-area-inset-bottom);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    /* Removed padding-bottom since bottom nav is gone */
    position: relative;
}

/* Background Watermark */
.hero-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140%;
    height: auto;
    max-width: 1200px;
    opacity: 0.04;
    filter: blur(12px);
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

/* Utilities */
::-webkit-scrollbar { width: 0px; background: transparent; }
.hide-scroll::-webkit-scrollbar { display: none; }
.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }
.display-font { letter-spacing: -0.03em; line-height: 1.05; }

/* Animations */
.reveal-on-scroll { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-visible { opacity: 1; transform: translateY(0); }

/* Dynamic Nav - GLASSY UI */
.dynamic-nav {
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.6);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* Allow it to grow for mobile menu */
    flex-wrap: wrap; 
}

.nav-scrolled { 
    transform: scale(0.96); 
    background: rgba(255, 255, 255, 0.65);
    border-radius: 40px; 
    top: 15px; 
    box-shadow: 0 8px 32px 0 rgba(139, 69, 19, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

/* Logo Effects */
.logo-nav { mix-blend-mode: multiply; filter: contrast(1.1) brightness(1.05); }
.logo-footer { filter: brightness(0) invert(1) contrast(0.5) sepia(1) hue-rotate(10deg) saturate(2); }

/* Bento Grid */
.bento-card {
    background: var(--card-bg); backdrop-filter: blur(10px); border-radius: 24px;
    box-shadow: 0 4px 20px -5px rgba(139, 69, 19, 0.04);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
    overflow: hidden; border: 1px solid var(--glass-border);
}
.bento-card:hover { transform: translateY(-4px); box-shadow: 0 15px 35px -10px rgba(139, 69, 19, 0.1); }

/* --- FUN 3D CALENDAR ENGINE --- */

.glass-card-calendar {
    background: #FDFBF7;
    border: 4px solid #2C1810;
    box-shadow: 10px 10px 0px rgba(44, 24, 16, 0.2);
    border-radius: 20px;
    position: relative;
    z-index: 1;
    overflow: visible !important;
}

.calendar-grid { 
    display: grid; 
    grid-template-columns: repeat(7, 1fr); 
    gap: 8px; 
    padding: 10px;
    perspective: 1000px;
}

.calendar-day {
    aspect-ratio: 1; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    border-radius: 12px; 
    font-size: 1rem; 
    font-weight: 800;
    cursor: pointer; 
    position: relative;
    transition: all 0.1s cubic-bezier(0.34, 1.56, 0.64, 1);
    user-select: none;
    background: #F3E5DC;
    color: #8B5E3C;
    border: 2px solid #2C1810;
    box-shadow: 0px 4px 0px #2C1810;
}

.calendar-day.available { background: #FFF; color: #2C1810; }
.calendar-day.available:hover { transform: translateY(-2px) scale(1.1) rotate(0deg) !important; box-shadow: 0px 8px 0px #2C1810; z-index: 10; }
.calendar-day.available:hover::after { content: "Pick me!"; position: absolute; top: -25px; background: #2C1810; color: #D4A373; font-size: 8px; padding: 2px 6px; border-radius: 4px; white-space: nowrap; animation: bounceSoft 0.5s infinite; }
.calendar-day.available:active { transform: translateY(4px) !important; box-shadow: 0px 0px 0px #2C1810; }

/* --- RED BOOKED UPDATE --- */
.calendar-day.booked, 
.calendar-day.disabled {
    background: #DC2626 !important; /* DISTINCT RED */
    color: white !important;
    border-color: #991B1B !important;
    box-shadow: none;
    opacity: 1;
    cursor: not-allowed;
    pointer-events: auto;
    /* Striped texture for fun */
    background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,0.15) 5px, rgba(255,255,255,0.15) 10px);
}

.calendar-day.booked:hover { transform: rotate(5deg) !important; }
.calendar-day.booked:hover::after { content: "Taken!"; position: absolute; bottom: -20px; background: #2C1810; color: white; font-size: 8px; padding: 2px 4px; border-radius: 4px; font-weight: bold; z-index: 20; }

.calendar-day.selected,
.calendar-day.range-start,
.calendar-day.range-end { background: #D4A373; color: #2C1810; border-color: #2C1810; box-shadow: 0px 2px 0px #2C1810; transform: translateY(2px) !important; }

.calendar-day.in-range { background: #F9Ece4; color: #2C1810; border: 2px dashed #D4A373; box-shadow: none; border-radius: 4px; transform: scale(0.9); }
.calendar-day.today::before { content: "TODAY"; position: absolute; top: -8px; font-size: 6px; background: #2C1810; color: white; padding: 1px 4px; border-radius: 4px; }

.calendar-day.user-booked { background: #22c55e !important; color: white !important; box-shadow: 0px 4px 0px #14532d; border-color: #14532d; }
.calendar-day.user-booked:hover::after { content: "Yours!"; background: #14532d; bottom: -20px; position:absolute; font-size:9px; color:white; padding:2px; border-radius:4px;}


/* --- NEW MOBILE NAV (IN TOP BAR) --- */

/* The Cool Button */
.menu-toggle-btn {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: #2C1810;
    color: #D4A373;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 10px rgba(44, 24, 16, 0.2);
}
.menu-toggle-btn:active { transform: scale(0.9); }
.menu-toggle-btn.active { background: #D4A373; color: #2C1810; transform: rotate(180deg); }

/* The Dropdown Container (Inside Top Nav) */
.mobile-menu-dropdown {
    width: 100%;
    overflow: hidden;
    max-height: 0; /* Hidden by default */
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* When Open */
.mobile-menu-dropdown.open {
    max-height: 300px; /* Adjust as needed */
    opacity: 1;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed rgba(139, 69, 19, 0.2);
}

/* Menu Items */
.mobile-menu-item {
    background: rgba(255,255,255,0.6);
    padding: 12px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #2C1810;
    font-weight: 700;
    font-size: 0.9rem;
    transition: transform 0.2s ease;
    border: 1px solid rgba(255,255,255,0.4);
}
.mobile-menu-item:hover { background: #FFF; transform: translateX(5px); }
.mobile-menu-item i { width: 24px; text-align: center; color: #8B4513; }
.mobile-menu-item.highlight-item { background: #2C1810; color: #D4A373; border: none; box-shadow: 0 4px 12px rgba(44,24,16,0.2); justify-content: center; }
.mobile-menu-item.highlight-item i { color: #D4A373; }

/* Forms */
.dark-input {
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1);
    color: white; border-radius: 12px; padding: 12px; width: 100%; font-size: 0.9rem; outline: none; transition: all 0.3s;
}
.dark-input:focus { background: rgba(255, 255, 255, 0.15); border-color: #D4A373; }
.dark-input::placeholder { color: rgba(255, 255, 255, 0.4); }

.clean-card-details {
    background: #2C1810; border-radius: 32px; position: relative; overflow: hidden;
    box-shadow: 0 20px 40px rgba(44, 24, 16, 0.2);
}

.instruction-pill {
    background: #F3E5DC; color: #8B4513; font-size: 10px; font-weight: 800;
    padding: 4px 12px; border-radius: 100px; text-transform: uppercase; letter-spacing: 1px;
    display: inline-block; margin-bottom: 10px; animation: bounceSoft 2s infinite;
}
@keyframes bounceSoft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.reviews-scroll-container { 
    overflow-x: auto; display: flex; gap: 24px; padding: 20px 40px;
    scroll-behavior: smooth; -webkit-overflow-scrolling: touch; cursor: grab;
}
.reviews-scroll-container:active { cursor: grabbing; }
.reviews-scroll-container::-webkit-scrollbar { display: none; }

.lightbox { 
    opacity: 0; pointer-events: none; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(44, 24, 16, 0.98); backdrop-filter: blur(15px);
}
.lightbox.active { opacity: 1; pointer-events: auto; }

.btn-bounce:active { transform: scale(0.94); }

@keyframes peekIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
.peek-anim { animation: peekIn 0.25s ease-out; }

.cool-banner {
    background: linear-gradient(90deg, #2C1810 0%, #8B4513 50%, #2C1810 100%);
    background-size: 200% 200%;
    animation: gradientMove 10s ease infinite;
    border-bottom: 1px solid rgba(212, 163, 115, 0.3);
    box-shadow: 0 4px 20px rgba(139, 69, 19, 0.2);
}
@keyframes gradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

.animate-spin-slow { animation: spin 8s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Make icon and text glow and blink AI Concierge*/
.ai-badge i, .ai-badge { animation: blink-glow 3s infinite; }
@keyframes blink-glow { 0%, 100% { text-shadow: 0 0 5px red, 0 0 10px red, 0 0 15px red; color: #8B4513; } 50% { text-shadow: 0 0 15px red, 0 0 25px red, 0 0 35px red; color: #FF4500; } }