html { scroll-behavior: smooth; }
.page-section { display: none; animation: fadeIn 0.5s ease-in-out; }
.page-section.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

#main-header {
    border-top: none !important;
    box-shadow: none !important;
    transition: all 0.3s ease-in-out;
}

header.scrolled { 
    background-color: rgba(255, 255, 255, 0.98); 
    box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important; 
    padding-top: 0.5rem; 
    padding-bottom: 0.5rem; 
}

#top-bar { 
    max-height: 50px; 
    opacity: 1; 
    transition: all 0.4s ease-in-out; 
    overflow: hidden; 
}

header.scrolled #top-bar { 
    max-height: 0; 
    opacity: 0; 
    margin-bottom: 0; 
    padding-top: 0; 
    padding-bottom: 0; 
}

#main-logo { height: 6rem; width: auto; transition: height 0.4s ease; object-fit: contain; }
header.scrolled #main-logo { height: 4.5rem; }

@media (max-width: 768px) { 
    #main-logo { height: 4.5rem; } 
    header.scrolled #main-logo { height: 3.5rem; } 
}

.nav-link {
    position: relative;
    text-decoration: none;
    padding-bottom: 4px;
    color: #333333; 
    transition: color 0.3s ease-in-out;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px; 
    bottom: 0;
    left: 50%;
    background-color: #FFA500; 
    transition: all 0.3s ease-in-out;
    transform: translateX(-50%); 
}

.nav-link:hover, .nav-link.active { color: #888888; }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.nav-link-mobile.active { color: #FFA500; }

#booking-widget-popup { background-color: rgba(255, 255, 255, 0.98); border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); border-radius: 16px; padding: 24px; max-width: 420px; backdrop-filter: blur(10px); width: 100%; }

#restaurant-booking-popup, 
.extended-popup, 
#success-popup, 
#event-success-popup { 
    background-color: #ffffff; 
    border: 1px solid rgba(0, 0, 0, 0.05); 
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); 
    border-radius: 16px; 
    padding: 32px; 
    max-width: 600px; 
    width: 90%; 
}

#success-popup, #event-success-popup { max-width: 400px; }

.custom-input-group { background-color: #F5F5F7; border-radius: 10px; padding: 10px 14px; display: flex; align-items: center; transition: all 0.2s ease; border: 1px solid transparent; margin-bottom: 12px; }
.custom-input-group:focus-within { background-color: #fff; border-color: #FFA500; box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.15); }
.custom-input-group label { font-size: 10px; text-transform: uppercase; color: #888; font-weight: 700; margin-right: 8px; min-width: 50px; }
.custom-input-group input, .custom-input-group select, .custom-input-group textarea { background: transparent; border: none; outline: none; width: 100%; font-family: 'Montserrat', sans-serif; font-size: 14px; color: #333; font-weight: 500; cursor: pointer; }
.custom-input-group textarea { resize: none; height: 60px; padding-top: 4px; }
.input-icon { width: 20px; height: 20px; color: #FFA500; margin-right: 12px; flex-shrink: 0; }
.btn-check-availability { width: 100%; background-color: #FFA500; color: white; padding: 14px; border-radius: 10px; font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: 0.05em; transition: all 0.3s ease; margin-top: 8px; text-align: center; display: block; }
.btn-check-availability:hover { background-color: #e59400; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255, 165, 0, 0.3); }

body { overflow-x: hidden; }
*:focus-visible { outline: 2px solid #FFA500; outline-offset: 2px; }

/* Lightbox */
#lightbox { opacity: 0; transition: opacity 0.3s ease; }
#lightbox:not(.hidden) { opacity: 1; }
#lightbox.hidden { display: none; }
#lightbox-img { transition: transform 0.3s ease; }
.gallery-img { cursor: pointer; }