/* ============================================================
   🌊 LIQUID GLASS — Gratus Hotels
   ============================================================
   A translucent, refractive design layer inspired by
   Apple's Liquid Glass. Loaded LAST so it overlays the
   existing gold luxury theme with frosted surfaces.

   Core recipe for every glass surface:
     • semi-transparent tinted background
     • backdrop-filter: blur + saturate  (the "glass")
     • 1px light border                  (the "edge")
     • inset top highlight               (the "specular")
     • soft outer shadow                 (the "lift")
   ============================================================ */

:root {
  /* Glass tints */
  --lg-tint:        rgba(255, 255, 255, 0.045);
  --lg-tint-strong: rgba(255, 255, 255, 0.075);
  --lg-tint-gold:   rgba(212, 175, 55, 0.07);

  /* Edges */
  --lg-edge:        rgba(255, 255, 255, 0.14);
  --lg-edge-gold:   rgba(212, 175, 55, 0.30);
  --lg-edge-bright: rgba(255, 255, 255, 0.28);

  /* Blur strengths */
  --lg-blur-sm: blur(14px) saturate(160%);
  --lg-blur-md: blur(24px) saturate(170%);
  --lg-blur-lg: blur(40px) saturate(180%);

  /* Shadows */
  --lg-shadow-sm:
    0 4px 18px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --lg-shadow-md:
    0 12px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  --lg-shadow-lg:
    0 24px 70px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(212, 175, 55, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}

/* ============================================================
   ✦ SHARED GLASS PRIMITIVE
   ============================================================ */
.card,
.hotel-card,
.modal-box,
.modal-card,
.luxury-chat-box,
.request-admin-item,
.made-by,
.sr-stat,
.room-floor,
.age-gate-box,
.lang-picker-card,
.booking-perks,
.funds-luxe-box,
.detail-info-card,
.wallet-card {
  position: relative;
  background: linear-gradient(
    145deg,
    var(--lg-tint-strong) 0%,
    var(--lg-tint) 45%,
    rgba(0, 0, 0, 0.12) 100%
  ) !important;
  -webkit-backdrop-filter: var(--lg-blur-md);
  backdrop-filter: var(--lg-blur-md);
  border: 1px solid var(--lg-edge) !important;
  box-shadow: var(--lg-shadow-md) !important;
  overflow: hidden;
}

/* Specular sheen along the top edge of every glass surface */
.card::before,
.hotel-card::before,
.modal-box::before,
.modal-card::before,
.luxury-chat-box::before,
.room-floor::before,
.age-gate-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.45),
    rgba(212, 175, 55, 0.5),
    rgba(255, 255, 255, 0.45),
    transparent
  );
  pointer-events: none;
  z-index: 3;
}

/* ============================================================
   ✦ HEADER / NAVIGATION — floating glass bar
   ============================================================ */
header,
.site-header,
.topbar,
.nav,
.navbar {
  background: rgba(10, 8, 6, 0.55) !important;
  -webkit-backdrop-filter: var(--lg-blur-lg);
  backdrop-filter: var(--lg-blur-lg);
  border-bottom: 1px solid var(--lg-edge) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Bottom tab bar / mobile nav */
.bottom-nav,
.tabbar,
.mobile-nav {
  background: rgba(10, 8, 6, 0.6) !important;
  -webkit-backdrop-filter: var(--lg-blur-lg);
  backdrop-filter: var(--lg-blur-lg);
  border-top: 1px solid var(--lg-edge) !important;
}

/* ============================================================
   ✦ BUTTONS — glass pills with refraction
   ============================================================ */
.btn,
.btn-outline,
.tab,
.quick-reply-btn,
.chip,
.filter-chip {
  position: relative;
  /* Brighter glass so buttons never read as flat black boxes */
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 240, 200, 0.08) 50%,
    rgba(212, 175, 55, 0.06) 100%
  ) !important;
  -webkit-backdrop-filter: var(--lg-blur-sm);
  backdrop-filter: var(--lg-blur-sm);
  border: 1px solid rgba(212, 175, 55, 0.45) !important;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  color: #f5e5a3 !important;
  overflow: hidden;
  transition:
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.28s ease,
    border-color 0.28s ease,
    background 0.28s ease !important;
}

