:root {
  /* Windowseat Rev.3 — Sapphire / Royal / Platinum */
  --sapphire: #050b16;
  --sapphire-2: #0d1c38;
  --sapphire-3: #16305c;

  --glass-line: rgba(200, 220, 245, 0.16);
  --glass-line-strong: rgba(200, 220, 245, 0.3);
  --glass-fill-hi: rgba(255, 255, 255, 0.08);
  --glass-fill-lo: rgba(255, 255, 255, 0.02);

  --royal: #2b46c9;
  --royal-2: #5f7ce8;
  --royal-deep: #1c2f8f;
  --platinum: #c9d3e0;
  --platinum-2: #eef2f8;
  --platinum-deep: #98a5b8;

  --pearl: #eef1f6;
  --pearl-2: #d7deea;
  --inkwell: #10182a;
  --ink-soft: #3a4a68;

  --seal: #173a68;
  --seal-2: #2b5490;
  --ok: #3fb6e0;
  --warn: #d4a13a;
  --danger: #c0435a;

  /* Gilt — the one warm accent, reserved for moments blue can't carry alone
     (e.g. hover feedback against a blue base, where blue-on-blue disappears) */
  --gilt: #d9b35a;
  --gilt-2: #f0d68a;

  --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia,
    serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", Consolas, "Roboto Mono", monospace;

  /* legacy names used throughout this file — remapped to the palette above */
  --ink: #f2f5fb;
  --muted: #c3ccdb;
  --band: rgba(5, 11, 22, 0.45);
  --band-strong: rgba(5, 11, 22, 0.6);
  --ring: rgba(200, 220, 245, 0.35);
  --menu-bg: #0d1c38;
  --menu-br: rgba(200, 220, 245, 0.14);
}

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--sapphire);
}

/* Header */
.site-header {
  position: fixed;
  inset: 0 auto auto 0;
  height: 64px;
  width: 100%;
  display: grid;
  grid-template-columns: 140px 1fr 240px;
  align-items: center;
  padding: 10px 16px;
  z-index: 20;
  background: linear-gradient(160deg, var(--glass-fill-hi), var(--glass-fill-lo));
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--glass-line);
}
.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo-button {
  display: inline-block;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  mix-blend-mode: multiply;
  overflow: hidden;
}
.logo-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  display: block;
}

.header-center {
  display: flex;
  justify-content: center;
}
.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 28px;
  align-items: center;
}
.nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.2px;
  font-size: 14.5px;
  padding: 8px 10px;
  border-radius: 8px;
  transition: background 0.2s;
}
.nav a:hover {
  background: var(--band);
}

.header-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

/* Settings & Avatar buttons */
.icon-btn,
.avatar-btn {
  position: relative;
  background: var(--glass-fill-hi);
  border: 1px solid var(--glass-line-strong);
  color: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: filter 0.2s;
  mix-blend-mode: multiply;
}

/* Tooltip — add data-tip="Label" to any .icon-btn / .avatar-btn */
.icon-btn[data-tip]::after,
.avatar-btn[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--pearl);
  color: var(--inkwell);
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 9px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 8px 20px rgba(2, 5, 10, 0.4);
  z-index: 40;
}
.icon-btn[data-tip]::before,
.avatar-btn[data-tip]::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: var(--pearl);
  opacity: 0;
  pointer-events: none;
  z-index: 40;
}
.icon-btn[data-tip]:hover::after,
.icon-btn[data-tip]:focus-visible::after,
.avatar-btn[data-tip]:hover::after,
.avatar-btn[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.icon-btn[data-tip]:hover::before,
.icon-btn[data-tip]:focus-visible::before,
.avatar-btn[data-tip]:hover::before,
.avatar-btn[data-tip]:focus-visible::before {
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .icon-btn[data-tip]::after,
  .icon-btn[data-tip]::before,
  .avatar-btn[data-tip]::after,
  .avatar-btn[data-tip]::before {
    transition: opacity 0.15s ease, transform 0.15s ease;
  }
}

/* Ripple + magnetic hover — classes applied by JS/main.js (setupMotion) */
.ripple-host {
  position: relative;
  overflow: hidden;
}
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: scale(0);
  pointer-events: none;
  animation: rippleFx 0.6s ease-out forwards;
}
@keyframes rippleFx {
  to {
    transform: scale(1);
    opacity: 0;
  }
}
.btn-add,
.btn-checkout,
.primary,
.btn-outline,
.btn-ghost,
.tab,
.back-btn,
.price-btn {
  transition: transform 0.15s ease-out;
}

