:root {
    /* Core sizes */
    --header-height: 100px;  /* Further reduced */
    --nav-height: 60px;  /* Further reduced */
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --page-padding: 16px;
    
    /* Modern color palette */
    --primary-color: #0A2342;     /* Deep navy */
    --secondary-color: #2196F3;   /* Bright blue */
    --accent-color: #00BFA5;      /* Teal */
    --background-color: #0A1929;  /* Dark blue-black */
    --surface-color: #132F4C;     /* Navy blue */
    --card-color: #173A5E;        /* Lighter navy */
    --text-color: #F0F7FF;        /* Ice blue */
    --text-secondary: #B2BAC2;    /* Light gray */
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.25);
    
    /* Transitions */
    --transition-fast: 200ms ease;
    --transition-normal: 300ms ease;
    
    /* Logo color */
    --logo-color: #FFA500;  /* Orange/amber color to match logo */
}

/* Base styles */
body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

/* Enhanced header */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--primary-color);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 var(--page-padding);
    box-shadow: var(--shadow-md);
}

/* Logo container */
.logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 12px 0;
    width: 100%;
    max-height: var(--header-height);
}

.logo img {
    height: 80px;  /* Much smaller logo */
    width: auto;
    max-height: calc(var(--header-height) - 20px);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    transition: all 0.3s ease;
    object-fit: contain;
}

/* Responsive adjustments - maintaining proportions */
@media screen and (min-width: 1024px) {
    .logo img {
        height: 273px;  /* From 195px + 40% */
    }
}

@media screen and (max-width: 768px) {
    .logo img {
        height: 189px;  /* From 135px + 40% */
    }
}

@media screen and (max-width: 480px) {
    .logo img {
        height: 168px;  /* From 120px + 40% */
    }
}

@media screen and (max-width: 360px) {
    .logo img {
        height: 147px;  /* From 105px + 40% */
    }
}

/* Adjust header actions position */
.header-actions {
    position: absolute;
    right: var(--page-padding);
    top: 50%;
    transform: translateY(-50%);
}

/* Content area */
.content-wrapper {
    height: calc(100vh - var(--header-height) - var(--nav-height));  /* Remove safe area from calc */
    position: fixed;
    top: var(--header-height);
    bottom: var(--nav-height);  /* Remove safe area from bottom */
    left: 0;
    right: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--background-color);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
}

/* Section styling */
section {
    position: absolute;
    inset: 0;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    background: var(--background-color);  /* Match the background color */
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
    margin: 0;
    padding-top: 0;  /* Remove any default padding */
    width: 100%;
    overflow-x: hidden;
}

section.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

/* Enhanced Hero Animation Styles */
.hero {
    position: relative;
    background: linear-gradient(135deg, var(--primary-color), var(--background-color));
}

