/* ==========================================================================
   Midlands Bouncy Castles - cosmic dark theme
   Hand-written. No framework, no build step.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap");

:root {
  /* surfaces */
  --bg: #05070f;
  --bg-2: #080c1d;
  --surface: #0f1530;
  --surface-2: #131a3a;
  --surface-3: #182046;
  --white: #ffffff;

  /* text */
  --text: #eef1ff;
  --text-soft: #c3c9e2;
  --muted: #8b94b5;

  /* accents */
  --amber: #ffb020;
  --orange: #ff8a3d;
  --pink: #ff4d8d;
  --magenta: #e2459a;
  --violet: #7b5cff;
  --cyan: #35d0e0;
  --green: #2ecc71;
  --red: #ff5f5f;

  /* lines & glow */
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);
  --glow-amber: 0 10px 30px -10px rgba(255, 138, 61, 0.65);

  --grad-title: linear-gradient(92deg, #ffb020 8%, #ff5f8f 52%, #b06bff 96%);
  --grad-btn: linear-gradient(95deg, #ffb020, #ff7a3d);

  /* type */
  --font-display: "Poppins", "Trebuchet MS", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* geometry */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --container: 1180px;
  --header-h: 76px;

  --shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Scrollbars: thin, warm and consistent with the theme */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 176, 32, 0.55) rgba(255, 255, 255, 0.05);
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 176, 32, 0.28);
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 176, 32, 0.6);
  background-clip: padding-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 620px at 50% -12%, rgba(123, 92, 255, 0.3), transparent 62%),
    radial-gradient(900px 520px at 88% 6%, rgba(255, 77, 141, 0.16), transparent 62%),
    radial-gradient(900px 700px at 8% 28%, rgba(53, 208, 224, 0.1), transparent 60%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  line-height: 1.65;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* starfield */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 24px 32px, rgba(255, 255, 255, 0.75), transparent 100%),
    radial-gradient(1.2px 1.2px at 132px 118px, rgba(255, 255, 255, 0.55), transparent 100%),
    radial-gradient(1.8px 1.8px at 208px 64px, rgba(255, 255, 255, 0.4), transparent 100%),
    radial-gradient(1.1px 1.1px at 84px 196px, rgba(255, 255, 255, 0.5), transparent 100%),
    radial-gradient(1.4px 1.4px at 176px 236px, rgba(255, 255, 255, 0.35), transparent 100%),
    radial-gradient(1.2px 1.2px at 48px 152px, rgba(190, 210, 255, 0.5), transparent 100%);
  background-size: 260px 260px;
  opacity: 0.7;
}

main,
.site-header,
.site-footer {
  position: relative;
  z-index: 1;
}

body.no-scroll {
  overflow: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  font-weight: 800;
  color: var(--white);
}

p {
  margin: 0;
}

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

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 8px;
}

::selection {
  background: rgba(255, 176, 32, 0.35);
  color: #fff;
}

/* ------------------------------------------------------------------ layout */
.container {
  width: min(var(--container), calc(100% - 40px));
  margin-inline: auto;
}

.container-narrow {
  width: min(800px, calc(100% - 40px));
  margin-inline: auto;
}

.section {
  padding-block: clamp(44px, 5.6vw, 86px);
  position: relative;
}

.section-tight {
  padding-block: clamp(36px, 4vw, 64px);
}

.section-dark {
  background: linear-gradient(180deg, rgba(8, 12, 29, 0.9), rgba(5, 7, 15, 0.9));
  border-block: 1px solid var(--line);
}

.section-cream {
  background: linear-gradient(180deg, rgba(15, 21, 48, 0.55), rgba(8, 12, 29, 0.2));
  border-block: 1px solid var(--line);
}

.grid {
  display: grid;
  gap: clamp(16px, 2.2vw, 26px);
}

.stack > * + * {
  margin-top: 18px;
}

.center {
  text-align: center;
}

/* ------------------------------------------------------------------ type */
.display-xl {
  font-size: clamp(2.8rem, 7vw, 5.1rem);
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.display-lg {
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
}

.display-md {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
}

.grad {
  background: var(--grad-title);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.grad-amber {
  background: var(--grad-btn);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
}

.eyebrow::before {
  content: "";
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.lede {
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  color: var(--muted);
  max-width: 58ch;
}

.text-muted {
  color: var(--muted);
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(26px, 3.6vw, 46px);
}

.section-head .lede {
  margin-top: 12px;
}

.section-intro {
  text-align: center;
  max-width: 660px;
  margin: 0 auto clamp(28px, 4vw, 48px);
}

.section-intro .lede {
  margin-top: 12px;
  max-width: none;
}

/* ------------------------------------------------------------------ buttons */
.btn {
  --btn-bg: rgba(255, 255, 255, 0.06);
  --btn-fg: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.32);
}

.btn:active {
  transform: translateY(0);
}

.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  --btn-bg: var(--grad-btn);
  --btn-fg: #1a1105;
  border-color: transparent;
  box-shadow: var(--glow-amber);
  font-weight: 700;
}

.btn-primary:hover {
  box-shadow: 0 16px 40px -14px rgba(255, 138, 61, 0.85);
}

.btn-ghost {
  --btn-bg: rgba(255, 255, 255, 0.03);
  --btn-fg: var(--text);
}

.btn-ghost:hover {
  --btn-bg: rgba(255, 255, 255, 0.09);
}

.btn-light {
  --btn-bg: #fff;
  --btn-fg: #0a0e27;
  border-color: transparent;
}

.btn-sm {
  padding: 9px 16px;
  font-size: 0.82rem;
  border-radius: 10px;
}

.btn-lg {
  padding: 17px 34px;
  font-size: 1rem;
  border-radius: 14px;
}

.btn-block {
  width: 100%;
}

.btn .arrow {
  transition: transform 0.25s ease;
}

.btn:hover .arrow {
  transform: translateX(4px);
}

.link-underline {
  font-weight: 600;
  color: var(--amber);
  border-bottom: 1px solid rgba(255, 176, 32, 0.4);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.link-underline:hover {
  color: #ffd27a;
  border-color: #ffd27a;
}

/* ------------------------------------------------------------------ header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  padding-block: 12px;
  transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

.site-header.is-stuck {
  background: rgba(5, 7, 15, 0.82);
  backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 var(--line);
  padding-block: 7px;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1.02rem;
  line-height: 1.1;
  color: #fff;
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
}

.brand-mark img,
.brand-mark svg {
  width: 30px;
  height: 30px;
}

.brand small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-links a {
  padding: 9px 16px;
  border-radius: 9px;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-soft);
  transition: color 0.2s ease, background 0.2s ease;
}

.nav-links a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.nav-links a[aria-current="page"] {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-soft);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.nav-icon:hover {
  color: #fff;
  border-color: var(--line-strong);
}

.nav-icon svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  place-items: center;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  position: relative;
  transition: transform 0.25s ease, background 0.25s ease;
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.25s ease, top 0.25s ease;
}

.nav-toggle span::before {
  top: -6px;
}

.nav-toggle span::after {
  top: 6px;
}

body.nav-open .nav-toggle span {
  background: transparent;
}

body.nav-open .nav-toggle span::before {
  top: 0;
  transform: rotate(45deg);
}

body.nav-open .nav-toggle span::after {
  top: 0;
  transform: rotate(-45deg);
}

/* Right-hand drawer menu (mobile) */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 54;
  background: rgba(3, 5, 12, 0.6);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

body.nav-open .nav-scrim {
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 56;
  width: min(280px, 74vw);
  background: linear-gradient(180deg, #11162e, #0a0e27);
  border-left: 1px solid var(--line-strong);
  box-shadow: -24px 0 60px -30px #000;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  padding: 14px 16px 86px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.nav-open .mobile-nav {
  transform: none;
}

.mobile-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.mobile-nav-head strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
}

.mobile-nav-close {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-soft);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.mobile-nav-close svg {
  width: 16px;
  height: 16px;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.mobile-nav-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-soft);
  border-bottom: 0;
}

.mobile-nav-links a svg {
  width: 19px;
  height: 19px;
  color: var(--amber);
  flex: none;
}

.mobile-nav-links a[aria-current="page"] {
  background: rgba(255, 176, 32, 0.1);
  color: #fff;
}

.mobile-nav-social {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.mobile-nav-social a {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  color: #8fb6ff;
  border-bottom: 0;
  padding: 0;
}

.mobile-nav-social svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  color: #8fb6ff;
}

.mobile-nav-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 12px;
}

.mobile-nav-actions .btn {
  margin: 0;
  width: 100%;
  justify-content: flex-start;
  gap: 10px;
  font-size: 0.86rem;
  padding: 11px 14px;
}

.mobile-nav-actions .btn svg {
  width: 17px;
  height: 17px;
  color: var(--amber);
}

.mobile-nav-credit {
  margin-top: auto;
  padding-top: 12px;
  font-size: 0.66rem;
  color: rgba(139, 148, 181, 0.7);
}

@media (min-width: 901px) {
  .mobile-nav,
  .nav-scrim {
    display: none;
  }
}

/* short phones: keep the whole menu on one screen */
@media (max-height: 700px) {
  .mobile-nav {
    padding-bottom: 78px;
  }

  .mobile-nav-links a {
    padding: 6px 8px;
  }

  .mobile-nav-credit {
    display: none;
  }

  .mobile-nav-actions .btn {
    padding: 9px 12px;
  }
}

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative;
  padding-top: clamp(36px, 5vw, 72px);
  padding-bottom: clamp(48px, 6vw, 90px);
  text-align: center;
  overflow: hidden;
}

.hero-inner {
  max-width: 900px;
  margin-inline: auto;
  position: relative;
}

.hero-logo {
  position: relative;
  z-index: 2;
  width: min(270px, 56vw);
  height: auto;
  margin: 0 auto 12px;
  filter: drop-shadow(0 18px 40px rgba(255, 77, 141, 0.28));
}

.hero h1 {
  font-size: clamp(2.9rem, 6.9vw, 5.1rem);
  line-height: 1.01;
  max-width: 920px;
  margin-inline: auto;
  letter-spacing: -0.04em;
}

.hero h1 .line {
  display: block;
}

.hero .loc-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--text-soft);
  text-transform: uppercase;
}

.hero .lede {
  margin: 18px auto 0;
  max-width: 62ch;
}

.hero-cta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.hero-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(28px, 6vw, 76px);
  margin-top: clamp(34px, 5vw, 54px);
}

.hero-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 800;
  background: var(--grad-title);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}

.hero-stat span {
  display: block;
  margin-top: 7px;
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-glow {
  position: absolute;
  width: 680px;
  height: 680px;
  border-radius: 50%;
  top: -220px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(123, 92, 255, 0.42), rgba(255, 77, 141, 0.14) 42%, transparent 64%);
  filter: blur(34px);
  z-index: -1;
  pointer-events: none;
  animation: hero-glow-pulse 9s ease-in-out infinite;
}

@keyframes hero-glow-pulse {
  0%, 100% { opacity: 0.85; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.08); }
}

.hero-rays {
  position: absolute;
  left: 50%;
  top: -80px;
  width: 900px;
  height: 900px;
  transform: translateX(-50%);
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 176, 32, 0.16) 12deg,
    transparent 24deg,
    rgba(255, 77, 141, 0.14) 40deg,
    transparent 56deg,
    rgba(123, 92, 255, 0.16) 74deg,
    transparent 92deg,
    transparent 180deg,
    rgba(255, 176, 32, 0.12) 192deg,
    transparent 206deg,
    rgba(53, 208, 224, 0.12) 226deg,
    transparent 242deg
  );
  mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.85), transparent 62%);
  -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.85), transparent 62%);
  filter: blur(6px);
  opacity: 0.9;
  z-index: -1;
  pointer-events: none;
  animation: hero-rays-spin 60s linear infinite;
}

@keyframes hero-rays-spin {
  to { transform: translateX(-50%) rotate(360deg); }
}

.hero-sparkles span {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff7e6;
  box-shadow: 0 0 10px 2px rgba(255, 210, 140, 0.55);
  opacity: 0;
  animation: sparkle 4.5s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  45% { opacity: 0.9; transform: scale(1); }
  60% { opacity: 0.2; transform: scale(0.8); }
}

.hero-logo {
  animation: logo-float 7s ease-in-out infinite;
  filter: drop-shadow(0 28px 60px rgba(255, 77, 141, 0.35)) drop-shadow(0 0 40px rgba(255, 176, 32, 0.18));
}

@keyframes logo-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.hero h1 {
  filter: drop-shadow(0 22px 50px rgba(255, 77, 141, 0.22));
}

.hero h1,
.hero-cta,
.hero-trust,
.hero-stats {
  animation: hero-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.hero-cta { animation-delay: 0.12s; }
.hero-trust { animation-delay: 0.24s; }
.hero-stats { animation-delay: 0.34s; }

@keyframes hero-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.hero h1 .grad {
  background-size: 200% auto;
  animation: grad-shift 9s ease-in-out infinite;
}

@keyframes grad-shift {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

.btn-glow {
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 46px -14px rgba(255, 138, 61, 0.85), 0 0 0 1px rgba(255, 176, 32, 0.25) inset;
}

.btn-glow::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg);
  animation: btn-shine 4.5s ease-in-out infinite;
}

/* moved with transform rather than `left`: animating `left` forced a page
   layout on every frame for as long as the button was on screen. The shine is
   40% of the button wide, so travelling -60% -> 130% of the button is 475% of
   its own width. Looks identical. */
@keyframes btn-shine {
  0%, 55% { transform: translateX(0) skewX(-18deg); }
  75%, 100% { transform: translateX(475%) skewX(-18deg); }
}

.hero-trust {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px 22px;
  flex-wrap: wrap;
  margin-top: 22px;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hero-trust span::before {
  content: "✓";
  color: var(--amber);
  font-weight: 700;
}

.hero-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(30px, 4.4vw, 48px);
}

.hero-stat {
  min-width: 150px;
  padding: 16px 26px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  backdrop-filter: blur(10px);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.hero-stat:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 176, 32, 0.45);
  box-shadow: 0 24px 50px -30px rgba(255, 176, 32, 0.55);
}

.hero-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  font-weight: 800;
  background: var(--grad-title);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  animation: grad-shift 9s ease-in-out infinite;
}

.hero-stat span {
  display: block;
  margin-top: 7px;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-float {
  position: absolute;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 176, 32, 0.35);
  box-shadow: 0 40px 80px -40px #000, 0 0 40px -18px rgba(255, 176, 32, 0.45);
  opacity: 0.95;
  z-index: -1;
  transition: transform 0.4s ease;
}

.hero-float img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
  will-change: transform;
}

.hero-float.f1 {
  width: 165px;
  height: 200px;
  left: 2%;
  top: 330px;
  transform: rotate(-7deg);
  animation: float-a 9s ease-in-out infinite;
}

.hero-float.f2 {
  width: 175px;
  height: 140px;
  right: 2%;
  top: 350px;
  transform: rotate(6deg);
  animation: float-b 11s ease-in-out infinite;
}

@keyframes float-a {
  0%, 100% { translate: 0 0; rotate: -7deg; }
  50% { translate: 0 -14px; rotate: -5deg; }
}

@keyframes float-b {
  0%, 100% { translate: 0 0; rotate: 6deg; }
  50% { translate: 0 12px; rotate: 8deg; }
}

/* ------------------------------------------------------------------ strip */
.strip {
  border-block: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  padding-block: 14px;
  overflow: hidden;
}

.strip-track {
  display: flex;
  gap: 44px;
  width: max-content;
  animation: marquee 40s linear infinite;
}

.strip-track span {
  display: inline-flex;
  align-items: center;
  gap: 44px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
}

.strip-track span::after {
  content: "✦";
  color: var(--violet);
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ------------------------------------------------------------------ cards */
.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.castle-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
}

.castle-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 176, 32, 0.45);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}

.castle-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface);
}

.castle-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.castle-card:hover .castle-media img {
  transform: scale(1.06);
}

.castle-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(5, 7, 15, 0.75));
  pointer-events: none;
}

