/* ============================================
   AURORA HOTEL PLAZA - LIQUID GLASS DESIGN SYSTEM
   Modern glassmorphism effects for elegant UI
   ============================================ */

/* CSS Variables for Glass Effects */
:root {
    /* Glass backgrounds */
    --glass-bg-light: rgba(255, 255, 255, 0.15);
    --glass-bg-medium: rgba(255, 255, 255, 0.25);
    --glass-bg-heavy: rgba(255, 255, 255, 0.4);
    --glass-bg-dark: rgba(17, 24, 39, 0.6);
    --glass-bg-accent: rgba(212, 175, 55, 0.15);

    /* Glass borders */
    --glass-border-light: rgba(255, 255, 255, 0.2);
    --glass-border-medium: rgba(255, 255, 255, 0.3);
    --glass-border-accent: rgba(212, 175, 55, 0.3);

    /* Blur values - Optimized for performance */
    --blur-sm: 6px;
    --blur-md: 8px;
    --blur-lg: 10px;
    --blur-xl: 12px;

    /* Glass shadows */
    --glass-shadow: 0 8px 24px 0 rgba(31, 38, 135, 0.15);
    --glass-shadow-hover: 0 15px 30px 0 rgba(31, 38, 135, 0.25);
    --glass-highlight: rgba(255, 255, 255, 0.15);
}

/* ============================================
   BASE GLASS CLASSES
   ============================================ */

/* Glass Card - Light variant (for dark backgrounds) */
.glass-card {
    /* background: var(--glass-bg-light); */
    background: rgba(30, 41, 59, 0.6);
    /* Unified Dark Glass */
    /* backdrop-filter: blur(var(--blur-lg));
    -webkit-backdrop-filter: blur(var(--blur-lg)); */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.25rem;
    box-shadow: var(--glass-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: white;
}

.glass-card:hover {
    background: var(--glass-bg-medium);
    border-color: var(--glass-border-medium);
    box-shadow: var(--glass-shadow-lg);
    transform: translateY(-4px);
}

/* Glass Card - Medium variant */
.glass-card-medium {
    background: rgba(30, 41, 59, 0.6);
    /* backdrop-filter: blur(var(--blur-lg));
    -webkit-backdrop-filter: blur(var(--blur-lg)); */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.25rem;
    box-shadow: var(--glass-shadow);
    color: white;
}

/* Glass Card - Solid variant (for light backgrounds) */
.glass-card-solid {
    background: rgba(30, 41, 59, 0.6);
    /* backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%); */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.25rem;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    color: white;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Light mode fallback for glass-card-solid */
.light .glass-card-solid,
html:not(.dark) .glass-card-solid {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    color: white;
}

.glass-card-solid:hover {
    transform: translateY(-4px);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

.dark .glass-card-solid {
    background: linear-gradient(135deg,
            rgba(30, 41, 59, 0.5) 0%,
            rgba(20, 30, 45, 0.6) 100%);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Glass Card - Accent variant */
.glass-card-accent {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    border: 1px solid var(--glass-border-accent);
    border-radius: 1.25rem;
    box-shadow: var(--glass-shadow), var(--glass-glow);
}

/* ============================================
   GLASS BUTTONS
   ============================================ */

/* Primary Glass Button */
.btn-glass-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: white;
    border: none;
    border-radius: 0.75rem;
    font-weight: 700;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.35);
    white-space: nowrap;
}

.btn-glass-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(212, 175, 55, 0.5);
}

/* Secondary Glass Button (Transparent) */
.btn-glass-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: var(--glass-bg-light);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    color: white;
    border: 1.5px solid var(--glass-border-medium);
    border-radius: 0.75rem;
    font-weight: 700;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-glass-secondary:hover {
    background: var(--glass-bg-medium);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Outline Glass Button */
.btn-glass-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: transparent;
    color: var(--accent);
    border: 2px solid var(--accent);
    border-radius: 0.75rem;
    font-weight: 700;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-glass-outline:hover {
    background: var(--accent);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

/* Small Glass Button */
.btn-glass-sm {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    border-radius: 0.5rem;
}

/* Large Glass Button */
.btn-glass-lg {
    padding: 1.125rem 2.25rem;
    font-size: 1.0625rem;
    border-radius: 1rem;
}


/* ============================================
   GLASS BADGES & TAGS
   ============================================ */

.glass-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--glass-bg-light);
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
    border: 1px solid var(--glass-border-light);
    border-radius: 9999px;
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
}

.glass-badge-accent {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.1));
    border-color: var(--glass-border-accent);
}

