/* Backpackers only: translucent surfaces use the existing light/dark palette. */
:root {
    --liquid-surface: rgba(34, 13, 2, .82);
    --liquid-edge: rgba(201, 168, 76, .32);
    --liquid-highlight: rgba(253, 246, 236, .12);
    --liquid-shadow: 0 16px 44px rgba(26, 8, 0, .14), inset 0 1px 0 var(--liquid-highlight), inset 0 -1px 0 rgba(201, 168, 76, .08);
}
[data-theme="light"] {
    --liquid-surface: rgba(255, 253, 248, .82);
    --liquid-edge: rgba(92, 45, 14, .17);
    --liquid-highlight: rgba(255, 253, 248, .88);
    --liquid-shadow: 0 16px 44px rgba(92, 45, 14, .08), inset 0 1px 0 var(--liquid-highlight), inset 0 -1px 0 rgba(201, 168, 76, .12);
}
/* Opaque fallback for browsers without backdrop filtering. */
.navbar, .navbar.scrolled, .stay-highlights, .site-footer,
.room-premium-card, .room-listing-card, .amenity-item, .nearby-card,
.award-box, .booking-sidebar-card, .booking-form-wrap, .booking-guide,
.mini-card, .standalone-card, .success-container, .qr-modal, .mobile-menu {
    background: var(--dark-2);
    border-color: var(--liquid-edge);
    box-shadow: var(--liquid-shadow);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .navbar, .navbar.scrolled, .stay-highlights, .site-footer,
    .room-premium-card, .room-listing-card, .amenity-item, .nearby-card,
    .award-box, .booking-sidebar-card, .booking-form-wrap, .booking-guide,
    .mini-card, .standalone-card, .success-container, .qr-modal, .mobile-menu {
        background: linear-gradient(135deg, var(--liquid-highlight), transparent 42%), var(--liquid-surface);
        -webkit-backdrop-filter: blur(22px) saturate(115%);
        backdrop-filter: blur(22px) saturate(115%);
    }
}
.room-premium-card, .room-listing-card, .booking-sidebar-card,
.booking-form-wrap, .booking-guide, .standalone-card, .success-container { border-radius: 24px; }
.amenity-item, .nearby-card, .award-box, .mini-card { border-radius: 18px; }
.btn { border-radius: 999px; box-shadow: inset 0 1px 0 rgba(253, 246, 236, .3), 0 5px 18px rgba(26, 8, 0, .08); }
.btn-gold { background-image: linear-gradient(170deg, rgba(253, 246, 236, .16), transparent 60%); }
.theme-toggle, .qr-btn, .footer-social a, .scroll-top {
    background: var(--dark-2);
    background: color-mix(in srgb, var(--dark-2) 80%, transparent);
    border: 1px solid var(--liquid-edge);
    box-shadow: inset 0 1px 0 var(--liquid-highlight);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.hero-badge, .hero .btn-outline, .cta .btn-outline, .award-overlay,
.rpc-count, .rpc-dots, .rgg-zoom, .photo-expand {
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 rgba(253, 246, 236, .22), 0 8px 24px rgba(26, 8, 0, .12);
}
.hero .btn-outline, .cta .btn-outline { background: rgba(44, 15, 15, .38); }
.room-premium-card:hover, .room-listing-card:hover { border-color: var(--gold); box-shadow: var(--liquid-shadow), 0 20px 42px rgba(26, 8, 0, .1); }
.footer-bottom { flex-wrap: wrap; }
.designer-credit { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.designer-whatsapp { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--liquid-edge); border-radius: 999px; color: var(--text-cream); font-size: 12px; box-shadow: inset 0 1px 0 var(--liquid-highlight); }
.designer-whatsapp:hover { border-color: var(--gold); }
@media (prefers-reduced-transparency: reduce) {
    .navbar, .navbar.scrolled, .stay-highlights, .site-footer,
    .room-premium-card, .room-listing-card, .amenity-item, .nearby-card,
    .award-box, .booking-sidebar-card, .booking-form-wrap, .booking-guide,
    .mini-card, .standalone-card, .success-container, .qr-modal, .mobile-menu {
        background: var(--dark-2); -webkit-backdrop-filter: none; backdrop-filter: none;
    }
}