/* Fonts: self-contained system stack (no external requests).
   In Germany, loading fonts from Google's servers without prior consent has
   been ruled a GDPR violation (LG München I, 3 O 17493/20), so no external
   font is loaded here. The stack below renders instantly and looks
   professional. To use the exact Inter / Plus Jakarta Sans branding, drop
   self-hosted .woff2 files into fonts/ and add @font-face rules here — see
   NETLIFY-DEPLOY.md. The font-family variables already list those names
   first, so they upgrade automatically once the files are present. */
/* ===================================================================
   ScubaDahab.com — Design System
   Palette: deep blue/teal (Red Sea) + warm coral accent (CTA)
   Type: system UI stack (Inter / Plus Jakarta Sans if self-hosted later)
   Mobile-first, thumb-zone aware, max 2-tier navigation
   EN/DE language switching: pure CSS (radios + :has())
   =================================================================== */

:root {
  --deep-blue: #0a3d5c;
  --mid-blue: #0f5c85;
  --teal: #14a3a8;
  --teal-light: #e6f6f6;
  --coral: #ff6b4a;
  --coral-dark: #e8552f;
  --sand: #f7f3ea;
  --ink: #1c2b33;
  --grey: #5c6b73;
  --grey-light: #dfe6e8;
  --white: #ffffff;
  --radius: 10px;
  --shadow: 0 4px 18px rgba(10, 61, 92, 0.12);
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 74px; /* space for sticky mobile CTA */
}

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

a { color: var(--mid-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-family: var(--font-head); color: var(--deep-blue); margin: 0 0 .5em; line-height: 1.2; }
h1 { font-size: clamp(1.9rem, 5vw, 2.9rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

.section { padding: 56px 0; }
.section-tight { padding: 32px 0; }
.bg-sand { background: var(--sand); }
.bg-deep { background: var(--deep-blue); color: var(--white); }
.bg-deep h2, .bg-deep h3 { color: var(--white); }

/* ---------- Language switching (CSS-only) ---------- */
.lang-radio { display: none; }
.i18n-de { display: none; }
body:has(#lang-de:checked) .i18n-en { display: none; }
body:has(#lang-de:checked) .i18n-de { display: inline; }
.lang-btn {
  border: 1.5px solid var(--grey-light);
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 700;
  font-size: .8rem;
  color: var(--deep-blue);
  cursor: pointer;
}
.lang-btn:hover { border-color: var(--teal); color: var(--teal); }
label[for] { cursor: pointer; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary {
  background: var(--coral);
  color: var(--white);
  box-shadow: 0 6px 16px rgba(255,107,74,.35);
}
.btn-primary:hover { background: var(--coral-dark); transform: translateY(-1px); }
.btn-secondary {
  background: transparent;
  color: var(--deep-blue);
  border: 2px solid var(--deep-blue);
}
.btn-secondary:hover { background: var(--deep-blue); color: var(--white); }
.btn-block { width: 100%; text-align: center; }
.btn-sm { padding: 9px 16px; font-size: .9rem; }

/* ---------- Header / Nav (2-tier max) ---------- */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--grey-light);
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 20px;
  max-width: 1180px;
  margin: 0 auto;
}
.logo {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--deep-blue);
  display: flex;
  align-items: center;
  gap: 0;
}
.logo .dot { color: var(--teal); }

nav.main-nav { display: none; }
nav.main-nav ul { list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; align-items: center; }
nav.main-nav a, nav.main-nav label { color: var(--ink); font-weight: 500; }
nav.main-nav a.current, nav.main-nav label.current { color: var(--teal); }

.nav-cta { display: none; }

/* Small top-right utility link — not a product tab (NN/g: users look top-right for contact) */
.header-contact { display: none; color: var(--ink); font-weight: 500; text-decoration: none; font-size: .95rem; }
.header-contact:hover { color: var(--teal); }
.header-bookings { display: none; align-items: center; gap: 6px; color: var(--deep-blue); font-weight: 600; text-decoration: none; font-size: .92rem; background: var(--sand); padding: 7px 13px; border-radius: 999px; line-height: 1; }
.header-bookings::before { content: "\1F4CB"; font-size: .95em; }
.header-bookings:hover { color: var(--teal); }
.auth-booking-note { margin-bottom: 16px; }

.menu-chk { display: none; }
.menu-toggle {
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--deep-blue);
  padding: 4px 8px;
}

.mobile-menu {
  display: none;
  flex-direction: column;
  padding: 10px 20px 20px;
  border-top: 1px solid var(--grey-light);
}
.mobile-menu.open { display: flex; }
#menu-chk:checked ~ .mobile-menu { display: flex; }
.mobile-menu a, .mobile-menu label {
  padding: 12px 0;
  border-bottom: 1px solid var(--grey-light);
  color: var(--ink);
  font-weight: 500;
}

@media (min-width: 900px) {
  nav.main-nav { display: block; }
  .nav-cta { display: inline-block; }
  .header-contact { display: inline-block; }
  .header-bookings.is-visible { display: inline-flex; }
  .menu-toggle { display: none; }
  body { padding-bottom: 0; }
  .sticky-mobile-cta { display: none !important; }
}

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(130% 95% at 74% 6%, rgba(20,163,168,.42) 0%, rgba(20,163,168,0) 52%),
    radial-gradient(90% 80% at 12% 100%, rgba(8,58,90,.55) 0%, rgba(8,58,90,0) 60%),
    linear-gradient(163deg, #0e5170 0%, #0a3d5c 46%, #062a44 100%);
  background-color: var(--deep-blue);
  color: var(--white);
  padding: 76px 0 120px;
  position: relative;
  overflow: visible;
}
.hero > * { position: relative; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 82% 22%, rgba(255,255,255,.08), transparent 46%);
  pointer-events: none;
}
/* White wave transition at the bottom of the hero */
.hero::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 60px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 40 Q360 90 720 40 Q1080 -10 1440 40 L1440 80 L0 80 Z' fill='white'/%3E%3C/svg%3E") bottom center / 100% 100% no-repeat;
  z-index: 0;
}
.hero-inner { position: relative; z-index: 1; text-align: center; max-width: 760px; margin: 0 auto; }
.hero h1 { color: var(--white); text-shadow: 0 2px 18px rgba(0,20,40,.55); }
.hero p.lead { font-size: 1.15rem; opacity: .96; max-width: 600px; margin: 0 auto 28px; text-shadow: 0 1px 12px rgba(0,20,40,.5); }