/* Enhanced Logo Animation */
.logo-animation {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.floating-logos {
    position: absolute;
    inset: 0;
    perspective: 1000px;
}

.floating-logo {
    position: absolute;
    width: 25px;
    height: 25px;
    background-image: url('../assets/logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 10px rgba(0, 191, 165, 0.2));
    animation: logoRain var(--duration) linear infinite;
    opacity: 0.1;
    will-change: transform;
}

.logo-text {
    width: 100%;
    max-width: 240px;  /* Reduced from 320px */
    margin: 24px auto;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 0.4rem;  /* Reduced gap between letters */
}

.logo-text span {
    font-size: 2.6rem;  /* Reduced from 3.2rem */
    font-weight: 900;
    color: transparent;
    background: linear-gradient(135deg, var(--accent-color), var(--secondary-color));
    -webkit-background-clip: text;
}

.hero-content,
.restaurants-grid,
.amenities-grid,
.explore-tiles {
    position: relative;
    z-index: 2;
    min-height: 100%;
    padding-bottom: var(--nav-height);
}

/* Main Container */
.main-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Global Section Layout */
.hero-content {
    padding-top: 0;  /* Remove any default padding */
    position: relative;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* Unified Welcome Message Style - Bigger and consistent */
.welcome-message {
    position: relative;
    margin: 0;
    padding: 48px 16px;  /* Increased padding */
    text-align: center;
    width: 100%;
    max-width: 600px;
    height: 160px;  /* Increased height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Bigger text for all sections */
.welcome-message h1 {
    font-size: 2.2rem;  /* Bigger font size */
    font-weight: 800;
    margin: 0 0 12px 0;  /* Adjusted margin */
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.welcome-message .tagline {
    font-size: 1.1rem;  /* Bigger tagline */
    font-weight: 500;
    margin: 0;
    opacity: 0.9;
    letter-spacing: 0.2px;
}

/* Home section specific styling - adjusted height */
#hero .welcome-message {
    margin-top: 20px;  /* Reduced from -40px to 20px */
    padding-top: 0;
    height: auto;
}

/* Keep other sections consistent */
.section-dining .welcome-message,
.section-amenities .welcome-message,
.section-explore .welcome-message,
.section-contact .welcome-message {
    margin-top: 20px;  /* Match the home section */
    padding: 48px 16px;
    height: 160px;
}

/* Adjust preview grid positioning for home */
#hero .preview-grid {
    margin-top: 20px;
}

/* Keep the floating logos in position */
.logo-animation {
    margin-top: 20px;  /* Match the welcome message */
}

/* Highlight text styling */
.welcome-message h1 .highlight {
    color: var(--accent-color);
    font-weight: 800;
}

/* Remove any section-specific padding/margin overrides */
.section-dining .welcome-message,
.section-amenities .welcome-message,
.section-explore .welcome-message,
.section-contact .welcome-message {
    margin: 0;  /* Override any specific margins */
    padding: 32px 16px 24px;  /* Same padding as home section */
}

.section-dining .welcome-message h1,
.section-amenities .welcome-message h1,
.section-explore .welcome-message h1,
.section-contact .welcome-message h1 {
    margin: 0 0 8px 0;  /* Same as base style */
}

.section-dining .welcome-message .tagline,
.section-amenities .welcome-message .tagline,
.section-explore .welcome-message .tagline,
.section-contact .welcome-message .tagline {
    margin: 0;  /* Same as base style */
}

@keyframes shimmer {
    0% {
        background-position: -100px;
    }
    100% {
        background-position: 100px;
    }
}

/* Preview Grid Layout - adjust positioning */
.preview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 6px;
    width: 100%;
    max-width: 160px;  /* Smaller grid */
    margin: 4px auto 0;
    transform: translateY(0);  /* Remove upward shift */
    width: 100%;
    max-width: min(100%, 420px);  /* Never exceed container width */
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;  /* Include padding in width calculation */
}

/* Preview Card - Improved layout */
.preview-card {
    aspect-ratio: 1/1;
    padding: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;  /* Changed back to flex-start */
    text-align: center;
    background: #FFFFFF;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    text-decoration: none !important;  /* Remove underline */
}

/* Card Icon - Match logo color */
.preview-card .card-icon {
    width: 32px;
    height: 32px;
    margin-top: 12px;
    margin-bottom: 8px;
    background: rgba(255, 165, 0, 0.1);  /* Logo color with transparency */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 165, 0, 0.2);
}

.preview-card .card-icon i {
    font-size: 16px;
    color: #FFA500;  /* Logo color */
}

/* Card Text Content - Compact and centered */
.preview-card h3 {
    font-size: 0.7rem;
    font-weight: 700;
    color: #1E2A45;
    margin: 0 0 4px 0;
    padding: 0 4px;
    letter-spacing: 0;
    text-transform: none;  /* Removed uppercase */
    line-height: 1.2;
}

.preview-card p {
    font-size: 0.6rem;
    color: #4A5568;
    line-height: 1.2;
    margin: 0;
    padding: 0 6px;
    opacity: 0.9;
    font-weight: 400;
}

/* Container for text to keep it together */
.preview-card .text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;  /* Small gap between title and description */
    margin-top: auto;
    margin-bottom: 12px;  /* Space at bottom */
}

/* Remove any link styling */
.preview-card:hover {
    text-decoration: none;
}

.preview-card:active {
    text-decoration: none;
}

/* Enhanced Hover Effects */
.preview-card:hover .card-icon {
    transform: scale(1.1) rotate(5deg);
    background: rgba(255, 165, 0, 0.15);
    border-color: rgba(255, 165, 0, 0.3);
}