.glass-badge-solid {
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-primary-light);
    border-color: rgba(255, 255, 255, 0.5);
}

.dark .glass-badge-solid {
    background: rgba(30, 41, 59, 0.9);
    color: var(--text-primary-dark);
}

/* Glass Tag (smaller) */
.glass-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    background: var(--glass-bg-light);
    /* backdrop-filter: blur(var(--blur-sm)); */
    /* -webkit-backdrop-filter: blur(var(--blur-sm)); */
    border: 1px solid var(--glass-border-light);
    border-radius: 0.5rem;
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
}

/* ============================================
   GLASS HEADER (Scrolled State)
   ============================================ */

.header-glass {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(var(--blur-xl)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--blur-xl)) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}

.dark .header-glass {
    background: rgba(17, 24, 39, 0.85) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Glass Submenu */
.glass-submenu {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(var(--blur-lg)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 1rem;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.dark .glass-submenu {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

/* ============================================
   GLASS FORM ELEMENTS
   ============================================ */

.glass-input {
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--glass-bg-medium);
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
    border: 1px solid var(--glass-border-light);
    border-radius: 0.75rem;
    color: white;
    font-size: 0.9375rem;
    transition: all 0.3s ease;
}

.glass-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.glass-input:focus {
    outline: none;
    background: var(--glass-bg-heavy);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

/* Glass Input - Solid variant */
.glass-input-solid {
    background: rgba(255, 255, 255, 0.95);
    color: var(--text-primary-light);
    border-color: rgba(0, 0, 0, 0.1);
}

.glass-input-solid::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

.glass-input-solid:focus {
    background: white;
    border-color: var(--accent);
}

/* Glass Select */
.glass-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
    cursor: pointer;
}

/* ============================================
   GLASS BOOKING FORM (Hero)
   ============================================ */

.glass-booking-form {
    background: var(--glass-bg-light);
    backdrop-filter: blur(var(--blur-xl));
    -webkit-backdrop-filter: blur(var(--blur-xl));
    border: 1px solid var(--glass-border-medium);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: var(--glass-shadow-lg);
}

/* Booking form grid layout */
.glass-booking-form form {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    align-items: end;
}

@media (max-width: 768px) {
    .glass-booking-form form {
        grid-template-columns: 1fr 1fr;
    }

    .glass-booking-form form>div:last-child,
    .glass-booking-form form>button {
        grid-column: span 2;
    }
}

@media (max-width: 480px) {
    .glass-booking-form form {
        grid-template-columns: 1fr;
    }

    .glass-booking-form form>div:last-child,
    .glass-booking-form form>button {
        grid-column: span 1;
    }
}

/* Hide master booking form on mobile - use floating popup instead */
@media (max-width: 767px) {
    .glass-booking-form {
        display: none !important;
    }
}


/* ============================================
   GLASS STATS CARDS
   ============================================ */

.glass-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.9);
    /* backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md)); */
    border: 1px solid var(--glass-border-light);
    border-radius: 1rem;
    text-align: center;
    transition: all 0.3s ease;
}

.glass-stat-card:hover {
    background: var(--glass-bg-medium);
    transform: translateY(-4px);
    box-shadow: var(--glass-shadow);
}

.glass-stat-card .stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}

.glass-stat-card .stat-label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

/* Stats on light background - Liquid Glass Style */
.glass-stat-card-light {
    background: rgba(255, 255, 255, 0.95);
    /* backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%); */
    border: 1px solid rgba(212, 175, 55, 0.18);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(212, 175, 55, 0.08) inset;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Shimmer effect for stat cards */
.glass-stat-card-light::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    border-radius: 1rem 1rem 0 0;
}

.glass-stat-card-light:hover {
    transform: translateY(-4px);
    box-shadow:
        0 16px 48px rgba(212, 175, 55, 0.15),
        0 0 0 1px rgba(212, 175, 55, 0.12) inset;
}