/* Search / filter bar overlapping hero — pro booking-bar style */
.sr-only-native {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.search-bar {
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(6,32,52,.28);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 780px;
  margin: 0 auto;
  text-align: left;
}
.search-bar .field {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 12px;
  min-width: 0;
}
.search-bar .field:hover { background: var(--sand); }
.field-label {
  font-size: .8rem; font-weight: 600; color: var(--grey);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px;
}
.field-control {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 0; border: 0; background: none;
  font-family: inherit; font-size: 1.05rem; font-weight: 500; color: var(--ink);
  cursor: pointer; text-align: left; line-height: 1.3;
}
.fc-icon { font-size: 1.05rem; flex: 0 0 auto; }
.cs-value, .dp-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-value[data-empty] { color: var(--grey); }
.cs-chevron { flex: 0 0 auto; width: 10px; height: 10px; border-right: 2px solid var(--grey); border-bottom: 2px solid var(--grey); transform: rotate(45deg); margin-top: -3px; transition: transform .15s; }
.field-control[aria-expanded="true"] .cs-chevron { transform: rotate(-135deg); margin-top: 2px; }
.search-submit, .search-bar .search-go {
  border-radius: 12px; font-weight: 700; font-size: 1rem;
  padding: 15px 26px; display: flex; align-items: center; justify-content: center;
}
.search-go-wrap { display: flex; align-items: stretch; }
.search-go-wrap .search-go { flex: 1; }

/* Dropdown panel */
.cs-panel, .dp-panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  background: var(--white); border: 1px solid var(--grey-light);
  border-radius: 14px; box-shadow: 0 20px 48px rgba(6,32,52,.22);
  padding: 6px;
}
.cs-panel { min-width: 300px; }
.cs-option {
  padding: 12px 13px; border-radius: 9px; cursor: pointer;
  font-size: .95rem; color: var(--ink); display: flex; align-items: center; gap: 8px;
}
.cs-option:hover { background: var(--sand); }
.cs-option[aria-selected="true"] { font-weight: 600; color: var(--deep-blue); }
.cs-option[aria-selected="true"]::after { content: "✓"; margin-left: auto; color: var(--coral); font-weight: 700; }

/* Calendar */
.dp-panel { width: 316px; padding: 12px; }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dp-title { font-weight: 700; color: var(--deep-blue); font-size: .98rem; }
.dp-nav {
  border: 0; background: var(--sand); width: 32px; height: 32px; border-radius: 9px;
  cursor: pointer; font-size: 1.2rem; line-height: 1; color: var(--deep-blue); display: flex; align-items: center; justify-content: center;
}
.dp-nav:hover { background: var(--grey-light); }
.dp-weekdays, .dp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-weekdays span { text-align: center; font-size: .7rem; font-weight: 700; color: var(--grey); padding: 6px 0; }
.dp-day {
  border: 1px solid transparent; background: none; text-align: center; padding: 9px 0;
  border-radius: 9px; cursor: pointer; font-size: .9rem; color: var(--ink); font-family: inherit;
}
.dp-day:hover:not(.is-disabled):not(.is-empty) { background: var(--sand); }
.dp-day.is-today { border-color: var(--teal, #0e7c86); font-weight: 700; }
.dp-day.is-selected { background: var(--coral); color: var(--white); font-weight: 700; }
.dp-day.is-disabled { color: var(--grey-light); cursor: default; }
.dp-day.is-empty { visibility: hidden; cursor: default; }

@media (min-width: 720px) {
  .search-bar { flex-direction: row; align-items: stretch; gap: 4px; }
  .search-bar .field-select { flex: 1.6; }
  .search-bar .field-date { flex: 1; }
  .search-bar .field + .field::before {
    content: ""; position: absolute; left: -2px; top: 12px; bottom: 12px; width: 1px; background: var(--grey-light);
  }
}
@media (max-width: 719px) {
  .cs-panel, .dp-panel { left: 8px; right: 8px; min-width: 0; width: auto; }
}

/* ---------- Trust bar ---------- */
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--grey-light);
  border-top: 1px solid var(--grey-light);
  font-size: .92rem;
  color: var(--grey);
}
.trust-bar .item { display: flex; align-items: center; gap: 8px; }
.trust-bar strong { color: var(--deep-blue); }
.stars { color: #f5a623; letter-spacing: 1px; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--white);
  border: 1px solid var(--grey-light);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.card-media {
  height: 170px;
  background: linear-gradient(135deg, var(--teal) 0%, var(--mid-blue) 100%);
  position: relative;
  overflow: hidden;
}
.card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200'%3E%3Cpolygon points='40,0 90,0 30,200 0,200' fill='rgba(255,255,255,0.07)'/%3E%3Cpolygon points='140,0 170,0 90,200 70,200' fill='rgba(255,255,255,0.05)'/%3E%3Ccircle cx='330' cy='150' r='6' fill='rgba(255,255,255,0.18)'/%3E%3Ccircle cx='345' cy='118' r='4' fill='rgba(255,255,255,0.15)'/%3E%3Ccircle cx='337' cy='92' r='3' fill='rgba(255,255,255,0.12)'/%3E%3Ccircle cx='351' cy='68' r='2.5' fill='rgba(255,255,255,0.10)'/%3E%3Cpath d='M60 150 Q75 138 92 150 Q75 162 60 150 Z' fill='rgba(255,255,255,0.22)'/%3E%3Cpath d='M62 150 L48 141 L48 159 Z' fill='rgba(255,255,255,0.22)'/%3E%3Cpath d='M150 80 Q162 71 175 80 Q162 89 150 80 Z' fill='rgba(255,255,255,0.16)'/%3E%3Cpath d='M152 80 L141 73 L141 87 Z' fill='rgba(255,255,255,0.16)'/%3E%3Cpath d='M250 120 Q260 113 271 120 Q260 127 250 120 Z' fill='rgba(255,255,255,0.13)'/%3E%3Cpath d='M252 120 L242 114 L242 126 Z' fill='rgba(255,255,255,0.13)'/%3E%3Cpath d='M0 186 Q30 166 60 183 Q90 197 120 181 Q150 169 180 185 Q215 199 250 183 Q285 169 320 185 Q355 198 400 181 L400 200 L0 200 Z' fill='rgba(6,32,50,0.35)'/%3E%3C/svg%3E") center / cover no-repeat;
}
/* Vary the underwater scene colors card-by-card so the grid doesn't look repetitive */
.grid .card:nth-child(3n+2) .card-media:not(.photo) { background: linear-gradient(135deg, var(--mid-blue) 0%, var(--deep-blue) 100%); }
.grid .card:nth-child(3n+3) .card-media:not(.photo) { background: linear-gradient(160deg, #0a3d5c 0%, #062c44 100%); }
.grid .card:nth-child(4n) .card-media:not(.photo) { background: linear-gradient(135deg, #0d7d8f 0%, #0a3d5c 100%); }
.card-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--teal);
  background: var(--teal-light);
  padding: 4px 10px;
  border-radius: 999px;
  align-self: flex-start;
}
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 10px;
}
.price { font-weight: 700; font-size: 1.15rem; color: var(--deep-blue); }
.price span { font-size: .8rem; color: var(--grey); font-weight: 400; }
.meta-row { display: flex; gap: 14px; font-size: .85rem; color: var(--grey); flex-wrap: wrap; }

/* ---------- Filters ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px;
  background: var(--sand);
  border-radius: var(--radius);
  margin-bottom: 26px;
}
.filters select {
  padding: 10px 34px 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--grey-light);
  background: var(--white);
  font-size: .9rem;
}
/* Modernize native selects: custom chevron + focus ring (opened list stays native) */
.filters select, .booking-form select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235a6b78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 11px;
  cursor: pointer;
}
.booking-form select { padding-right: 34px; }
.filters select:focus, .booking-form select:focus,
.booking-form input:focus, .booking-form textarea:focus {
  outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255,107,74,.16);
}
.booking-form input[type="date"] { cursor: pointer; }