.preview-card:hover .card-icon i {
    filter: drop-shadow(0 0 6px rgba(255, 165, 0, 0.4));
}

/* Pulse Animation for Icons - Gold themed */
@keyframes pulse {
    0% { 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.2);
    }
    50% { 
        transform: scale(1.05);
        box-shadow: 0 0 0 6px rgba(255, 165, 0, 0);
    }
    100% { 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 165, 0, 0);
    }
}

.preview-card .card-icon {
    animation: pulse 2s infinite ease-in-out;
}

/* Status Label */
.preview-card .status-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--accent-color);
    margin-top: auto; /* Push to bottom */
    padding-top: 16px;
    opacity: 0.9;
}

/* Navigation Prompt - centered and improved */
.navigation-prompt {
    display: none;  /* This will hide the entire prompt section */
}

.bounce-arrow {
    animation: bounce 2s infinite;
    color: #FFD700;  /* Match the gold theme */
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 4px;
}

/* Improved bounce animation */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-6px);
    }
    60% {
        transform: translateY(-3px);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Explore Tiles Layout */
.explore-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding: 20px;
}

.tile-card {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tile-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.tile-media {
    position: absolute;
    inset: 0;
}

.tile-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tile-content {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: white;
}

.tile-content h3 {
    font-size: 1.4rem;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.tile-content p {
    font-size: 0.9rem;
    margin: 0 0 12px 0;
    opacity: 0.9;
}

.tile-details {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    padding: 12px;
    border-radius: 8px;
    margin-top: 8px;
}

.tile-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    margin-top: 8px;
}

.tile-info i {
    color: var(--accent-color);
}

/* Grid Layouts */
.preview-grid,
.preview-grid.horizontal,
.explore-grid {
    width: 100%;
    max-width: 320px;
    margin: 24px auto;
    padding: 0;
}

/* Tourism Links */
.tourism-links {
    width: 100%;
    max-width: 320px;
    margin: 32px auto;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 24px;
}

.tourism-links a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-color);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.tourism-links a:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

.tourism-links i {
    font-size: 1rem;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .tourism-links {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        margin-bottom: 64px;  /* Even more space on mobile */
    }

    .main-container {
        padding: 0 16px;
    }

    .logo-text {
        margin: 20px auto;
    }
    
    .logo-text span {
        font-size: 2rem;  /* Even smaller on mobile */
    }

    .hero-content {
        padding: 0 16px;
    }
}

/* Enhanced cards */
.card {
    background: var(--card-color);
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform var(--transition-fast);
}

.card:active {
    transform: scale(0.98);
}

.card-header {
    background: var(--surface-color);
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.card-content {
    padding: 20px;
}

/* Navigation */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--nav-height) + var(--safe-area-bottom));
    background: var(--primary-color);
    display: flex;
    z-index: 1000;
    padding: 0 0 var(--safe-area-bottom) 0;
    margin: 0;
    border: none;
}

/* Navigation items - Update colors */
.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;  /* Changed to white */
    text-decoration: none;
    gap: 6px;
    transition: color var(--transition-fast);
    position: relative;
}

.nav-item i {
    font-size: 24px;
    color: #FFFFFF;  /* Changed to white */
}

.nav-item span {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: #FFFFFF;  /* Changed to white */
}

/* Active navigation item - Keep orange */
.nav-item.active {
    color: #FFA500;  /* Logo color */
}

.nav-item.active i {
    color: #FFA500;  /* Logo color */
}

.nav-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    background: #FFA500;  /* Logo color */
    border-radius: 3px 3px 0 0;
}

/* Typography */
h1 { font-size: 28px; font-weight: 700; margin-bottom: 20px; }
h2 { font-size: 24px; font-weight: 600; margin-bottom: 16px; }
h3 { font-size: 20px; font-weight: 600; margin-bottom: 12px; }
p { font-size: 16px; line-height: 1.6; color: var(--text-secondary); }