.glass-stat-card-light .stat-label {
    color: var(--text-secondary-light);
    position: relative;
    z-index: 1;
}

.glass-stat-card-light .stat-value {
    position: relative;
    z-index: 1;
}

.dark .glass-stat-card-light {
    background: linear-gradient(135deg,
            rgba(212, 175, 55, 0.15) 0%,
            rgba(212, 175, 55, 0.08) 50%,
            rgba(212, 175, 55, 0.04) 100%);
}

.dark .glass-stat-card-light .stat-label {
    color: var(--text-secondary-dark);
}

/* ============================================
   GLASS ROOM/APARTMENT CARDS
   ============================================ */

.glass-room-card {
    background: rgba(255, 255, 255, 0.98);
    /* backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md)); */
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .glass-room-card {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

.glass-room-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* Price overlay on room image */
.glass-price-overlay {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    padding: 0.75rem 1.25rem;
    background: var(--glass-bg-dark);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.75rem;
    color: white;
}

.glass-price-overlay .price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent);
}

.glass-price-overlay .unit {
    font-size: 0.75rem;
    opacity: 0.8;
}

/* Room badge overlay */
.glass-room-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
    border-radius: 9999px;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

/* Feature tags */
.glass-feature-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: rgba(249, 250, 251, 0.8);
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 9999px;
    font-size: 0.8125rem;
    color: var(--text-secondary-light);
    transition: all 0.2s ease;
}

.dark .glass-feature-tag {
    background: rgba(55, 65, 81, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary-dark);
}

.glass-feature-tag:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.3);
}

.glass-feature-tag .material-symbols-outlined {
    font-size: 1rem;
    color: var(--accent);
}

/* ============================================
   GLASS SERVICE CARDS
   ============================================ */

.glass-service-card {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    height: 300px;
}

.glass-service-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.glass-service-card:hover img {
    transform: scale(1.1);
}

.glass-service-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
}

.glass-service-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    color: white;
}

.glass-service-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: var(--glass-bg-light);
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
    border: 1px solid var(--glass-border-light);
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.glass-service-badge .material-symbols-outlined {
    font-size: 1rem;
    color: var(--accent);
}


/* ============================================
   GLASS AMENITY CARDS
   ============================================ */

.glass-amenity-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.95);
    /* backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm)); */
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 1rem;
    text-align: center;
    transition: all 0.3s ease;
}

.dark .glass-amenity-card {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Room detail pages: dark glass background for amenity cards */
body.glass-page .glass-amenity-card {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(255, 255, 255, 0.1);
    color: white;
}

body.glass-page .glass-amenity-card:hover {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.2);
}

.glass-amenity-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.15);
}

.glass-amenity-card .material-symbols-outlined {
    font-size: 1.75rem;
    color: var(--accent);
}

/* ============================================
   GLASS FOOTER ELEMENTS
   ============================================ */

.glass-footer-card {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.9);
    /* backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm)); */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
}

.glass-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
}

.glass-social-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

/* ============================================
   GLASS MODAL/DIALOG
   ============================================ */

.glass-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 999;
}

.glass-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 500px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(var(--blur-xl));
    -webkit-backdrop-filter: blur(var(--blur-xl));
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 1.5rem;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    overflow: hidden;
}

.dark .glass-modal {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

/* ============================================
   GLASS TOAST NOTIFICATIONS
   ============================================ */

.glass-toast {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(var(--blur-lg));
    -webkit-backdrop-filter: blur(var(--blur-lg));
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    color: var(--text-primary-light);
}

.dark .glass-toast {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-primary-dark);
}

.glass-toast-success {
    border-left: 4px solid #10b981;
}

.glass-toast-error {
    border-left: 4px solid #ef4444;
}

.glass-toast-warning {
    border-left: 4px solid #f59e0b;
}

.glass-toast-info {
    border-left: 4px solid #3b82f6;
}

/* ============================================
   GLASS PROMOTION BANNER
   ============================================ */

.glass-promo-banner {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.9), rgba(185, 28, 28, 0.9));
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
}

.glass-promo-code {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.5rem;
    color: white;
    font-weight: 700;
}

/* ============================================
   GLASS USER MENU
   ============================================ */