/* ---------- Pricing table ---------- */
table.price-table { width: 100%; border-collapse: collapse; background: var(--white); }
table.price-table th, table.price-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--grey-light);
  font-size: .95rem;
}
table.price-table th { background: var(--deep-blue); color: var(--white); font-weight: 600; }
table.price-table th.price-group { background: var(--teal, #0e7c86); font-size: 1.02rem; letter-spacing: .3px; }
.price-table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---------- Content / Guide pages ---------- */
.guide-content { max-width: 760px; margin: 0 auto; }
.guide-content h2 { margin-top: 1.4em; }
.toc {
  background: var(--sand);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 26px 0;
}
.toc h3 { margin-top: 0; font-size: 1rem; }
.toc ul { margin: 0; padding-left: 20px; }
.callout {
  background: var(--teal-light);
  border-left: 4px solid var(--teal);
  padding: 16px 18px;
  border-radius: 0 8px 8px 0;
  margin: 24px 0;
}
.callout.warning { background: #fff3ee; border-left-color: var(--coral); }

/* ---------- Footer ---------- */
footer.site-footer {
  background: var(--deep-blue);
  color: rgba(255,255,255,.85);
  padding: 44px 0 26px;
  margin-top: 40px;
}
footer.site-footer h4 { color: var(--white); font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; }
footer.site-footer a, footer.site-footer label { color: rgba(255,255,255,.8); }
.footer-grid { display: grid; gap: 26px; grid-template-columns: 1fr 1fr; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer-bottom { text-align: center; padding-top: 26px; margin-top: 26px; border-top: 1px solid rgba(255,255,255,.15); font-size: .85rem; color: rgba(255,255,255,.6); }

/* ---------- Sticky mobile CTA (thumb-zone) ---------- */
.sticky-mobile-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--white);
  border-top: 1px solid var(--grey-light);
  padding: 10px 16px;
  display: flex;
  gap: 10px;
  align-items: center;
  box-shadow: 0 -6px 18px rgba(0,0,0,.08);
  transition: transform .25s ease;
}
.sticky-mobile-cta.sticky-hidden { transform: translateY(110%); }
.sticky-mobile-cta .info { flex: 1; font-size: .85rem; color: var(--grey); }
.sticky-mobile-cta .info strong { display: block; color: var(--deep-blue); font-size: 1rem; }

/* ---------- Booking form ---------- */
.booking-form label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--grey);
  margin-bottom: 12px;
}
.booking-form input, .booking-form select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--grey-light);
  border-radius: 8px;
  font-size: .95rem;
  margin-top: 4px;
  background: var(--white);
  color: var(--ink);
}
.booking-form button { margin-top: 6px; }
.booking-form textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--grey-light);
  border-radius: 8px;
  font-size: .95rem;
  margin-top: 4px;
  font-family: inherit;
  resize: vertical;
  background: var(--white);
  color: var(--ink);
}
.req { color: var(--coral-dark); font-weight: 700; }
.req-note { font-size: .78rem; color: var(--grey); margin: 8px 0 0; }
.check-line { display: flex; align-items: flex-start; gap: 8px; font-size: .82rem; color: var(--grey); margin-top: 10px; line-height: 1.4; }
.check-line input[type="checkbox"] { width: auto; margin-top: 2px; flex: 0 0 auto; }
.booking-summary { margin: 12px 0 2px; padding: 12px 14px; background: var(--sand); border-radius: 10px; font-size: .9rem; }
.booking-summary:empty { display: none; }
.sum-row { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; }
.sum-row.sum-balance { border-top: 1px dashed var(--grey-light); margin-top: 4px; padding-top: 7px; }
.sum-row.sum-balance strong { color: var(--deep-blue); }
.sum-prereq { margin: 0 0 8px; font-size: .84rem; color: var(--deep-blue); font-weight: 600; }
.sum-cancel { margin: 8px 0 0; font-size: .82rem; color: #1a7f4b; }
.callout .sum-row { font-size: .92rem; }
.no-results { padding: 26px 0; font-size: 1rem; }

/* ---------- Account / My Bookings ---------- */
.account-link {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--grey-light);
  border-radius: 999px;
  padding: 7px 14px;
  font-weight: 600;
  font-size: .85rem;
  color: var(--deep-blue);
  text-decoration: none;
  white-space: nowrap;
}
.account-link:hover { border-color: var(--teal); color: var(--teal); text-decoration: none; }
.account-link.signed { padding: 3px; border-color: var(--teal); }
.acct-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .9rem;
}