/* Buttons */
.btn {
    background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

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

/* Status badges */
.status-badge {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    background: var(--accent-color);
    color: var(--primary-color);
}

/* Lists */
.hours-list,
.location-list {
    list-style: none;
    padding: 0;
}

.hours-list li,
.location-list li {
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* iOS-style Tile System */
.tile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 12px;
    height: calc(100% - 50px); /* Account for header */
    overflow: hidden;
}

.ios-tile {
    position: relative;
    aspect-ratio: 1;
    border-radius: 16px;
    background: var(--card-color);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ios-tile-large {
    grid-column: span 2;
    aspect-ratio: 16/9;
}

.tile-media {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.tile-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tile-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.2),
        rgba(0,0,0,0.8)
    );
    z-index: 2;
}

.tile-content {
    position: absolute;
    inset: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 3;
    color: white;
}

.tile-header {
    margin-bottom: 8px;
}

.tile-header h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.tile-info {
    font-size: 14px;
    opacity: 0.9;
    display: flex;
    gap: 12px;
}

.tile-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.tile-btn {
    padding: 6px 12px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    text-decoration: none;
}

.tile-btn:active {
    transform: scale(0.96);
}

/* Status indicator */
.status-dot {
    display: none;  /* Hide by default */
}

/* Only show status dots within status indicators */
.status-indicator .status-dot {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #666;
    transition: all 0.3s ease;
}

/* Remove any stray status dots */
body > .status-dot,
section > .status-dot,
.nav-item .status-dot {
    display: none !important;
}

/* Section headers iOS style */
.section-header {
    position: sticky;
    top: 0;
    z-index: 3;
    background: rgba(10, 35, 66, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin-bottom: 20px;
}

.section-header h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}

/* Bottom sheet style modal */
.ios-modal {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--card-color);
    border-radius: 20px 20px 0 0;
    padding: 20px;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
}

.ios-modal.active {
    transform: translateY(0);
}

.modal-handle {
    width: 36px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    margin: 0 auto 16px;
}

/* Dining-specific styles */
.section-dining .ios-tile {
    background: var(--surface-color);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hours-summary {
    width: 100%;
    font-size: 13px;
}

.current-hours {
    color: var(--text-color);
    margin-bottom: 8px;
}

.hours-preview {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--text-secondary);
    opacity: 0.8;
}

.hours-preview span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tile-header p {
    color: var(--text-secondary);
    font-size: 13px;
    margin: 4px 0 0 0;
    opacity: 0.9;
}

.tile-actions {
    margin-top: 16px;
}

.tile-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-color);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.tile-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.tile-btn i {
    margin-right: 6px;
}

/* Restaurant Modal Styles */
.restaurant-modal-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.restaurant-modal-header img {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    object-fit: cover;
}

.restaurant-hours {
    margin-top: 20px;
}

.restaurant-hours h4 {
    font-size: 16px;
    margin-bottom: 12px;
}

.hours-list {
    font-size: 14px;
}

.hours-list li {
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Dining section styles */
.section-dining .tile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 16px;
    height: auto;
    max-height: calc(100% - 60px);
}

.section-dining .ios-tile {
    aspect-ratio: 1;
    border-radius: 20px;
    background: var(--surface-color);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-md);
}

.tile-media {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.tile-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tile-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0.8)
    );
    z-index: 2;
}

.tile-content {
    position: absolute;
    inset: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 3;
    color: white;
}

.tile-header h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.5px;
}

.tile-header p {
    font-size: 14px;
    margin: 4px 0 0 0;
    opacity: 0.9;
    color: var(--text-color);
}

.tile-info {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    opacity: 0.9;
}

.tile-info span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tile-info i {
    font-size: 12px;
    opacity: 0.8;
}

/* Status indicator */
.status-dot {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    z-index: 4;
    border: 2px solid rgba(255, 255, 255, 0.8);
}

.status-dot.open {
    background: #4CAF50;
}

.status-dot.closed {
    background: #FF5252;
}

/* Dining actions tile */
.dining-actions {
    background: var(--card-color) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.action-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.action-group {
    display: grid;
    gap: 12px;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--text-color);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.action-btn:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.15);
}

.action-btn i {
    font-size: 16px;
    opacity: 0.9;
}