.btn:hover,
.btn-outline:hover,
.quick-reply-btn:hover,
.chip:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 226, 140, 0.85) !important;
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.26) 0%,
    rgba(255, 240, 200, 0.14) 50%,
    rgba(212, 175, 55, 0.12) 100%
  ) !important;
  color: #ffffff !important;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.45),
    0 0 28px rgba(212, 175, 55, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

/* Pressed state — stays bright, never collapses to black */
.btn:active,
.btn-outline:active,
.tab:active,
.quick-reply-btn:active,
.chip:active {
  transform: translateY(0) scale(0.98);
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.30) 0%,
    rgba(255, 240, 200, 0.18) 50%,
    rgba(212, 175, 55, 0.16) 100%
  ) !important;
  border-color: rgba(255, 226, 140, 0.95) !important;
  color: #ffffff !important;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.4),
    0 0 22px rgba(212, 175, 55, 0.4),
    inset 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

/* Keyboard / tap focus ring */
.btn:focus-visible,
.btn-outline:focus-visible,
.tab:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(212, 175, 55, 0.35),
    0 10px 28px rgba(0, 0, 0, 0.45) !important;
}

/* Gold buttons keep their gold fill but gain a glass shell */
.btn-gold,
.btn-gold-sm {
  background: linear-gradient(
    150deg,
    rgba(255, 226, 140, 0.95) 0%,
    rgba(212, 175, 55, 0.92) 45%,
    rgba(168, 126, 16, 0.95) 100%
  ) !important;
  -webkit-backdrop-filter: var(--lg-blur-sm);
  backdrop-filter: var(--lg-blur-sm);
  border: 1px solid rgba(255, 235, 170, 0.55) !important;
  box-shadow:
    0 8px 26px rgba(212, 175, 55, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
  color: #17130a !important;
}

.btn-gold:hover,
.btn-gold-sm:hover {
  box-shadow:
    0 14px 40px rgba(212, 175, 55, 0.45),
    0 0 30px rgba(212, 175, 55, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}

/* ── Header auth / nav pills — always clearly visible ── */
#authBtn,
.auth-btn,
.header-btn,
.nav-btn {
  background: linear-gradient(
    150deg,
    rgba(255, 226, 140, 0.22) 0%,
    rgba(212, 175, 55, 0.12) 100%
  ) !important;
  -webkit-backdrop-filter: var(--lg-blur-sm);
  backdrop-filter: var(--lg-blur-sm);
  border: 1px solid rgba(212, 175, 55, 0.6) !important;
  color: #ffe9a3 !important;
  font-weight: 600 !important;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.35),
    0 0 18px rgba(212, 175, 55, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

#authBtn:hover,
.auth-btn:hover {
  background: linear-gradient(
    150deg,
    rgba(255, 235, 170, 0.35) 0%,
    rgba(212, 175, 55, 0.22) 100%
  ) !important;
  border-color: rgba(255, 235, 170, 0.9) !important;
  color: #ffffff !important;
  box-shadow:
    0 8px 26px rgba(0, 0, 0, 0.45),
    0 0 26px rgba(212, 175, 55, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

/* Sheen sweep on hover for every glass button */
.btn::after,
.btn-outline::after,
.quick-reply-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.18),
    transparent
  );
  transform: skewX(-22deg);
  pointer-events: none;
  transition: left 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn:hover::after,
.btn-outline:hover::after,
.quick-reply-btn:hover::after {
  left: 140%;
}

/* ============================================================
   ✦ INPUTS — recessed glass wells
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.28) 0%,
    rgba(255, 255, 255, 0.04) 100%
  ) !important;
  -webkit-backdrop-filter: var(--lg-blur-sm);
  backdrop-filter: var(--lg-blur-sm);
  border: 1px solid var(--lg-edge) !important;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.07) !important;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--lg-edge-gold) !important;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.22) 0%,
    rgba(212, 175, 55, 0.06) 100%
  ) !important;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.28),
    0 0 0 3px rgba(212, 175, 55, 0.14),
    0 0 22px rgba(212, 175, 55, 0.18) !important;
}

/* ============================================================
   ✦ MODALS — deep glass with heavy blur
   ============================================================ */

/* Guard: modals must stay fixed + full-screen, centred, above everything.
   Some earlier rules in this file could otherwise flatten them. */
.modal:not(.hidden) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9000 !important;
  display: grid !important;
  place-items: center !important;
}
.modal.hidden { display: none !important; }

.modal-backdrop {
  background: rgba(6, 5, 4, 0.62) !important;
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  backdrop-filter: blur(28px) saturate(140%);
}

.modal-box,
.modal-card,
.auth-lux-box,
.phone-ask-box {
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.035) 40%,
    rgba(10, 8, 6, 0.55) 100%
  ) !important;
  -webkit-backdrop-filter: var(--lg-blur-lg);
  backdrop-filter: var(--lg-blur-lg);
  border: 1px solid var(--lg-edge-bright) !important;
  box-shadow: var(--lg-shadow-lg) !important;
}