/* Account dropdown menu (Airbnb/Booking pattern) */
.acct-area { position: relative; }
.acct-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  background: var(--white);
  border: 1px solid var(--grey-light);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(10,61,92,.18);
  min-width: 210px;
  padding: 8px;
  display: none;
  flex-direction: column;
  z-index: 150;
}
.acct-menu.open { display: flex; }
.acct-menu-name {
  padding: 8px 12px 10px;
  font-weight: 700;
  color: var(--deep-blue);
  border-bottom: 1px solid var(--grey-light);
  margin-bottom: 6px;
  font-size: .9rem;
  word-break: break-word;
}
.acct-menu-item {
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: .92rem;
  color: var(--ink);
  text-decoration: none;
  display: block;
  width: 100%;
}
.acct-menu-item:hover { background: var(--sand); text-decoration: none; }
.acct-menu-item.logout-btn { color: var(--coral-dark); border-top: 1px solid var(--grey-light); margin-top: 4px; }

/* ---------- Auth card (sign in / sign up) ---------- */
.auth-card { max-width: 440px; margin: 0 auto; }
.auth-tabs {
  display: flex;
  background: var(--sand);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 18px;
}
.auth-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .92rem;
  color: var(--grey);
  cursor: pointer;
}
.auth-tab.active { background: var(--white); color: var(--deep-blue); box-shadow: var(--shadow); }
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  border: 1.5px solid var(--grey-light);
  border-radius: 999px;
  background: var(--white);
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.btn-google:hover { background: #f6fafb; border-color: #c9d4d8; }
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--grey);
  font-size: .85rem;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--grey-light); }
.auth-label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--grey);
  margin-bottom: 12px;
}
.auth-form input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--grey-light);
  border-radius: 8px;
  font-size: .95rem;
  margin-top: 4px;
}
.auth-form input:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.pw-wrap { position: relative; display: block; margin-top: 4px; }
.pw-wrap input { margin-top: 0; padding-right: 44px; }
.pw-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 4px;
}
.form-error {
  color: #b03024;
  background: #fdecea;
  border: 1px solid #f5c6c0;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: .85rem;
  margin: 0 0 12px;
}
.gmodal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 30, 46, .55);
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: 20px;
}
.gmodal { max-width: 380px; width: 100%; }
.gmodal-account {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--grey-light);
  border-radius: 10px;
  background: var(--white);
  cursor: pointer;
  text-align: left;
  font-size: .95rem;
}
.gmodal-account:hover { background: #f5f9fa; border-color: var(--teal); }
.gm-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--mid-blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.gm-info { display: flex; flex-direction: column; line-height: 1.3; }

/* ---------- Admin dashboard ---------- */
.admin-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.admin-badge {
  background: var(--deep-blue);
  color: var(--white);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 3px 9px;
  border-radius: 999px;
  vertical-align: middle;
}
.admin-stats { margin-bottom: 22px; }
.stat .card-body { align-items: center; text-align: center; gap: 2px; }
.stat-num { font-size: 2rem; font-weight: 700; color: var(--teal); font-family: var(--font-head); }
.admin-section { margin-bottom: 20px; }
.block-form { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.block-form input {
  padding: 10px 12px; border: 1px solid var(--grey-light); border-radius: 8px; font-size: .95rem;
}
.blocked-list { display: flex; flex-wrap: wrap; gap: 8px; }
.blocked-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff3ee; border: 1px solid var(--coral); color: var(--coral-dark);
  border-radius: 999px; padding: 5px 8px 5px 12px; font-size: .85rem; font-weight: 600;
}
.blocked-chip .unblock { border: none; background: none; cursor: pointer; color: var(--coral-dark); font-weight: 700; font-size: .9rem; line-height: 1; padding: 0 2px; }
.toggle-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--grey-light); gap: 12px;
}
.toggle-row:last-child { border-bottom: none; }
.toggle-btn {
  border: 1.5px solid; border-radius: 999px; padding: 5px 16px;
  font-weight: 600; font-size: .82rem; cursor: pointer; min-width: 96px;
}
.toggle-btn.is-open { background: var(--teal-light); color: var(--deep-blue); border-color: var(--teal); }
.toggle-btn.is-closed { background: #fff3ee; color: var(--coral-dark); border-color: var(--coral); }
.booking-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--white);
  border: 1px solid var(--grey-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.booking-item .booking-main { display: flex; flex-direction: column; gap: 4px; }
.booking-item .booking-side { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.status-chip {
  background: var(--teal-light);
  color: var(--deep-blue);
  border: 1px solid var(--teal);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: .78rem;
  font-weight: 700;
}

/* ---------- Search results banner ---------- */
.search-summary {
  background: var(--teal-light);
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 22px;
  font-size: .93rem;
  color: var(--ink);
}
.search-summary .clear-search { margin-left: 10px; vertical-align: middle; }
.search-summary .notice { margin: 8px 0 0; color: var(--grey); font-size: .88rem; }

/* ---------- Utility ---------- */
.center { text-align: center; }
.muted { color: var(--grey); }
.mt-0 { margin-top: 0; }
.two-col { display: grid; gap: 30px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .two-col { grid-template-columns: 1.2fr .8fr; align-items: start; } }

/* ---------- Dedicated checkout page (Booking.com / Airbnb style) ---------- */
.checkout-grid { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 880px) { .checkout-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; } }
.checkout-grid .booking-box { margin: 0; }
.checkout-side { position: static; }
@media (min-width: 880px) { .checkout-side { position: sticky; top: 88px; } }
.checkout-trust { background: var(--sand); border: 1px solid var(--grey-light); }
.checkout-steps { margin: 10px 0 16px; padding-left: 20px; }
.checkout-steps li { margin-bottom: 10px; font-size: .92rem; line-height: 1.5; color: var(--ink); }
.checkout-badges { display: flex; flex-direction: column; gap: 9px; margin-top: 6px; }
.checkout-badges span { font-size: .88rem; color: var(--ink); }
.badge-row { display: flex; flex-wrap: wrap; gap: 10px; }
.badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--sand);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: .82rem;
  color: var(--deep-blue);
  font-weight: 600;
}