.glass-user-menu {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(var(--blur-xl)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--blur-xl)) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 1rem;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.dark .glass-user-menu {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

/* ============================================
   GLASS QUICK INFO BAR
   ============================================ */

.glass-info-bar {
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.9), rgba(17, 24, 39, 0.85));
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Info Bar Responsive */
@media (max-width: 768px) {
    .glass-info-bar {
        padding: 0.75rem 0;
    }

    .glass-info-bar .flex-wrap {
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .glass-info-bar {
        padding: 0.5rem 0;
    }

    .glass-info-bar .glass-tag {
        padding: 0.25rem 0.5rem;
        font-size: 0.625rem;
    }

    .glass-info-bar .glass-tag .material-symbols-outlined {
        font-size: 0.75rem;
    }
}

/* ============================================
   GLASS TRUST BADGES
   ============================================ */

.glass-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--glass-bg-light);
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
    border: 1px solid var(--glass-border-light);
    border-radius: 9999px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.875rem;
}

.glass-trust-badge .material-symbols-outlined {
    color: var(--accent);
}

/* ============================================
   RESPONSIVE ADJUSTMENTS - ALL SCREENS
   ============================================ */

/* Large Desktop (1440px+) */
@media (min-width: 1440px) {
    .glass-stat-card .stat-value {
        font-size: 3rem;
    }

    .glass-service-card {
        height: 350px;
    }
}

/* Desktop (1024px - 1439px) */
@media (max-width: 1439px) and (min-width: 1024px) {
    .glass-stat-card .stat-value {
        font-size: 2.25rem;
    }
}

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
    .glass-booking-form {
        padding: 1.5rem;
        border-radius: 1.25rem;
    }

    .glass-stat-card {
        padding: 1.25rem;
    }

    .glass-stat-card .stat-value {
        font-size: 2rem;
    }

    .glass-stat-card .stat-label {
        font-size: 0.8125rem;
    }

    .glass-service-card {
        height: 280px;
    }

    .glass-service-content {
        padding: 1.25rem;
    }

    .glass-service-content h3 {
        font-size: 1.125rem;
    }

    .glass-amenity-card {
        padding: 1rem;
    }

    .glass-amenity-card .material-symbols-outlined {
        font-size: 1.5rem;
    }
}

/* Mobile Landscape & Small Tablet (640px - 767px) */
@media (max-width: 767px) and (min-width: 640px) {
    .glass-booking-form {
        padding: 1.25rem;
        border-radius: 1rem;
    }

    .glass-stat-card {
        padding: 1rem;
    }

    .glass-stat-card .stat-value {
        font-size: 1.75rem;
    }

    .glass-stat-card .stat-label {
        font-size: 0.75rem;
    }

    .btn-glass-primary,
    .btn-glass-secondary {
        padding: 0.75rem 1.25rem;
        font-size: 0.875rem;
    }

    .glass-service-card {
        height: 250px;
    }

    .glass-service-content {
        padding: 1rem;
    }

    .glass-service-content h3 {
        font-size: 1rem;
    }

    .glass-service-content p {
        font-size: 0.8125rem;
    }

    .glass-amenity-card {
        padding: 0.875rem;
        border-radius: 0.75rem;
    }

    .glass-amenity-card .material-symbols-outlined {
        font-size: 1.375rem;
    }

    .glass-amenity-card span:last-child {
        font-size: 0.75rem;
    }
}