/* ============================================================
   ✦ HOTEL CARDS — glass frame around the photo
   ============================================================ */
.hotel-card {
  border-radius: 20px !important;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease,
    border-color 0.4s ease !important;
}

.hotel-card:hover {
  transform: translateY(-6px) scale(1.012);
  border-color: var(--lg-edge-gold) !important;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(212, 175, 55, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

.hotel-info {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(0, 0, 0, 0.18) 100%
  ) !important;
  -webkit-backdrop-filter: var(--lg-blur-sm);
  backdrop-filter: var(--lg-blur-sm);
}

.hotel-badge {
  background: rgba(255, 255, 255, 0.12) !important;
  -webkit-backdrop-filter: var(--lg-blur-sm);
  backdrop-filter: var(--lg-blur-sm);
  border: 1px solid var(--lg-edge) !important;
  box-shadow: var(--lg-shadow-sm) !important;
}

/* ============================================================
   ✦ ROOM GRID CELLS — tiny glass tiles
   ============================================================ */
.room-cell,
.room-type-tag {
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(0, 0, 0, 0.14) 100%
  ) !important;
  -webkit-backdrop-filter: var(--lg-blur-sm);
  backdrop-filter: var(--lg-blur-sm);
  border: 1px solid var(--lg-edge) !important;
  box-shadow: var(--lg-shadow-sm) !important;
  transition:
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s ease !important;
}

.room-cell:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.45),
    0 0 20px rgba(212, 175, 55, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* ============================================================
   ✦ CHAT BUBBLES — frosted messages
   ============================================================ */
.chat-bubble,
.luxury-chat-bubble,
.chat-msg {
  -webkit-backdrop-filter: var(--lg-blur-sm);
  backdrop-filter: var(--lg-blur-sm);
  border: 1px solid var(--lg-edge) !important;
  box-shadow: var(--lg-shadow-sm) !important;
}

/* ============================================================
   ✦ TOASTS — floating glass pills
   ============================================================ */
.toast,
#toast,
.toast-item {
  background: rgba(16, 13, 9, 0.72) !important;
  -webkit-backdrop-filter: var(--lg-blur-lg);
  backdrop-filter: var(--lg-blur-lg);
  border: 1px solid var(--lg-edge-bright) !important;
  box-shadow: var(--lg-shadow-lg) !important;
}

/* ============================================================
   ✦ LANGUAGE PICKER CARDS
   ============================================================ */
.lang-card,
.lang-luxe-btn {
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(0, 0, 0, 0.16) 100%
  ) !important;
  -webkit-backdrop-filter: var(--lg-blur-md);
  backdrop-filter: var(--lg-blur-md);
  border: 1px solid var(--lg-edge) !important;
  box-shadow: var(--lg-shadow-sm) !important;
  transition:
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease !important;
}