/* ---------- Card photos ---------- */
.card-media.photo::after { content: none; }
.card-media.m-discover { background: url("../images/discover.jpg") center / cover no-repeat; }
.card-media.m-course { background: url("../images/course.jpg") center / cover no-repeat; }
.card-media.m-course2 { background: url("../images/course2.jpg") center / cover no-repeat; }
.card-media.m-deep { background: url("../images/deep.jpg") center / cover no-repeat; }
.card-media.m-tech { background: url("../images/tech.jpg") center / cover no-repeat; }
.card-media.m-free { background: url("../images/free.jpg") center / cover no-repeat; }
.card-media.m-bluehole { background: url("../images/bluehole.jpg") center / cover no-repeat; }
.card-media.m-canyon { background: url("../images/canyon.jpg") center / cover no-repeat; }
.card-media.m-safari { background: url("../images/safari.jpg") center / cover no-repeat; }
.card-media.m-night { background: url("../images/night.jpg") center / cover no-repeat; }
.card-media.m-abugalum { background: url("../images/abugalum.jpg") center / cover no-repeat; }
.card-media.m-wreck { background: url("../images/wreck.jpg") center / cover no-repeat; }

/* ---------- Contact page ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 26px; }
@media (min-width: 820px) { .contact-grid { grid-template-columns: 1fr 1.05fr; gap: 34px; align-items: start; } }
.contact-methods { display: flex; flex-direction: column; gap: 14px; }
.contact-card {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  background: var(--white); border: 1px solid var(--grey-light); border-radius: 14px;
  padding: 16px 18px; color: var(--ink); box-shadow: 0 6px 18px rgba(6,32,52,.06);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
a.contact-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(6,32,52,.14); border-color: var(--coral); }
.cc-icon {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; background: var(--sand);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.contact-wa .cc-icon { background: #25D366; }
.cc-body { display: flex; flex-direction: column; gap: 1px; }
.cc-body strong { font-size: 1.02rem; color: var(--deep-blue); }
.cc-sub { font-size: .85rem; color: var(--grey); }
.cc-val { font-size: .92rem; font-weight: 600; color: var(--ink); margin-top: 2px; }
.contact-wa { border-color: #25D366; }
.contact-wa .cc-val { color: #128C3E; }
.contact-static { cursor: default; }
.placeholder-note { font-size: .8rem; margin-top: 4px; background: var(--sand); padding: 10px 12px; border-radius: 10px; }
.contact-form-wrap .card-body { padding: 24px; }
.cf-label { display: block; font-size: .85rem; font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.contact-form input, .contact-form textarea {
  width: 100%; margin-top: 5px; padding: 12px; font-size: .95rem; font-family: inherit;
  border: 1px solid var(--grey-light); border-radius: 8px; background: var(--white); color: var(--ink);
}
.contact-form input:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255,107,74,.16);
}

/* ---------- Clickable dive-site cards (whole card opens that dive) ---------- */
.js-divecard { cursor: pointer; }
.js-divecard .meta-row { color: var(--grey); font-size: .82rem; }

/* ---------- Dive-site detail page ---------- */
.crumb a { color: var(--teal); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.facts-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.fact-chip { background: var(--white); border: 1px solid var(--grey-light); border-radius: 999px; padding: 7px 14px; font-size: .85rem; font-weight: 600; color: var(--deep-blue); }
.dive-detail-grid { display: grid; grid-template-columns: 1fr; gap: 30px; }
@media (min-width: 880px) { .dive-detail-grid { grid-template-columns: 1fr 330px; gap: 44px; align-items: start; } }
.dive-book-card { border: 1px solid var(--grey-light); }
@media (min-width: 880px) { .dive-book-card { position: sticky; top: 88px; } }
.dive-book-card .price { font-size: 1.7rem; font-weight: 800; color: var(--deep-blue); font-family: var(--font-head); margin: 4px 0 6px; }
.dive-facts-list { list-style: none; padding: 0; margin: 12px 0 16px; font-size: .9rem; }
.dive-facts-list li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--grey-light); }
.dive-facts-list li strong { color: var(--deep-blue); }