/* iOS-style blur effects */
.section-header {
    background: rgba(10, 35, 66, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Restaurant Section Styles */
.section-dining {
    padding: var(--page-padding);
}

.restaurants-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
}

.restaurant-card {
    background: var(--surface-color);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.restaurant-header {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--primary-color);
}

.restaurant-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.restaurant-image {
    width: 100%;
    height: 240px;
    overflow: hidden;
}

.restaurant-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.restaurant-info {
    padding: 20px;
}

.location {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.hours-container {
    margin-bottom: 20px;
}

.hours-container h4 {
    font-size: 16px;
    margin-bottom: 12px;
    color: var(--text-color);
}

.hours-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hours-list li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 14px;
}

.hours-list li span {
    color: var(--text-secondary);
}

.special-hours {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.special-hours h5 {
    font-size: 14px;
    margin-bottom: 8px;
    color: var(--text-color);
}

.special-hours ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.special-hours li {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 4px;
    padding: 4px 0;
}

.restaurant-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.status-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.status-badge[data-status="open"] {
    background: #4CAF50; /* Green */
    color: white;
}

.status-badge[data-status="closed"] {
    background: #FF5252; /* Red */
    color: white;
}

/* Buttons */
.btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.menu-btn {
    background: var(--surface-color);
    color: var(--text-color);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.reserve-btn {
    background: var(--accent-color);
    color: var(--primary-color);
}

/* Remove scrollbars but keep functionality */
* {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

*::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
}

.content-wrapper {
    overflow: hidden;
}

/* Raining Logo Animation */
@keyframes logoRain {
    0% {
        transform: translateY(-50px) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.1;
    }
    90% {
        opacity: 0.1;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

/* Contact Section Styles - Polished */
.section-contact .preview-card {
    height: 180px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.section-contact .card-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.section-contact .card-icon i {
    font-size: 20px;
    color: var(--accent-color);
}

.section-contact .preview-card h3 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.section-contact .preview-card p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 12px;
    line-height: 1.4;
}

.section-contact .status-label {
    font-size: 0.85rem;
    color: var(--accent-color);
    opacity: 1;
    font-weight: 500;
}

.section-contact .preview-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
}

.section-contact .preview-card:hover .card-icon {
    transform: scale(1.1) rotate(5deg);
    background: rgba(255, 255, 255, 0.08);
}

/* Base restaurant card style */
.preview-card.restaurant-details.horizontal {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 32px 24px;
}

.card-left {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.card-left .card-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-left .card-icon i {
    font-size: 24px;
    color: var(--accent-color);
}

.card-left h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 8px;
}

.card-left .status-label {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 8px;
}

.status-label[data-hours].open {
    color: #4CAF50;
}

.status-label[data-hours].closed {
    color: #FF5252;
}

.card-left p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

.restaurant-details-content {
    text-align: center;
}

.hours-group h4 {
    color: var(--accent-color);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.day-hours {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 8px;
    line-height: 1.4;
}

.special-hours {
    margin-top: 24px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
}

.restaurant-links {
    margin-top: 24px;
}

.site-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--accent-color);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.site-link:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* Explore Section - Polished Tiles */
.section-explore .hero-content {
    height: 100%;
    overflow-y: auto;
    padding: 24px;
}

.explore-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 24px;
    width: 100%;
    width: 100%;
    max-width: min(100%, 420px);  /* Never exceed container width */
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;  /* Include padding in width calculation */
}

/* Tile Card Styles */
.explore-grid .tile-card {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* This makes it square */
    border-radius: 24px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.tile-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.tile-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.tile-content {
    position: absolute;
    inset: 0;
    padding: 24px;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.95) 0%,
        rgba(0, 0, 0, 0.8) 30%,
        rgba(0, 0, 0, 0.2) 100%
    );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.tile-content h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: white;
}

.tile-content p {
    font-size: 0.9rem;
    margin-bottom: 16px;
    opacity: 0.9;
    line-height: 1.4;
}

.tile-details {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.9);
}

.detail-item:last-child {
    margin-bottom: 0;
}

.detail-item i {
    color: var(--accent-color);
    font-size: 0.9rem;
}

/* Hover Effects */
.tile-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.tile-card:hover .tile-media img {
    transform: scale(1.05);
}

/* Tourism Links - Contact Style */
.explore-grid .preview-card {
    height: 180px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.explore-grid .preview-card .card-icon {
    width: 50px;
    height: 50px;
    margin: 12px 0 20px 0;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.explore-grid .preview-card .card-icon i {
    font-size: 20px;
    background: linear-gradient(135deg, var(--accent-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.explore-grid .preview-card h3 {
    color: var(--text-color);
}

.explore-grid .preview-card .status-label {
    margin-top: auto;
    font-size: 0.85rem;
    color: var(--accent-color);
}

/* Hover Effects */
.explore-grid .preview-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

.explore-grid .preview-card:hover .card-icon {
    transform: scale(1.1) rotate(5deg);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .explore-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
    }

    .explore-grid .preview-card {
        height: 160px;
    }
}

/* Amenities Section - Square Cards with Better Colors */
.section-amenities .preview-card {
    aspect-ratio: 1/1;
    width: 100%;
    padding: 24px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.section-amenities .card-icon {
    width: 50px;
    height: 50px;
    margin: 24px 0;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-amenities .card-icon i {
    font-size: 20px;
    color: var(--accent-color);  /* Solid accent color */
}

.section-amenities .preview-card h3 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);  /* Brighter white */
}

.section-amenities .preview-card p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);  /* Bright but softer white */
    margin-bottom: auto;
    line-height: 1.4;
}

.section-amenities .hours-info {
    width: 100%;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.section-amenities .hours {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);  /* Match paragraph color */
    margin-bottom: 8px;
}

.section-amenities .status-label {
    font-size: 0.85rem;
    color: var(--accent-color);  /* Accent color for status */
    opacity: 1;
    font-weight: 500;
}

/* Hover Effects */
.section-amenities .preview-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.06);  /* Slightly lighter on hover */
    border-color: rgba(255, 255, 255, 0.2);
}

.section-amenities .preview-card:hover .card-icon {
    transform: scale(1.1) rotate(5deg);
    background: rgba(255, 255, 255, 0.08);  /* Lighter icon background on hover */
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .section-amenities .preview-grid.single-column {
        grid-template-columns: 1fr;  /* Single column */
        max-width: 400px;  /* Control width */
        margin: 0 auto;  /* Center the grid */
        gap: 24px;  /* Space between cards */
        display: grid;  /* Important - this was missing */
        padding: 24px;
    }
}

/* Amenities Section - Square Cards with Better Colors */
.section-amenities .preview-grid.single-column {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 400px;  /* Narrower for single column */
    gap: 24px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .section-amenities .preview-grid.single-column {
        max-width: 320px;
        padding: 16px;
    }
}

/* Update status indicator styles */
.card-left .status-indicator {
    margin: 4px 0 12px 0;  /* Space between name and floor number */
    padding: 0;  /* Remove default padding */
    border: none;  /* Remove default border */
}

.card-left .status-label {
    font-size: 0.85rem;
    font-weight: 500;
}

/* Adjust card-left spacing */
.card-left {
    width: 100%;
    padding: 0 0 24px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 24px;
}

.card-left h3 {
    margin-bottom: 12px;  /* Increased space after name */
}

.card-left p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Restaurant Cards - Polished */
.preview-card.restaurant-details {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.card-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 4px;
}

.card-icon i {
    font-size: 16px;
}

h3 {
    font-size: 1rem;
    margin-bottom: 4px;
}

.status-label {
    font-size: 0.8rem;
    margin-bottom: 2px;
}

.location {
    font-size: 0.8rem;
}

/* Hours Section */
.hours-section {
    width: 100%;
    margin: 8px 0;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}

.hours-group,
.special-hours {
    margin-bottom: 8px;
}

h4 {
    font-size: 0.85rem;
    margin-bottom: 6px;
    color: var(--accent-color);
}

.day-hours {
    font-size: 0.8rem;
    margin-bottom: 2px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.8);
}

