/* ==========================================================================
   Base & CSS Variables (Luxury Forest Theme)
   ========================================================================== */
:root {
    --color-primary: #656042;        /* Deep Forest Green */
    --color-primary-light: #656042;  /* Shaded Emerald */
    --color-primary-ultra-light: #f1f5f3; /* Foggy Sage */
    --color-accent: #f6f0d3;         /* Luxury Gold */
    --color-accent-hover: #665f3f;   /* Antique Gold */
    --color-text-dark: #1e2d27;      /* Dark Greenish Charcoal */
    --color-text-light: #70847b;     /* Muted Sage */
    --color-background: #fbfaf7;     /* Soft Warm White */
    --color-card-bg: #ffffff;
    --color-border: #e0e6e3;
    --color-error: #c0392b;
    --color-success: #27ae60;    
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;    
    --transition-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-fast: all 0.2s ease;    
    --shadow-subtle: 0 4px 20px rgba(10, 34, 26, 0.05);
    --shadow-medium: 0 10px 30px rgba(10, 34, 26, 0.08);
    --shadow-luxury: 0 20px 40px rgba(10, 34, 26, 0.12);
}

* {    box-sizing: border-box;    margin: 0;    padding: 0;}
html {    scroll-behavior: smooth;    font-size: 16px;}
body {    font-family: var(--font-body);    background-color: var(--color-background);    color: var(--color-text-dark);    line-height: 1.6;    overflow-x: hidden;}

/* ==========================================================================
   Typography & Headers
   ========================================================================== */
h1, h2, h3, h4 {    font-family: var(--font-heading);    font-weight: 600;    line-height: 1.25;}
a {    color: inherit;    text-decoration: none !important;    transition: var(--transition-fast);}
/* ==========================================================================
   Navigation Bar (Sticky Glassmorphic)
   ========================================================================== */