/* Shared button base — a page-specific stylesheet (listofplace.css, deals.css,
   etc.) may still override these, but every page now gets a correctly
   styled button even if it doesn't define its own. */
.btn-add,
.btn-checkout {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--royal-2);
  background: linear-gradient(180deg, var(--royal-2), var(--royal));
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}
.btn-add:hover,
.btn-checkout:hover {
  filter: brightness(1.08);
}
.btn-outline,
.btn-ghost {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--glass-line-strong);
  background: var(--glass-fill-hi);
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}
.btn-outline:hover,
.btn-ghost:hover {
  filter: brightness(1.15);
}
.icon-btn:hover,
.avatar-btn:hover {
  filter: brightness(1.1);
}

.avatar-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 0;
  position: relative;
}
#avatarInitial {
  font-weight: 800;
}

.guest-only {
  display: none;
}
.auth-only {
  display: none;
}
body[data-auth="false"] .guest-only {
  display: inline-grid;
}
body[data-auth="true"] .auth-only {
  display: inline-grid;
}

/* Menus (dropdown) */
.menu {
  position: absolute;
  right: 16px;
  top: 64px;
  width: 250px;
  background: var(--menu-bg);
  border: 1px solid var(--menu-br);
  border-radius: 12px;
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 4px;
  z-index: 30;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.menu.open {
  display: flex;
}
.menu-item {
  width: 100%;
  text-align: left;
  color: #e5e7eb;
  background: transparent;
  border: 0;
  padding: 10px 12px;
  border-radius: 8px;
  display: flex;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
}
.menu-item:hover {
  background: var(--glass-fill-hi);
}
.menu-item.danger {
  color: #f2a3b0;
}

/* Hero */
.hero {
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: var(--sapphire);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(5, 11, 22, 0.1) 0%, rgba(5, 11, 22, 0.8) 100%);
  z-index: 0;
}

/* Slides for 5s cross-fade + zoom (optional) */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;

  opacity: 0;
  transition: opacity 800ms ease-in-out;
  transform: scale(1);
  will-change: opacity, transform;
}
.hero-slide.is-active {
  opacity: 1;
  animation: kenburns 6s linear forwards;
}
@keyframes kenburns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}

/* Band */
.hero-band {
  position: absolute;
  left: 0;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  padding: 46px 20px;
  background: transparent;
  display: grid;
  place-items: center;
  gap: 14px;
  z-index: 1;
}
.logo-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px;

  mix-blend-mode: multiply;
  filter: contrast(1.05) saturate(1.05);
  background: transparent;
}
.hero-band:hover {
  /* Removed hover effect to maintain clean scrim */
}
.hero-band h1 {
  margin: 0;
  font-family: Merriweather, serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 1.15;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}
.hero-quote {
  margin: 0;
  max-width: 980px;
  text-align: center;
  color: var(--muted);
  font-size: 16px;
}

/* Search */
.search-row {
  display: flex;
  gap: 0;
}
#SearchCountry {
  width: min(620px, 86vw);
  padding: 14px 16px;
  border: 1px solid var(--ring);
  border-right: 0;
  border-radius: 12px 0 0 12px;
  background: rgba(255, 255, 255, 0.95);
  color: #0b0e14;
  font-size: 15px;
  outline: none;
}
#searchButton {
  padding: 0 16px;
  border: 1px solid var(--ring);
  border-left: 0;
  border-radius: 0 12px 12px 0;
  background: rgba(255, 255, 255, 0.98);
  color: #0b0e14;
  cursor: pointer;
  display: grid;
  place-items: center;
}
#searchButton:hover {
  filter: brightness(0.96);
}