/* Mobile Portrait (480px - 639px) */
@media (max-width: 639px) and (min-width: 480px) {
    .glass-booking-form {
        padding: 1rem;
        border-radius: 0.875rem;
    }

    .glass-stat-card {
        padding: 1rem;
        border-radius: 0.875rem;
    }

    .glass-stat-card .stat-value {
        font-size: 1.5rem;
    }

    .glass-stat-card .stat-label {
        font-size: 0.6875rem;
    }

    .btn-glass-primary,
    .btn-glass-secondary {
        padding: 0.75rem 1rem;
        font-size: 0.8125rem;
        gap: 0.375rem;
    }

    .glass-service-card {
        height: 220px;
    }

    .glass-service-content {
        padding: 1rem;
    }

    .glass-service-content h3 {
        font-size: 1rem;
        margin-bottom: 0.375rem;
    }

    .glass-service-content p {
        font-size: 0.75rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .glass-service-badge {
        padding: 0.25rem 0.5rem;
        font-size: 0.6875rem;
    }

    .glass-amenity-card {
        padding: 0.75rem;
        border-radius: 0.625rem;
        gap: 0.5rem;
    }

    .glass-amenity-card .material-symbols-outlined {
        font-size: 1.25rem;
    }

    .glass-amenity-card span:last-child {
        font-size: 0.6875rem;
    }

    .glass-badge,
    .glass-badge-solid {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }

    .glass-tag {
        padding: 0.25rem 0.5rem;
        font-size: 0.6875rem;
    }
}

/* Small Mobile (< 480px) */
@media (max-width: 479px) {
    .glass-booking-form {
        padding: 0.875rem;
        border-radius: 0.75rem;
    }

    .glass-stat-card {
        padding: 0.875rem;
        border-radius: 0.75rem;
    }

    .glass-stat-card .stat-value {
        font-size: 1.375rem;
    }

    .glass-stat-card .stat-label {
        font-size: 0.625rem;
        line-height: 1.3;
    }

    .btn-glass-primary,
    .btn-glass-secondary {
        padding: 0.625rem 0.875rem;
        font-size: 0.75rem;
        gap: 0.25rem;
        border-radius: 0.5rem;
    }

    .btn-glass-primary .material-symbols-outlined,
    .btn-glass-secondary .material-symbols-outlined {
        font-size: 1rem;
    }

    .glass-service-card {
        height: 200px;
        border-radius: 1rem;
    }

    .glass-service-content {
        padding: 0.875rem;
    }

    .glass-service-content h3 {
        font-size: 0.9375rem;
        margin-bottom: 0.25rem;
    }

    .glass-service-content p {
        font-size: 0.6875rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .glass-service-badge {
        padding: 0.1875rem 0.375rem;
        font-size: 0.625rem;
        margin-bottom: 0.5rem;
    }

    .glass-service-badge .material-symbols-outlined {
        font-size: 0.75rem;
    }

    .glass-amenity-card {
        padding: 0.625rem;
        border-radius: 0.5rem;
        gap: 0.375rem;
    }

    .glass-amenity-card .material-symbols-outlined {
        font-size: 1.125rem;
    }

    .glass-amenity-card span:last-child {
        font-size: 0.625rem;
        line-height: 1.2;
    }

    .glass-badge,
    .glass-badge-solid {
        padding: 0.3125rem 0.625rem;
        font-size: 0.6875rem;
        gap: 0.375rem;
    }

    .glass-badge .material-symbols-outlined,
    .glass-badge-solid .material-symbols-outlined {
        font-size: 0.875rem;
    }

    .glass-tag {
        padding: 0.1875rem 0.375rem;
        font-size: 0.625rem;
        gap: 0.1875rem;
    }

    .glass-tag .material-symbols-outlined {
        font-size: 0.75rem;
    }

    .glass-card-solid {
        border-radius: 1rem;
    }

    .glass-promo-code {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
        border-radius: 0.375rem;
    }

    .glass-info-bar {
        padding: 0.5rem 0;
    }
}

/* ============================================
   ANIMATION UTILITIES
   ============================================ */

@keyframes glassShimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Glass shimmer - DISABLED for performance, use on-demand only */
.glass-shimmer {
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.1) 50%,
            transparent 100%);
    background-size: 200% 100%;
    /* animation: glassShimmer 2s infinite; */
}

/* Hover glow effect */
.glass-glow:hover {
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.3);
}


/* ============================================
   GLASS REVIEW CARDS
   ============================================ */

.glass-review-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dark .glass-review-card {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
}

.glass-review-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

/* ============================================
   GLASS RATING SUMMARY
   ============================================ */

.glass-rating-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.05));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 1.25rem;
}

/* ============================================
   GLASS BLOG CARDS
   ============================================ */

.glass-blog-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 1.25rem;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dark .glass-blog-card {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

.glass-blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* ============================================
   GLASS CTA SECTION
   ============================================ */

.glass-cta-section {
    position: relative;
    padding: 5rem 0;
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.95), rgba(17, 24, 39, 0.85));
    overflow: hidden;
}

.glass-cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../img/hero-banner/aurora-hotel-bien-hoa-1.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.2;
    z-index: 0;
}