.navbar {position: sticky;top: 0;z-index: 1000;background-color: rgba(10, 34, 26, 0.95);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);border-bottom: 1px solid rgba(212, 175, 55, 0.15);padding: 1.2rem 0;transition: var(--transition-smooth);}
.nav-container {max-width: 1200px;margin: 0 auto;padding: 0 2rem;display: flex;justify-content: space-between;align-items: center;}
.nav-brand {font-family: var(--font-heading);font-size: 1.6rem;font-weight: 700;color: #ffffff;letter-spacing: 1px;}
.nav-brand .accent {color: var(--color-accent);}
.nav-links {display: flex;align-items: center;gap: 2rem;}
.nav-links a {color: rgba(255, 255, 255, 0.8);font-size: 0.9rem;font-weight: 500;text-transform: uppercase;letter-spacing: 1px;}
.nav-links a:hover {color: var(--color-accent);}



/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero {    position: relative;    height: 70vh;    min-height: 500px;    display: flex;    flex-direction: column;    justify-content: center;    align-items: center;    text-align: center;    padding: 2rem;    background: linear-gradient(transparent, transparent), url(../assets/dining/banner.jpg) no-repeat center center / cover;    margin-top: 60px;}
.hero h1 {font-family: "gibstone";font-size: 37px;font-weight: 700;color: #f7efd0;margin-bottom: 1rem;letter-spacing: 1px;text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);}
.hero h1 span {color: #f7efd0;}
.hero p {font-size: 1.25rem;color: #fff;max-width: 600px;margin-bottom: 2rem;font-family: 'optima';letter-spacing: 0.5px;}
.hero-btn {background: var(--accent);color: var(--bg-dark);border: none;padding: 0.8rem 2rem;font-size: 1rem;font-weight: 600;border-radius: 30px;cursor: pointer;text-decoration: none;transition: var(--transition);box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);}
.hero-overlay {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: radial-gradient(circle, transparent 20%, var(--color-primary) 100%);opacity: 0.6;}
.hero-content {position: relative;z-index: 10;max-width: 800px;animation: fadeIn 1.2s ease-out;}
.hero-subtitle {font-size: 1rem;font-weight: 600;text-transform: uppercase;color: var(--color-accent);letter-spacing: 4px;display: inline-block;margin-bottom: 1rem;}
.hero-title {font-size: 3.8rem;margin-bottom: 1.5rem;letter-spacing: -0.5px;}
.hero-description {font-family: var(--font-body);font-size: 1.2rem;color: rgba(255, 255, 255, 0.85);margin-bottom: 2.5rem;font-weight: 300;}
.btn-primary {display: inline-block;background-color: var(--color-accent);color: var(--color-primary);padding: 1rem 2.5rem;font-weight: 600;font-size: 0.95rem;text-transform: uppercase;letter-spacing: 1px;border-radius: 4px;border: none;cursor: pointer;box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);transition: var(--transition-smooth);}
.btn-primary:hover {    background-color: #ffffff;    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4);    transform: translateY(-2px);}

/* ==========================================================================
   Experiences & Filtering
   ========================================================================== */
.main-container {max-width: 1200px;margin: 0 auto;padding: 5rem 2rem;}
.section-header {text-align: center;max-width: 700px;margin: 0 auto 3.5rem;}
.section-header h2 {font-size: 2.5rem;color: var(--color-primary);margin-bottom: 1rem;font-family: "gibstone";}
.section-divider {width: 60px;height: 3px;background-color: var(--color-accent);margin: 0 auto 1.5rem;}
.section-header p {color: var(--color-text-light);font-size: 1.1rem;font-family: 'optima';}
.filter-wrapper {display: flex;justify-content: center;margin-bottom: 4rem;}
.filter-tabs {display: flex;background-color: #ffffff;padding: 0.4rem;border-radius: 50px;box-shadow: var(--shadow-subtle);border: 1px solid var(--color-border);}
.filter-tab {background: none;border: none;padding: 0.8rem 1.8rem;font-family: var(--font-body);font-weight: 500;font-size: 0.9rem;color: var(--color-text-light);cursor: pointer;border-radius: 50px;transition: var(--transition-smooth);}
.filter-tab.active, .filter-tab:hover {background-color: var(--color-primary);color: #ffffff;}

/* ==========================================================================
Dining Cards Grid & Cards
========================================================================== */
.experiences-grid {display: grid;grid-template-columns: 1fr;gap: 4rem;}
.dining-card {background-color: var(--color-card-bg);border-radius: 12px;box-shadow: var(--shadow-medium);overflow: hidden;display: flex;flex-direction: column;border: 1px solid var(--color-border);transition: var(--transition-smooth);}
@media(min-width: 850px) {
.dining-card {flex-direction: row;min-height: 480px;}
.dining-card-image {width: 45%;flex-shrink: 0;}
.dining-card-content {width: 55%;}
}

.dining-card:hover {transform: translateY(-8px);box-shadow: var(--shadow-luxury);}
.dining-card-image {position: relative;overflow: hidden;min-height: 300px;background-color: var(--color-primary);}
.dining-card-image img {width: 100%;height: 100%;object-fit: cover;transition: var(--transition-smooth);}
.dining-card:hover .dining-card-image img {transform: scale(1.05);}
.dining-card-tag {position: absolute;top: 1.5rem;left: 1.5rem;background: rgba(10, 34, 26, 0.85);backdrop-filter: blur(5px);-webkit-backdrop-filter: blur(5px);border: 1px solid rgba(212, 175, 55, 0.4);color: var(--color-accent);padding: 0.4rem 1rem;border-radius: 4px;font-size: 0.8rem;font-weight: 600;text-transform: uppercase;letter-spacing: 1px;}
.fav-toggle-btn {position: absolute;top: 1.5rem;right: 1.5rem;background: rgba(255, 255, 255, 0.9);border: none;width: 40px;height: 40px;border-radius: 50%;cursor: pointer;display: flex;align-items: center;justify-content: center;box-shadow: 0 4px 10px rgba(0,0,0,0.1);transition: var(--transition-smooth);}
.fav-toggle-btn svg {width: 20px;height: 20px;fill: #bdc3c7;transition: var(--transition-fast);}
.fav-toggle-btn:hover {transform: scale(1.1);}
.fav-toggle-btn.active svg {fill: #e74c3c;}

/* Card Content Details */
.dining-card-content {padding: 2.5rem;display: flex;flex-direction: column;justify-content: center;}
.dining-card-content h3 {font-size: 2rem;color: var(--color-primary);margin-bottom: 0.3rem;font-family: "gibstone";}
.dining-card-tagline {font-family: var(--font-body);font-family: 'optima';color: var(--color-accent-hover);font-weight: 500;font-size: 1rem;margin-bottom: 1.2rem;}
.dining-card-desc {color: var(--color-text-light);margin-bottom: 1.5rem;font-size: 0.95rem;line-height: 1.7;font-family: 'optima';}

/* Inclusions Component */
.inclusions-container {margin-bottom: 2rem;}
.inclusions-title {font-family: 'optima';font-size: 0.85rem;text-transform: uppercase;letter-spacing: 1.5px;color: var(--color-primary);font-weight: 700;margin-bottom: 0.8rem;}
.inclusions-list {list-style: none;display: flex;flex-wrap: wrap;gap: 0.6rem;}
.inclusions-list li {background-color: var(--color-primary-ultra-light);color: var(--color-primary-light);font-size: 0.8rem;font-weight: 500;padding: 0.4rem 0.8rem;border-radius: 4px;border-left: 3px solid var(--color-accent);}

/* Interactive Calculator Component */
.calculator-box {background-color: #fcfcf9;border: 1px solid var(--color-border);border-radius: 8px;padding: 1.2rem;margin-top: 1rem;}
.calc-title {font-size: 0.9rem;font-weight: 700;font-family: 'optima';color: var(--color-primary);margin-bottom: 0.8rem;display: flex;justify-content: space-between;}
.calc-selector {display: flex;flex-direction: column;gap: 0.8rem;margin-bottom: 1rem;}
.calc-select-wrapper {position: relative;}
.calc-select {width: 100%;padding: 0.6rem;border-radius: 4px;border: 1px solid var(--color-border);font-family: var(--font-body);font-size: 0.85rem;background-color: #ffffff;color: var(--color-text-dark);}
.guests-counter {display: flex;align-items: center;justify-content: space-between;padding: 0.3rem 0;}
.guests-label {font-size: 0.85rem;color: var(--color-text-light);}
.counter-controls {display: flex;align-items: center;gap: 0.8rem;}
.btn-counter {width: 28px;height: 28px;border-radius: 50%;border: 1px solid var(--color-border);background-color: #ffffff;cursor: pointer;font-size: 1rem;font-weight: 600;display: flex;align-items: center;justify-content: center;transition: var(--transition-fast);}
.btn-counter:hover:not(:disabled) {background-color: var(--color-primary);color: #ffffff;}
.btn-counter:disabled {opacity: 0.4;cursor: not-allowed;}
.counter-value {font-weight: 600;font-size: 0.9rem;min-width: 12px;text-align: center;}
.calc-result {border-top: 1px dashed var(--color-border);padding-top: 0.8rem;display: flex;justify-content: space-between;align-items: center;}
.calc-price {font-family: var(--font-heading);font-weight: 700;color: var(--color-primary);font-size: 1.3rem;font-family: 'optima';}
.calc-tax-label {font-size: 0.75rem;color: var(--color-text-light);display: block;margin-top: 0.1rem;}
.calc-notes {font-size: 0.75rem;color: var(--color-text-light);font-style: italic;margin-top: 0.6rem;}

/* ==========================================================================
   Booking & Contact Section
   ========================================================================== */
.section-booking {background-color: var(--color-primary);color: #ffffff;border-radius: 12px;overflow: hidden;box-shadow: var(--shadow-luxury);margin-top: 6rem;border: 1px solid rgba(212, 175, 55, 0.2);}
.booking-grid {display: grid;grid-template-columns: 1fr;}

@media(max-width: 900px) {
.hero {position: relative;height: auto !important;min-height: auto !important;display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;background: linear-gradient(transparent, transparent), url(../assets/dining/banner.jpg) no-repeat center center / cover !important;margin-top: 40px !important;}
}
.booking-info {padding: 4rem 3rem;display: flex;flex-direction: column;justify-content: center;border-bottom: 1px solid rgba(255, 255, 255, 0.1);}

@media(min-width: 900px) {
.booking-info {border-bottom: none;border-right: 1px solid rgba(255, 255, 255, 0.1);}
}

.booking-info h2 {font-size: 30px;margin-bottom: 1rem;font-family: "gibstone";}
.booking-intro {color: rgba(255, 255, 255, 0.85);margin-bottom: 3rem;font-size: 1.1rem;font-family: 'optima';}
.contact-details {display: flex;flex-direction: column;gap: 2rem;}
.contact-item {display: flex;gap: 1.2rem;}
.contact-icon {width: 48px;height: 48px;border-radius: 50%;background-color: rgba(212, 175, 55, 0.15);border: 1px solid rgba(212, 175, 55, 0.4);display: flex;align-items: center;justify-content: center;flex-shrink: 0;}
.contact-icon svg {width: 20px;height: 20px;fill: var(--color-accent);}
.contact-text h3 {font-family: 'optima';font-size: 1rem;font-weight: 700;margin-bottom: 0.3rem;color: var(--color-accent);}
.phone-link {font-size: 16px;font-weight: 700;color: #ffffff;display: inline-block;font-family: 'optima';}
.phone-link:hover {color: var(--color-accent);}
#disclaimer-text {font-size: 0.85rem;color: rgba(255, 255, 255, 0.7);line-height: 1.6;font-family: 'optima';}
/* Booking Form Card */
.booking-form-card {padding: 4rem 3rem;background-color: rgba(255, 255, 255, 0.03);backdrop-filter: blur(10px);}
.booking-form-card h3 {font-size: 1.8rem;margin-bottom: 2rem;border-bottom: 1px solid rgba(255, 255, 255, 0.1);padding-bottom: 0.8rem;}
.form-group {margin-bottom: 1.5rem;display: flex;flex-direction: column;gap: 0.5rem;}
.form-row {display: grid;grid-template-columns: 1fr;gap: 1.5rem;}

@media(min-width: 600px) {
.form-row {grid-template-columns: 1fr 1fr;}
}

.form-group label {font-size: 0.85rem;font-weight: 600;color: rgba(255, 255, 255, 0.8);}
.form-group input,
.form-group select,
.form-group textarea {padding: 0.8rem 1rem;border-radius: 4px;border: 1px solid rgba(255, 255, 255, 0.15);background-color: rgba(255, 255, 255, 0.05);color: #ffffff;font-family: var(--font-body);font-size: 0.9rem;transition: var(--transition-smooth);}
.form-group input::placeholder,
.form-group textarea::placeholder {color: rgba(255, 255, 255, 0.4);}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {outline: none;border-color: var(--color-accent);background-color: rgba(255, 255, 255, 0.1);}

.form-group select option {background-color: var(--color-primary);color: #ffffff;}
.btn-submit {width: 100%;background-color: var(--color-accent);color: var(--color-primary);padding: 1rem;font-weight: 700;font-size: 0.95rem;text-transform: uppercase;letter-spacing: 1px;border-radius: 4px;border: none;cursor: pointer;box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);transition: var(--transition-smooth);margin-top: 1rem;}
.btn-submit:hover {background-color: #ffffff;color: var(--color-primary);transform: translateY(-2px);}
/* ==========================================================================
   Toasts Notifications
   ========================================================================== */
.toast-container {position: fixed;bottom: 2rem;right: 2rem;z-index: 2000;display: flex;flex-direction: column;gap: 0.8rem;}
.toast {background-color: var(--color-primary);color: #ffffff;padding: 1rem 1.5rem;border-radius: 4px;box-shadow: var(--shadow-luxury);display: flex;align-items: center;gap: 0.8rem;font-size: 0.9rem;font-weight: 500;border-left: 4px solid var(--color-accent);min-width: 280px;animation: slideInUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.toast.success {border-left-color: var(--color-success);}
.toast.error {border-left-color: var(--color-error);}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {background-color: var(--color-primary);color: rgba(255, 255, 255, 0.7);padding: 1rem 2rem;text-align: center;border-top: 1px solid rgba(212, 175, 55, 0.2);font-size: 17px;}
.site-footer .accent {color: var(--color-accent);font-weight: 600;}

/* ==========================================================================
   Keyframes Animations
   ========================================================================== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

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

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}
.package-desc {
    margin-top: 8px;
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    font-style: italic;
}