.castle-badges {
  position: absolute;
  inset: 12px 12px auto;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
  z-index: 2;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 7px;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(5, 7, 15, 0.72);
  color: var(--text);
  border: 1px solid var(--line-strong);
  white-space: nowrap;
  backdrop-filter: blur(6px);
}

.badge-amber {
  background: var(--grad-btn);
  border-color: transparent;
  color: #1a1105;
}

.badge-coral {
  background: linear-gradient(95deg, #ff4d8d, #ff7a3d);
  color: #fff;
  border-color: transparent;
}

.badge-teal {
  background: rgba(53, 208, 224, 0.16);
  border-color: rgba(53, 208, 224, 0.4);
  color: #b8f4fb;
}

.badge-soft {
  background: rgba(5, 7, 15, 0.72);
}

.castle-body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}

.castle-body h3 {
  font-size: 1.12rem;
  font-weight: 700;
}

.castle-body .tagline {
  font-size: 0.8rem;
  color: var(--orange);
  font-weight: 600;
}

.castle-body .blurb {
  font-size: 0.87rem;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.castle-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
  color: #fff;
}

.price small {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--muted);
  display: block;
  margin-top: 4px;
}

.card-cta {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--amber);
  transition: background 0.2s ease, transform 0.2s ease;
}

.castle-card:hover .card-cta {
  background: rgba(255, 176, 32, 0.18);
  transform: translateX(2px);
}

/* adventure / category cards */
.adventure-card {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  aspect-ratio: 4 / 3;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.adventure-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px #000;
}

.adventure-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.adventure-card:hover img {
  transform: scale(1.06);
}

.adventure-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 7, 15, 0.05) 35%, rgba(5, 7, 15, 0.92));
}

.adventure-body {
  position: absolute;
  inset: auto 0 0;
  padding: 22px;
  z-index: 2;
}

.adventure-body h3 {
  font-size: 1.35rem;
  font-weight: 700;
}

.adventure-body span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 600;
}

/* feature / why cards */
.feature-card {
  padding: 22px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.feature-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
}

.feature-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 176, 32, 0.14);
  border: 1px solid rgba(255, 176, 32, 0.25);
  font-size: 1.25rem;
}

.feature-icon.blue { background: rgba(53, 208, 224, 0.14); border-color: rgba(53, 208, 224, 0.28); }
.feature-icon.orange { background: rgba(255, 138, 61, 0.14); border-color: rgba(255, 138, 61, 0.28); }
.feature-icon.violet { background: rgba(123, 92, 255, 0.16); border-color: rgba(123, 92, 255, 0.3); }
.feature-icon.pink { background: rgba(255, 77, 141, 0.14); border-color: rgba(255, 77, 141, 0.28); }
.feature-icon.green { background: rgba(46, 204, 113, 0.14); border-color: rgba(46, 204, 113, 0.28); }

.feature-icon svg {
  width: 22px;
  height: 22px;
}

.feature-icon.green { color: #5ee69a; }
.feature-icon.blue { color: #6fe3f0; }
.feature-icon.orange { color: #ffb27a; }
.feature-icon.violet { color: #b9a8ff; }
.feature-icon.pink { color: #ff9cc2; }

.feature-card h3 {
  font-size: 1.02rem;
  font-weight: 600;
}

.feature-card p {
  font-size: 0.88rem;
  color: var(--muted);
}

/* steps */
.steps {
  display: grid;
  gap: 12px;
}

.step {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  align-items: start;
  padding: 20px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
}

.step-num {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(255, 176, 32, 0.12);
  border: 1px solid rgba(255, 176, 32, 0.3);
  color: var(--amber);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
}

.step h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 3px;
}

.step p {
  font-size: 0.86rem;
  color: var(--muted);
}

/* ------------------------------------------------------------------ checker */
.checker {
  border-radius: var(--radius-lg);
  background:
    radial-gradient(700px 300px at 85% 0%, rgba(123, 92, 255, 0.28), transparent 60%),
    linear-gradient(160deg, rgba(19, 26, 58, 0.95), rgba(10, 14, 39, 0.95));
  border: 1px solid var(--line-strong);
  padding: clamp(26px, 4vw, 44px);
  position: relative;
  overflow: hidden;
}

.checker h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  max-width: 20ch;
}

.checker p {
  color: var(--muted);
  max-width: 48ch;
  margin-top: 10px;
}

.checker-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.checker-result {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  display: none;
}

.checker-result.show {
  display: block;
  animation: pop 0.3s ease;
}

.checker-result strong {
  color: var(--amber);
}

@keyframes pop {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ quick book */
.book-panel {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(800px 380px at 10% -10%, rgba(255, 176, 32, 0.1), transparent 60%),
    linear-gradient(180deg, rgba(19, 26, 58, 0.96), rgba(10, 14, 39, 0.96));
  padding: clamp(20px, 3.4vw, 34px);
  box-shadow: var(--shadow);
}

.book-panel .login-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 176, 32, 0.28);
  background: rgba(255, 176, 32, 0.08);
  font-size: 0.83rem;
  color: #ffe3aa;
}

.book-panel .login-strip button {
  border: 0;
  background: none;
  color: var(--amber);
  font-weight: 600;
  cursor: pointer;
  font-size: 0.83rem;
  font-family: var(--font-display);
}

.book-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(20px, 3vw, 38px);
  margin-top: 22px;
  align-items: start;
}

.book-col-title {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.duration-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.duration-pills button {
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-soft);
  transition: all 0.2s ease;
}

.duration-pills button[aria-pressed="true"] {
  background: var(--grad-btn);
  border-color: transparent;
  color: #1a1105;
}

/* ------------------------------------------------------------------ calendar */
.calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.calendar .dow {
  text-align: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-bottom: 6px;
}

.calendar .day {
  height: 42px;
  border-radius: 8px;
  border: 1px solid rgba(46, 204, 113, 0.22);
  background: rgba(46, 204, 113, 0.1);
  color: #d6ffe7;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.calendar .day:hover:not(.disabled) {
  border-color: var(--green);
  background: rgba(46, 204, 113, 0.22);
}

.calendar .day.disabled {
  opacity: 0.28;
  cursor: not-allowed;
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}

.calendar .day.selected {
  background: var(--grad-btn);
  border-color: transparent;
  color: #1a1105;
  box-shadow: 0 8px 20px -8px rgba(255, 138, 61, 0.8);
}

.calendar .day.in-range {
  background: rgba(255, 176, 32, 0.2);
  border-color: rgba(255, 176, 32, 0.45);
  color: #ffe3aa;
}

.calendar .day.outside {
  visibility: hidden;
}

.calendar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.calendar-head strong {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
}

.icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--text);
}

.icon-btn:hover {
  border-color: var(--amber);
  color: var(--amber);
}

/* ------------------------------------------------------------------ forms */
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field > label {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-soft);
}

.field .hint {
  font-size: 0.74rem;
  color: var(--muted);
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 9px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  font-size: 0.9rem;
}

.input::placeholder,
.textarea::placeholder {
  color: rgba(139, 148, 181, 0.7);
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: rgba(255, 176, 32, 0.65);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(255, 176, 32, 0.15);
}

.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.6) 50%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.6) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

.select option {
  background: #0c1128;
  color: var(--text);
}

.textarea {
  min-height: 110px;
  resize: vertical;
}

.input-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.error-text {
  color: #ff9b9b;
  font-size: 0.78rem;
  margin-top: 6px;
}

.input.invalid {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(255, 95, 95, 0.15);
}

.checkbox {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.84rem;
  color: var(--text-soft);
  cursor: pointer;
  line-height: 1.5;
}

.checkbox input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--amber);
  flex: none;
}

/* Google sign-in */
.btn-google {
  --btn-bg: #ffffff;
  --btn-fg: #1f1f1f;
  border: 1px solid #dadce0;
  font-family: "Roboto", var(--font-body);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.btn-google:hover {
  --btn-bg: #f6f7f9;
  border-color: #c7cacf;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.btn-google svg {
  flex: none;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  background: var(--line);
  flex: 1;
}

/* ------------------------------------------------------------------ panels, filters */
/* solid blue, the same as the homepage booking panel, so the starfield
   doesn't show through forms */
.panel {
  background:
    radial-gradient(700px 320px at 10% -10%, rgba(255, 176, 32, 0.1), transparent 60%),
    radial-gradient(600px 320px at 100% 110%, rgba(123, 92, 255, 0.16), transparent 60%),
    linear-gradient(180deg, #131a3a, #0a0e27);
  border: 1px solid var(--line-strong);
  box-shadow: 0 30px 80px -50px rgba(123, 92, 255, 0.7);
  border-radius: var(--radius);
  padding: clamp(18px, 2.6vw, 28px);
}

.filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.chip {
  padding: 9px 16px;
  border-radius: 9px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-soft);
}

.chip:hover {
  border-color: rgba(255, 176, 32, 0.5);
  color: #fff;
}

.chip[aria-pressed="true"] {
  background: var(--grad-btn);
  color: #1a1105;
  border-color: transparent;
}

.chip .count {
  font-size: 0.68rem;
  opacity: 0.7;
}

/* ------------------------------------------------------------------ booking wizard */
.booking-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr);
  gap: clamp(22px, 3.6vw, 44px);
  align-items: start;
}

.wizard-steps {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.wizard-step {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}

.wizard-step .n {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
}

.wizard-step[data-state="current"] {
  border-color: rgba(255, 176, 32, 0.5);
  color: #fff;
}

.wizard-step[data-state="current"] .n {
  background: var(--grad-btn);
  color: #1a1105;
}

.wizard-step[data-state="done"] {
  color: var(--green);
}

.wizard-step[data-state="done"] .n {
  background: rgba(46, 204, 113, 0.16);
  color: var(--green);
}

.wizard-panel {
  display: none;
}

.wizard-panel.active {
  display: block;
  animation: fade-up 0.35s ease;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 10px;
}

.choice {
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
  text-align: left;
  display: flex;
  gap: 11px;
  align-items: center;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  min-height: 84px;
  color: var(--text);
  font-family: inherit;
}

.choice:hover {
  border-color: rgba(255, 176, 32, 0.5);
  transform: translateY(-2px);
}

.choice[aria-pressed="true"] {
  border-color: var(--amber);
  background: rgba(255, 176, 32, 0.1);
  box-shadow: 0 0 0 1px rgba(255, 176, 32, 0.5) inset;
}

.choice img {
  width: 54px;
  height: 54px;
  border-radius: 9px;
  object-fit: cover;
  flex: none;
}

.choice strong {
  display: block;
  font-size: 0.84rem;
  line-height: 1.25;
  color: #fff;
}

.choice span {
  display: block;
  font-size: 0.73rem;
  line-height: 1.35;
  color: var(--muted);
  margin-top: 3px;
}

.segmented {
  display: inline-flex;
  padding: 3px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  gap: 2px;
  flex-wrap: wrap;
}

.segmented button {
  border: 0;
  background: transparent;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-soft);
}

.segmented button[aria-pressed="true"] {
  background: rgba(255, 176, 32, 0.16);
  color: #ffd794;
}

.sticky-summary {
  position: static;
}

.booking-layout > aside {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  align-self: start;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 8px;
  font-size: 0.87rem;
}

.summary-row.total {
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 14px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
}

.summary-row .label {
  color: var(--muted);
}

.summary-row .value {
  font-weight: 600;
  color: var(--text);
}

/* ------------------------------------------------------------------ modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(3, 5, 12, 0.75);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: linear-gradient(180deg, #11162e, #0a0e27);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  width: min(940px, 100%);
  max-height: 90vh;
  overflow: auto;
  transform: translateY(14px) scale(0.98);
  transition: transform 0.25s ease;
  position: relative;
  box-shadow: 0 40px 90px -40px #000;
}

.modal-backdrop.open .modal {
  transform: none;
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 1px solid var(--line-strong);
  background: rgba(5, 7, 15, 0.8);
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.modal-close:hover {
  border-color: var(--amber);
  color: var(--amber);
}

.modal-body {
  padding: clamp(20px, 3vw, 32px);
}

/* gallery */
.gallery-main {
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}

.gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.gallery-thumbs button {
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  cursor: pointer;
  background: none;
}

.gallery-thumbs button[aria-pressed="true"] {
  border-color: var(--amber);
}

.gallery-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.price-table th,
.price-table td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
}

.price-table th {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.price-table td:last-child,
.price-table th:last-child {
  text-align: right;
  font-weight: 600;
  color: #fff;
}

/* ------------------------------------------------------------------ admin */
.admin-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: start;
}

.admin-nav {
  position: sticky;
  top: calc(var(--header-h) + 18px);
  display: grid;
  gap: 3px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.admin-nav button {
  border: 0;
  background: transparent;
  text-align: left;
  padding: 10px 13px;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-soft);
}

.admin-nav button[aria-current="true"] {
  background: rgba(255, 176, 32, 0.14);
  color: #ffd794;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.stat {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
}

.stat .k {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 700;
}

.stat .v {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.15;
  margin-top: 6px;
  color: #fff;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  min-width: 960px;
}

table.data td:first-child,
table.data td:nth-child(2) {
  white-space: nowrap;
}