.glass-cta-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: white;
}

/* ============================================
   GLASS SCROLL INDICATOR
   ============================================ */

.glass-scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--glass-bg-light);
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
    border: 1px solid var(--glass-border-light);
    border-radius: 9999px;
    color: rgba(255, 255, 255, 0.8);
    /* animation disabled for performance */
}

/* Bounce animation - available but not auto-applied
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}
*/

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Glass background utilities */
.bg-glass-light {
    background: var(--glass-bg-light);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
}

.bg-glass-medium {
    background: var(--glass-bg-medium);
    backdrop-filter: blur(var(--blur-lg));
    -webkit-backdrop-filter: blur(var(--blur-lg));
}

.bg-glass-dark {
    background: var(--glass-bg-dark);
    backdrop-filter: blur(var(--blur-lg));
    -webkit-backdrop-filter: blur(var(--blur-lg));
}

/* Glass border utilities */
.border-glass {
    border: 1px solid var(--glass-border-light);
}

.border-glass-accent {
    border: 1px solid var(--glass-border-accent);
}

/* Glass shadow utilities */
.shadow-glass {
    box-shadow: var(--glass-shadow);
}

.shadow-glass-lg {
    box-shadow: var(--glass-shadow-lg);
}

/* Glass hover effects */
.hover-glass-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--glass-shadow-lg);
}

.hover-glass-glow:hover {
    box-shadow: var(--glass-glow);
}


/* ============================================
   GLOBAL LIQUID GLASS COMPONENTS
   For use across all pages
   ============================================ */

/* ============================================
   GLASS PAGE CARDS - Clean & Modern
   ============================================ */

.glass-page-card {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 1.25rem;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .glass-page-card {
    background: linear-gradient(135deg,
            rgba(30, 41, 59, 0.95) 0%,
            rgba(30, 41, 59, 0.9) 100%);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.glass-page-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(212, 175, 55, 0.2) inset;
}

/* ============================================
   GLASS QUICK LINK CARDS
   ============================================ */

.glass-quick-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(255, 255, 255, 0.8) 100%);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 1.25rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    text-decoration: none;
}

.dark .glass-quick-link {
    background: linear-gradient(135deg,
            rgba(30, 41, 59, 0.9) 0%,
            rgba(30, 41, 59, 0.8) 100%);
    border-color: rgba(255, 255, 255, 0.08);
}

.glass-quick-link:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(212, 175, 55, 0.15);
    border-color: rgba(212, 175, 55, 0.3);
}

.glass-quick-link-icon {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    border-radius: 1rem;
    color: white;
    margin-bottom: 1rem;
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
}

/* ============================================
   GLASS CATEGORY CARDS
   ============================================ */

.glass-category-card {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    height: 280px;
    display: block;
    text-decoration: none;
}

.glass-category-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.glass-category-card:hover img {
    transform: scale(1.1);
}

.glass-category-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0.4) 50%,
            transparent 100%);
}

.glass-category-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    color: white;
}

.glass-category-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: var(--accent);
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

/* ============================================
   GLASS FEATURE CARDS - Compact
   ============================================ */

.glass-feature-card {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.dark .glass-feature-card {
    background: linear-gradient(135deg,
            rgba(30, 41, 59, 0.9) 0%,
            rgba(30, 41, 59, 0.85) 100%);
    border-color: rgba(255, 255, 255, 0.08);
}

.glass-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

.glass-feature-icon {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    border-radius: 0.75rem;
    color: white;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.25);
}

/* ============================================
   GLASS STATS SECTION
   ============================================ */

.glass-stats-section {
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.95), rgba(17, 24, 39, 0.9));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
}

.glass-stats-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.glass-stat-item {
    text-align: center;
    padding: 1.5rem;
}

.glass-stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.glass-stat-label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
}

/* ============================================
   GLASS CONTACT CARDS
   ============================================ */