/* Modals */
dialog.modal {
  border: 0;
  padding: 0;
}
dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}
.card {
  width: min(92vw, 460px);
  background: #0f172a;
  color: #e5e7eb;
  border: 1px solid var(--menu-br);
  border-radius: 16px;
  padding: 20px;
  display: grid;
  gap: 12px;
}
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.icon-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 640px) {
  .grid {
    grid-template-columns: 1fr;
  }
}
label {
  display: grid;
  gap: 6px;
  font-size: 0.95rem;
}
input {
  padding: 10px 12px;
  border: 1px solid #2b3548;
  border-radius: 10px;
  background: #0b1222;
  color: #fff;
}
.primary {
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid #9cc1ff;
  background: #3b82f6;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
/* --- Enhanced menu open/close --- */
.menu {
  position: absolute;
  right: 16px;
  top: 72px;
  width: 280px;
  background: var(--menu-bg);
  border: 1px solid var(--menu-br);
  border-radius: 14px;
  padding: 10px;
  display: block; /* always in layout for smooth animation */
  flex-direction: column;
  gap: 4px;
  z-index: 50;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
  transform-origin: top right;
  transform: scale(0.96) translateY(-6px);
  opacity: 0;
  filter: blur(2px);
  pointer-events: none;
  visibility: hidden;
  transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.18s ease,
    filter 0.18s ease, visibility 0s linear 0.18s;
}
.menu.open {
  display: flex;
  transform: scale(1) translateY(0);
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  visibility: visible;
  transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.18s ease,
    filter 0.18s ease, visibility 0s;
}

@keyframes itemIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.menu.open .menu-item {
  animation: itemIn 0.24s calc(var(--d, 0ms)) cubic-bezier(0.2, 0.7, 0.2, 1)
    both;
}

/* Gear spin cue while open */
.icon-btn[aria-expanded="true"] > i {
  transform: rotate(180deg);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* “Magnet” hover nudge */
.icon-btn.magnet,
.avatar-btn.magnet {
  transition: transform 0.12s ease-out, filter 0.2s;
}

/* ===== Loader Overlay ===== */
body.loading {
  overflow: hidden;
}
.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: radial-gradient(
    120% 120% at 20% 0%,
    var(--sapphire-2) 0%,
    var(--sapphire) 60%,
    #030710 100%
  );
  animation: loaderFadeIn 0.2s ease both;
}
@keyframes loaderFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.loader-card {
  width: min(92vw, 420px);
  background: linear-gradient(160deg, var(--glass-fill-hi), var(--glass-fill-lo));
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--glass-line);
  border-radius: 16px;
  padding: 22px;
  color: var(--ink);
  box-shadow: 0 16px 60px rgba(2, 5, 10, 0.55);
  display: grid;
  gap: 12px;
  justify-items: center;
  animation: pop 0.22s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes pop {
  from {
    transform: scale(0.96);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.loader-logo {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--sapphire-2);
  border: 1px solid var(--glass-line-strong);
}
.loader-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}

.loader h2 {
  margin: 6px 0 2px 0;
  font-size: 18px;
  font-weight: 800;
}
.loader-progress {
  width: 100%;
  height: 10px;
  background: var(--sapphire-2);
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  overflow: hidden;
}
.loader-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--royal-deep), var(--royal), var(--royal-2));
  transition: width 0.25s ease;
}
.loader-meta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  opacity: 0.9;
  font-family: var(--font-mono);
}
.loader-flap {
  width: 20px;
  height: 26px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--sapphire-3), var(--sapphire-2));
  border: 1px solid var(--glass-line);
  color: var(--platinum-2);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
  position: relative;
}
.loader-flap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.4);
}
@media (prefers-reduced-motion: no-preference) {
  .loader-flap {
    animation: flick 1.4s ease-in-out infinite;
  }
}
@keyframes flick {
  0%,
  88%,
  100% {
    transform: rotateX(0);
  }
  92% {
    transform: rotateX(35deg);
  }
}

/* Hide overlay on done */
.loader.is-hidden {
  animation: loaderFadeOut 0.25s ease both;
  pointer-events: none;
}
@keyframes loaderFadeOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* Optional: soften reveal of header/hero */
body.loading .site-header,
body.loading .hero {
  filter: blur(2px);
  opacity: 0.7;
}
body.loaded .site-header,
body.loaded .hero {
  filter: none;
  opacity: 1;
  transition: filter 0.3s ease, opacity 0.3s ease;
}