table.data th,
table.data td {
  padding: 11px 13px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

table.data th {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  position: sticky;
  top: 0;
  z-index: 1;
}

table.data tr:last-child td {
  border-bottom: 0;
}

table.data tbody tr:hover {
  background: rgba(255, 255, 255, 0.025);
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: capitalize;
}

.pill.pending { background: rgba(255, 176, 32, 0.16); color: #ffd27a; }
.pill.confirmed { background: rgba(53, 208, 224, 0.16); color: #9deef7; }
.pill.paid { background: rgba(46, 204, 113, 0.16); color: #9bf0b9; }
.pill.completed { background: rgba(123, 92, 255, 0.2); color: #cebfff; }
.pill.cancelled { background: rgba(255, 95, 95, 0.18); color: #ffb3b3; }

.gate {
  max-width: 440px;
  margin: clamp(40px, 8vw, 90px) auto;
  text-align: center;
}

.gate .brand-mark {
  margin-inline: auto;
  width: 58px;
  height: 58px;
}

.gate h1 {
  font-size: 1.9rem;
  margin-top: 18px;
}

/* ------------------------------------------------------------------ misc */
.toast-stack {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  pointer-events: none;
}

.toast {
  background: #1b2244;
  border: 1px solid var(--line-strong);
  color: #fff;
  border-radius: 10px;
  padding: 11px 18px;
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: var(--shadow);
  animation: toast-in 0.25s ease;
  display: flex;
  gap: 10px;
  align-items: center;
}

.toast.success { border-color: rgba(46, 204, 113, 0.5); }
.toast.error { border-color: rgba(255, 95, 95, 0.55); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

.cookie-bar {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 70;
  width: min(410px, calc(100% - 32px));
  background: rgba(10, 14, 34, 0.98);
  border: 1px solid rgba(255, 176, 32, 0.35);
  border-radius: var(--radius);
  box-shadow: 0 30px 70px -30px #000;
  padding: 13px 15px;
  display: none;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--text-soft);
}

.cookie-bar.show {
  display: flex;
}

.cookie-bar strong {
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cookie-bar strong svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.cookie-bar .actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.accordion {
  border-top: 1px solid var(--line);
}

.accordion details {
  border-bottom: 1px solid var(--line);
}

.accordion summary {
  cursor: pointer;
  padding: 18px 0;
  font-weight: 500;
  font-size: 0.98rem;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  color: var(--text);
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--muted);
  transition: transform 0.25s ease;
}

.accordion details[open] summary::after {
  transform: rotate(45deg);
  color: var(--amber);
}

.accordion .answer {
  padding-bottom: 20px;
  color: var(--muted);
  max-width: 70ch;
  font-size: 0.9rem;
}

.page-head {
  padding-top: clamp(30px, 4vw, 58px);
  padding-bottom: clamp(22px, 3vw, 38px);
}

.page-head h1 {
  font-size: clamp(2.3rem, 5.2vw, 3.7rem);
  margin-top: 12px;
}

.breadcrumb {
  font-size: 0.78rem;
  color: var(--muted);
  display: flex;
  gap: 8px;
  align-items: center;
}

.breadcrumb a:hover {
  color: var(--amber);
}

.split {
  display: grid;
  grid-template-columns: var(--split-cols, minmax(0, 1fr) minmax(0, 1fr));
  gap: clamp(26px, 4.6vw, 58px);
  align-items: center;
}

.media-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
}

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

.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 12px;
}

.stat-strip div {
  padding: 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
}

.stat-strip strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: #fff;
  line-height: 1;
}

.stat-strip span {
  display: block;
  margin-top: 5px;
  font-size: 0.74rem;
  color: var(--muted);
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.note {
  font-size: 0.82rem;
  color: var(--text-soft);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
}

.mobile-book-bar {
  display: none;
}

/* ------------------------------------------------------------------ cta band */
.cta-band {
  border-radius: var(--radius-lg);
  padding: clamp(30px, 4.6vw, 56px);
  background:
    radial-gradient(600px 260px at 90% 0%, rgba(255, 77, 141, 0.22), transparent 60%),
    linear-gradient(140deg, rgba(255, 176, 32, 0.14), rgba(123, 92, 255, 0.16)),
    linear-gradient(180deg, rgba(19, 26, 58, 0.96), rgba(10, 14, 39, 0.96));
  border: 1px solid rgba(255, 176, 32, 0.32);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  justify-items: start;
}

.cta-band h2 {
  font-size: clamp(1.8rem, 3.8vw, 2.9rem);
  max-width: 22ch;
  overflow-wrap: break-word;
}

.cta-band .btn {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

/* ------------------------------------------------------------------ footer */
.site-footer {
  background: linear-gradient(180deg, rgba(8, 12, 29, 0.4), rgba(3, 5, 12, 0.95));
  border-top: 1px solid var(--line);
  padding-top: clamp(40px, 5vw, 68px);
  margin-top: clamp(32px, 5vw, 64px);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 40px;
}

.site-footer h4 {
  color: #fff;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: var(--font-body);
  font-weight: 700;
  margin-bottom: 14px;
}

.site-footer a {
  font-size: 0.88rem;
  line-height: 2;
  color: var(--muted);
  transition: color 0.2s ease;
  display: inline-block;
}

.site-footer a:hover {
  color: var(--amber);
}

.site-footer .brand {
  margin-bottom: 14px;
}

.site-footer p {
  font-size: 0.86rem;
  color: var(--muted);
}

.footer-grid > div > a {
  display: block;
}

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-block: 18px 24px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.76rem;
  color: rgba(139, 148, 181, 0.75);
}

.social-row {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.social-row a {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  color: var(--text-soft);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.social-row a:hover {
  color: var(--amber);
  border-color: rgba(255, 176, 32, 0.5);
}

.social-row svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* ------------------------------------------------------------------ mobile nav */
.bottom-nav {
  display: none;
}

.install-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 75;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: rgba(10, 14, 34, 0.98);
  font-size: 0.8rem;
  color: var(--text-soft);
  box-shadow: var(--shadow);
}

@media (max-width: 640px) {
  .bottom-nav {
    display: flex;
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 60;
    background: rgba(9, 13, 32, 0.98);
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    padding: 6px;
    justify-content: space-around;
    box-shadow: 0 20px 50px -20px #000;
    transform: translateZ(0);
  }

  .bottom-nav a,
  .bottom-nav button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--muted);
    padding: 6px 4px;
    border-radius: 10px;
    background: none;
    border: 0;
    font-family: inherit;
    cursor: pointer;
  }

  .bottom-nav a span,
  .bottom-nav button span {
    font-size: 0.66rem;
    line-height: 1.1;
  }

  .bottom-nav a svg,
  .bottom-nav button svg {
    width: 21px;
    height: 21px;
  }

  .bottom-nav a[aria-current="page"],
  .bottom-nav button[aria-expanded="true"] {
    color: var(--amber);
    background: rgba(255, 176, 32, 0.1);
  }

  .bottom-nav .bottom-nav-book {
    color: #1a1105;
    background: var(--grad-btn);
  }

  .nav-toggle {
    display: none !important;
  }

  .cookie-bar {
    bottom: 92px;
  }

  .install-banner {
    bottom: 92px;
  }
}

/* castle picker (homepage booking panel) */
.castle-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  max-height: 360px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

.castle-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  text-align: left;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  color: var(--text);
  font-family: inherit;
}

.castle-option:hover {
  border-color: rgba(255, 176, 32, 0.5);
  background: rgba(255, 176, 32, 0.06);
  transform: translateY(-1px);
}

.castle-option img {
  width: 64px;
  height: 64px;
  border-radius: 9px;
  object-fit: cover;
  flex: none;
}

.castle-option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.castle-option-text strong {
  font-size: 0.9rem;
  color: #fff;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.castle-option-text span {
  font-size: 0.76rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.castle-option-text em {
  font-style: normal;
  font-size: 0.78rem;
  color: var(--amber);
  font-weight: 600;
}

.castle-option-cta {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--amber);
  border: 1px solid rgba(255, 176, 32, 0.4);
  padding: 6px 10px;
  border-radius: 8px;
  flex: none;
}

.castle-selected-block {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(46, 204, 113, 0.35);
  background: rgba(46, 204, 113, 0.08);
}

.castle-selected-block img {
  width: 64px;
  height: 64px;
  border-radius: 9px;
  object-fit: cover;
  flex: none;
}

.castle-selected-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.castle-selected-info strong {
  color: #fff;
  font-size: 0.92rem;
}

.castle-selected-info span {
  font-size: 0.78rem;
  color: var(--muted);
}

/* ------------------------------------------------------------------ waiver */
.waiver-sheet {
  max-width: 900px;
}

.waiver-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.waiver-scroll {
  max-height: 40vh;
  overflow: auto;
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.waiver-scroll h3 {
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
  margin-top: 16px;
}

.waiver-scroll h3:first-child {
  margin-top: 0;
}

.waiver-scroll p {
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 4px;
}

.waiver-sign {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 20px;
  margin-top: 20px;
  align-items: start;
}

.waiver-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-soft);
  margin-bottom: 8px;
}

#waiver-canvas {
  width: 100%;
  height: 190px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  touch-action: none;
  cursor: crosshair;
  display: block;
}

.waiver-signed {
  display: flex;
  gap: 12px;
  align-items: center;
  background: rgba(46, 204, 113, 0.1);
  border: 1px solid rgba(46, 204, 113, 0.35);
  border-radius: 10px;
  padding: 10px 12px;
}

.waiver-signed img {
  height: 46px;
  width: auto;
  max-width: 130px;
  background: #fff;
  border-radius: 6px;
  padding: 3px 6px;
}

.waiver-signed strong {
  display: block;
  font-size: 0.84rem;
  color: #9bf0b9;
}

.waiver-signed span {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
}

/* ------------------------------------------------------------------ invoice */
.invoice-sheet {
  background: #ffffff;
  color: #111827;
  border-radius: 16px;
  padding: clamp(22px, 3vw, 42px);
  max-width: 920px;
  margin: 0 auto;
  box-shadow: 0 30px 70px -30px #000;
  font-size: 0.9rem;
  line-height: 1.55;
}

.invoice-top {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border-bottom: 2px solid #111827;
  padding-bottom: 18px;
}

.invoice-brand {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.invoice-brand strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
}

.invoice-brand span {
  display: block;
  font-size: 0.78rem;
  color: #4b5563;
}

.invoice-meta {
  text-align: right;
}

.invoice-meta h1 {
  font-size: 1.9rem;
  letter-spacing: -0.02em;
  color: #111827;
}

.invoice-meta div {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  font-size: 0.8rem;
  margin-top: 2px;
}

.invoice-meta span {
  color: #6b7280;
}

.invoice-status {
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
}

.invoice-status.due {
  background: #fef3c7;
  color: #92400e;
}

.invoice-status.paid {
  background: #d1fae5;
  color: #065f46;
}

.invoice-parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 22px 0;
}

.invoice-parties h2,
.invoice-waiver h2 {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 6px;
  font-family: var(--font-body);
  font-weight: 700;
}

.invoice-parties p {
  font-size: 0.86rem;
  color: #111827;
}

.invoice-table {
  width: 100%;
  border-collapse: collapse;
}

.invoice-table th {
  text-align: left;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #6b7280;
  border-bottom: 1px solid #d1d5db;
  padding: 8px 6px;
}

.invoice-table td {
  padding: 10px 6px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
}

.invoice-table th:last-child,
.invoice-table td:last-child {
  text-align: right;
}

.invoice-detail {
  font-size: 0.76rem;
  color: #6b7280;
  margin-top: 2px;
}

.invoice-total td {
  font-weight: 700;
  border-top: 2px solid #111827;
}

.invoice-due td {
  font-weight: 700;
  color: #92400e;
}

.invoice-note {
  margin-top: 14px;
  font-size: 0.82rem;
  color: #4b5563;
}

.invoice-waiver {
  margin-top: 22px;
  border-top: 1px solid #e5e7eb;
  padding-top: 16px;
}

.invoice-waiver-body {
  display: flex;
  gap: 16px;
  align-items: center;
}

.invoice-waiver-body img {
  height: 60px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 4px 8px;
}

.invoice-waiver-body p {
  font-size: 0.8rem;
  color: #374151;
}

.invoice-footer {
  margin-top: 24px;
  border-top: 1px solid #e5e7eb;
  padding-top: 12px;
  font-size: 0.74rem;
  color: #6b7280;
}

@media (max-width: 760px) {
  .waiver-sign {
    grid-template-columns: 1fr;
  }

  .invoice-parties {
    grid-template-columns: 1fr;
  }

  .invoice-meta {
    text-align: left;
  }

  .invoice-meta div {
    justify-content: flex-start;
  }
}

/* ==================================================================
   POP LAYER
   Same layout, same cosmic theme - more colour, glow and contrast.
   Delete this block (down to "end pop layer") to get the old look back.
   ================================================================== */
:root {
  --text-soft: #d3d8ee;
  --muted: #a2abcd;
  --line: rgba(255, 255, 255, 0.11);
  --card-solid: #0d1330;
  --card-solid-2: #111840;
  --grad-ring: linear-gradient(135deg, #ffb020 0%, #ff4d8d 50%, #7b5cff 100%);
  --grad-btn: linear-gradient(95deg, #ffc233 0%, #ff8a3d 55%, #ff5f6d 100%);
  --glow-amber: 0 12px 34px -10px rgba(255, 122, 61, 0.8);
}

body {
  background-image:
    radial-gradient(1200px 680px at 50% -12%, rgba(123, 92, 255, 0.42), transparent 62%),
    radial-gradient(900px 560px at 92% 4%, rgba(255, 77, 141, 0.26), transparent 62%),
    radial-gradient(900px 700px at 4% 26%, rgba(53, 208, 224, 0.16), transparent 60%),
    radial-gradient(1000px 700px at 96% 62%, rgba(123, 92, 255, 0.14), transparent 62%),
    radial-gradient(900px 700px at 0% 88%, rgba(255, 138, 61, 0.1), transparent 60%);
}

/* section bands: a little colour and a glowing seam on top */
.section-dark,
.section-cream {
  border-block: 0;
}

.section-dark {
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(123, 92, 255, 0.2), transparent 70%),
    linear-gradient(180deg, rgba(10, 14, 36, 0.92), rgba(5, 7, 15, 0.92));
}

.section-cream {
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(255, 138, 61, 0.13), transparent 70%),
    radial-gradient(900px 420px at 90% 100%, rgba(255, 77, 141, 0.1), transparent 70%),
    linear-gradient(180deg, rgba(17, 23, 54, 0.75), rgba(8, 12, 29, 0.35));
}

.section-dark::before,
.section-cream::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(760px, 86%);
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #ffb020, #ff4d8d, #7b5cff, transparent);
  box-shadow: 0 0 22px 1px rgba(255, 77, 141, 0.55);
  border-radius: 2px;
}

/* headings */
.grad,
.grad-amber {
  filter: drop-shadow(0 6px 22px rgba(255, 110, 90, 0.45));
}

.eyebrow {
  color: var(--amber);
  text-shadow: 0 0 18px rgba(255, 176, 32, 0.55);
}

.eyebrow::before {
  width: 26px;
  background: var(--grad-ring);
  box-shadow: 0 0 10px rgba(255, 77, 141, 0.7);
}

/* buttons */
.btn-primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), var(--glow-amber);
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 20px 46px -12px rgba(255, 110, 70, 0.95);
}

.btn-ghost:hover {
  border-color: rgba(255, 176, 32, 0.6);
  box-shadow: 0 14px 34px -18px rgba(255, 176, 32, 0.7);
}

.nav-links a[aria-current="page"] {
  background: rgba(255, 176, 32, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 176, 32, 0.4);
  color: #ffd794;
}

/* hero */
.hero h1 {
  filter: drop-shadow(0 22px 50px rgba(255, 77, 141, 0.38));
}

.hero h1 .line:not(.grad) {
  text-shadow: 0 0 44px rgba(150, 130, 255, 0.5);
}

.hero-trust {
  font-size: 0.84rem;
  color: var(--text-soft);
}

.hero-stat {
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, #141b40, #0b1029) padding-box,
    var(--grad-ring) border-box;
  box-shadow: 0 24px 54px -28px rgba(123, 92, 255, 0.9);
}

.hero-stat:hover {
  border-color: transparent;
  box-shadow: 0 28px 60px -24px rgba(255, 110, 90, 0.8);
}

.hero-stat span {
  color: var(--text-soft);
}