.glass-contact-card {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.dark .glass-contact-card {
    background: linear-gradient(135deg,
            rgba(30, 41, 59, 0.95) 0%,
            rgba(30, 41, 59, 0.9) 100%);
    border-color: rgba(255, 255, 255, 0.08);
}

.glass-contact-card:hover {
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 8px 30px rgba(212, 175, 55, 0.1);
}

.glass-contact-icon {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 0.75rem;
    color: var(--accent);
}

/* ============================================
   GLASS SECTION HEADERS
   ============================================ */

.glass-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 9999px;
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================
   GLASS CTA BUTTONS - Enhanced
   ============================================ */

.glass-cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: white;
    border: none;
    border-radius: 0.875rem;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.35);
}

.glass-cta-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(212, 175, 55, 0.45);
}

.glass-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: white;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.875rem;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.glass-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-3px);
}

/* ============================================
   GLASS FORM CONTAINERS
   ============================================ */

.glass-form-container {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 1.5rem;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
    padding: 2rem;
}

.dark .glass-form-container {
    background: linear-gradient(135deg,
            rgba(30, 41, 59, 0.95) 0%,
            rgba(30, 41, 59, 0.9) 100%);
    border-color: rgba(255, 255, 255, 0.1);
}

/* ============================================
   GLASS TABLE STYLES
   ============================================ */

.glass-table-container {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

.dark .glass-table-container {
    background: linear-gradient(135deg,
            rgba(30, 41, 59, 0.95) 0%,
            rgba(30, 41, 59, 0.9) 100%);
    border-color: rgba(255, 255, 255, 0.08);
}

.glass-table-header {
    background: rgba(212, 175, 55, 0.1);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.glass-table-row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: background 0.2s ease;
}

.dark .glass-table-row {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

.glass-table-row:hover {
    background: rgba(212, 175, 55, 0.05);
}

/* ============================================
   GLASS PAGINATION
   ============================================ */

.glass-pagination {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.glass-pagination-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.5rem;
    color: var(--text-primary-light);
    font-weight: 500;
    transition: all 0.2s ease;
    text-decoration: none;
}

.dark .glass-pagination-btn {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-primary-dark);
}

.glass-pagination-btn:hover,
.glass-pagination-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

/* ============================================
   GLASS EMPTY STATE
   ============================================ */

.glass-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.6) 0%,
            rgba(255, 255, 255, 0.4) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px dashed rgba(0, 0, 0, 0.1);
    border-radius: 1.25rem;
}

.dark .glass-empty-state {
    background: linear-gradient(135deg,
            rgba(30, 41, 59, 0.6) 0%,
            rgba(30, 41, 59, 0.4) 100%);
    border-color: rgba(255, 255, 255, 0.1);
}

.glass-empty-icon {
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 50%;
    margin-bottom: 1.5rem;
}

.glass-empty-icon .material-symbols-outlined {
    font-size: 2.5rem;
    color: var(--accent);
}

/* ============================================
   GLASS LOADING SKELETON
   ============================================ */

.glass-skeleton {
    background: linear-gradient(90deg,
            rgba(0, 0, 0, 0.06) 25%,
            rgba(0, 0, 0, 0.1) 50%,
            rgba(0, 0, 0, 0.06) 75%);
    background-size: 200% 100%;
    animation: glassSkeletonShimmer 1.5s ease infinite;
    border-radius: 0.5rem;
}

.dark .glass-skeleton {
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.06) 25%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(255, 255, 255, 0.06) 75%);
    background-size: 200% 100%;
}

@keyframes glassSkeletonShimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ============================================
   GLASS ALERT/NOTIFICATION
   ============================================ */