/* ---------- Dive-site detail hero image (catchy banner) ---------- */
.dive-hero {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(160deg, #0e5170, #062a44);
  margin: 6px 0 22px;
  box-shadow: 0 12px 30px rgba(6, 42, 68, .18);
}
.dive-hero-img { position: absolute; inset: 0; height: 100%; width: 100%; }
.dive-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(6, 42, 68, 0) 18%, rgba(6, 42, 68, .55) 62%, rgba(6, 42, 68, .88) 100%);
}
.dive-hero-text { position: relative; z-index: 2; padding: 30px; color: #fff; max-width: 780px; }
.dive-hero-text h1 { color: #fff; margin: 10px 0 8px; }
.dive-hero-text p { color: rgba(255, 255, 255, .93); margin: 0; font-size: 1.02rem; }
.dive-hero-tag {
  display: inline-block;
  background: var(--coral);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
}
@media (max-width: 600px) { .dive-hero { min-height: 220px; } .dive-hero-text { padding: 18px; } }

/* ---------- Booking page: activity + option picker ---------- */
.book-picker { display: grid; gap: 12px; margin: 12px 0 8px; }
@media (min-width: 560px) { .book-picker { grid-template-columns: 1fr 1fr; } }
.bp-field { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--grey); }
.book-picker select {
  width: 100%;
  margin-top: 6px;
  padding: 13px 40px 13px 14px;
  border: 1.5px solid var(--grey-light);
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
  background-color: var(--white);
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230a3d5c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.book-picker select:hover { border-color: var(--teal); }
.book-picker select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(20,163,168,.18); }
.sel-line { margin: 10px 0 2px; }

/* Pay-later summary + confirmation styling */
.sum-row.sum-total { border-top: 1px solid var(--grey-light); margin-top: 4px; padding-top: 7px; font-weight: 700; }
.sum-row.sum-total strong { color: var(--deep-blue); font-size: 1.05rem; }
.sum-row.sum-paylater strong { color: #1a8f4a; }
.sum-note { margin: 8px 0 2px; padding: 9px 11px; background: var(--teal-light); border-radius: 8px; font-size: .84rem; color: var(--deep-blue); font-weight: 600; }
.sum-cancel { color: #1a8f4a; font-size: .84rem; margin: 6px 0 0; }
.sum-prereq { color: var(--coral-dark); font-size: .84rem; margin: 0 0 6px; font-weight: 600; }

/* Prominent primary reserve button on the checkout */
.booking-box .btn-primary.btn-block { padding: 16px 22px; font-size: 1.05rem; font-weight: 700; box-shadow: 0 8px 20px rgba(255,107,74,.4); }
.booking-box .btn-primary.btn-block:hover { transform: translateY(-1px); }

/* ---------- Horizontal dive-site rail (scroll left/right, like Airbnb/GetYourGuide) ---------- */
.dive-rail-wrap { position: relative; }
.dive-rail {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 6px 2px 20px; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
}
.dive-rail > .card { flex: 0 0 272px; scroll-snap-align: start; margin: 0; }
.dive-rail::-webkit-scrollbar { height: 8px; }
.dive-rail::-webkit-scrollbar-track { background: transparent; }
.dive-rail::-webkit-scrollbar-thumb { background: var(--grey-light); border-radius: 4px; }
.dive-rail:hover::-webkit-scrollbar-thumb { background: #c3ccce; }
.rail-arrow {
  position: absolute; top: 42%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--grey-light);
  background: var(--white); box-shadow: 0 6px 18px rgba(6,32,52,.18);
  cursor: pointer; font-size: 1.7rem; line-height: 1; color: var(--deep-blue);
  display: flex; align-items: center; justify-content: center; z-index: 6; padding-bottom: 3px;
}
.rail-arrow:hover { border-color: var(--coral); color: var(--coral); }
.rail-arrow[disabled] { opacity: .3; cursor: default; box-shadow: none; }
.rail-prev { left: -12px; }
.rail-next { right: -12px; }
@media (max-width: 719px) {
  .rail-arrow { display: none; }
  .dive-rail > .card { flex-basis: 82%; }               /* one card + a peek of the next */
  .dive-rail { scroll-snap-type: x mandatory; gap: 14px; padding-bottom: 14px; }
  /* soft fade on the right edge hints there is more to swipe */
  .dive-rail-wrap::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 20px; width: 34px;
    background: linear-gradient(to right, rgba(247,243,234,0), var(--sand));
    pointer-events: none; z-index: 2;
  }
  .dive-rail-wrap::before {
    content: "\2190 \2192"; position: absolute; top: -34px; right: 2px;
    font-size: .8rem; letter-spacing: 2px; color: var(--grey);
    font-weight: 700; opacity: .7;
  }
  /* keep a visible scrollbar so it's obviously scrollable */
  .dive-rail::-webkit-scrollbar { height: 5px; }
  .dive-rail::-webkit-scrollbar-thumb { background: var(--teal); }
}

/* ---------- Admin contact inbox ---------- */
.msg-badge { font-size: .9rem; color: var(--grey); font-weight: 600; }
.admin-messages { display: flex; flex-direction: column; gap: 12px; }
.msg-item { border: 1px solid var(--grey-light); border-radius: 12px; padding: 14px 16px; background: var(--white); }
.msg-head { font-size: .95rem; margin-bottom: 6px; }
.msg-head .muted { font-size: .82rem; }
.msg-body { margin: 0 0 10px; font-size: .92rem; color: var(--ink); white-space: pre-wrap; }
.msg-reply-text {
  width: 100%; padding: 10px 12px; border: 1px solid var(--grey-light); border-radius: 8px;
  font-family: inherit; font-size: .9rem; resize: vertical; background: var(--white); color: var(--ink);
}
.msg-reply-text:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255,107,74,.16); }
.msg-reply-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.msg-replied { color: #128C3E; font-size: .86rem; font-weight: 600; margin: 4px 0 0; }
.msg-sent { font-size: .9rem; }


/* ---------- Legal pages ---------- */
.legal-doc { max-width: 820px; margin: 0 auto; }
.legal-doc h2 { font-size: 1.15rem; margin-top: 28px; }
.legal-doc p { color: var(--ink); }
.legal-note { background: var(--teal-light); border-left: 4px solid var(--teal); padding: 12px 14px; border-radius: 8px; font-size: .9rem; margin: 14px 0 24px; }
.ph { background: #fff3b0; padding: 1px 6px; border-radius: 4px; font-style: normal; color: #6b5900; }

/* ---------- Footer link-style button (Cookie settings) ---------- */
.footer-link { background: none; border: none; padding: 0; margin: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.footer-link:hover { text-decoration: underline; }

/* ---------- Cookie consent banner (GDPR / TDDDG) ---------- */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 300; background: var(--white); border-top: 1px solid var(--grey-light); box-shadow: 0 -6px 30px rgba(6,42,68,.16); }
@media (min-width: 720px) { .cookie-banner { left: 16px; right: 16px; bottom: 16px; border: 1px solid var(--grey-light); border-radius: 14px; } }
.cookie-inner { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; max-width: 1180px; margin: 0 auto; }
@media (min-width: 720px) { .cookie-inner { flex-direction: row; align-items: center; justify-content: space-between; } }
.cookie-text { font-size: .9rem; color: var(--ink); line-height: 1.5; }
.cookie-text a { color: var(--mid-blue); text-decoration: underline; }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
@media (max-width: 719px) { .cookie-actions { width: 100%; } .cookie-actions .btn { flex: 1; } }

/* ---------- Booking availability calendar (compact pop-up) ---------- */
.bk-datefield { position: relative; margin-bottom: 14px; }
.bk-datelabel { display: block; font-size: .85rem; font-weight: 600; color: var(--grey); margin-bottom: 6px; }
.bkcal-trigger { display: flex; align-items: center; gap: 9px; width: 100%; padding: 12px 14px; border: 1px solid var(--grey-light); border-radius: 8px; background: var(--white); font-family: inherit; font-size: .95rem; color: var(--ink); cursor: pointer; text-align: left; }
.bkcal-trigger:hover { border-color: var(--teal); }
.bkcal-trigger[aria-expanded="true"] { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(20,163,168,.15); }
.bkcal-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bkcal-value[data-empty] { color: var(--grey); }
/* the pop-up itself reuses the .dp-panel / .dp-day styles from the hero picker */
.bkcal-panel { z-index: 70; }
.bkcal-panel .dp-day.avail { background: #e8f7ee; color: #17703e; font-weight: 600; border-color: transparent; }
.bkcal-panel .dp-day.avail:hover { background: var(--teal); color: #fff; }
.bkcal-panel .dp-day.blocked { background: #ffe1d8; color: #c0341a; text-decoration: line-through; cursor: not-allowed; border-color: transparent; }
.bkcal-panel .dp-day.is-disabled { color: var(--grey-light); background: transparent; cursor: not-allowed; }
.bkcal-panel .dp-day.is-selected { background: var(--coral); color: #fff; font-weight: 700; }
.bkcal-msg { margin-top: 8px; font-size: .8rem; color: var(--coral-dark); background: #fff2ee; padding: 6px 8px; border-radius: 6px; }
.bkcal-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: .74rem; color: var(--grey); }
.bkcal-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.bkcal-legend .lg { width: 13px; height: 13px; border-radius: 4px; display: inline-block; }
.lg-avail { background: #e8f7ee; border: 1px solid #b7e3c6; }
.lg-blocked { background: #ffe1d8; border: 1px solid #f0b3a5; }

/* ---------- Admin: block-period form ---------- */
.block-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.blk-inp { display: flex; flex-direction: column; font-size: .78rem; font-weight: 600; color: var(--grey); gap: 4px; }
.blk-inp input { padding: 9px 10px; border: 1px solid var(--grey-light); border-radius: 8px; }
.blocked-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--sand); border-radius: 999px; padding: 5px 8px 5px 12px; margin: 8px 8px 0 0; font-size: .82rem; }
.blocked-chip .unblock { border: none; background: var(--grey-light); border-radius: 50%; width: 18px; height: 18px; cursor: pointer; line-height: 1; }

/* ---------- Admin: activities manager ---------- */
.act-cat-head { font-family: var(--font-head); font-weight: 700; color: var(--deep-blue); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; margin: 16px 0 6px; }
.act-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--grey-light); }
.act-photo { width: 46px; height: 46px; border-radius: 8px; overflow: hidden; flex: 0 0 auto; background: var(--sand); display: flex; align-items: center; justify-content: center; }
.act-photo img { width: 100%; height: 100%; object-fit: cover; }
.act-photo-ph { font-size: 1.1rem; opacity: .5; }
.act-info { flex: 1; display: flex; flex-direction: column; }
.act-info strong { font-size: .95rem; }
.act-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.toggle-btn { border: none; border-radius: 999px; padding: 5px 12px; font-size: .8rem; font-weight: 600; cursor: pointer; }
.toggle-btn.is-open { background: #e8f7ee; color: #17703e; }
.toggle-btn.is-closed { background: #ffe7e0; color: var(--coral-dark); }
.act-edit, .act-del { border: 1px solid var(--grey-light); background: var(--white); border-radius: 8px; padding: 5px 10px; font-size: .8rem; cursor: pointer; }
.act-edit:hover, .act-del:hover { border-color: var(--teal); }
.act-edit-fields { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.act-edit-fields input, .act-edit-fields select { padding: 8px 10px; border: 1px solid var(--grey-light); border-radius: 8px; font-size: .9rem; }
.act-edit-row { display: flex; gap: 8px; }
.act-edit-row .act-f-price { width: 90px; }
.act-photo-label { font-size: .8rem; color: var(--grey); font-weight: 600; display: flex; flex-direction: column; gap: 4px; }
.act-edit-actions { display: flex; gap: 8px; }
.activity-add-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.activity-add-row input, .activity-add-row select { padding: 9px 10px; border: 1px solid var(--grey-light); border-radius: 8px; font-size: .9rem; }
.activity-add-row .act-add-name { flex: 1; min-width: 160px; }
.activity-add-row .act-add-price { width: 80px; }

/* ---------- Admin: reservation actions ---------- */
.status-chip.chip-cancelled { background: #ffe7e0; color: var(--coral-dark); }
.booking-item.is-cancelled { opacity: .72; }
.booking-item.is-cancelled .booking-main strong { text-decoration: line-through; }
.res-actions { display: flex; gap: 6px; margin-top: 6px; }
.res-msg, .res-cancel { border: 1px solid var(--grey-light); background: var(--white); border-radius: 8px; padding: 4px 10px; font-size: .78rem; cursor: pointer; }
.res-cancel { color: var(--coral-dark); border-color: #f3c6ba; }
.res-msg:hover { border-color: var(--teal); }
.res-compose { margin-top: 8px; width: 100%; }
.res-compose textarea { width: 100%; border: 1px solid var(--grey-light); border-radius: 8px; padding: 8px; font-family: inherit; font-size: .88rem; margin-bottom: 6px; }

/* ---------- Admin: email outbox + booking email preview ---------- */
.outbox-item { border: 1px solid var(--grey-light); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.outbox-head { display: flex; align-items: center; gap: 8px; }
.outbox-kind { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.outbox-confirmation { background: #e8f7ee; color: #17703e; }
.outbox-cancellation { background: #ffe7e0; color: var(--coral-dark); }
.outbox-message { background: var(--teal-light); color: var(--deep-blue); }
.outbox-body { white-space: pre-wrap; font-family: var(--font-body); font-size: .82rem; color: var(--ink); background: var(--sand); border-radius: 8px; padding: 8px 10px; margin: 8px 0 0; }
.email-preview { border: 1px dashed var(--teal); border-radius: 10px; padding: 12px 14px; margin: 12px 0; background: var(--teal-light); }
.email-preview-head { font-weight: 700; color: var(--deep-blue); font-size: .9rem; margin-bottom: 4px; }

/* ---------- Operator: site content editor ---------- */
.content-editor { margin-top: 6px; }
.ce-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #e7e2d8; border-radius: 10px; margin: 8px 0; background: #fff; }
.ce-row.ce-edited { border-color: var(--teal); }
.ce-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ce-info .muted { font-size: .85rem; }
.ce-badge { color: var(--teal); font-weight: 600; }
.ce-row.ce-editing { display: flex; align-items: flex-start; gap: 14px; }
.ce-fields { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.ce-lab { display: flex; flex-direction: column; font-size: .78rem; font-weight: 600; color: var(--deep-blue); gap: 3px; }
.ce-lab input, .ce-lab textarea { font-family: inherit; font-size: .9rem; padding: 7px 9px; border: 1px solid #cdd6dd; border-radius: 8px; font-weight: 400; }
.ce-edit-row { display: flex; gap: 12px; flex-wrap: wrap; }
.ce-lab-price { max-width: 130px; }
.ce-lab-photo { flex: 1; min-width: 180px; }
.ce-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.ce-thumb { width: 92px; height: 70px; border-radius: 9px; background: var(--sand) center/cover no-repeat; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.ce-thumb-ph { color: #9aa7b1; }
.ce-footer { margin-top: 14px; padding-top: 12px; border-top: 1px solid #eee; }
@media (max-width: 640px){ .ce-row.ce-editing { flex-direction: column; } .ce-thumb { width: 100%; height: 120px; } }

/* Small helper hint under a form field */
.field-hint { display:block; font-size:.78rem; color:var(--grey); margin-top:4px; font-weight:400; }

/* ---------- Admin: registered accounts + scrollable email views ---------- */
.users-count { font-size: .9rem; color: var(--grey); font-weight: 600; }
.users-toolbar { margin: 2px 0 10px; }
.scroll-box { max-height: 340px; overflow-y: auto; border: 1px solid var(--grey-light); border-radius: 10px; }
.users-row { display: grid; grid-template-columns: 1.2fr 2fr .8fr .9fr; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--grey-light); font-size: .88rem; align-items: center; }
.users-row:last-child { border-bottom: none; }
.users-head { position: sticky; top: 0; background: var(--sand); font-weight: 700; color: var(--deep-blue); z-index: 1; }
.users-email { overflow-x: auto; white-space: nowrap; }
.users-email::-webkit-scrollbar { height: 4px; }
.users-email::-webkit-scrollbar-thumb { background: var(--grey-light); border-radius: 3px; }
.users-email a { color: var(--mid-blue); }
.demo-tag { font-size: .68rem; background: var(--grey-light); color: var(--grey); padding: 1px 7px; border-radius: 999px; vertical-align: middle; }
/* Keep the sent-emails log and contact inbox compact + scrollable */
.admin-outbox, .admin-messages { max-height: 360px; overflow-y: auto; padding: 4px; border: 1px solid var(--grey-light); border-radius: 10px; }
@media (max-width: 640px) {
  .users-row { grid-template-columns: 1fr 1fr; row-gap: 4px; }
  .users-head { display: none; }
  .users-row > span { display: block; }
  .users-row > span::before { content: attr(data-label) ": "; font-weight: 700; color: var(--grey); font-size: .7rem; display: block; }
  .users-email { grid-column: 1 / -1; }
}

.outbox-body { max-height: 96px; overflow-y: auto; }

.booking-side .my-cancel { margin-top: 8px; }