.hero-float {
  border: 2px solid transparent;
  background: linear-gradient(#0d1330, #0d1330) padding-box, var(--grad-ring) border-box;
  box-shadow: 0 40px 80px -36px #000, 0 0 60px -14px rgba(255, 110, 90, 0.7);
  opacity: 1;
}

.hero-float.f1 {
  width: 200px;
  height: 240px;
}

.hero-float.f2 {
  width: 215px;
  height: 170px;
}

/* county strip */
.strip {
  background: linear-gradient(90deg, rgba(255, 176, 32, 0.07), rgba(255, 77, 141, 0.08), rgba(123, 92, 255, 0.1));
  border-block-color: rgba(255, 255, 255, 0.14);
}

.strip-track span {
  font-weight: 600;
  font-size: 0.86rem;
  color: #ffd27a;
}

.strip-track span:nth-child(4n + 2) { color: #ff9cc2; }
.strip-track span:nth-child(4n + 3) { color: #c3b4ff; }
.strip-track span:nth-child(4n + 4) { color: #8feaf5; }

.strip-track span::after {
  color: var(--amber);
  text-shadow: 0 0 12px rgba(255, 176, 32, 0.9);
}

/* castle cards */
.card {
  background: linear-gradient(180deg, var(--card-solid-2), var(--card-solid));
  border-color: rgba(255, 255, 255, 0.13);
}

.castle-card:hover {
  border-color: transparent;
  background:
    linear-gradient(180deg, var(--card-solid-2), var(--card-solid)) padding-box,
    var(--grad-ring) border-box;
  box-shadow: 0 34px 70px -34px rgba(255, 96, 110, 0.75), 0 0 0 1px rgba(255, 176, 32, 0.12);
}

.castle-media img {
  filter: saturate(1.12) contrast(1.03);
}

.castle-media::after {
  background: linear-gradient(180deg, transparent 62%, rgba(13, 19, 48, 0.7));
}

.badge {
  font-size: 0.7rem;
  background: rgba(8, 11, 28, 0.82);
}

.badge-amber {
  background: var(--grad-btn);
  box-shadow: 0 6px 18px -6px rgba(255, 122, 61, 0.9);
}

.badge-coral {
  background: linear-gradient(95deg, #ff4d8d, #ff7a3d);
  box-shadow: 0 6px 18px -6px rgba(255, 77, 141, 0.9);
}

.castle-body h3 {
  font-size: 1.16rem;
}

.castle-body .tagline {
  color: #ffa24d;
}

.price {
  font-size: 1.45rem;
  background: linear-gradient(95deg, #ffd35c, #ff9a3d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.price small {
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
}

.card-cta {
  background: var(--grad-btn);
  border-color: transparent;
  color: #1a1105;
  box-shadow: 0 8px 20px -8px rgba(255, 122, 61, 0.9);
}

.castle-card:hover .card-cta {
  background: var(--grad-btn);
  transform: translateX(3px) scale(1.08);
}

/* category cards: a ring and a coloured glow each */
.adventure-card {
  --glow: 255, 176, 32;
  border: 2px solid transparent;
  background: linear-gradient(#0d1330, #0d1330) padding-box, var(--grad-ring) border-box;
  box-shadow: 0 30px 70px -36px rgba(var(--glow), 0.85);
}

.adventure-card:nth-child(3n + 2) { --glow: 255, 77, 141; }
.adventure-card:nth-child(3n + 3) { --glow: 123, 92, 255; }

.adventure-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 40px 80px -30px rgba(var(--glow), 1);
}

.adventure-card img {
  filter: saturate(1.15);
}

.adventure-card::after {
  background: linear-gradient(180deg, rgba(5, 7, 15, 0) 42%, rgba(5, 7, 15, 0.9));
}

.adventure-body h3 {
  font-size: 1.55rem;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
}

.adventure-body span {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--grad-btn);
  color: #1a1105;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* why cards: each takes the colour of its icon */
.feature-card {
  --fc: 255, 176, 32;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(340px 180px at 0% 0%, rgba(var(--fc), 0.2), transparent 70%),
    linear-gradient(180deg, var(--card-solid-2), var(--card-solid));
  border-color: rgba(var(--fc), 0.3);
}

.feature-card:has(.feature-icon.green) { --fc: 46, 204, 113; }
.feature-card:has(.feature-icon.blue) { --fc: 53, 208, 224; }
.feature-card:has(.feature-icon.orange) { --fc: 255, 138, 61; }
.feature-card:has(.feature-icon.violet) { --fc: 141, 112, 255; }
.feature-card:has(.feature-icon.pink) { --fc: 255, 77, 141; }

.feature-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, rgb(var(--fc)), transparent 75%);
}

.feature-card:hover {
  border-color: rgba(var(--fc), 0.7);
  transform: translateY(-5px);
  box-shadow: 0 30px 60px -32px rgba(var(--fc), 0.9);
}

.feature-card .feature-icon {
  width: 52px;
  height: 52px;
  background: rgba(var(--fc), 0.22);
  border-color: rgba(var(--fc), 0.55);
  box-shadow: 0 0 26px -4px rgba(var(--fc), 0.75);
}

.feature-card h3 {
  font-size: 1.1rem;
}

.feature-card p {
  color: var(--text-soft);
}

/* steps */
.step {
  background: linear-gradient(180deg, var(--card-solid-2), var(--card-solid));
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.step:hover {
  transform: translateX(6px);
  border-color: rgba(255, 176, 32, 0.5);
  box-shadow: 0 24px 50px -32px rgba(255, 138, 61, 0.9);
}

.step-num {
  background: var(--grad-btn);
  border-color: transparent;
  color: #1a1105;
  box-shadow: 0 10px 24px -8px rgba(255, 122, 61, 0.9);
}

.step:nth-child(2) .step-num {
  background: linear-gradient(95deg, #ff4d8d, #ff7a3d);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(255, 77, 141, 0.9);
}

.step:nth-child(3) .step-num {
  background: linear-gradient(95deg, #7b5cff, #35d0e0);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(123, 92, 255, 0.9);
}

/* booking panel: the main event, so it gets the ring */
.book-panel {
  border: 2px solid transparent;
  background:
    radial-gradient(800px 380px at 10% -10%, rgba(255, 176, 32, 0.14), transparent 60%) padding-box,
    radial-gradient(700px 380px at 100% 110%, rgba(123, 92, 255, 0.2), transparent 60%) padding-box,
    linear-gradient(180deg, #131a3a, #0a0e27) padding-box,
    var(--grad-ring) border-box;
  box-shadow: 0 50px 120px -60px rgba(123, 92, 255, 0.9), 0 30px 90px -60px rgba(255, 110, 90, 0.8);
}

.book-col-title {
  color: #ffd27a;
}

.duration-pills button[aria-pressed="true"],
.chip[aria-pressed="true"] {
  box-shadow: 0 10px 24px -10px rgba(255, 122, 61, 0.95);
}

.calendar .day {
  border-color: rgba(46, 204, 113, 0.4);
  background: rgba(46, 204, 113, 0.17);
}

.calendar .day.selected {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25), 0 10px 26px -6px rgba(255, 122, 61, 0.95);
  transform: scale(1.06);
}

.castle-option-cta {
  background: rgba(255, 176, 32, 0.14);
}

.castle-option:hover .castle-option-cta {
  background: var(--grad-btn);
  color: #1a1105;
  border-color: transparent;
}

/* photos in frames */
.media-frame {
  border: 2px solid transparent;
  background: linear-gradient(#0d1330, #0d1330) padding-box, var(--grad-ring) border-box;
  box-shadow: 0 40px 90px -44px rgba(123, 92, 255, 0.95), 0 30px 70px -50px rgba(255, 110, 90, 0.8);
}

.media-frame img {
  filter: saturate(1.1);
}

/* delivery checker and closing banner */
.checker {
  border: 2px solid transparent;
  background:
    radial-gradient(700px 320px at 88% 0%, rgba(255, 77, 141, 0.34), transparent 60%) padding-box,
    radial-gradient(600px 300px at 0% 100%, rgba(53, 208, 224, 0.18), transparent 60%) padding-box,
    linear-gradient(150deg, #2a2180, #141a52 55%, #0d1238) padding-box,
    linear-gradient(135deg, #7b5cff, #35d0e0) border-box;
  box-shadow: 0 40px 100px -50px rgba(123, 92, 255, 1);
}

.checker p {
  color: var(--text-soft);
}

.cta-band {
  border: 2px solid transparent;
  background:
    radial-gradient(700px 320px at 92% 0%, rgba(255, 77, 141, 0.5), transparent 62%) padding-box,
    radial-gradient(600px 300px at 0% 110%, rgba(255, 176, 32, 0.3), transparent 60%) padding-box,
    linear-gradient(135deg, #3a1d6e, #1a1650 55%, #101440) padding-box,
    var(--grad-ring) border-box;
  box-shadow: 0 40px 100px -50px rgba(255, 77, 141, 0.9);
}

/* small parts */
.chip:hover {
  background: rgba(255, 176, 32, 0.08);
}

.accordion summary {
  font-weight: 600;
  transition: color 0.2s ease;
}

.accordion summary:hover {
  color: #ffd27a;
}

.accordion summary::after {
  color: var(--amber);
}

.accordion .answer {
  color: var(--text-soft);
}

.badge-row .badge {
  border-color: rgba(255, 176, 32, 0.35);
  color: #ffe3aa;
}

.site-footer {
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, transparent, #ffb020, #ff4d8d, #7b5cff, transparent) 1;
}

.site-footer h4 {
  color: var(--amber);
}

/* ---- moving space: drifting star layers, a slow nebula and a shooting star.
   Everything animates with transform/opacity only, so it stays smooth. ---- */
html {
  background: var(--bg);
}

/* far stars: small, slow */
body::before {
  inset: -260px -260px 0 0;
  opacity: 0.75;
  animation: star-drift-far 70s linear infinite;
  will-change: transform;
}

/* near stars: bigger, brighter, faster - gives the parallax */
body::after {
  content: "";
  position: fixed;
  inset: -520px -520px 0 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(2.4px 2.4px at 60px 90px, #fff, transparent 100%),
    radial-gradient(2px 2px at 340px 50px, rgba(255, 214, 150, 0.95), transparent 100%),
    radial-gradient(2.6px 2.6px at 210px 300px, rgba(190, 210, 255, 0.95), transparent 100%),
    radial-gradient(1.8px 1.8px at 450px 220px, rgba(255, 170, 210, 0.9), transparent 100%),
    radial-gradient(2.2px 2.2px at 120px 440px, #fff, transparent 100%),
    radial-gradient(1.8px 1.8px at 400px 470px, rgba(170, 240, 255, 0.9), transparent 100%);
  background-size: 520px 520px;
  animation: star-drift-near 45s linear infinite, star-twinkle 5s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes star-drift-far {
  to { transform: translate3d(-260px, 260px, 0); }
}

@keyframes star-drift-near {
  to { transform: translate3d(-520px, 520px, 0); }
}

@keyframes star-twinkle {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.45; }
}

/* nebula removed: it was a scroll-linked, fixed-position full-page layer
   that caused heavy repaint/jank on mobile. Keeping backgrounds simple. */
body {
  background-image: none;
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none !important;
  }
}

/* ---- space scenery: shooting stars and two distant suns.
   The markup is a single <div class="space"> added by layout.js. ---- */
.space {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  contain: paint;
  pointer-events: none;
}

.space > * {
  position: absolute;
}

/* shooting stars: each has its own angle (--a), distance (--d) and rhythm */
.shoot {
  --a: 148deg;
  --d: 720px;
  width: 170px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 214, 150, 0.7) 70%, #fff);
  box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.5);
  opacity: 0;
  transform: rotate(var(--a));
  animation: shoot 11s ease-in infinite;
}

.shoot.s1 { top: 8%; left: 64%; }
.shoot.s2 { --a: 32deg; --d: 640px; top: 16%; left: 6%; width: 130px; animation-duration: 14s; animation-delay: 3s; }
.shoot.s3 { --a: 205deg; --d: 780px; top: 82%; left: 86%; width: 200px; animation-duration: 17s; animation-delay: 6.5s; background: linear-gradient(90deg, transparent, rgba(150, 220, 255, 0.7) 70%, #fff); }
.shoot.s4 { --a: -24deg; --d: 600px; top: 74%; left: 10%; width: 120px; animation-duration: 19s; animation-delay: 9s; background: linear-gradient(90deg, transparent, rgba(255, 150, 200, 0.7) 70%, #fff); }
.shoot.s5 { --a: 90deg; --d: 520px; top: 2%; left: 40%; width: 110px; animation-duration: 23s; animation-delay: 12.5s; }
.shoot.s6 { --a: 168deg; --d: 900px; top: 38%; left: 98%; width: 240px; animation-duration: 27s; animation-delay: 16s; }

/* on narrow screens, keep every streak's travel distance within the
   viewport so nothing can ever paint past the edge, and lighten the
   load a touch for weaker mobile GPUs */
@media (max-width: 480px) {
  .shoot {
    width: 90px;
  }
  .shoot.s1 { --d: 55vw; }
  .shoot.s2 { --d: 55vw; width: 80px; }
  .shoot.s3 { --d: 60vw; width: 100px; }
  .shoot.s4 { --d: 55vw; width: 75px; }
  .shoot.s5 { --d: 50vw; width: 70px; }
  .shoot.s6 { --d: 60vw; width: 110px; }
}

@keyframes shoot {
  0% { opacity: 0; transform: rotate(var(--a)) translateX(0); }
  2% { opacity: 1; }
  9% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)); }
}

/* two far-off suns: a blue giant and a red dwarf */
.sun {
  border-radius: 50%;
  animation: sun-pulse 6s ease-in-out infinite;
}

.sun-blue {
  width: 12px;
  height: 12px;
  top: 70%;
  left: 71%;
  background: radial-gradient(circle, #fff 0%, #bfe9ff 40%, #4aa8ff 100%);
  box-shadow: 0 0 12px 3px rgba(90, 170, 255, 0.6), 0 0 36px 12px rgba(70, 130, 255, 0.22);
  animation-duration: 3.4s;
}

.sun-red {
  width: 8px;
  height: 8px;
  top: 88%;
  left: 31%;
  background: radial-gradient(circle, #ffe2c4 0%, #ff7a4a 50%, #d92b2b 100%);
  box-shadow: 0 0 9px 3px rgba(255, 90, 60, 0.6), 0 0 28px 10px rgba(255, 60, 60, 0.2);
  animation-duration: 4.6s;
}

@keyframes sun-pulse {
  0%, 100% { scale: 1; filter: brightness(1); }
  50% { scale: 1.06; filter: brightness(1.18); }
}

@media (prefers-reduced-motion: reduce) {
  .space * ,
  .space *::before {
    animation: none !important;
  }
}

@media print {
  .space { display: none; }
}

/* ---- type: a rounder, bouncier display face (Fredoka, self-hosted) with
   chunky 3D lettering on the hero, and larger, brighter reading text. ---- */
@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: "Fredoka", "Poppins", "Trebuchet MS", sans-serif;
}

body {
  font-size: 17px;
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* hero title: big, rounded, with a solid edge underneath like the logo lettering */
.hero h1 {
  font-size: clamp(3.3rem, 8.2vw, 6.2rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  filter: none;
}

.hero h1 .grad {
  padding-bottom: 0.08em;
  filter:
    drop-shadow(0 3px 0 #8a1f63)
    drop-shadow(0 6px 0 rgba(0, 0, 0, 0.35))
    drop-shadow(0 18px 36px rgba(255, 77, 141, 0.5));
}

.hero h1 .line:not(.grad) {
  text-shadow:
    0 3px 0 #6f58e8,
    0 6px 0 rgba(0, 0, 0, 0.4),
    0 0 46px rgba(150, 130, 255, 0.55);
}

.display-lg {
  font-size: clamp(2.3rem, 4.8vw, 3.8rem);
  line-height: 1.05;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
}

.display-md,
.checker h2,
.cta-band h2 {
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
}

/* gradient words are see-through, so a shadow would show inside them */
h1 .grad,
h2 .grad,
h2 .grad-amber {
  text-shadow: none;
}

.page-head h1 {
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.35), 0 0 46px rgba(150, 130, 255, 0.4);
}

.lede {
  font-size: clamp(1.08rem, 1.4vw, 1.22rem);
  line-height: 1.6;
  color: var(--text-soft);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.btn {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.btn-sm {
  font-size: 0.9rem;
}

.btn-lg {
  font-size: 1.14rem;
}

.nav-links a {
  font-size: 0.98rem;
}

.brand {
  font-size: 1.12rem;
}

.hero-trust {
  font-size: 0.92rem;
}

.hero-stat strong {
  font-weight: 700;
}

.hero-stat span {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
}

.strip-track span {
  font-size: 0.95rem;
}

.castle-body h3 {
  font-size: 1.24rem;
  font-weight: 600;
}

.castle-body .tagline {
  font-size: 0.88rem;
}

.castle-body .blurb {
  font-size: 0.93rem;
  color: var(--text-soft);
}

.price small {
  font-size: 0.78rem;
}

.adventure-body h3 {
  font-size: 1.7rem;
  font-weight: 700;
}

.feature-card h3 {
  font-size: 1.22rem;
  font-weight: 600;
}

.feature-card p {
  font-size: 0.96rem;
}

.step h3 {
  font-size: 1.12rem;
  font-weight: 600;
}

.step p {
  font-size: 0.94rem;
  color: var(--text-soft);
}

.checker p {
  font-size: 1.05rem;
}

.accordion summary {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 500;
}

.accordion .answer {
  font-size: 0.98rem;
}

.field > label {
  font-size: 0.84rem;
}

.site-footer a,
.site-footer p {
  font-size: 0.94rem;
}

/* ---- logo: completely still ---- */
.hero-logo {
  animation: none;
  transform: none;
}

/* ---------------------------------------------------- end pop layer */

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .hero-float {
    display: none;
  }

  .book-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .booking-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .booking-layout > aside {
    position: static;
  }

  .admin-shell {
    grid-template-columns: 1fr;
  }

  .admin-nav {
    position: static;
    display: flex;
    overflow-x: auto;
  }
}

@media (max-width: 900px) {
  .nav-links {
    display: none;
  }

  .nav-toggle {
    display: grid;
  }

  .nav-actions .nav-icon,
  .nav-actions .btn-ghost {
    display: none;
  }

  .split {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 700px) {
  .nav-actions > .btn {
    display: none;
  }

  .brand small {
    display: none;
  }

  .brand-mark {
    width: 38px;
    height: 38px;
  }

  .hero-stats {
    gap: 24px;
  }

  .hero-stat strong {
    font-size: 1.5rem;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  .container {
    width: calc(100% - 32px);
  }

  .input-group {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .mobile-book-bar {
    display: flex;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 50;
    background: rgba(11, 16, 38, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    padding: 10px 10px 10px 16px;
    box-shadow: var(--shadow);
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .mobile-book-bar .price {
    font-size: 1rem;
  }

  .cookie-bar {
    bottom: 84px;
    padding: 12px 14px;
    font-size: 0.76rem;
  }

  .step {
    grid-template-columns: 40px 1fr;
    gap: 12px;
    padding: 16px;
  }

  .step-num {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 0.95rem;
  }

  .hero h1 {
    font-size: clamp(2.2rem, 10.4vw, 3rem);
    letter-spacing: -0.03em;
  }

  .hero-stats {
    gap: 18px;
  }

  .hero-stat strong {
    font-size: 1.35rem;
  }

  .hero-stat span {
    font-size: 0.66rem;
    letter-spacing: 0.09em;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

@media print {
  .site-header,
  .site-footer,
  .no-print,
  .mobile-book-bar,
  .cookie-bar,
  .toast-stack {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000;
  }

  body::before {
    display: none !important;
  }

  .card,
  .panel {
    border-color: #ccc;
  }

  .section {
    padding: 0 !important;
  }

  .invoice-sheet {
    box-shadow: none !important;
    border-radius: 0;
    max-width: none;
    padding: 0;
  }

  @page {
    size: A4;
    margin: 14mm;
  }
}

/* ---- mobile: keep the stars but stop them moving.
   Four separate continuous animations (star-drift x2, twinkle, shooting
   stars, sun pulse) running behind fixed UI (header, bottom nav) was the
   root cause of the overflow/jank/"menu won't stay put" reports on real
   phones - mobile GPU compositors choke on this combo. Below a phone-sized
   viewport we freeze every decorative animation; the starfield still shows,
   it just doesn't move. */
@media (max-width: 820px) {
  body::before,
  body::after,
  .shoot,
  .sun {
    animation: none !important;
  }

  body::after {
    opacity: 0.75;
  }

  .shoot {
    display: none;
  }
}

/* ---- safety net: the page can never be wider than the phone.
   overflow-x: hidden on body alone still lets Android Chrome zoom out to fit
   anything that pokes past the edge, which made the page pan sideways and
   left fixed bars (bottom nav) drifting. clip forbids that outright, and
   unlike hidden it doesn't turn body into a scroll container, so window
   scrolling and the sticky header keep working. Older browsers keep the
   hidden fallback above. */
@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

/* ---- smooth scrolling.
   The header is position: sticky (it takes up space in the page) and used to
   shrink its padding 12px -> 7px once you scrolled, so the whole page below
   it slid up 10px the moment you started scrolling and back down at the top.
   Keep the padding constant; only the background/shadow change. */
.site-header,
.site-header.is-stuck {
  padding-block: 12px;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* ---- phones: lighter rendering so scrolling stays smooth and images don't
   flicker. Phone GPUs hold every animated/blurred layer as a texture at 3x
   resolution; the oversized star layers, the 900px rotating hero rays, the
   680px blurred glow, frosted-glass blurs and ~29 non-stop animations ran the
   GPU out of memory, so it kept dropping and redrawing parts of the page
   (images blanking/glitching while scrolling). Desktop keeps every effect. */
@media (max-width: 820px) {
  /* star layers: they no longer move on phones, so no need to be oversized
     or kept as permanent GPU layers */
  body::before,
  body::after {
    inset: 0;
    transform: none;
    will-change: auto;
  }

  /* hero: drop the rotating rays and twinkles, keep a static soft glow */
  .hero-rays,
  .hero-sparkles {
    display: none;
  }

  .hero-glow {
    animation: none;
    filter: none;
    width: 460px;
    height: 460px;
    top: -140px;
  }

  /* gradient headline/stat text: keep the gradient, stop it shimmering
     (animating it forces a full text repaint every frame) */
  .hero h1 .grad,
  .hero-stat strong,
  .hero-stat b {
    animation: none;
  }

  /* frosted-glass blurs re-render everything behind them on every scroll
     frame; use solid backgrounds instead */
  .site-header.is-stuck {
    background: rgba(5, 7, 15, 0.96);
    backdrop-filter: none;
  }

  .hero .loc-pill,
  .hero-stat,
  .badge {
    backdrop-filter: none;
  }

  /* show content straight away instead of fading/sliding each block in as
     it scrolls into view - on a fast scroll that looked like blank gaps and
     content jumping into place */
  .reveal,
  .reveal.in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- hero stats: smaller boxes, one row of three on every screen size */
.hero-stats {
  flex-wrap: nowrap;
  gap: 10px;
  margin-top: clamp(22px, 3vw, 34px);
}

.hero-stat {
  flex: 0 1 132px;
  min-width: 0;
  padding: 10px 10px 11px;
  border-radius: 12px;
}

.hero-stat strong {
  font-size: clamp(1.2rem, 2vw, 1.55rem);
}

.hero-stat span {
  margin-top: 5px;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  line-height: 1.25;
}

@media (max-width: 900px) {
  .hero-stats {
    gap: 8px;
  }

  .hero-stat strong {
    font-size: 1.2rem;
  }
}

@media (max-width: 640px) {
  .hero-stat strong {
    font-size: 1.15rem;
  }

  .hero-stat span {
    font-size: 0.56rem;
    letter-spacing: 0.06em;
  }
}

/* ---- desktop: the top section fills the first screen so the county strip
   sits along the bottom edge when the page opens. (If a short window can't fit
   the hero, it simply grows and the strip follows below.) */
@media (min-width: 901px) {
  .hero {
    min-height: calc(100svh - var(--hero-offset, 123px));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .hero > .hero-inner,
  .hero > .container {
    width: 100%;
  }
}

/* ---- layer order for the mobile menu. The drawer now lives in <body>
   (not inside the header), so the header (z 60) was drawing over it.
   Order is: page < header (55) < dark backdrop (57) < menu (58) < bottom bar (60). */
.site-header {
  z-index: 55;
}

.nav-scrim {
  z-index: 57;
}

.mobile-nav {
  z-index: 58;
}

/* desktop screens that aren't very tall (e.g. 1280x720, 1366x768 laptops):
   scale the logo and headline with the screen height so everything, including
   the county strip, fits on the first screen */
@media (min-width: 901px) and (max-height: 860px) {
  .hero-logo {
    width: auto;
    height: min(210px, 23vh);
    margin-bottom: 8px;
  }

  .hero h1 {
    font-size: min(6.2rem, 8.2vw, 10vh);
  }

  .hero-cta {
    margin-top: 20px;
  }

  .hero-stats {
    margin-top: 20px;
  }
}

/* ---- phone header: Login on the left; call, Facebook and WhatsApp on the
   right (the logo is hidden on phones only). Desktop/tablet header is unchanged. */
.nav-login,
.nav-contacts {
  display: none;
}

@media (max-width: 640px) {
  .site-header .brand,
  .site-header .nav-actions {
    display: none;
  }

  .nav-login {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 13px;
    border-radius: 10px;
    border: 1px solid var(--line-strong);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.86rem;
    white-space: nowrap;
  }

  .nav-login svg {
    width: 17px;
    height: 17px;
    color: var(--amber);
  }

  .nav-contacts {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
  }

  .nav-contact {
    height: 38px;
    min-width: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 10px;
    border: 1px solid var(--line-strong);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
  }

  .nav-contact svg {
    width: 18px;
    height: 18px;
  }

  /* Facebook / WhatsApp icons are solid shapes */
  .nav-fb svg,
  .nav-wa svg {
    fill: currentColor;
  }

  .nav-fb {
    color: #4f93ff;
  }

  .nav-wa {
    color: #25d366;
  }

  .nav-phone {
    padding: 0 11px;
    color: #1a1105;
    background: var(--grad-btn);
    border-color: transparent;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.82rem;
    white-space: nowrap;
  }

  .nav-phone svg {
    width: 16px;
    height: 16px;
  }
}

/* very narrow phones: phone button shows the icon only so everything fits */
@media (max-width: 359px) {
  .nav-phone span {
    display: none;
  }

  .nav-phone {
    padding: 0;
    width: 38px;
  }
}

/* long names shouldn't push the call/social buttons off the phone header */
@media (max-width: 640px) {
  .site-header .nav-bar {
    gap: 8px;
  }

  /* room left after the call/Facebook/WhatsApp buttons */
  .nav-login span {
    max-width: clamp(40px, calc(100vw - 304px), 110px);
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* bottom bar with the staff "Admin" item (5 buttons): keep labels on one line on narrow phones */
@media (max-width: 380px) {
  .bottom-nav a,
  .bottom-nav button {
    padding-inline: 2px;
  }

  .bottom-nav a span,
  .bottom-nav button span {
    white-space: nowrap;
  }
}

@media (max-width: 340px) {
  .bottom-nav a span,
  .bottom-nav button span {
    font-size: 0.6rem;
  }
}

/* ---- admin dashboard ----
   Fit every section to the screen: the content column was a plain 1fr, which
   can't shrink below its widest child, so on phones the whole dashboard was
   ~1000px wide and its right side was cut off. Wide tables now scroll sideways
   inside their own box. */
.admin-shell {
  grid-template-columns: 220px minmax(0, 1fr);
}

.admin-shell > * {
  min-width: 0;
}

.admin-nav button {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-nav button svg {
  width: 17px;
  height: 17px;
  flex: none;
  opacity: 0.85;
}

.admin-nav .tab-short {
  display: none;
}

@media (max-width: 1100px) {
  .admin-shell {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* phones: the section menu becomes a bottom bar you can swipe sideways */
@media (max-width: 640px) {
  .admin-nav {
    position: fixed;
    top: auto;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 60;
    display: flex;
    gap: 4px;
    padding: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    background: rgba(9, 13, 32, 0.98);
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    box-shadow: 0 20px 50px -20px #000;
  }

  .admin-nav::-webkit-scrollbar {
    display: none;
  }

  .admin-nav button {
    flex: 0 0 auto;
    min-width: 66px;
    flex-direction: column;
    gap: 3px;
    padding: 7px 6px;
    border-radius: 10px;
    text-align: center;
    font-size: 0.64rem;
    line-height: 1.1;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  .admin-nav button svg {
    width: 21px;
    height: 21px;
    opacity: 1;
  }

  .admin-nav .tab-full {
    display: none;
  }

  .admin-nav .tab-short {
    display: inline;
  }

  /* keep the last rows clear of the bar */
  #dashboard {
    padding-bottom: 104px;
  }
}

/* admin: seasonal pricing notes under totals and in the castles table */
.season-note {
  margin-top: 3px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
}

.season-note.up {
  color: #ffb84d;
}

.season-note.down {
  color: #5fd39a;
}

/* ===================================================================
   Invoice + waiver documents (invoice.html, booking pop-up)
   Dark starry header in the site theme, light "paper" body so it reads
   and prints well. Each .doc is one A4 page when printed.
   =================================================================== */
.doc-pages {
  display: grid;
  gap: 28px;
  max-width: 860px;
  margin: 0 auto;
}

.doc {
  position: relative;
  background: #fffdf8;
  color: #1b1f33;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 40px 90px -40px #000, 0 0 0 1px rgba(255, 255, 255, 0.06);
  font-size: 0.88rem;
  line-height: 1.55;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.doc h2,
.doc h3 {
  font-family: var(--font-display);
  color: #141b40;
  letter-spacing: 0;
  text-shadow: none;
}

/* header band */
.doc-hero {
  position: relative;
  padding: 26px 30px 24px;
  color: #fff;
  background:
    radial-gradient(520px 220px at 85% -20%, rgba(255, 77, 141, 0.45), transparent 70%),
    radial-gradient(520px 260px at 10% 120%, rgba(123, 92, 255, 0.55), transparent 70%),
    linear-gradient(135deg, #0b1029, #141b40 55%, #1d1446);
  overflow: hidden;
}

.doc-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, #ffb020, #ff7a3d, #ff4d8d, #7b5cff);
}

.doc-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.8;
  background-image:
    radial-gradient(1.4px 1.4px at 8% 22%, #fff, transparent 100%),
    radial-gradient(1px 1px at 23% 70%, rgba(255, 255, 255, 0.8), transparent 100%),
    radial-gradient(1.6px 1.6px at 41% 18%, #ffd794, transparent 100%),
    radial-gradient(1px 1px at 57% 82%, rgba(255, 255, 255, 0.7), transparent 100%),
    radial-gradient(1.3px 1.3px at 66% 35%, #fff, transparent 100%),
    radial-gradient(1px 1px at 78% 62%, #bfe9ff, transparent 100%),
    radial-gradient(1.5px 1.5px at 92% 28%, #fff, transparent 100%);
}

.doc-hero-row {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.doc-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.doc-brand img {
  width: 92px;
  height: auto;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
}

.doc-brand strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.1;
}

.doc-brand span {
  display: block;
  margin-top: 4px;
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.72);
}

.doc-title {
  text-align: right;
  display: grid;
  justify-items: end;
  gap: 4px;
}

.doc-kicker {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  font-weight: 700;
  background: linear-gradient(90deg, #ffb020, #ff7a3d, #ff4d8d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.doc-title > strong {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.doc-sub {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.72);
}

.doc-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.doc-pill.ok {
  background: #1f9d63;
  color: #fff;
}

.doc-pill.due {
  background: linear-gradient(90deg, #ffb020, #ff7a3d);
  color: #1a1105;
}

.doc-pill.warn {
  background: #ffe7b8;
  color: #7a4a00;
}

/* body */
.doc-body {
  padding: 26px 30px 18px;
}

.doc-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.doc-tiles > div {
  padding: 12px 14px;
  border-radius: 14px;
  background: #f4f1ff;
  border: 1px solid #e6e0ff;
}

.doc-tiles span,
.doc-sig-meta span,
.doc-waiver-intro span {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b6f8c;
}

.doc-tiles strong {
  display: block;
  margin-top: 3px;
  font-size: 0.92rem;
  color: #141b40;
}

.doc-tiles .doc-tile-due {
  background: linear-gradient(135deg, #141b40, #2a1d5c);
  border-color: transparent;
}

.doc-tiles .doc-tile-due span {
  color: rgba(255, 255, 255, 0.7);
}

.doc-tiles .doc-tile-due strong {
  font-family: var(--font-display);
  font-size: 1.35rem;
  background: linear-gradient(90deg, #ffb020, #ff4d8d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.doc-parties {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.doc-parties h2,
.doc-terms h2 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ff5a6e;
  margin-bottom: 6px;
}

.doc-parties p {
  margin: 0;
  color: #3b3f5c;
  overflow-wrap: anywhere;
}

.doc-strong {
  font-weight: 700;
  color: #141b40 !important;
}

.doc-items {
  width: 100%;
  border-collapse: collapse;
  margin-top: 22px;
}

.doc-items th {
  text-align: left;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b6f8c;
  padding: 0 0 8px;
  border-bottom: 2px solid #141b40;
}

.doc-items td {
  padding: 12px 0;
  border-bottom: 1px solid #ece8f6;
  vertical-align: top;
}

.doc-items td span {
  display: block;
  font-size: 0.76rem;
  color: #6b6f8c;
  margin-top: 2px;
}

.doc-items th:last-child,
.doc-items td:last-child {
  text-align: right;
  white-space: nowrap;
  padding-left: 16px;
  font-weight: 700;
}

.doc-items tr.minus td:last-child {
  color: #1f9d63;
}

.doc-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 18px;
  margin-top: 20px;
  align-items: start;
}

.doc-terms p {
  margin: 0;
  color: #3b3f5c;
}

.doc-waiver-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px !important;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 0.8rem;
}

.doc-waiver-strip.ok {
  background: #eaf8f1;
  border: 1px solid #bfe9d3;
}

.doc-waiver-strip.warn {
  background: #fff4dd;
  border: 1px solid #ffdc9a;
}

.doc-waiver-strip img {
  width: 88px;
  height: 34px;
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #d9e6df;
}

.doc-totals {
  border-radius: 16px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #0b1029, #1d1446);
  color: #fff;
}

.doc-totals > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.82);
}

.doc-totals .doc-grand {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  align-items: baseline;
}

.doc-totals .doc-grand span {
  color: #fff;
  font-weight: 700;
}

.doc-totals .doc-grand strong {
  font-family: var(--font-display);
  font-size: 1.7rem;
  background: linear-gradient(90deg, #ffb020, #ff4d8d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.doc-thanks {
  margin: 22px 0 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1rem;
  color: #2a1d5c;
}

.doc-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 30px;
  background: #f4f1ff;
  border-top: 1px solid #e6e0ff;
  font-size: 0.72rem;
  color: #6b6f8c;
}

/* waiver page */
.doc-waiver-intro {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f4f1ff;
  border: 1px solid #e6e0ff;
}

.doc-waiver-intro strong {
  display: block;
  margin-top: 2px;
  color: #141b40;
  font-size: 0.86rem;
}

.doc-waiver-grid {
  columns: 2;
  column-gap: 26px;
  margin-top: 18px;
}

.doc-waiver-grid section {
  break-inside: avoid;
  margin-bottom: 12px;
}

.doc-waiver-grid h3 {
  font-size: 0.86rem;
  margin: 0 0 3px;
  color: #2a1d5c;
}

.doc-waiver-grid p {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: #3b3f5c;
}

.doc-declaration {
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff4dd;
  border: 1px solid #ffdc9a;
}

.doc-signature {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 18px;
  margin-top: 16px;
  padding: 16px;
  border-radius: 16px;
  border: 2px solid transparent;
  background:
    linear-gradient(#fffdf8, #fffdf8) padding-box,
    linear-gradient(90deg, #ffb020, #ff4d8d, #7b5cff) border-box;
}

.doc-sig-box {
  position: relative;
  min-height: 110px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #fff;
  border: 1px dashed #c9c3e6;
}

.doc-sig-box img {
  max-width: 100%;
  max-height: 120px;
  object-fit: contain;
}

.doc-sig-empty {
  color: #a3a6bf;
  font-family: var(--font-display);
}

.doc-sig-line {
  position: absolute;
  left: 12px;
  bottom: 8px;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a3a6bf;
}

.doc-sig-meta {
  display: grid;
  gap: 10px;
  align-content: center;
}

.doc-sig-meta strong {
  display: block;
  margin-top: 2px;
  color: #141b40;
}

/* phones */
@media (max-width: 640px) {
  .doc-pages {
    gap: 18px;
  }

  .doc {
    border-radius: 16px;
    font-size: 0.84rem;
  }

  .doc-hero,
  .doc-body {
    padding-left: 16px;
    padding-right: 16px;
  }

  .doc-foot {
    padding-left: 16px;
    padding-right: 16px;
  }

  .doc-brand img {
    width: 64px;
  }

  .doc-title {
    text-align: left;
    justify-items: start;
  }

  .doc-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .doc-parties,
  .doc-summary,
  .doc-signature,
  .doc-waiver-intro {
    grid-template-columns: minmax(0, 1fr);
  }

  .doc-waiver-grid {
    columns: 1;
  }
}

/* print / save as PDF: one A4 page per .doc, colours kept */
@media print {
  .doc-pages {
    display: block;
    max-width: none;
  }

  .doc {
    box-shadow: none !important;
    border-radius: 0;
    break-after: page;
    page-break-after: always;
    font-size: 9.5pt;
  }

  .doc:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  .doc-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .doc-parties {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .doc-summary {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }

  .doc-signature {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }

  .doc-waiver-grid {
    columns: 2;
  }

  .doc-waiver-grid p {
    font-size: 7.4pt;
    line-height: 1.38;
  }

  html,
  body {
    background: #fff !important;
  }

  html,
  body {
    background: #fff !important;
  }

  /* the off-screen mobile menu's shadow bled onto the right edge of the page */
  .mobile-nav,
  .nav-scrim,
  .site-header,
  .page-head {
    display: none !important;
  }

  .doc {
    margin-left: auto;
    margin-right: auto;
  }

  .section:has(> .container > #waiver-text) {
    padding: 0 !important;
  }

  .doc-waiver {
    break-inside: avoid;
  }

  /* keep the whole waiver on one A4 sheet */
  .doc-waiver .doc-hero {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .doc-waiver .doc-body {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .doc-waiver-intro {
    margin-bottom: 10px;
    padding: 8px 12px;
  }

  .doc-waiver-grid h3 {
    font-size: 8.2pt;
    margin-bottom: 1px;
  }

  .doc-waiver-grid section {
    margin-bottom: 6px;
  }

  .doc-signature {
    margin-top: 8px;
    padding: 10px 12px;
  }

  .doc-sig-box {
    min-height: 0;
    height: 74px;
  }

  .doc-waiver .doc-foot {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .bottom-nav,
  .space,
  .modal-backdrop,
  body::after {
    display: none !important;
  }

  @page {
    size: A4;
    margin: 8mm;
  }
}

/* ---- clickable booking rows + booking details pop-up */
.row-click {
  cursor: pointer;
  transition: background 0.15s ease;
}

tr.row-click:hover td,
tr.row-click:focus-visible td {
  background: rgba(255, 176, 32, 0.06);
}

.panel.row-click:hover,
.panel.row-click:focus-visible {
  border-color: rgba(255, 176, 32, 0.45);
}

.row-click:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: -2px;
}

.bd-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding-right: 34px;
}

.bd-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.bd-card {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
  min-width: 0;
}

.bd-card h3 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--amber);
  margin-bottom: 8px;
  font-family: var(--font-body);
}

.bd-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: 0.88rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
}

.bd-row:last-child {
  border-bottom: 0;
}

.bd-row span {
  color: var(--muted);
  flex: none;
}

.bd-row strong {
  text-align: right;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.bd-row a {
  color: #ffd794;
}

.bd-total {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--line-strong);
}

.bd-total strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
}

.bd-due strong {
  color: #ffb84d;
}

.bd-notes {
  margin-top: 8px;
  font-size: 0.84rem;
}

.bd-notes span {
  color: var(--muted);
}

.bd-notes p {
  margin: 2px 0 0;
  white-space: pre-wrap;
}

.bd-waiver.ok {
  border-color: rgba(46, 204, 113, 0.35);
}

.bd-waiver.warn {
  border-color: rgba(255, 176, 32, 0.4);
}

.bd-sig {
  background: #fff;
  border-radius: 10px;
  padding: 6px;
  margin-bottom: 6px;
}

.bd-sig img {
  display: block;
  width: 100%;
  max-height: 90px;
  object-fit: contain;
}

.bd-admin {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 176, 32, 0.06);
  border: 1px solid rgba(255, 176, 32, 0.22);
}

.bd-admin .select {
  min-width: 160px;
}

.bd-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}

@media (max-width: 640px) {
  .bd-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bd-actions .btn {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* ---- type scale: calmer section headings and sub-headings (Nov 2026).
   Section titles  ~28px phone -> ~44px desktop
   Card/sub titles ~21px phone -> ~30px desktop
   Intro text      16px phone  -> 18px desktop
   The homepage hero title keeps its own size. */
.display-lg {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  line-height: 1.1;
}

.display-md {
  font-size: clamp(1.35rem, 1rem + 1.3vw, 1.9rem);
  line-height: 1.15;
}

.cta-band h2 {
  font-size: clamp(1.45rem, 1.05rem + 1.6vw, 2.2rem);
  line-height: 1.15;
}

.checker h2 {
  font-size: clamp(1.3rem, 1rem + 1.2vw, 1.75rem);
  line-height: 1.15;
}

.adventure-body h3 {
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.45rem);
}

.lede {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.12rem);
  line-height: 1.55;
}

.eyebrow {
  font-size: 0.78rem;
}

/* page titles at the top of each page: ~31px phone -> ~50px desktop */
.page-head h1 {
  font-size: clamp(1.95rem, 1.35rem + 2.4vw, 3.1rem);
  line-height: 1.08;
}

.page-head .lede {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.12rem);
}

/* homepage hero buttons: smaller and side by side on phones */
@media (max-width: 640px) {
  .hero-cta {
    flex-wrap: nowrap;
    gap: 10px;
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-cta .btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding: 12px 10px;
    min-height: 46px;
    font-size: clamp(0.82rem, 3.7vw, 0.95rem);
    white-space: nowrap;
    border-radius: 14px;
  }

  .hero-cta .btn .arrow {
    margin-left: 4px;
  }
}

@media (max-width: 370px) {
  .hero-cta .btn .arrow {
    display: none;
  }
}

/* admin castles: one section per castle number */
.castle-group-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.castle-group-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.castle-group-tabs button span {
  font-size: 0.72rem;
  color: var(--muted);
}

.castle-group-tabs button[aria-selected="true"] {
  background: var(--grad-btn);
  color: #1a1105;
  border-color: transparent;
}

.castle-group-tabs button[aria-selected="true"] span {
  color: rgba(26, 17, 5, 0.7);
}

.castle-group {
  margin-top: 18px;
}

.castle-group-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.castle-group-head h3 {
  font-size: 1.05rem;
  font-family: var(--font-display);
  color: #ffd27a;
}

.castle-group-head p {
  font-size: 0.82rem;
}

.castle-num {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(255, 176, 32, 0.14);
  color: #ffd27a;
  font-weight: 700;
  font-size: 0.8rem;
}

/* same column widths in every castle group so the sections line up */
@media (min-width: 900px) {
  .castle-table {
    table-layout: fixed;
    width: 100%;
    min-width: 0 !important;
  }

  .castle-table .c-name { width: 24%; }
  .castle-table .c-cat { width: 14%; }
  .castle-table .c-from { width: 7%; }
  .castle-table .c-season { width: 16%; }
  .castle-table .c-units { width: 6%; }
  .castle-table .c-status { width: 8%; }
  .castle-table .c-actions { width: 25%; }

  .castle-table td,
  .castle-table th {
    padding-left: 10px;
    padding-right: 10px;
  }

  .castle-table td strong {
    display: block;
    overflow-wrap: anywhere;
  }

  .castle-table td {
    overflow-wrap: break-word;
    white-space: normal !important;
  }

  .castle-table td:first-child > div {
    min-width: 0;
  }

  .castle-table td:first-child > div > div {
    min-width: 0;
  }

  .castle-table .season-note {
    white-space: normal !important;
    line-height: 1.35;
  }

  .castle-table td:last-child {
    white-space: normal !important;
  }

  .castle-table td:last-child .btn {
    padding: 6px 9px;
    margin: 2px 0;
  }
}

/* castle editor: photo upload */
.photo-main {
  display: flex;
  gap: 14px;
  align-items: center;
}

.photo-main img {
  width: 112px;
  height: 84px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  flex: none;
}

.photo-main-actions {
  display: grid;
  gap: 6px;
  justify-items: start;
}

.photo-upload {
  cursor: pointer;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}

.photo-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
}

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

.photo-tile button {
  position: absolute;
  top: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  background: rgba(5, 7, 15, 0.8);
  color: #fff;
  font-size: 0.8rem;
  cursor: pointer;
}

.photo-tile .photo-x {
  right: 4px;
}

.photo-tile .photo-left {
  left: 4px;
}

.group-warn {
  flex-basis: 100%;
  margin: 2px 0 0;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 0.8rem;
  color: #ffd794;
  background: rgba(255, 176, 32, 0.1);
  border: 1px solid rgba(255, 176, 32, 0.35);
}

/* ---- tables never scroll sideways (Nov 2026)
   Desktop: columns share the width and long text wraps.
   Phones/tablets (≤ 900px): each row becomes a card, with every value
   labelled by its column heading (labels are added by core.js). */
.table-wrap {
  overflow: hidden;
}

table.data {
  min-width: 0;
  width: 100%;
}

table.data td:first-child,
table.data td:nth-child(2) {
  white-space: normal;
}

table.data th,
table.data td {
  overflow-wrap: anywhere;
}

table.data th {
  overflow-wrap: normal;
  word-break: normal;
}

table.data td .btn {
  white-space: nowrap;
}

table.data td .select {
  max-width: 100%;
}

@media (max-width: 900px) {
  table.data,
  table.data tbody,
  table.data tr,
  table.data td {
    display: block;
    width: 100%;
  }

  table.data colgroup,
  table.data thead {
    display: none;
  }

  table.data tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 14px;
    padding: 14px;
    border-bottom: 1px solid var(--line);
  }

  table.data tr:last-child {
    border-bottom: 0;
  }

  table.data td {
    padding: 0;
    border: 0;
    text-align: left !important;
    white-space: normal !important;
    min-width: 0;
  }

  table.data td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
  }

  table.data td[data-label=""]::before {
    display: none;
  }

  /* the first column (usually the name/date) and the actions span the card */
  table.data td:first-child,
  table.data td:last-child,
  table.data td[colspan] {
    grid-column: 1 / -1;
  }

  table.data td:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }

  table.data td:last-child::before {
    flex-basis: 100%;
    margin-bottom: 0;
  }

  table.data td:last-child .btn {
    margin: 0 !important;
  }

  table.data tbody tr:hover {
    background: transparent;
  }
}

/* castle card badges wrap instead of running off narrow cards */
.castle-badges {
  flex-wrap: wrap;
  row-gap: 6px;
}

.castle-badges .badge {
  white-space: nowrap;
  max-width: 100%;
}

.castle-badges .badge + .badge {
  margin-left: auto;
}

/* ---- My bookings page */
.mb-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.mb-stat {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, #131a3a, #0a0e27);
  color: var(--text);
  text-decoration: none;
  min-width: 0;
}

.mb-stat span {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.mb-stat strong {
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: #fff;
}

.mb-stat.warn {
  border-color: rgba(255, 176, 32, 0.5);
}

.mb-stat.warn strong {
  color: #ffd27a;
}

.mb-stat-cta {
  background: var(--grad-btn);
  border-color: transparent;
}

.mb-stat-cta span,
.mb-stat-cta strong {
  color: #1a1105;
}

.mb-stat-cta strong {
  font-size: 1.05rem;
}

.mb-h {
  margin: 28px 0 12px;
  font-size: 0.78rem;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.mb-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.mb-card {
  display: flex;
  gap: 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(500px 220px at 0% -20%, rgba(255, 176, 32, 0.08), transparent 60%),
    linear-gradient(180deg, #131a3a, #0a0e27);
  min-width: 0;
}

.mb-card:hover,
.mb-card:focus-visible {
  border-color: rgba(255, 176, 32, 0.45);
}

.mb-img {
  width: 92px;
  height: 92px;
  flex: none;
  border-radius: 14px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.05);
}

.mb-main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 4px;
  align-content: start;
}

.mb-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.mb-top strong {
  font-size: 1.02rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.mb-when {
  font-size: 0.88rem;
  color: #fff;
}

.mb-where {
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.mb-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 0.86rem;
}

.mb-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.mb-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.mb-signin {
  padding: 30px 24px;
}

.mb-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 8px;
}

.mb-signin-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px;
}

.mb-lookup-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.mb-lookup-row .input {
  flex: 1;
  min-width: 0;
}

@media (max-width: 900px) {
  .mb-list,
  .mb-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mb-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .mb-img {
    width: 64px;
    height: 64px;
    border-radius: 12px;
  }

  .mb-card {
    padding: 12px;
    gap: 12px;
  }

  .mb-stat strong {
    font-size: 1.2rem;
  }
}

/* ---- desktop header: every link on one line at any laptop width */
@media (min-width: 901px) {
  .nav-bar {
    gap: clamp(8px, 1vw, 18px);
  }

  .nav-links {
    gap: 0;
    min-width: 0;
  }

  .nav-links a {
    white-space: nowrap;
    padding: 8px clamp(7px, 0.9vw, 14px);
    font-size: clamp(0.82rem, 0.55rem + 0.42vw, 0.98rem);
  }

  .nav-actions {
    gap: 8px;
    flex-wrap: nowrap;
  }

  .nav-actions .btn {
    white-space: nowrap;
  }
}

/* smaller laptops: logo without the name, and no Facebook icon in the bar */
@media (min-width: 901px) and (max-width: 1240px) {
  .site-header .brand > span:not(.brand-mark) {
    display: none;
  }

  .nav-actions .nav-icon {
    display: none;
  }

  .nav-actions .btn-sm {
    padding-inline: 12px;
  }
}

/* ---- audit fixes (Nov 2026) */
.done-tick {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  font-weight: 700;
  color: #06210f;
  background: linear-gradient(135deg, #5be39a, #1fbf6a);
  box-shadow: 0 16px 40px -14px rgba(31, 191, 106, 0.9);
}

.review-grid p {
  overflow-wrap: anywhere;
}

.gallery-more {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

.gallery-more:empty {
  display: none;
}

/* pop-up messages sit above the phone bottom bar, not on top of it */
@media (max-width: 640px) {
  .toast-stack {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    left: 16px;
    right: 16px;
    transform: none;
    align-items: center;
  }
}

/* admin analytics: 14-day bar chart */
.pv-bars {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 6px;
  align-items: end;
  height: 170px;
  margin-top: 14px;
}

.pv-bar {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: center;
  min-width: 0;
}

.pv-track {
  flex: 1;
  display: flex;
  align-items: flex-end;
  min-height: 0;
}

.pv-track span {
  display: block;
  width: 100%;
  min-height: 3px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #ffb020, #ff4d8d);
}

.pv-bar em {
  font-style: normal;
  font-size: 0.68rem;
  color: #fff;
  margin-top: 4px;
}

.pv-bar small {
  font-size: 0.6rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
}

@media (max-width: 640px) {
  .pv-bar small {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    height: 38px;
  }
}

.pv-pages {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.pv-pages li {
  display: grid;
  grid-template-columns: minmax(80px, 140px) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  font-size: 0.88rem;
}

.pv-name {
  text-transform: capitalize;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pv-line {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.pv-line i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffb020, #ff4d8d);
}

/* staff reports (delivery sheet / booking list) */
.rep-day {
  margin: 22px 0 8px;
  font-size: 1rem;
  color: #141b40;
  font-family: var(--font-display);
}

.rep-day:first-child {
  margin-top: 4px;
}

.rep-day span {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: #6b6f8c;
  margin-left: 6px;
}

.rep-table td {
  vertical-align: top;
}

.rep-table td span {
  display: block;
  font-size: 0.78rem;
  color: #6b6f8c;
  margin-top: 2px;
}

.rep-table td .rep-note {
  color: #8a5a00;
  font-style: italic;
}

@media (max-width: 640px) {
  .rep-table thead {
    display: none;
  }

  .rep-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px 12px;
    padding: 10px 0;
    border-bottom: 1px solid #e6e0ff;
  }

  .rep-table td {
    display: block;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
  }
}

/* ---- staff booking assistant (chat pop-up) */
.ai-fab {
  position: fixed;
  right: 22px;
  bottom: 24px;
  z-index: 95;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  color: #1a1105;
  background: var(--grad-btn);
  box-shadow: 0 16px 36px -10px rgba(255, 122, 61, 0.85), 0 0 0 4px rgba(5, 7, 15, 0.6);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.ai-fab:hover {
  transform: translateY(-2px);
}

.ai-fab svg {
  width: 28px;
  height: 28px;
}

.ai-fab[aria-expanded="true"] {
  transform: scale(0.92);
}

.ai-panel {
  position: fixed;
  right: 22px;
  bottom: 96px;
  z-index: 96;
  width: min(410px, calc(100vw - 32px));
  height: min(640px, calc(100vh - 130px));
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(500px 260px at 0% -10%, rgba(255, 176, 32, 0.12), transparent 60%),
    linear-gradient(180deg, #131a3a, #0a0e27);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(123, 92, 255, 0.15);
  overflow: hidden;
}

.ai-panel[hidden] {
  display: none;
}

.ai-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 16px;
  border-bottom: 1px solid var(--line);
}

.ai-head > div {
  flex: 1;
  min-width: 0;
  display: grid;
}

.ai-head strong {
  font-family: var(--font-display);
  font-size: 1rem;
}

.ai-head small {
  font-size: 0.72rem;
  color: var(--muted);
}

.ai-head-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--grad-btn);
  color: #1a1105;
  flex: none;
}

.ai-head-icon svg {
  width: 20px;
  height: 20px;
}

.ai-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 1rem;
  flex: none;
}

.ai-icon-btn svg {
  width: 16px;
  height: 16px;
}

.ai-log {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-msg {
  max-width: 88%;
  padding: 10px 13px;
  border-radius: 16px;
  font-size: 0.9rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.ai-msg p {
  margin: 0;
}

.ai-msg p + p,
.ai-msg ul + p,
.ai-msg p + ul {
  margin-top: 6px;
}

.ai-msg ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

.ai-msg a {
  color: #ffd794;
  text-decoration: underline;
}

.ai-user {
  align-self: flex-end;
  background: var(--grad-btn);
  color: #1a1105;
  border-bottom-right-radius: 5px;
}

.ai-bot {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
}

.ai-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ai-steps span {
  font-size: 0.68rem;
  color: var(--muted);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px dashed var(--line-strong);
}

.ai-doc {
  align-self: flex-start;
  padding: 9px 13px;
  border-radius: 12px;
  background: rgba(255, 176, 32, 0.12);
  border: 1px solid rgba(255, 176, 32, 0.45);
  color: #ffd794;
  font-weight: 600;
  font-size: 0.86rem;
  text-decoration: none;
}

.ai-confirm {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 176, 32, 0.55);
  background: rgba(255, 176, 32, 0.08);
  font-size: 0.86rem;
}

.ai-confirm strong {
  display: block;
  margin-bottom: 4px;
}

.ai-confirm p {
  margin: 2px 0 0;
  color: var(--text-soft);
  overflow-wrap: anywhere;
}

.ai-confirm-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.ai-welcome {
  font-size: 0.88rem;
  color: var(--text-soft);
}

.ai-welcome strong {
  color: #fff;
  display: block;
  margin-bottom: 4px;
}

.ai-chips {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 12px;
}

.ai-chips button {
  text-align: left;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
  cursor: pointer;
}

.ai-chips button:hover {
  border-color: rgba(255, 176, 32, 0.5);
}

.ai-typing {
  display: flex;
  gap: 4px;
}

.ai-typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  animation: ai-dot 1s infinite ease-in-out;
}

.ai-typing i:nth-child(2) {
  animation-delay: 0.15s;
}

.ai-typing i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes ai-dot {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

.ai-form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 10px;
  border-top: 1px solid var(--line);
}

.ai-form textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  max-height: 120px;
  padding: 11px 13px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  line-height: 1.35;
}

.ai-form textarea:focus {
  outline: none;
  border-color: rgba(255, 176, 32, 0.6);
}

.ai-send {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 14px;
  border: 0;
  display: grid;
  place-items: center;
  background: var(--grad-btn);
  color: #1a1105;
  cursor: pointer;
}

.ai-send svg {
  width: 20px;
  height: 20px;
}

.ai-send[disabled],
.ai-form textarea[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* phones: the button sits just above the bottom menu; the chat fills the
   space between the header and the bottom menu */
@media (max-width: 640px) {
  .ai-fab {
    right: 16px;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    width: 54px;
    height: 54px;
  }

  .ai-panel {
    left: 10px;
    right: 10px;
    width: auto;
    top: calc(64px + env(safe-area-inset-top, 0px));
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    height: auto;
    border-radius: 20px;
  }

  body.ai-open .ai-fab {
    display: none;
  }

  /* toasts above the assistant button */
  body:has(.ai-fab) .toast-stack {
    bottom: calc(160px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media print {
  .ai-fab,
  .ai-panel {
    display: none !important;
  }
}

/* assistant: pick-a-castle list with pictures */
.ai-pick {
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
  flex: none;
}

.ai-pick summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 0.9rem;
}

.ai-pick summary::-webkit-details-marker {
  display: none;
}

.ai-pick summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  margin: -4px 4px 0 auto;
  flex: none;
}

.ai-pick[open] summary::after {
  transform: rotate(-135deg);
  margin-top: 4px;
}

.ai-pick summary small {
  font-weight: 500;
  font-size: 0.74rem;
  color: var(--muted);
}

.ai-pick-search {
  display: block;
  width: calc(100% - 20px);
  margin: 0 10px 8px;
  padding: 9px 12px;
  border-radius: 11px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

.ai-pick-list {
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 10px 10px;
  display: grid;
  gap: 6px;
}

.ai-pick-group {
  margin: 6px 2px 0;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
}

.ai-pick-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ai-pick-item[hidden],
.ai-pick-group[hidden] {
  display: none;
}

.ai-pick-item:hover:not([disabled]),
.ai-pick-item:focus-visible {
  border-color: rgba(255, 176, 32, 0.6);
  background: rgba(255, 176, 32, 0.08);
}

.ai-pick-item[disabled] {
  cursor: default;
  opacity: 0.6;
}

.ai-pick-item img {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
  flex: none;
  background: #0d1230;
}

.ai-pick-item span {
  min-width: 0;
  display: grid;
}

.ai-pick-item strong {
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.ai-pick-item small {
  font-size: 0.75rem;
  color: #ffd794;
}

/* ---- admin bookings tab: views, filters, grouped list */
.bk-views {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  margin-bottom: 12px;
}

.bk-views::-webkit-scrollbar {
  display: none;
}

.bk-views button {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-soft);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}

.bk-views button span {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.72rem;
  text-align: center;
}

.bk-views button[aria-selected="true"] {
  background: var(--grad-btn);
  border-color: transparent;
  color: #1a1105;
}

.bk-views button[aria-selected="true"] span {
  background: rgba(26, 17, 5, 0.18);
}

.bk-tools {
  padding: 14px;
}

.bk-search {
  display: flex;
  gap: 8px;
  align-items: center;
}

.bk-search .input {
  flex: 1;
  min-width: 0;
}

.bk-filter-toggle {
  flex: none;
}

.bk-filters {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  align-items: end;
  margin-top: 12px;
}

.bk-filters.open {
  display: grid;
}

.bk-filters .field {
  margin: 0;
  min-width: 0;
}

.bk-filters .select,
.bk-filters .input {
  width: 100%;
  min-width: 0;
}

.bk-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin-top: 14px;
  font-size: 0.86rem;
  color: var(--text-soft);
}

.bk-summary strong {
  color: #fff;
}

.bk-summary .bk-due strong {
  color: #ffb020;
}

.bk-summary-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.bk-table tr.bk-day td {
  background: rgba(123, 92, 255, 0.1);
  font-weight: 700;
  font-size: 0.88rem;
  color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
}

.bk-table tr.bk-day td span {
  margin-left: 10px;
  font-weight: 500;
  font-size: 0.76rem;
  color: var(--muted);
}

.bk-due {
  color: #ffb020;
  font-size: 0.76rem;
  font-weight: 600;
}

.bk-paid {
  color: #4ade80;
  font-size: 0.76rem;
  font-weight: 600;
}

.bk-flag {
  display: block;
  margin-top: 5px;
  font-size: 0.72rem;
  font-weight: 600;
}

.bk-flag.ok {
  color: #4ade80;
}

.bk-flag.warn {
  color: #ffb020;
}

.bd-delete {
  color: #ff8a8a !important;
  border-color: rgba(255, 107, 107, 0.4) !important;
  margin-left: auto;
}

@media (max-width: 900px) {
  .bk-table tr.bk-day {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    margin: 14px 0 6px;
  }

  .bk-table tr.bk-day td {
    display: block;
    background: none;
    padding: 0 2px !important;
    border: 0 !important;
  }

  .bk-table tr.bk-day td::before {
    display: none !important;
  }

  .bk-table tr.bk-day td span {
    display: block;
    margin: 2px 0 0;
  }

  .bk-summary-actions {
    margin-left: 0;
    width: 100%;
  }
}

/* ---- admin overview: colourful tiles, 4 across, each opens a pop-up */
.ov-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ov-tile {
  --c1: #ffb020;
  --c2: #ff7a3d;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  padding: 16px 16px 14px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--c1) 45%, transparent);
  background:
    radial-gradient(140% 120% at 100% 0%, color-mix(in srgb, var(--c2) 34%, transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--c1) 22%, #0f1530), #0c1128);
  box-shadow: 0 16px 34px -22px color-mix(in srgb, var(--c1) 80%, transparent);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.ov-tile::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--c1), var(--c2));
}

.ov-tile:hover,
.ov-tile:focus-visible {
  transform: translateY(-2px);
  border-color: var(--c1);
}

.ov-k {
  font-size: 0.7rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--c1) 70%, #fff);
  max-width: 100%;
}

.ov-v {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  max-width: 100%;
  overflow-wrap: anywhere;
  background: linear-gradient(95deg, #fff 30%, color-mix(in srgb, var(--c1) 60%, #fff));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ov-sub {
  font-size: 0.72rem;
  color: var(--text-soft);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ov-amber { --c1: #ffb020; --c2: #ff7a3d; }
.ov-pink { --c1: #ff4d8d; --c2: #e2459a; }
.ov-orange { --c1: #ff8a3d; --c2: #ff5f5f; }
.ov-violet { --c1: #9b7bff; --c2: #7b5cff; }
.ov-green { --c1: #2ecc71; --c2: #35d0e0; }
.ov-magenta { --c1: #e2459a; --c2: #b06bff; }
.ov-cyan { --c1: #35d0e0; --c2: #7b5cff; }
.ov-gold { --c1: #ffd23f; --c2: #ffb020; }

/* phones: still 4 across, compact */
@media (max-width: 640px) {
  .ov-tiles {
    gap: 7px;
  }

  .ov-tile {
    padding: 10px 8px 11px;
    border-radius: 14px;
    gap: 2px;
  }

  .ov-tile::after {
    left: 8px;
    right: 8px;
    height: 2px;
  }

  .ov-k {
    font-size: 0.56rem;
    line-height: 1.2;
    min-height: 2.4em;
  }

  .ov-v {
    font-size: 1.05rem;
  }

  .ov-sub {
    display: none;
  }
}

@media (max-width: 360px) {
  .ov-v {
    font-size: 0.92rem;
  }
}

/* tile pop-ups */
.ov-pop .display-md {
  font-size: clamp(1.3rem, 4vw, 1.7rem);
}

.ov-list {
  display: grid;
  gap: 6px;
  max-height: min(56vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.ov-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ov-item:hover,
.ov-item:focus-visible {
  border-color: rgba(255, 176, 32, 0.55);
  background: rgba(255, 176, 32, 0.06);
}

.ov-item small {
  display: block;
  font-size: 0.74rem;
  color: var(--muted);
}

.ov-item-date {
  flex: none;
  width: 54px;
  text-align: center;
  padding: 5px 0;
  border-radius: 10px;
  background: rgba(123, 92, 255, 0.16);
}

.ov-item-date strong {
  font-size: 0.82rem;
}

.ov-item-main {
  flex: 1;
  min-width: 0;
}

.ov-item-main strong,
.ov-item-main small {
  display: block;
  overflow-wrap: anywhere;
}

.ov-item-end {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  font-size: 0.86rem;
  font-weight: 600;
}

.ov-money {
  color: #ffd794;
}

.ov-warn {
  color: #ffb020 !important;
  font-weight: 600;
}

.ov-msg {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 77, 141, 0.35);
  background: rgba(255, 77, 141, 0.05);
}

.ov-msg-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.ov-msg-head small {
  color: var(--muted);
  font-size: 0.74rem;
  flex: none;
}

.ov-msg p {
  margin: 8px 0 0;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.ov-msg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.ov-months {
  display: grid;
  gap: 10px;
}

.ov-month {
  display: grid;
  grid-template-columns: minmax(0, 9em) minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 12px;
  font-size: 0.86rem;
}

.ov-month i {
  height: 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}

.ov-month i::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: 6px;
  background: linear-gradient(90deg, #9b7bff, #ff4d8d);
}

.ov-month small {
  grid-column: 3;
  color: var(--muted);
  font-size: 0.72rem;
  text-align: right;
}

.ov-pop-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

/* ---- every booking: castle photo, name, dates underneath */
.bk-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.bk-head img {
  width: 58px;
  height: 46px;
  flex: none;
  object-fit: cover;
  border-radius: 10px;
  background: #0d1230;
  border: 1px solid var(--line);
}

.bk-head > span {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.bk-head strong {
  font-size: 0.92rem;
  line-height: 1.25;
  color: #fff;
  overflow-wrap: anywhere;
}

.bk-head small {
  font-size: 0.78rem;
  color: #ffd794;
  font-weight: 600;
  line-height: 1.3;
}

.bk-ref {
  margin: 4px 0 0 70px;
  font-size: 0.7rem;
  color: var(--muted);
}

.bk-addr {
  display: block;
  max-width: 260px;
  font-size: 0.86rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

table.data td:first-child .bk-head {
  min-width: 220px;
}

.ov-item-main .bk-head img {
  width: 52px;
  height: 42px;
}

.ov-item-who {
  margin: 6px 0 0 64px;
  overflow-wrap: anywhere;
}

/* booking pop-up title */
.bd-title {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.bd-title img {
  width: 96px;
  height: 76px;
  flex: none;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: #0d1230;
}

.bd-title > div {
  min-width: 0;
}

.bd-title .display-md {
  font-size: clamp(1.25rem, 4vw, 1.7rem);
  overflow-wrap: anywhere;
}

.bd-dates {
  margin-top: 4px;
  color: #ffd794;
  font-weight: 700;
  font-size: 1rem;
}

@media (max-width: 900px) {
  table.data td:first-child .bk-head {
    min-width: 0;
  }

  .bk-addr {
    max-width: none;
  }

  .bk-ref {
    margin-left: 70px;
  }
}

@media (max-width: 480px) {
  .bd-title img {
    width: 72px;
    height: 58px;
    border-radius: 12px;
  }

  .bd-dates {
    font-size: 0.92rem;
  }
}

.bk-head em {
  font-style: normal;
  font-size: 0.74rem;
  color: var(--muted);
  line-height: 1.3;
}

.bk-table .pill,
.bk-flag,
.bk-due,
.bk-paid,
table.data .pill {
  white-space: nowrap;
}

@media (min-width: 901px) {
  .bk-table td:first-child {
    width: 38%;
  }
}

/* phones: the booking (photo, castle, dates) spans the full card */
@media (max-width: 900px) {
  table.data td:has(> .bk-head) {
    grid-column: 1 / -1;
    width: auto !important;
  }
}

.bd-title .pill {
  display: inline-block;
}

.bd-head .bd-title {
  padding-right: 44px;
}

/* ---- containers sitting straight on the starfield get the solid blue
   panel background (same as .panel) instead of see-through */
.table-wrap,
.stat,
.admin-nav,
.stat-strip > div,
.accordion {
  background:
    radial-gradient(500px 240px at 10% -10%, rgba(255, 176, 32, 0.08), transparent 60%),
    radial-gradient(500px 260px at 100% 110%, rgba(123, 92, 255, 0.14), transparent 60%),
    linear-gradient(180deg, #131a3a, #0a0e27);
  border: 1px solid var(--line-strong);
}

.table-wrap,
.stat {
  box-shadow: 0 30px 80px -50px rgba(123, 92, 255, 0.7);
}

/* table header row a shade lighter so it reads as a header */
.table-wrap table.data thead th {
  background: rgba(255, 255, 255, 0.04);
}

/* FAQ lists become a panel */
.accordion {
  border-radius: var(--radius);
  padding: 0 clamp(16px, 2.4vw, 24px);
}

.accordion details:last-child {
  border-bottom: 0;
}

.stat-strip > div {
  border-radius: 14px;
}

@media (max-width: 640px) {
  /* the phone section bar keeps its own solid style */
  .admin-nav {
    background: rgba(9, 13, 32, 0.98);
  }
}

/* account: delete my account */
.acct-delete {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
}

.acct-delete summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 600;
}

.acct-delete p {
  margin: 10px 0 12px;
  color: var(--text-soft);
  line-height: 1.5;
}

.acct-delete-btn {
  --btn-bg: rgba(255, 95, 95, 0.12);
  --btn-fg: #ff9b9b;
  border: 1px solid rgba(255, 95, 95, 0.45);
}

/* ---- staff notifications bell + panel */
.nb-bell {
  position: relative;
  width: 38px;
  height: 38px;
  flex: none;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  cursor: pointer;
}

.nb-bell svg {
  width: 19px;
  height: 19px;
}

.nb-bell[aria-expanded="true"] {
  border-color: rgba(255, 176, 32, 0.7);
  color: #ffd794;
}

.nb-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(95deg, #ff4d8d, #ff5f5f);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 19px;
  text-align: center;
  box-shadow: 0 0 0 2px #05070f;
}

.nb-count[hidden] {
  display: none;
}

/* phones: the bell takes the Facebook icon's spot */
@media (max-width: 640px) {
  .nav-contacts:has(.nb-bell) .nav-fb {
    display: none;
  }
}

.nb-panel {
  position: fixed;
  top: 74px;
  right: max(16px, calc((100vw - var(--container)) / 2));
  z-index: 120;
  width: min(400px, calc(100vw - 20px));
  max-height: min(620px, calc(100vh - 100px));
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(500px 240px at 0% -10%, rgba(255, 176, 32, 0.1), transparent 60%),
    linear-gradient(180deg, #131a3a, #0a0e27);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(123, 92, 255, 0.15);
  overflow: hidden;
}

.nb-panel[hidden] {
  display: none;
}

.nb-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 10px 18px;
}

.nb-head strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin-right: auto;
}

.nb-link {
  border: 0;
  background: none;
  color: #ffd794;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.nb-x {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
}

.nb-tabs {
  display: flex;
  gap: 6px;
  padding: 0 14px 10px;
  border-bottom: 1px solid var(--line);
}

.nb-tabs button {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: none;
  color: var(--text-soft);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.nb-tabs button[aria-selected="true"] {
  background: var(--grad-btn);
  color: #1a1105;
  border-color: transparent;
}

.nb-list {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
  display: grid;
  gap: 4px;
}

.nb-item {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  padding: 11px 30px 11px 11px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.nb-item.unread {
  background: rgba(255, 176, 32, 0.07);
  border-color: rgba(255, 176, 32, 0.22);
}

.nb-item:hover,
.nb-item:focus-visible {
  background: rgba(255, 255, 255, 0.06);
}

.nb-icon {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(123, 92, 255, 0.18);
  font-size: 0.95rem;
}

.nb-booking .nb-icon { background: rgba(46, 204, 113, 0.18); }
.nb-message .nb-icon { background: rgba(255, 77, 141, 0.18); }
.nb-cancelled .nb-icon,
.nb-deleted .nb-icon { background: rgba(255, 95, 95, 0.18); }
.nb-waiver .nb-icon { background: rgba(53, 208, 224, 0.18); }

.nb-text {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.nb-text strong {
  font-size: 0.88rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.nb-text span {
  font-size: 0.8rem;
  color: var(--text-soft);
  line-height: 1.4;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nb-text small {
  font-size: 0.72rem;
  color: var(--muted);
}

.nb-item.read .nb-text strong {
  font-weight: 600;
  color: var(--text-soft);
}

.nb-dot {
  position: absolute;
  top: 16px;
  right: 12px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffb020;
  box-shadow: 0 0 10px rgba(255, 176, 32, 0.8);
}

.nb-empty {
  padding: 34px 10px;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

@media (max-width: 640px) {
  .nb-panel {
    top: calc(64px + env(safe-area-inset-top, 0px));
    left: 10px;
    right: 10px;
    width: auto;
    max-height: calc(100vh - 170px);
  }
}

@media print {
  .nb-bell,
  .nb-panel {
    display: none !important;
  }
}

/* ---- settings: people (administrators + customers) */
.pp-list {
  display: grid;
  gap: 6px;
}

.pp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pp-row:hover,
.pp-row:focus-visible {
  border-color: rgba(255, 176, 32, 0.55);
  background: rgba(255, 176, 32, 0.06);
}

.pp-avatar {
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(135deg, rgba(255, 176, 32, 0.25), rgba(123, 92, 255, 0.3));
  border: 1px solid rgba(255, 176, 32, 0.35);
  color: #ffd794;
  font-family: var(--font-display);
  font-weight: 700;
}

.pp-main {
  flex: 1;
  min-width: 0;
  display: grid;
}

.pp-main strong {
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.pp-main small {
  font-size: 0.76rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.pp-side {
  flex: none;
  display: grid;
  justify-items: end;
  gap: 2px;
  text-align: right;
}

.pp-side small {
  font-size: 0.7rem;
  color: var(--muted);
}

.pp-add {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.pp-add .input {
  flex: 1 1 220px;
  min-width: 0;
}

.pp-pop-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-right: 40px;
}

.pp-pop-head > div {
  min-width: 0;
}

.pp-pop-head .display-md {
  font-size: clamp(1.3rem, 4vw, 1.7rem);
  overflow-wrap: anywhere;
}

.pp-pop-head p {
  overflow-wrap: anywhere;
}

.pp-sub {
  margin: 18px 0 8px;
  font-size: 0.95rem;
}

.pp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.pp-danger {
  --btn-bg: rgba(255, 95, 95, 0.12);
  --btn-fg: #ff9b9b;
  border: 1px solid rgba(255, 95, 95, 0.45);
  margin-left: auto;
}

/* ---- admin: top menu bar (brand, notifications, view site, sign out) */
.admin-top {
  position: sticky;
  top: 0;
  z-index: 70;
  background: rgba(5, 7, 15, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top, 0px);
}

.admin-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
}

.admin-top-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  min-width: 0;
}

.admin-top-brand img {
  width: 30px;
  height: 30px;
  flex: none;
}

.admin-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

/* the desktop side menu sits below the top bar */
@media (min-width: 641px) {
  .admin-nav {
    top: 80px;
  }
}

@media (max-width: 380px) {
  .admin-top-brand span {
    display: none;
  }
}

/* logo mark: the cut-out logo itself, no square tile behind it */
.brand-mark {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
}

.brand-mark img,
.admin-top-brand img {
  width: auto;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
}

@media (max-width: 640px) {
  .brand-mark {
    width: auto;
    height: auto;
  }
}

/* header: logo only (no name text beside it), a little bigger */
.site-header .brand-mark img {
  height: 44px;
}

/* after booking without an account: invite to create one */
.guest-cta {
  display: grid;
  gap: 6px;
  justify-items: start;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 176, 32, 0.45);
  background: rgba(255, 176, 32, 0.08);
  font-size: 0.88rem;
  color: var(--text-soft);
  text-align: left;
}

.guest-cta strong {
  color: #fff;
  font-size: 0.95rem;
}

.guest-cta b {
  color: #ffd794;
  overflow-wrap: anywhere;
}

.guest-cta .btn {
  margin-top: 4px;
}

/* assistant: which castle this chat is about */
.ai-castle-bar {
  position: relative;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}

.ai-castle-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 10px 6px 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 176, 32, 0.4);
  background: rgba(255, 176, 32, 0.07);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ai-castle-btn img,
.ai-castle-any {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 9px;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: rgba(123, 92, 255, 0.18);
  font-size: 1.1rem;
}

.ai-castle-btn > span:not(.ai-castle-any) {
  flex: 1;
  min-width: 0;
  display: grid;
}

.ai-castle-btn small {
  font-size: 0.68rem;
  color: var(--muted);
}

.ai-castle-btn strong {
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-castle-btn i {
  font-style: normal;
  color: #ffd794;
  flex: none;
}

.ai-castle-menu {
  position: absolute;
  left: 12px;
  right: 12px;
  top: calc(100% - 4px);
  z-index: 5;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: #10163a;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.9);
}

.ai-castle-menu[hidden] {
  display: none;
}

.ai-castle-search {
  width: 100%;
  margin-bottom: 6px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

.ai-castle-list {
  max-height: min(340px, 50vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  gap: 4px;
}

.ai-castle-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 0.86rem;
  text-align: left;
  cursor: pointer;
}

.ai-castle-opt[hidden] {
  display: none;
}

.ai-castle-opt img {
  width: 44px;
  height: 36px;
  flex: none;
  border-radius: 8px;
  object-fit: cover;
}

.ai-castle-opt .ai-castle-any {
  width: 44px;
  height: 36px;
}

.ai-castle-opt:hover,
.ai-castle-opt[aria-pressed="true"] {
  border-color: rgba(255, 176, 32, 0.55);
  background: rgba(255, 176, 32, 0.08);
}

/* phones: the chat fills the whole screen and sits above the keyboard */
@media (max-width: 640px) {
  .ai-panel {
    position: fixed;
    inset: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    border: 0;
    z-index: 140;
    padding-top: env(safe-area-inset-top, 0px);
  }

  .ai-form {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }

  body.ai-open {
    overflow: hidden;
  }
}

/* assistant: date + castle side by side */
.ai-castle-bar {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 8px;
}

.ai-castle-bar .ai-castle-btn {
  padding: 5px 8px 5px 5px;
  gap: 8px;
}

.ai-castle-bar .ai-castle-btn img,
.ai-castle-bar .ai-castle-btn .ai-castle-any {
  width: 34px;
  height: 34px;
  font-size: 1rem;
}

.ai-castle-btn.is-clash {
  border-color: rgba(255, 95, 95, 0.6);
  background: rgba(255, 95, 95, 0.08);
}

.ai-castle-btn.is-clash small {
  color: #ff9b9b;
}

.ai-castle-note {
  margin: 2px 4px 8px;
  font-size: 0.78rem;
  color: var(--text-soft);
}

.ai-castle-note strong {
  color: #ffd794;
}

.ai-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 2px 8px;
}

.ai-cal-head strong {
  font-size: 0.92rem;
}

.ai-cal-nav {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 1.2rem;
  cursor: pointer;
}

.ai-cal-nav[disabled] {
  opacity: 0.3;
  cursor: default;
}

.ai-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.ai-cal-dow span {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
  padding-bottom: 2px;
}

.ai-cal-grid button {
  aspect-ratio: 1;
  min-height: 34px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}

.ai-cal-grid button:hover:not([disabled]) {
  border-color: rgba(255, 176, 32, 0.55);
}

.ai-cal-grid button[disabled] {
  opacity: 0.25;
  cursor: default;
}

.ai-cal-grid button.is-today {
  border-color: rgba(123, 92, 255, 0.7);
}

.ai-cal-grid button[aria-pressed="true"] {
  background: var(--grad-btn);
  color: #1a1105;
  border-color: transparent;
}

.ai-cal-clear {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: none;
  color: var(--text-soft);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

/* bookings quick views: wrap onto a second line instead of scrolling sideways */
.bk-views {
  flex-wrap: wrap;
  overflow: visible;
}

/* assistant date picker: number of days */
.ai-days {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-soft);
}

.ai-days > div {
  display: flex;
  gap: 5px;
}

.ai-days button {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.ai-days button[aria-pressed="true"] {
  background: var(--grad-btn);
  color: #1a1105;
  border-color: transparent;
}

.ai-cal-grid button.in-hire {
  background: rgba(255, 176, 32, 0.22);
  border-color: rgba(255, 176, 32, 0.45);
}

/* assistant date picker: days chooser in the same style as the booking page */
.ai-days-top {
  padding: 2px 2px 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.ai-days-top > strong,
.ai-cal-title {
  display: block;
  font-size: 0.92rem;
  margin-bottom: 8px;
}

.ai-days-top .segmented {
  display: flex;
  flex-wrap: wrap;
}

.ai-days-top .segmented button {
  flex: 1 1 auto;
}

.ai-days-top p {
  margin: 8px 0 0;
  font-size: 0.72rem;
  color: var(--muted);
}

.ai-cal-title {
  margin: 0 2px 4px;
}

.ai-date-menu {
  max-height: min(78vh, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* pickers fit inside the chat: compact calendar, scroll if still too tall */
.ai-castle-menu {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ai-castle-menu[hidden] {
  display: none;
}

.ai-castle-menu .ai-castle-list {
  max-height: none;
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
}

.ai-date-menu {
  max-height: none;
}

.ai-cal-grid button {
  aspect-ratio: auto;
  height: 34px;
  min-height: 0;
  border-radius: 9px;
  font-size: 0.8rem;
}

.ai-cal-grid {
  gap: 3px;
}

.ai-cal-head {
  padding-bottom: 6px;
}

.ai-cal-nav {
  width: 30px;
  height: 30px;
}

.ai-days-top {
  padding-bottom: 10px;
  margin-bottom: 8px;
}

.ai-days-top .segmented button {
  padding: 6px 10px;
  font-size: 0.8rem;
}

.ai-cal-clear {
  margin-top: 6px;
  padding: 6px;
}