.lang-card:hover,
.lang-luxe-btn:hover {
  transform: translateY(-4px);
  border-color: var(--lg-edge-gold) !important;
  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(212, 175, 55, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.lang-card.selected {
  border-color: rgba(212, 175, 55, 0.8) !important;
  background: linear-gradient(
    150deg,
    rgba(212, 175, 55, 0.16) 0%,
    rgba(212, 175, 55, 0.04) 100%
  ) !important;
  box-shadow:
    0 0 0 3px rgba(212, 175, 55, 0.18),
    0 16px 44px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

/* ============================================================
   ✦ PROMO VIDEO — glass frame
   ============================================================ */
.promo-video-wrap {
  border-radius: 22px !important;
  overflow: hidden;
  border: 1px solid var(--lg-edge) !important;
  box-shadow: var(--lg-shadow-lg) !important;
}

/* ============================================================
   ✦ SECTION HEADS — subtle glass underline
   ============================================================ */
.section-head {
  position: relative;
  padding-bottom: 14px;
}
.section-head::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(212, 175, 55, 0.5),
    rgba(255, 255, 255, 0.10),
    transparent
  );
}
[dir="rtl"] .section-head::after {
  background: linear-gradient(
    270deg,
    rgba(212, 175, 55, 0.5),
    rgba(255, 255, 255, 0.10),
    transparent
  );
}

/* ============================================================
   ✦ SCROLLBAR — glass rail
   ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.03); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(212, 175, 55, 0.45),
    rgba(212, 175, 55, 0.18)
  );
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    rgba(212, 175, 55, 0.7),
    rgba(212, 175, 55, 0.35)
  );
  background-clip: padding-box;
}

/* ============================================================
   ✦ AMBIENT BACKGROUND — soft colour wells behind the glass
   Gives the blur something to refract, which is what makes
   liquid glass read as "glass" instead of "grey box".
   ============================================================ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle 620px at 12% 8%,  rgba(212, 175, 55, 0.10), transparent 62%),
    radial-gradient(circle 720px at 88% 22%, rgba(180, 140, 40, 0.08), transparent 62%),
    radial-gradient(circle 560px at 50% 92%, rgba(212, 175, 55, 0.07), transparent 62%);
  animation: lgAmbientDrift 22s ease-in-out infinite alternate;
}

@keyframes lgAmbientDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-1.5%, 1.5%, 0) scale(1.04); }
  100% { transform: translate3d(1.5%, -1%, 0) scale(1.02); }
}

/* Keep real content above the ambient layer.
   NOTE: never include .modal here — modals rely on position:fixed
   and forcing position:relative collapses them into a tiny inline box. */
main,
header,
footer,
.route {
  position: relative;
  z-index: 1;
}

/* ============================================================
   ✦ PERFORMANCE + FALLBACKS
   ============================================================ */

/* Devices without backdrop-filter get solid tinted surfaces */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card,
  .hotel-card,
  .modal-box,
  .modal-card,
  .auth-lux-box,
  .phone-ask-box,
  header {
    background: rgba(18, 15, 10, 0.94) !important;
  }
}

/* Lighter blur on small screens so scrolling stays smooth */
@media (max-width: 720px) {
  :root {
    --lg-blur-sm: blur(10px) saturate(150%);
    --lg-blur-md: blur(16px) saturate(160%);
    --lg-blur-lg: blur(24px) saturate(165%);
  }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .btn::after,
  .btn-outline::after,
  .quick-reply-btn::after { display: none; }
}