/* Links */
.site-link {
    padding: 8px 12px;
    font-size: 0.8rem;
    margin-top: 8px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Section Specific Layouts */
.section-amenities .preview-grid,
.section-explore .explore-grid {
    width: 100%;
    max-width: 320px;
    margin: 16px auto;
    gap: 16px;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .hero-content {
        padding: 16px;
    }
    
    .welcome-message h1 {
        font-size: 2rem;
    }
    
    .preview-card.restaurant-details {
        padding: 12px;
    }
}

/* Main Header Logo */
.main-logo {
    width: 100%;
    max-width: 180px;  /* Much smaller than before */
    margin: 24px auto;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 0.3rem;  /* Tighter letter spacing */
}

.main-logo span {
    font-size: 2rem;  /* Much smaller font size */
    font-weight: 900;
    color: transparent;
    background: linear-gradient(135deg, var(--accent-color), var(--secondary-color));
    -webkit-background-clip: text;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .main-logo {
        max-width: 150px;  /* Even smaller on mobile */
        margin: 20px auto;
    }
    
    .main-logo span {
        font-size: 1.6rem;  /* Smaller text on mobile */
    }
}

/* Add iOS-specific padding for notched devices */
@supports (padding: max(0px)) {
    .bottom-nav {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
    
    .content-wrapper {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
}

/* iOS-specific adjustments */
@supports (-webkit-touch-callout: none) {
    .content-wrapper {
        height: -webkit-fill-available;
    }
    
    .bottom-nav {
        height: calc(var(--nav-height) + env(safe-area-inset-bottom));
    }
}

/* iOS-style Dining Cards - Redesigned for better readability */
.dining-cards {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 0;  /* Remove top padding since header handles spacing */
    padding-bottom: calc(var(--nav-height) + var(--safe-area-bottom) + 16px);
}

.dining-card {
    background: #FFFFFF;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.dining-header {
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(0, 0, 0, 0.02);
}

.dining-header h2 {
    color: #1E2A45;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.3px;
}

.dining-type {
    color: #4A5568;
    font-size: 0.85rem;
    margin: 4px 0 0 0;
    font-weight: 500;
}

/* Status indicator redesign */
.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0 0;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 12px;
}

.status-text {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Details section redesign */
.dining-details {
    padding: 16px;
}

.detail-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.detail-item:first-child {
    padding-top: 0;
}

.detail-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.detail-item i {
    color: #FFA500;
    font-size: 1rem;
    width: 20px;
    text-align: center;
}

.detail-text {
    flex: 1;
}

.detail-text h3 {
    color: #1E2A45;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.detail-text p {
    color: #4A5568;
    font-size: 0.8rem;
    margin: 0 0 2px 0;
    line-height: 1.4;
}

/* Action buttons redesign */
.actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding: 0;
}

.action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    background: rgba(255, 165, 0, 0.08);
    border-radius: 12px;
    color: #1E2A45;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.action-btn i {
    color: #FFA500;
    font-size: 0.9rem;
}

.action-btn:active {
    background: rgba(255, 165, 0, 0.12);
    transform: scale(0.98);
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .dining-card {
        background: rgba(30, 42, 69, 0.95);
        border-color: rgba(255, 255, 255, 0.1);
    }

    .dining-header {
        background: rgba(255, 255, 255, 0.05);
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }

    .dining-header h2 {
        color: #FFFFFF;
    }

    .dining-type {
        color: rgba(255, 255, 255, 0.7);
    }

    .status-indicator {
        background: rgba(255, 255, 255, 0.1);
    }

    .detail-item {
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }

    .detail-text h3 {
        color: #FFFFFF;
    }

    .detail-text p {
        color: rgba(255, 255, 255, 0.7);
    }

    .action-btn {
        background: rgba(255, 165, 0, 0.15);
        color: #FFFFFF;
    }

    .action-btn:active {
        background: rgba(255, 165, 0, 0.2);
    }
}

/* Animated Welcome Message for Dining Section */
.section-dining .welcome-message {
    opacity: 0;
    animation: fadeIn 0.8s ease forwards;
}

.section-dining .welcome-message h1 {
    margin: 0 0 8px 0;  /* Match the home section */
}

.section-dining .welcome-message h1 .highlight {
    position: relative;
    display: inline-block;
    color: var(--accent-color);
    opacity: 0;
    animation: slideIn 0.6s ease forwards;
    animation-delay: 0.4s;
}

.section-dining .welcome-message .tagline {
    opacity: 0;
    animation: slideUp 0.6s ease forwards;
    animation-delay: 0.6s;
    margin: 0;  /* Match the home section */
}

/* Animation Keyframes */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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