.glass-alert {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 0.875rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.dark .glass-alert {
    background: rgba(30, 41, 59, 0.9);
}

.glass-alert-success {
    border-left: 4px solid #10b981;
}

.glass-alert-error {
    border-left: 4px solid #ef4444;
}

.glass-alert-warning {
    border-left: 4px solid #f59e0b;
}

.glass-alert-info {
    border-left: 4px solid #3b82f6;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS FOR NEW COMPONENTS
   ============================================ */

@media (max-width: 639px) {
    .glass-page-card {
        border-radius: 1rem;
    }

    .glass-quick-link {
        padding: 1rem;
        border-radius: 1rem;
    }

    .glass-quick-link-icon {
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 0.75rem;
    }

    .glass-category-card {
        height: 200px;
        border-radius: 1rem;
    }

    .glass-feature-card {
        padding: 1rem;
        border-radius: 0.875rem;
    }

    .glass-feature-icon {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 0.625rem;
    }

    .glass-stat-value {
        font-size: 1.75rem;
    }

    .glass-stat-label {
        font-size: 0.75rem;
    }

    .glass-contact-card {
        padding: 1rem;
        border-radius: 0.875rem;
    }

    .glass-contact-icon {
        width: 2.25rem;
        height: 2.25rem;
    }

    .glass-cta-primary,
    .glass-cta-secondary {
        padding: 0.875rem 1.5rem;
        font-size: 0.875rem;
    }

    .glass-form-container {
        padding: 1.25rem;
        border-radius: 1rem;
    }

    .glass-section-badge {
        padding: 0.375rem 0.75rem;
        font-size: 0.6875rem;
    }
}


/* ============================================
   PROFILE & BOOKING GLASS STYLES
   ============================================ */

/* Profile Header Glass */
.glass-profile-header {
    position: relative;
    overflow: hidden;
    padding: 2rem;
    border-radius: 1.5rem;
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.9), rgba(17, 24, 39, 0.7));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.glass-profile-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../img/hero-banner/aurora-hotel-bien-hoa-1.jpg') center/cover;
    opacity: 0.3;
    z-index: -1;
}

/* Profile Avatar Glass */
.glass-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* Booking Card Glass */
.glass-booking-card {
    background: linear-gradient(135deg,
            rgba(30, 41, 59, 0.6) 0%,
            rgba(30, 41, 59, 0.8) 50%,
            rgba(30, 41, 59, 0.6) 100%);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1.25rem;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.glass-booking-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

.dark .glass-booking-card {
    background: linear-gradient(135deg,
            rgba(30, 41, 59, 0.5) 0%,
            rgba(20, 30, 45, 0.6) 100%);
}

/* Tab Glass Style */
.glass-tab {
    padding: 0.75rem 1.25rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary-light);
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
}

.glass-tab:hover {
    color: var(--accent);
    background: rgba(212, 175, 55, 0.05);
}

.glass-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    background: rgba(212, 175, 55, 0.08);
}

.dark .glass-tab {
    color: var(--text-secondary-dark);
}

.dark .glass-tab:hover,
.dark .glass-tab.active {
    color: var(--accent);
}

/* Form Glass Container */
.glass-form-wrapper {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
}

.dark .glass-form-wrapper {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Step Indicator Glass */
.glass-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 9999px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.glass-step.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.glass-step.completed {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.4);
    color: #10b981;
}

/* Price Display Glass */
.glass-price-display {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 1rem;
    padding: 1.5rem;
}

.glass-price-display .price-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
}

/* Notification Glass */
.glass-notification {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(30, 41, 59, 0.6);
    color: white;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.glass-notification.success {
    border-left: 4px solid #10b981;
    background: rgba(16, 185, 129, 0.05);
}

.glass-notification.error {
    border-left: 4px solid #ef4444;
    background: rgba(239, 68, 68, 0.05);
}

.glass-notification.warning {
    border-left: 4px solid #f59e0b;
    background: rgba(245, 158, 11, 0.05);
}

.glass-notification.info {
    border-left: 4px solid #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

/* Empty State Glass */
.glass-empty-state {
    text-align: center;
    padding: 3rem 2rem;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.04) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
}

.glass-empty-state .icon {
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.glass-empty-state .icon .material-symbols-outlined {
    font-size: 2.5rem;
    color: var(--accent);
}

/* Responsive for Profile/Booking Glass */
@media (max-width: 768px) {
    .glass-profile-header {
        padding: 1.5rem;
        border-radius: 1rem;
    }

    .glass-avatar {
        width: 3rem;
        height: 3rem;
        font-size: 1.25rem;
    }

    .glass-booking-card {
        padding: 1rem;
        border-radius: 1rem;
    }

    .glass-form-wrapper {
        padding: 1.5rem;
        border-radius: 1rem;
    }

    .glass-price-display {
        padding: 1rem;
    }

    .glass-price-display .price-value {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .glass-profile-header {
        padding: 1rem;
    }

    .glass-tab {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }

    .glass-step {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }
}

/* ============================================
   GLASS BOOKING FORM - UNIFIED
   ============================================ */
.glass-booking-form {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.25rem;
    padding: 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.glass-booking-form:hover {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}