/* ═══════════════════════════════════════════════════════════════════
   KWARTO'S GUEST HOUSE — Styles
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --olive: #4a5d23;
  --olive-60: #6b8a3e;
  --olive-20: #c4d4a9;
  --olive-10: #dae6c6;
  --olive-5: #eef3e5;
  --olive-3: #f5f8f0;
  --cream: #faf9f6;
  --warm: #f5f0e8;
  --gold: #c8a951;
  --gold-light: #fdf8ec;
  --text: #1b2112;
  --text-s: #4a5245;
  --text-m: #8a9182;
  --wh: #fff;
  --brd: #e8e5df;
  --brd-l: #f0ede7;
  --sh-s: 0 1px 3px rgba(27, 33, 18, 0.06);
  --sh: 0 4px 20px rgba(27, 33, 18, 0.07);
  --sh-m: 0 8px 32px rgba(27, 33, 18, 0.1);
  --sh-l: 0 20px 60px rgba(27, 33, 18, 0.12);
  --r: 16px;
  --rs: 10px;
  --rl: 24px;
  --rxl: 32px;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Outfit", -apple-system, sans-serif;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
img {
  display: block;
  max-width: 100%;
}
button {
  cursor: pointer;
  font-family: var(--sans);
  -webkit-tap-highlight-color: transparent;
}
input,
select,
textarea {
  font-family: var(--sans);
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
}
::selection {
  background: var(--olive-10);
  color: var(--olive);
}
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-thumb {
  background: var(--olive-20);
  border-radius: 3px;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@keyframes shrink {
  from {
    width: 100%;
  }
  to {
    width: 0;
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.fu {
  animation: fadeUp 0.6s var(--ease) both;
}
.fi {
  animation: fadeIn 0.5s var(--ease) both;
}
.si {
  animation: scaleIn 0.4s var(--spring) both;
}
.s1 {
  animation-delay: 0.05s;
}
.s2 {
  animation-delay: 0.1s;
}
.s3 {
  animation-delay: 0.15s;
}
.s4 {
  animation-delay: 0.2s;
}
.s5 {
  animation-delay: 0.25s;
}
.s6 {
  animation-delay: 0.3s;
}
.s7 {
  animation-delay: 0.35s;
}
.s8 {
  animation-delay: 0.4s;
}

/* ── AUTH PAGES ──────────────────────────── */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.auth-page::before {
  content: "";
  position: absolute;
  top: -150px;
  right: -100px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--olive-5) 0%, transparent 70%);
  pointer-events: none;
}
.auth-page::after {
  content: "";
  position: absolute;
  bottom: -100px;
  left: -80px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-light) 0%, transparent 70%);
  pointer-events: none;
}
.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  animation: fadeUp 0.6s var(--ease) both;
}
.auth-brand {
  text-align: center;
  margin-bottom: 36px;
}
.auth-brand .auth-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: var(--olive);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 28px;
  color: #fff;
}
.auth-brand h1 {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--text);
}
.auth-brand p {
  color: var(--text-m);
  font-size: 14px;
  margin-top: 6px;
}
.auth-form {
  background: var(--wh);
  padding: 36px;
  border-radius: var(--rl);
  box-shadow: var(--sh-m);
  border: 1px solid var(--brd-l);
}
.auth-form h2 {
  font-family: var(--serif);
  font-size: 24px;
  margin-bottom: 24px;
  text-align: center;
}
.auth-field {
  margin-bottom: 16px;
}
.auth-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-s);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.auth-field input {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--brd);
  border-radius: var(--r);
  font-size: 14px;
  background: var(--cream);
  outline: none;
  transition: 0.2s var(--ease);
}
.auth-field input:focus {
  border-color: var(--olive);
  background: var(--wh);
  box-shadow: 0 0 0 3px rgba(74, 93, 35, 0.1);
}
.auth-field select {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--brd);
  border-radius: var(--r);
  font-size: 14px;
  background: var(--cream);
  outline: none;
  transition: 0.2s var(--ease);
  font-family: var(--sans);
  color: var(--text);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.auth-field select:focus {
  border-color: var(--olive);
  background: var(--wh);
  box-shadow: 0 0 0 3px rgba(74, 93, 35, 0.1);
}
.pw-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.pw-wrap input {
  flex: 1;
  padding-right: 44px;
}
.pw-eye {
  position: absolute;
  right: 6px;
  background: none;
  border: none;
  font-size: 16px;
  padding: 8px;
  cursor: pointer;
  opacity: 0.5;
  transition: 0.2s;
}
.pw-eye:hover {
  opacity: 1;
}
.auth-submit {
  width: 100%;
  padding: 16px;
  border-radius: var(--r);
  background: var(--olive);
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 16px;
  transition: 0.3s var(--ease);
  margin-top: 8px;
}
.auth-submit:hover:not(:disabled) {
  background: var(--olive-60);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(74, 93, 35, 0.3);
}
.auth-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.auth-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  padding: 12px 16px;
  border-radius: var(--rs);
  font-size: 13px;
  margin-bottom: 16px;
  animation: fadeUp 0.3s var(--ease);
}
.auth-switch {
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
  color: var(--text-m);
}
.auth-switch button {
  background: none;
  border: none;
  color: var(--olive);
  font-weight: 600;
  font-size: 14px;
  transition: 0.2s;
}
.auth-switch button:hover {
  text-decoration: underline;
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0;
  color: var(--text-m);
  font-size: 12px;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--brd);
}
.auth-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* ── LAYOUT ──────────────────────────────── */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 249, 246, 0.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(74, 93, 35, 0.06);
  height: 72px;
  display: flex;
  align-items: center;
  padding: 0 clamp(16px, 4vw, 48px);
  transition: 0.3s var(--ease);
}
.nav.scr {
  height: 64px;
  box-shadow: var(--sh-s);
}
.nav-in {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  font-family: 'Pacifico', cursive;
  font-size: 24px;
  font-weight: 400;
  color: var(--olive);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: 0.2s;
  background: none;
  border: none;
}
.brand:hover {
  opacity: 0.8;
}
.brand .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  display: inline-block;
}
.nlinks {
  display: flex;
  gap: 2px;
}
.nl {
  position: relative;
  padding: 10px 16px;
  border-radius: var(--rs);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-s);
  background: none;
  border: none;
  transition: 0.2s var(--ease);
}
.nl:hover {
  color: var(--olive);
  background: var(--olive-3);
}
.nl.act {
  color: var(--olive);
  font-weight: 600;
}
.nl.act::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background: var(--olive);
}
.nbadge {
  position: absolute;
  top: 4px;
  right: 6px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--olive);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}
.ncta {
  padding: 10px 24px;
  border-radius: var(--rs);
  background: var(--olive);
  color: #fff;
  border: none;
  font-weight: 600;
  font-size: 14px;
  transition: 0.25s var(--ease);
}
.ncta:hover {
  background: var(--olive-60);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(74, 93, 35, 0.25);
}
.mtog {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  padding: 8px;
  border-radius: var(--rs);
  font-size: 22px;
}
.mnav {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(250, 249, 246, 0.98);
  backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  animation: fadeIn 0.25s var(--ease);
}
.mnav .xb {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: var(--text);
  padding: 8px;
  font-size: 24px;
}
.mnav button {
  font-size: 20px;
  padding: 16px 32px;
  border-radius: var(--r);
  background: none;
  border: none;
  color: var(--text-s);
  font-weight: 500;
  transition: 0.2s;
  width: 240px;
  text-align: center;
}
.mnav button:hover,
.mnav button.act {
  background: var(--olive-5);
  color: var(--olive);
}
.main {
  flex: 1;
}
.ctn {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);
}
.hero-full {
  position: relative;
  min-height: 520px;
  overflow: hidden;
}
.hero-bg-art {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg-art svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hero-overlay {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px clamp(16px, 4vw, 48px) 60px;
  display: flex;
  align-items: center;
  min-height: 520px;
}
.hero-txt {
  max-width: 560px;
}
.hero-eye {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--olive-10);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  color: var(--olive);
  margin-bottom: 24px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.hero-eye .pdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--olive);
  animation: pulse 2s infinite;
  display: inline-block;
}
.hero-full h1 {
  font-family: var(--serif);
  font-size: clamp(32px, 5vw, 58px);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.hero-full h1 em {
  font-style: italic;
  color: var(--olive);
}
.hero-sub {
  font-size: 16px;
  color: var(--text-s);
  line-height: 1.7;
  margin-bottom: 16px;
  max-width: 480px;
}
.hero-loc {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-m);
  margin-bottom: 28px;
}
.hero-acts {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  border-radius: var(--r);
  box-shadow: var(--sh-s);
}
.hero-rate-num {
  font-weight: 700;
  color: var(--olive);
  font-size: 16px;
}
.hero-rate-sub {
  color: var(--text-m);
  font-size: 11px;
}
.marq {
  background: var(--olive);
  color: #fff;
  padding: 14px 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.marq-trk {
  display: flex;
  gap: 40px;
  animation: marquee 35s linear infinite;
  white-space: nowrap;
  width: max-content;
}
.marq-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.marq-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  display: inline-block;
}

/* ── STATS STRIP ───────────────────── */
.stats-strip{padding:48px 0;background:var(--wh);border-bottom:1px solid var(--brd-l)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat-item{position:relative;padding:20px 10px}
.stat-item:not(:last-child)::after{content:'';position:absolute;right:0;top:20%;height:60%;width:1px;background:var(--brd)}
.stat-num{font-family:var(--serif);font-size:clamp(36px,5vw,52px);font-weight:700;color:var(--olive);line-height:1;display:inline}
.stat-plus,.stat-slash{font-family:var(--serif);font-size:clamp(18px,2.5vw,24px);color:var(--olive-60);font-weight:600;display:inline;margin-left:2px}
.stat-label{font-size:13px;color:var(--text-m);margin-top:6px;font-weight:500;letter-spacing:.3px}

/* ── REVIEWS CAROUSEL ──────────────── */
.rev-carousel-wrap{position:relative}
.rev-carousel{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 0 20px;-ms-overflow-style:none;scrollbar-width:none}
.rev-carousel::-webkit-scrollbar{display:none}
.rev-carousel .rev-card{flex:0 0 340px;scroll-snap-align:start}
.rev-nav{position:absolute;top:50%;transform:translateY(-60%);width:44px;height:44px;border-radius:50%;background:var(--wh);border:1px solid var(--brd);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--text-s);cursor:pointer;box-shadow:var(--sh);transition:.25s var(--ease);z-index:5}
.rev-nav:hover{background:var(--olive);color:#fff;border-color:var(--olive);box-shadow:var(--sh-m)}
.rev-nav.rev-prev{left:-22px}
.rev-nav.rev-next{right:-22px}
.rev-dots{display:flex;justify-content:center;gap:8px;margin-top:16px}
.rev-dot{width:8px;height:8px;border-radius:50%;background:var(--olive-20);border:none;cursor:pointer;transition:.3s var(--ease);padding:0}
.rev-dot.active{background:var(--olive);width:24px;border-radius:4px}

/* ── BACK TO TOP BUTTON ────────────── */
.btt{position:fixed;bottom:28px;right:28px;width:48px;height:48px;border-radius:50%;background:var(--olive);color:#fff;border:none;font-size:20px;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-m);z-index:90;opacity:0;transform:translateY(20px);pointer-events:none;transition:.35s var(--ease)}
.btt.show{opacity:1;transform:translateY(0);pointer-events:auto}
.btt:hover{background:var(--olive-60);transform:translateY(-3px) scale(1.05);box-shadow:var(--sh-l)}

/* ── SMOOTH FAQ ACCORDION ──────────── */

/* ── SCROLL REVEAL ─────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}
.reveal.vis {
  opacity: 1;
  transform: translateY(0);
}
.reveal.vis .reveal-d1 {
  transition-delay: 0.08s;
}
.reveal.vis .reveal-d2 {
  transition-delay: 0.16s;
}
.reveal.vis .reveal-d3 {
  transition-delay: 0.24s;
}
.reveal.vis .reveal-d4 {
  transition-delay: 0.32s;
}
.reveal.vis .reveal-d5 {
  transition-delay: 0.4s;
}
.reveal-child {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.5s var(--ease),
    transform 0.5s var(--ease);
}
.reveal.vis .reveal-child {
  opacity: 1;
  transform: translateY(0);
}
.sec {
  padding: 80px 0;
}
.sec-hd {
  margin-bottom: 44px;
}
.sec-ov {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sec-ov::after {
  content: "";
  flex: 0 0 32px;
  height: 2px;
  background: linear-gradient(90deg, var(--olive), transparent);
  border-radius: 1px;
}
.sec-hd h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 600;
}
.sec-hd p {
  color: var(--text-s);
  font-size: 15px;
  margin-top: 8px;
  max-width: 500px;
}
.rgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 28px;
}
.rc {
  background: var(--wh);
  border-radius: var(--rl);
  overflow: hidden;
  box-shadow: var(--sh);
  cursor: pointer;
  border: 1px solid var(--brd-l);
  transition: 0.4s var(--ease);
}
.rc:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-l);
  border-color: var(--olive-20);
}
.rc-img {
  position: relative;
  overflow: hidden;
  height: 240px;
}
.rc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.rc:hover .rc-img img {
  transform: scale(1.06);
}
.rc-type {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  color: var(--olive);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.rc-fav {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: 0.25s var(--spring);
}
.rc-fav:hover {
  transform: scale(1.15);
}
.rc-bod {
  padding: 22px;
}
.rc-top {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 6px;
}
.rc-nm {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
}
.rc-rat {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--gold);
  font-size: 14px;
  font-weight: 600;
}
.rc-rat span {
  color: var(--text-m);
  font-weight: 400;
  font-size: 12px;
}
.rc-loc {
  color: var(--text-m);
  font-size: 13px;
  margin-bottom: 14px;
}
.rc-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--brd-l);
}
.rc-pr {
  font-weight: 700;
  font-size: 20px;
  color: var(--olive);
}
.rc-pr span {
  font-weight: 400;
  font-size: 13px;
  color: var(--text-m);
}
.rc-btn {
  padding: 10px 20px;
  border-radius: var(--rs);
  background: var(--olive-5);
  color: var(--olive);
  border: none;
  font-weight: 600;
  font-size: 13px;
  transition: 0.25s var(--ease);
}
.rc-btn:hover {
  background: var(--olive);
  color: #fff;
}
.attr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.attr-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--wh);
  padding: 22px;
  border-radius: var(--r);
  border: 1px solid var(--brd-l);
  transition: 0.35s var(--ease);
  overflow: hidden;
}
.attr-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, var(--olive), var(--gold));
  border-radius: 0 2px 2px 0;
  transition: height 0.35s var(--ease);
}
.attr-card:hover {
  border-color: var(--olive-20);
  box-shadow: var(--sh-m);
  transform: translateY(-4px);
}
.attr-card:hover::before {
  height: 100%;
}
.attr-icon {
  font-size: 26px;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--olive-5), var(--olive-10));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.35s var(--ease);
  box-shadow: 0 2px 8px rgba(74, 93, 35, 0.06);
}
.attr-card:hover .attr-icon {
  transform: scale(1.08) rotate(-3deg);
  box-shadow: 0 4px 14px rgba(74, 93, 35, 0.12);
}
.attr-txt h4 {
  font-family: var(--serif);
  font-size: 15px;
  margin-bottom: 3px;
  transition: color 0.25s;
}
.attr-card:hover .attr-txt h4 {
  color: var(--olive);
}
.attr-txt p {
  color: var(--text-m);
  font-size: 12px;
  line-height: 1.5;
}
.attr-meta {
  margin-left: auto;
  text-align: right;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.attr-dist {
  color: var(--wh);
  font-size: 11px;
  font-weight: 600;
  background: var(--olive);
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.attr-fee {
  color: var(--text-m);
  font-size: 11px;
  text-align: center;
}
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}
.svc-card {
  position: relative;
  background: var(--wh);
  padding: 26px;
  border-radius: var(--r);
  border: 1px solid var(--brd-l);
  display: flex;
  gap: 18px;
  align-items: center;
  transition: 0.35s var(--ease);
  overflow: hidden;
}
.svc-card:hover {
  border-color: var(--olive-20);
  box-shadow: var(--sh-m);
  transform: translateY(-4px);
}
.svc-icon {
  font-size: 24px;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--olive-5), var(--olive-10));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.35s var(--ease);
  box-shadow: 0 2px 8px rgba(74, 93, 35, 0.06);
}
.svc-card:hover .svc-icon {
  background: linear-gradient(135deg, var(--olive-10), var(--olive-20));
  transform: scale(1.1);
  box-shadow: 0 4px 14px rgba(74, 93, 35, 0.12);
}
.svc-nm {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 4px;
  transition: color 0.25s;
}
.svc-card:hover .svc-nm {
  color: var(--olive);
}
.svc-desc {
  color: var(--text-m);
  font-size: 13px;
  line-height: 1.5;
}
.svc-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  opacity: 0;
  color: var(--olive);
  font-size: 16px;
  transition: 0.3s var(--ease);
}
.svc-card:hover .svc-arrow {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.rev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.rev-card {
  position: relative;
  background: var(--wh);
  padding: 32px 28px 28px;
  border-radius: var(--rl);
  border: 1px solid var(--brd-l);
  transition: 0.35s var(--ease);
  overflow: hidden;
}
.rev-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--olive),
    var(--gold),
    var(--olive-20)
  );
  opacity: 0;
  transition: opacity 0.35s;
}
.rev-card:hover {
  box-shadow: var(--sh-m);
  border-color: var(--olive-20);
  transform: translateY(-4px);
}
.rev-card:hover::before {
  opacity: 1;
}
.rev-quote {
  font-family: var(--serif);
  font-size: 40px;
  line-height: 1;
  color: var(--olive-20);
  margin-bottom: 8px;
  user-select: none;
}
.rev-stars {
  color: var(--gold);
  display: flex;
  gap: 2px;
  margin-bottom: 14px;
  font-size: 16px;
  letter-spacing: 1px;
}
.rev-text {
  font-size: 14px;
  color: var(--text-s);
  line-height: 1.8;
  margin-bottom: 20px;
  font-style: italic;
}
.rev-author {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--brd-l);
}
.rev-name {
  font-weight: 600;
  font-size: 14px;
}
.rev-src {
  font-size: 11px;
  color: var(--olive);
  background: var(--olive-5);
  padding: 5px 12px;
  border-radius: 100px;
  font-weight: 500;
  border: 1px solid var(--olive-10);
}
/* Guest avatar in carousel cards */
.rev-avatar,.rev-avatar-ring{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:18px;color:#fff;font-weight:700;margin-bottom:12px;flex-shrink:0}
.rev-avatar-ring{border:2px solid rgba(255,255,255,.3);box-shadow:0 2px 8px rgba(0,0,0,.15)}
.rev-src-app{background:linear-gradient(135deg,var(--olive-5),#e8f4ff);color:#2563eb;border-color:#bfdbfe}
/* Unfilled stars */
.rev-stars{color:var(--gold)}

/* ── WRITE REVIEW ──────────────────── */
.write-rev-wrap{margin-top:36px}
.write-rev-card{background:var(--wh);border-radius:var(--rxl);padding:32px;border:1px solid var(--brd-l);box-shadow:var(--sh);transition:.35s var(--ease);position:relative;overflow:hidden}
.write-rev-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--olive),var(--gold),var(--olive-60));background-size:200% 100%;animation:ftGradient 3s linear infinite}
.write-rev-card.star-picked{animation:revBounce .4s var(--spring)}
@keyframes revBounce{0%{transform:scale(1)}40%{transform:scale(1.015)}100%{transform:scale(1)}}
.write-rev-header{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.write-rev-icon{font-size:32px;width:56px;height:56px;background:linear-gradient(135deg,var(--olive-5),var(--olive-10));border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.write-rev-title{font-family:var(--serif);font-size:20px;font-weight:600;margin-bottom:3px}
.write-rev-sub{font-size:13px;color:var(--text-m)}
.write-rev-stars{display:flex;gap:6px;margin-bottom:8px}
.wr-star{background:none;border:none;font-size:36px;cursor:pointer;color:var(--brd);transition:.2s var(--spring);padding:0 2px;line-height:1}
.wr-star.hov{color:var(--gold);transform:scale(1.2)}
.wr-star.sel{color:var(--gold);transform:scale(1.1)}
.write-rev-hint{font-size:13px;font-weight:600;margin-bottom:16px;min-height:20px;transition:.2s}
.write-rev-textarea{width:100%;border:1.5px solid var(--brd);border-radius:var(--r);padding:14px 16px;font-size:14px;font-family:var(--sans);resize:none;min-height:100px;outline:none;transition:.2s var(--ease);background:var(--cream);line-height:1.6;color:var(--text)}
.write-rev-textarea:focus{border-color:var(--olive);background:var(--wh);box-shadow:0 0 0 3px rgba(74,93,35,.1)}
.write-rev-footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.write-rev-chars{font-size:12px;color:var(--text-m)}
.write-rev-btn{padding:12px 28px;border-radius:var(--rs);background:var(--olive);color:#fff;border:none;font-weight:700;font-size:14px;transition:.3s var(--ease);cursor:pointer}
.write-rev-btn:hover:not(:disabled){background:var(--olive-60);transform:translateY(-2px);box-shadow:0 6px 20px rgba(74,93,35,.3)}
.write-rev-btn:disabled{opacity:.6;cursor:not-allowed}
.write-rev-success{text-align:center;padding:24px 0;animation:scaleIn .5s var(--spring)}
.write-rev-success-icon{font-size:52px;margin-bottom:12px}
.write-rev-success h3{font-family:var(--serif);font-size:22px;margin-bottom:8px;color:var(--olive)}
.write-rev-success p{color:var(--text-m);font-size:14px}
.write-rev-login{display:flex;align-items:center;gap:12px;padding:20px 24px;background:var(--wh);border-radius:var(--r);border:1px solid var(--brd-l);margin-top:28px;flex-wrap:wrap}
.write-rev-login span{font-size:24px}
.write-rev-login p{color:var(--text-s);font-size:14px;flex:1}

/* ── COCONUT TREES ─────────────────── */
@keyframes sway{0%,100%{transform:rotate(-2deg) translateX(0)}50%{transform:rotate(2deg) translateX(4px)}}
@keyframes swayR{0%,100%{transform:rotate(2deg) translateX(0)}50%{transform:rotate(-2deg) translateX(-4px)}}
.coco-tree{position:absolute;bottom:0;width:160px;pointer-events:none;z-index:1}
.coco-tree svg{display:block;width:100%;height:auto}
.coco-left{left:0;transform-origin:bottom center;animation:sway 6s ease-in-out infinite}
.coco-right{right:0;transform-origin:bottom center;animation:swayR 7s ease-in-out infinite}
.coco-frond{transform-origin:65px 60px}
.coco-left .coco-frond{animation:sway 4s ease-in-out infinite}
.coco-right .coco-frond{animation:swayR 5s ease-in-out infinite}
.island-cta{overflow:visible}

.cta {
  background: var(--olive);
  border-radius: var(--rxl);
  padding: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -10%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
}
.cta h2 {
  font-family: var(--serif);
  font-size: 32px;
  margin-bottom: 10px;
}
.cta p {
  opacity: 0.8;
  font-size: 15px;
  max-width: 420px;
}
.cta-btn {
  padding: 16px 32px;
  border-radius: var(--r);
  background: #fff;
  color: var(--olive);
  border: none;
  font-weight: 700;
  font-size: 15px;
  transition: 0.25s var(--ease);
  white-space: nowrap;
  flex-shrink: 0;
}
.cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* ── STATS STRIP ─────────────────────── */
.stats-strip {
  padding: 48px 0;
  border-bottom: 1px solid var(--brd-l);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  text-align: center;
}
.stat-item {
  padding: 20px;
  border-right: 1px solid var(--brd-l);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.stat-item:last-child {
  border-right: none;
}
.stat-num {
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  color: var(--olive);
  line-height: 1;
  display: inline-block;
}
.stat-plus {
  font-family: var(--serif);
  font-size: clamp(20px, 3vw, 32px);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  display: inline-block;
}
.stat-slash {
  font-family: var(--serif);
  font-size: clamp(16px, 2.5vw, 24px);
  color: var(--text-m);
  line-height: 1;
  display: inline-block;
}
.stat-label {
  font-size: 13px;
  color: var(--text-s);
  font-weight: 500;
  margin-top: 6px;
}
.stat-item > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 2px;
}
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat-item {
    border-bottom: 1px solid var(--brd-l);
    padding: 24px 16px;
  }
  .stat-item:nth-child(even) {
    border-right: none;
  }
  .stat-item:nth-child(3),
  .stat-item:nth-child(4) {
    border-bottom: none;
  }
  .stats-strip {
    padding: 32px 0;
  }
}

/* ── ISLAND CTA ─────────────────────── */
@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
@keyframes glow {
  0%,
  100% {
    opacity: 0.04;
  }
  50% {
    opacity: 0.08;
  }
}
.island-cta {
  position: relative;
  border-radius: var(--rxl);
  overflow: hidden;
  background: linear-gradient(
    160deg,
    #3a4d1a 0%,
    var(--olive) 40%,
    #5a7a2e 100%
  );
  padding: 0;
  text-align: center;
}
.island-cta-bg {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image:
    radial-gradient(
      ellipse 300px 200px at 10% 80%,
      rgba(255, 255, 255, 0.3),
      transparent
    ),
    radial-gradient(
      ellipse 200px 300px at 90% 20%,
      rgba(255, 255, 255, 0.2),
      transparent
    ),
    radial-gradient(
      circle 100px at 50% 100%,
      rgba(200, 169, 81, 0.3),
      transparent
    );
  animation: glow 4s ease-in-out infinite;
}
.island-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: shimmer 8s linear infinite;
  z-index: 1;
  pointer-events: none;
}
.island-cta-content {
  position: relative;
  z-index: 2;
  padding: 52px 36px 40px;
}
.island-cta-icon {
  font-size: 44px;
  margin-bottom: 16px;
  animation: float 4s ease-in-out infinite;
}
.island-cta h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 4vw, 36px);
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.2;
}
.island-cta p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
  max-width: 480px;
  margin: 0 auto 28px;
  line-height: 1.7;
}
.island-cta-features {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}
.island-feat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(4px);
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: 0.25s var(--ease);
}
.island-feat:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}
.island-feat span {
  font-size: 16px;
}
.island-cta-btn {
  padding: 16px 40px;
  border-radius: var(--r);
  background: #fff;
  color: var(--olive);
  border: none;
  font-weight: 700;
  font-size: 16px;
  transition: 0.3s var(--ease);
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 2;
}
.island-cta-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.3);
  background: var(--gold-light);
  color: #3a4d1a;
}
.island-cta-note {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
}
.island-cta-deco {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  overflow: hidden;
  z-index: 1;
}
.island-wave {
  position: absolute;
  bottom: -5px;
  left: -5%;
  width: 110%;
  height: 40px;
  background: var(--cream);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  opacity: 1;
}
.island-wave.w2 {
  bottom: -15px;
  height: 30px;
  opacity: 0.3;
  animation: float 6s ease-in-out infinite;
}
.sec-prefooter {
  padding-bottom: 0;
  background: linear-gradient(180deg, var(--cream) 0%, #1c2312 100%);
}
.sec-prefooter .island-wave {
  background: #141a0b;
}
.ft {
  background: #141a0b;
  color: rgba(255, 255, 255, 0.5);
  padding: 0 0 24px;
  margin-top: 0;
  position: relative;
}
.ft-top-accent {
  height: 3px;
  background: linear-gradient(90deg, var(--olive), var(--gold), var(--olive-60), var(--olive));
  background-size: 300% 100%;
  animation: ftGradient 8s linear infinite;
}
@keyframes ftGradient {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}
.ft-main {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  padding: 60px 0 48px;
}
.ft-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.ft-logo-icon {
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,.08);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
}
.ft-brand {
  font-family: var(--serif);
  font-size: 28px;
  color: #fff;
  font-weight: 700;
}
.ft-desc {
  font-size: 14px;
  line-height: 1.8;
  max-width: 320px;
  margin-bottom: 24px;
}
.ft-socials {
  display: flex;
  gap: 10px;
}
.ft-social {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.5);
  transition: .3s var(--ease);
  text-decoration: none;
  line-height: 0;
  padding: 0;
  box-sizing: border-box;
}
.ft-social:hover {
  background: var(--olive);
  color: #fff;
  border-color: var(--olive);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(74,93,35,.4);
}
.ft-social svg {
  display: block;
  flex-shrink: 0;
}
.ft-links-col h4 {
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 12px;
}
.ft-links-col h4::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 24px;
  height: 2px;
  background: var(--olive);
  border-radius: 1px;
}
.ft a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  font-size: 14px;
  display: block;
  padding: 6px 0;
  transition: .25s var(--ease);
  position: relative;
}
.ft a:hover {
  color: #fff;
  padding-left: 6px;
}
.ft-location {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,.4);
}
.ft-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
  margin-bottom: 20px;
}
.ft-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: rgba(255,255,255,.3);
}
.ft-made {
  color: rgba(255,255,255,.35);
}
.det {
  padding: 32px 0 80px;
}
.det-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--rs);
  background: none;
  border: 1px solid var(--brd);
  color: var(--text-s);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 24px;
  transition: 0.2s;
}
.det-back:hover {
  background: var(--olive-3);
  border-color: var(--olive-20);
  color: var(--olive);
}
.det-gal {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 6px;
  border-radius: var(--rxl);
  overflow: hidden;
  height: 400px;
  margin-bottom: 36px;
}
.dg-main {
  height: 100%;
}
.dg-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dg-side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
}
.dg-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.3s;
}
.dg-side img:hover {
  opacity: 0.85;
}
.det-lay {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 44px;
}
.det-info h1 {
  font-family: var(--serif);
  font-size: 32px;
  margin-bottom: 10px;
}
.det-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}
.det-mi {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-s);
}
.det-desc {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-s);
  margin-bottom: 28px;
}
.det-stit {
  font-family: var(--serif);
  font-size: 20px;
  margin-bottom: 16px;
}
.am-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}
.am-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--olive-3);
  border: 1px solid var(--olive-10);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-s);
}
.bk {
  position: sticky;
  top: 96px;
  background: var(--wh);
  border-radius: var(--rl);
  padding: 28px;
  box-shadow: var(--sh-m);
  border: 1px solid var(--brd-l);
  height: fit-content;
}
.bk-pr {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--olive);
  margin-bottom: 4px;
}
.bk-pr span {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-m);
}
.bk-sub {
  font-size: 12px;
  color: var(--text-m);
  margin-bottom: 20px;
}
.bk-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1.5px solid var(--brd);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 10px;
}
.bk-df {
  position: relative;
  cursor: pointer;
  min-height: 62px;
  display: block;
  -webkit-tap-highlight-color: rgba(74, 93, 35, 0.08);
  transition: background 0.15s ease;
}
.bk-df:active {
  background: rgba(74, 93, 35, 0.05);
}
.bk-df:first-child {
  border-right: 1.5px solid var(--brd);
}
.bk-df-lbl {
  position: absolute;
  top: 10px;
  left: 14px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-m);
  pointer-events: none;
  z-index: 1;
}
.bk-df input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 28px 14px 8px;
  border: none;
  background: transparent;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  outline: none;
  font-family: var(--sans);
  box-sizing: border-box;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
}
.bk-df input::-webkit-date-and-time-value {
  text-align: left;
  line-height: 1.2;
}
.bk-df input::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
@media (max-width: 768px) {
  .bk-df {
    min-height: 68px;
  }
  .bk-df input {
    font-size: 16px;
    padding: 30px 14px 10px;
  }
}
.bk-guests {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1.5px solid var(--brd);
  border-radius: var(--r);
  margin-bottom: 16px;
}
.bk-guests label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-m);
}
.bk-ctr {
  display: flex;
  align-items: center;
  gap: 14px;
}
.bk-ctr button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--brd);
  background: none;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
  color: var(--text-s);
}
.bk-ctr button:hover {
  border-color: var(--olive);
  color: var(--olive);
  background: var(--olive-3);
}
.bk-ctr span {
  font-weight: 600;
  min-width: 18px;
  text-align: center;
}
.bk-go {
  width: 100%;
  padding: 14px;
  border-radius: var(--r);
  background: var(--olive);
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 15px;
  transition: 0.3s var(--ease);
}
.bk-go:hover:not(:disabled) {
  background: var(--olive-60);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(74, 93, 35, 0.3);
}
.bk-go:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.bk-brk {
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--brd-l);
}
.bk-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--text-s);
}
.bk-total {
  display: flex;
  justify-content: space-between;
  padding-top: 12px;
  margin-top: 6px;
  border-top: 1px solid var(--brd);
  font-weight: 700;
  font-size: 16px;
}
.bk-note {
  font-size: 11px;
  color: var(--text-m);
  margin-top: 14px;
  padding: 10px;
  background: var(--olive-3);
  border-radius: var(--rs);
  line-height: 1.5;
}
.tov {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(27, 33, 18, 0.5);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s;
}
.tkt {
  background: #fff;
  border-radius: var(--rxl);
  overflow: hidden;
  max-width: 400px;
  width: 100%;
  box-shadow: var(--sh-l);
  animation: scaleIn 0.35s var(--spring);
}
.tkt-img {
  height: 160px;
  overflow: hidden;
}
.tkt-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tkt-bod {
  padding: 28px;
}
.tkt-st {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.tkt-conf {
  color: #16a34a;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
}
.tkt-bod h3 {
  font-family: var(--serif);
  font-size: 24px;
  margin-bottom: 16px;
}
.tkt-div {
  height: 1px;
  background: var(--brd-l);
  margin: 14px 0;
  position: relative;
}
.tkt-div::before,
.tkt-div::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--cream);
  transform: translateY(-50%);
}
.tkt-div::before {
  left: -28px;
}
.tkt-div::after {
  right: -28px;
}
.tkt-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
.tkt-row .tl {
  color: var(--text-m);
  font-size: 13px;
}
.tkt-row .tv {
  font-weight: 600;
  font-size: 14px;
}
.tkt-ft {
  background: var(--olive);
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.5px;
}
.tkt-cls {
  margin-top: 16px;
  width: 100%;
  padding: 12px;
  border-radius: var(--r);
  background: var(--olive-3);
  border: none;
  font-weight: 600;
  color: var(--olive);
  font-size: 13px;
  transition: 0.2s;
}
.tkt-cls:hover {
  background: var(--olive-10);
}
.chat-list {
  max-width: 700px;
}
.chat-item {
  background: var(--wh);
  padding: 18px 22px;
  border-radius: var(--r);
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 8px;
  border: 1px solid var(--brd-l);
  cursor: pointer;
  transition: 0.25s;
}
.chat-item:hover {
  border-color: var(--olive-20);
  box-shadow: var(--sh-s);
  transform: translateX(3px);
}
.chat-item.unr {
  border-left: 3px solid var(--olive);
}
.chat-av {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.chat-av-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--olive);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.chat-av-initial {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--olive);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 20px;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
.chat-c {
  flex: 1;
  min-width: 0;
}
.chat-nm {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 1px;
}
.chat-preview {
  color: var(--text-m);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-tm {
  color: var(--text-m);
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
}
.chat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--olive);
  flex-shrink: 0;
}
.chat-room {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 140px);
  height: calc(100dvh - 140px);
  max-width: 800px;
  background: var(--wh);
  border-radius: var(--rl);
  border: 1px solid var(--brd-l);
  overflow: hidden;
  box-shadow: var(--sh);
}
.chat-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--brd-l);
  flex-shrink: 0;
}
.chat-header img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.chat-header-info h3 {
  font-family: var(--serif);
  font-size: 17px;
}
.chat-header-info p {
  font-size: 11px;
  color: var(--text-m);
}
.chat-header .ch-back {
  background: none;
  border: none;
  font-size: 20px;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--text-s);
  transition: 0.2s;
  margin-right: 4px;
}
.chat-header .ch-back:hover {
  background: var(--olive-3);
  color: var(--olive);
}
.chat-online {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  display: inline-block;
  margin-left: 6px;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-msg {
  max-width: 75%;
  padding: 12px 18px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.5;
  position: relative;
  animation: fadeUp 0.25s var(--ease) both;
}
.chat-msg.me {
  align-self: flex-end;
  background: var(--olive-10);
  color: var(--text);
  border-bottom-right-radius: 4px;
}
.chat-msg.them {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--brd-l);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.chat-msg .msg-time {
  font-size: 10px;
  color: var(--text-m);
  margin-top: 6px;
  display: block;
}
.chat-msg .msg-sender {
  font-size: 10px;
  font-weight: 600;
  color: var(--olive);
  margin-bottom: 4px;
  display: block;
}
.chat-msg.me .msg-sender {
  color: var(--text-m);
}
.chat-input-bar {
  display: flex;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--brd-l);
  background: var(--cream);
  flex-shrink: 0;
}
.chat-input-bar input {
  flex: 1;
  padding: 12px 18px;
  border: 1.5px solid var(--brd);
  border-radius: 100px;
  font-size: 14px;
  outline: none;
  background: var(--wh);
  transition: 0.2s;
}
.chat-input-bar input:focus {
  border-color: var(--olive);
  box-shadow: 0 0 0 3px rgba(74, 93, 35, 0.1);
}
.chat-input-bar button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--olive);
  color: #fff;
  border: none;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.25s var(--ease);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(74, 93, 35, 0.2);
}
.chat-input-bar button:hover {
  background: var(--olive-60);
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(74, 93, 35, 0.3);
}
.chat-input-bar button:active {
  transform: scale(0.95);
}
.chat-date-sep {
  text-align: center;
  font-size: 11px;
  color: var(--text-m);
  padding: 8px 0;
  position: relative;
}
.chat-date-sep::before,
.chat-date-sep::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 50px);
  height: 1px;
  background: var(--brd-l);
}
.chat-date-sep::before {
  left: 0;
}
.chat-date-sep::after {
  right: 0;
}
/* ── CHAT NOTIFICATION BANNER ────── */
.chat-notif-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--gold-light), #fff8e1);
  border: 1px solid rgba(200, 169, 81, 0.25);
  border-radius: var(--r);
  margin-bottom: 20px;
}
.chat-notif-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.chat-notif-txt {
  flex: 1;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-s);
}
.chat-notif-txt strong {
  color: var(--text);
  font-size: 14px;
}
.chat-notif-txt span {
  font-size: 12px;
}
.chat-notif-btn {
  padding: 10px 20px;
  border-radius: var(--rs);
  background: var(--olive);
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: 0.2s var(--ease);
  flex-shrink: 0;
}
.chat-notif-btn:hover {
  background: var(--olive-60);
  transform: translateY(-1px);
}

/* ── GUEST FEATURED CHAT CARD ───── */
.chat-item-featured {
  background: var(--wh);
  border-radius: var(--rl);
  border: 1px solid var(--olive-10);
  cursor: pointer;
  transition: 0.35s var(--ease);
  overflow: hidden;
}
.chat-item-featured:hover {
  border-color: var(--olive-20);
  box-shadow: var(--sh-m);
  transform: translateY(-3px);
}
.chat-item-top {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 22px 22px 0;
}
.chat-item-body {
  padding: 14px 22px;
  font-size: 14px;
  color: var(--text-s);
  line-height: 1.6;
}
.chat-item-action {
  padding: 16px 22px;
  background: var(--olive-3);
  color: var(--olive);
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  border-top: 1px solid var(--olive-10);
  transition: 0.2s;
}
.chat-item-featured:hover .chat-item-action {
  background: var(--olive);
  color: #fff;
}

/* ── IN-APP CHAT NOTIFICATION ───── */
.chat-inapp-notif {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(-140px);
  z-index: 500;
  background: var(--wh);
  border-radius: var(--r);
  box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(74,93,35,.12);
  border: 1px solid var(--olive-10);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 380px;
  width: calc(100% - 32px);
  cursor: pointer;
  transition: transform 0.4s var(--spring);
  pointer-events: none;
}
.chat-inapp-notif.show {
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.cin-close {
  background: none;
  border: none;
  color: var(--text-m);
  font-size: 13px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  flex-shrink: 0;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.cin-close:hover { background: var(--cream-2, #f0ece3); }
.chat-inapp-notif .cin-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--olive);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  color: #fff;
  font-family: var(--serif);
}
.chat-inapp-notif .cin-txt {
  flex: 1;
  min-width: 0;
}
.chat-inapp-notif .cin-name {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 1px;
}
.chat-inapp-notif .cin-msg {
  font-size: 12px;
  color: var(--text-s);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-m);
  font-size: 14px;
}

/* ── Typing indicator ─────────────────────────────────── */
.typing-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 24px 10px;
}
.typing-bubble {
  display: flex;
  gap: 4px;
  align-items: center;
  background: var(--cream-2, #f0ece3);
  padding: 8px 12px;
  border-radius: 18px;
  border-bottom-left-radius: 4px;
}
.typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-m);
  animation: typingBounce 1.2s infinite ease-in-out;
  flex-shrink: 0;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-5px); opacity: 1; }
}
.typing-label {
  font-size: 11px;
  color: var(--text-m);
  font-style: italic;
}

/* ── Mute button in chat header ───────────────────────── */
.chat-mute-btn {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: background .2s;
  flex-shrink: 0;
  line-height: 1;
}
.chat-mute-btn:hover { background: var(--cream-2, #f0ece3); }

/* ── Unread badge (red) on nav ────────────────────────── */
.nbadge-unread {
  background: #ef4444 !important;
  animation: badgePop 0.3s var(--spring) both;
}
@keyframes badgePop {
  0% { transform: scale(0); }
  70% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.role-toggle {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--olive-3);
  border-radius: var(--rs);
  margin-bottom: 20px;
  width: fit-content;
}
.role-toggle button {
  padding: 8px 20px;
  border-radius: 8px;
  border: none;
  font-size: 13px;
  font-weight: 500;
  background: none;
  color: var(--text-m);
  transition: 0.2s;
}
.role-toggle button.active {
  background: var(--olive);
  color: #fff;
  box-shadow: var(--sh-s);
}
.ph {
  background: linear-gradient(135deg, var(--olive-5), var(--warm));
  border-radius: var(--rxl);
  padding: 36px;
  display: flex;
  gap: 24px;
  align-items: center;
  margin-bottom: 36px;
  border: 1px solid var(--olive-10);
  flex-wrap: wrap;
}
.p-av {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--olive);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--serif);
  font-size: 32px;
  color: #fff;
  position: relative;
}
.p-av .bd {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #22c55e;
  border: 3px solid #fff;
}
.p-info {
  flex: 1;
  min-width: 0;
}
.p-nm {
  font-family: var(--serif);
  font-size: 26px;
  margin-bottom: 3px;
}
.p-em {
  color: var(--text-m);
  font-size: 13px;
  margin-bottom: 4px;
  word-break: break-word;
}
.edit-prof-btn {
  background: none;
  border: 1px solid var(--brd);
  border-radius: var(--rs);
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-s);
  transition: 0.2s;
  white-space: nowrap;
  cursor: pointer;
  margin-top: 8px;
}
.edit-prof-btn:hover,
.edit-prof-btn:active {
  border-color: var(--olive);
  color: var(--olive);
  background: var(--olive-3);
}
.pgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.pstit {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-m);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
  padding-left: 4px;
}
.pmi {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--wh);
  border-radius: var(--r);
  cursor: pointer;
  margin-bottom: 5px;
  border: 1px solid var(--brd-l);
  transition: 0.25s;
}
.pmi:hover {
  border-color: var(--olive-20);
  background: var(--olive-3);
  transform: translateX(3px);
}
.pmi-ic {
  width: 40px;
  height: 40px;
  border-radius: var(--rs);
  background: var(--olive-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.pmi-t {
  flex: 1;
}
.pmi-l {
  font-weight: 600;
  font-size: 13px;
}
.pmi-s {
  color: var(--text-m);
  font-size: 11px;
}
.pmi-ar {
  color: var(--text-m);
  transition: 0.2s;
  font-size: 14px;
}
.pmi:hover .pmi-ar {
  color: var(--olive);
  transform: translateX(3px);
}
.lout {
  width: 100%;
  padding: 14px;
  border-radius: var(--r);
  background: none;
  border: 1.5px solid #fca5a5;
  color: #dc2626;
  font-weight: 600;
  font-size: 13px;
  transition: 0.2s;
  margin-top: 12px;
}
.lout:hover {
  background: #fef2f2;
  border-color: #f87171;
}
.sb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--rs);
  background: none;
  border: 1px solid var(--brd);
  color: var(--text-s);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 24px;
  transition: 0.2s;
}
.sb:hover {
  background: var(--olive-3);
  border-color: var(--olive-20);
  color: var(--olive);
}
.stl {
  font-family: var(--serif);
  font-size: 28px;
  margin-bottom: 28px;
}
.ic {
  background: var(--wh);
  padding: 24px;
  border-radius: var(--r);
  margin-bottom: 10px;
  border: 1px solid var(--brd-l);
  transition: 0.25s;
}
.ic:hover {
  border-color: var(--olive-20);
  box-shadow: var(--sh-s);
}
.ic-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.ic-hd .ici {
  font-size: 22px;
}
.ic-hd h4 {
  font-family: var(--serif);
  font-size: 17px;
}
.ic-bd {
  color: var(--text-s);
  font-size: 13px;
  line-height: 1.8;
  white-space: pre-line;
}
.faq-i {
  background: var(--wh);
  border-radius: var(--r);
  margin-bottom: 6px;
  border: 1px solid var(--brd-l);
  overflow: hidden;
  transition: .3s var(--ease);
}
.faq-i.active {
  border-color: var(--olive-20);
  box-shadow: var(--sh-s);
}
.faq-q {
  padding: 16px 20px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.2s;
}
.faq-q:hover {
  background: var(--olive-3);
}
.faq-q .faq-toggle {
  transition: transform .3s var(--ease);
  font-size: 18px;
  flex-shrink: 0;
}
.faq-i.active .faq-q .faq-toggle {
  transform: rotate(45deg);
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  padding: 0 20px;
  color: var(--text-s);
  font-size: 13px;
  line-height: 1.7;
  transition: max-height .4s var(--ease), padding .4s var(--ease);
}
.faq-a.open {
  max-height: 300px;
  padding: 0 20px 16px;
}
.empty {
  text-align: center;
  padding: 80px 20px;
}
.empty-ic {
  font-size: 56px;
  margin-bottom: 16px;
  opacity: 0.3;
}
.empty h3 {
  font-family: var(--serif);
  font-size: 22px;
  margin-bottom: 6px;
}
.empty p {
  color: var(--text-m);
  font-size: 14px;
  max-width: 340px;
  margin: 0 auto 24px;
}
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: #fff;
  padding: 14px 28px;
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 500;
  z-index: 400;
  box-shadow: var(--sh-l);
  animation: fadeUp 0.3s var(--spring);
}
.toast::before {
  content: "";
  width: 100%;
  height: 3px;
  background: var(--olive);
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 0 0 var(--r) var(--r);
  animation: shrink 2.5s linear forwards;
}
.hidden {
  display: none !important;
}

/* ── EDIT PROFILE ────────────────────── */
.ep-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--olive);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-family: var(--serif);
  font-size: 40px;
  color: #fff;
  position: relative;
  transition: 0.3s;
  overflow: hidden;
}
.ep-avatar:hover {
  opacity: 0.85;
}
.ep-photo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 100px;
  background: var(--olive-5);
  border: 1px solid var(--olive-10);
  color: var(--olive);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}
.ep-photo-btn:hover {
  background: var(--olive-10);
}

/* ── SAVED DOCUMENTS ────────────────── */
.doc-card {
  background: var(--wh);
  border-radius: var(--r);
  border: 1px solid var(--brd-l);
  overflow: hidden;
  margin-bottom: 12px;
  transition: 0.25s;
}
.doc-card:hover {
  border-color: var(--olive-20);
  box-shadow: var(--sh-s);
}
.doc-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
}
.doc-card-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.doc-card-icon {
  font-size: 24px;
  flex-shrink: 0;
}
.doc-card-name {
  font-weight: 700;
  font-size: 14px;
}
.doc-card-meta {
  font-size: 12px;
  color: var(--text-m);
  margin-top: 1px;
}
.doc-card-photo {
  position: relative;
  cursor: pointer;
  border-top: 1px solid var(--brd-l);
}
.doc-card-photo img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  transition: 0.2s;
}
.doc-card-photo:hover img {
  opacity: 0.9;
}
.doc-card-photo-label {
  position: absolute;
  bottom: 8px;
  left: 8px;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
}
.doc-card-nophoto {
  padding: 12px 18px;
  font-size: 12px;
  color: var(--text-m);
  border-top: 1px solid var(--brd-l);
  background: var(--olive-3);
}

.doc-upload-area {
  position: relative;
}
.doc-upload-btn {
  display: block;
  cursor: pointer;
  transition: 0.2s;
}
.doc-upload-inner {
  border: 2px dashed var(--olive-20);
  border-radius: var(--r);
  padding: 32px 20px;
  text-align: center;
  transition: 0.2s;
  background: var(--olive-3);
}
.doc-upload-btn:hover .doc-upload-inner {
  border-color: var(--olive);
  background: var(--olive-5);
}
.doc-upload-preview {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--brd-l);
}
.doc-upload-preview img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

/* ── TOGGLE SWITCH ───────────────────── */
.pref-toggle {
  width: 48px;
  height: 28px;
  border-radius: 14px;
  background: var(--brd);
  position: relative;
  transition: 0.3s var(--ease);
  cursor: pointer;
  flex-shrink: 0;
}
.pref-toggle.on {
  background: var(--olive);
}
.pref-knob {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: 0.3s var(--ease);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.pref-toggle.on .pref-knob {
  left: 23px;
}

/* ── ADMIN USER CARDS ────────────────── */
.adm-users-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.adm-user-mini {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--wh);
  padding: 14px 18px;
  border-radius: var(--r);
  border: 1px solid var(--brd-l);
  transition: 0.2s;
}
.adm-user-mini:hover {
  border-color: var(--olive-20);
  box-shadow: var(--sh-s);
}
.adm-user-mini-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--olive);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 17px;
  color: #fff;
  flex-shrink: 0;
}
.adm-user-mini-info {
  flex: 1;
  min-width: 0;
}
.adm-user-mini-name {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 1px;
}
.adm-user-mini-detail {
  font-size: 12px;
  color: var(--text-m);
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.adm-user-card {
  background: var(--wh);
  border-radius: var(--r);
  border: 1px solid var(--brd-l);
  padding: 20px;
  margin-bottom: 10px;
  transition: 0.25s;
}
.adm-user-card:hover {
  border-color: var(--olive-20);
  box-shadow: var(--sh-s);
}
.adm-user-top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.adm-role-btn {
  margin-left: auto;
  flex-shrink: 0;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: .2s;
  letter-spacing: .3px;
}
.adm-role-btn.promote {
  background: var(--olive-10);
  color: var(--olive);
}
.adm-role-btn.promote:hover {
  background: var(--olive);
  color: #fff;
}
.adm-role-btn.demote {
  background: #fee2e2;
  color: #dc2626;
}
.adm-role-btn.demote:hover {
  background: #dc2626;
  color: #fff;
}
.adm-user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--olive);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 20px;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
.adm-user-info {
  flex: 1;
  min-width: 0;
}
.adm-user-name {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 2px;
}
.adm-user-meta {
  font-size: 12px;
  color: var(--text-m);
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.adm-user-prefs {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--brd-l);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.adm-prefs-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-m);
  margin-right: 4px;
}
.adm-pref-tag {
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--olive-3);
  border: 1px solid var(--olive-10);
  font-size: 11px;
  font-weight: 500;
  color: var(--olive);
}

/* ── ADMIN ROOM MANAGEMENT ──────────── */
.rm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}
.rm-card {
  background: var(--wh);
  border-radius: var(--rl);
  overflow: hidden;
  border: 1px solid var(--brd-l);
  transition: 0.3s;
}
.rm-card:hover {
  box-shadow: var(--sh);
  border-color: var(--olive-20);
}
.rm-card-img {
  height: 180px;
  overflow: hidden;
  background: var(--olive-3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rm-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rm-card-placeholder {
  font-size: 40px;
  color: var(--text-m);
  opacity: 0.3;
}
.rm-card-body {
  padding: 20px;
}
.rm-card-top {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 10px;
}
.rm-card-name {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
}
.rm-card-type {
  font-size: 12px;
  color: var(--text-m);
  margin-top: 2px;
}
.rm-card-price {
  font-weight: 700;
  font-size: 18px;
  color: var(--olive);
  white-space: nowrap;
}
.rm-card-price span {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-m);
}
.rm-card-amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.rm-card-amenities span {
  padding: 4px 10px;
  background: var(--olive-3);
  border-radius: 20px;
  font-size: 11px;
  color: var(--text-s);
}
.rm-card-actions {
  display: flex;
  gap: 8px;
}

.rm-editor-section {
  margin-bottom: 24px;
}
.rm-editor-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  display: block;
}

/* ── FORM GRID HELPERS ─────────────── */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form-grid-2-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}
.form-grid-4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 12px;
}
.form-row-flex {
  display: flex;
  gap: 12px;
}

.rm-photos-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.rm-photo-item {
  position: relative;
  width: 120px;
  height: 90px;
  border-radius: var(--rs);
  overflow: hidden;
  border: 1px solid var(--brd-l);
}
.rm-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rm-photo-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rm-photo-cover {
  position: absolute;
  bottom: 4px;
  left: 4px;
  padding: 2px 8px;
  background: var(--olive);
  color: #fff;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 700;
}
.rm-photo-add {
  width: 120px;
  height: 90px;
  border-radius: var(--rs);
  border: 2px dashed var(--olive-20);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.2s;
}
.rm-photo-add:hover {
  border-color: var(--olive);
  background: var(--olive-3);
}
.rm-photo-add-inner {
  text-align: center;
  font-size: 20px;
  color: var(--olive);
}
.rm-photo-add-inner span {
  font-size: 11px;
  display: block;
  margin-top: 2px;
}
.rm-manage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.rm-photo-btns {
  display: none;
  gap: 8px;
  margin-top: 10px;
}
.rm-photo-mobile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  padding: 14px 16px;
  border-radius: var(--rs);
  background: var(--olive-5);
  border: 1.5px dashed var(--olive-20);
  color: var(--olive);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
  font-family: var(--sans);
  text-align: center;
}
.rm-photo-mobile-btn:hover,
.rm-photo-mobile-btn:active {
  background: var(--olive-10);
  border-color: var(--olive);
}

.rm-amenities-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rm-amenity-btn {
  padding: 7px 14px;
  border-radius: 100px;
  border: 1.5px solid var(--brd);
  background: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-s);
  cursor: pointer;
  transition: 0.2s;
}
.rm-amenity-btn:hover {
  border-color: var(--olive-20);
  background: var(--olive-3);
}
.rm-amenity-btn.active {
  background: var(--olive);
  color: #fff;
  border-color: var(--olive);
}

/* ── ADMIN DASHBOARD ────────────────── */
.adm-stat {
  background: var(--wh);
  padding: 28px 24px;
  border-radius: var(--r);
  border: 1px solid var(--brd-l);
  text-align: center;
  transition: 0.25s;
}
.adm-stat:hover {
  border-color: var(--olive-20);
  box-shadow: var(--sh-s);
}
.adm-stat-num {
  font-family: var(--serif);
  font-size: 36px;
  color: var(--olive);
  margin-bottom: 4px;
}
.adm-stat-label {
  font-size: 13px;
  color: var(--text-m);
  font-weight: 500;
}

.adm-table {
  background: var(--wh);
  border-radius: var(--r);
  border: 1px solid var(--brd-l);
  overflow-x: auto;
}
.adm-row {
  display: flex;
  border-bottom: 1px solid var(--brd-l);
  transition: 0.15s;
}
.adm-row:last-child {
  border-bottom: none;
}
.adm-row:hover:not(.adm-header) {
  background: var(--olive-3);
}
.adm-row.adm-header {
  background: var(--cream);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-m);
}
.adm-cell {
  flex: 1;
  padding: 14px 16px;
  font-size: 13px;
  min-width: 80px;
  word-break: break-word;
}
.adm-row.adm-header .adm-cell {
  padding: 12px 16px;
}

/* ── AVAILABILITY GRID ─────────────── */
.avail-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--wh);
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--brd-l);
  min-width: 700px;
}
.avail-table th,
.avail-table td {
  padding: 12px 10px;
  text-align: center;
  font-size: 12px;
  border: 1px solid var(--brd-l);
}
.avail-table th {
  background: var(--cream);
  font-weight: 700;
  color: var(--text-s);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 10px;
  padding: 10px 8px;
}
.avail-table .avail-room-col {
  text-align: left;
  min-width: 140px;
  background: var(--cream);
  position: sticky;
  left: 0;
  z-index: 1;
}
.avail-table tbody .avail-room-col {
  background: var(--wh);
}
.avail-today {
  background: var(--olive-3) !important;
}
.avail-cell {
  min-width: 90px;
  transition: 0.15s;
}
.avail-cell:hover {
  background: var(--olive-3);
}
.avail-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
}
.avail-tag.free {
  background: #f0fdf4;
  color: #16a34a;
}
.avail-tag.olive {
  background: var(--olive-5);
  color: var(--olive);
}
.avail-tag.gold {
  background: var(--gold-light);
  color: #92710a;
}
.avail-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 4px;
}
/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero-overlay {
    padding: 60px clamp(16px, 4vw, 48px) 40px;
  }
  .det-lay {
    grid-template-columns: 1fr;
  }
  .bk {
    position: static;
  }
  .pgrid {
    grid-template-columns: 1fr;
  }
  .cta,
  .island-cta {
    text-align: center;
  }
  .ft-main {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── NAV ── */
  .nav {
    height: 60px;
    padding: 0 16px;
  }
  .nav.scr {
    height: 56px;
  }
  .nlinks,
  .nav .ncta {
    display: none;
  }
  .mtog {
    display: block;
    font-size: 24px;
  }
  .brand {
    font-size: 22px;
  }
  .mnav button {
    font-size: 17px;
    padding: 14px 28px;
    width: 200px;
  }

  /* ── CONTAINER ── */
  .ctn {
    padding: 0 16px;
  }
  .main {
    padding-bottom: 20px;
  }

  /* ── AUTH ── */
  .auth-page {
    padding: 16px;
  }
  .auth-card {
    max-width: 100%;
  }
  .auth-brand {
    margin-bottom: 24px;
  }
  .auth-brand .auth-icon {
    width: 56px;
    height: 56px;
    font-size: 24px;
    border-radius: 16px;
  }
  .auth-brand h1 {
    font-size: 24px;
  }
  .auth-form {
    padding: 24px 20px;
    border-radius: var(--r);
  }
  .auth-form h2 {
    font-size: 20px;
    margin-bottom: 20px;
  }
  .auth-field input,
  .auth-field select {
    padding: 12px 14px;
    font-size: 14px;
  }
  .auth-submit {
    padding: 14px;
    font-size: 15px;
  }

  /* ── HERO ── */
  .hero-full {
    min-height: auto;
  }
  .hero-bg-art {
    position: absolute;
    inset: 0;
  }
  .hero-bg-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(250, 249, 246, 0.6) 0%,
      rgba(250, 249, 246, 0.85) 40%,
      rgba(250, 249, 246, 0.75) 70%,
      rgba(250, 249, 246, 0.5) 100%
    );
    z-index: 1;
  }
  .hero-overlay {
    min-height: auto;
    padding: 90px 16px 40px;
    position: relative;
    z-index: 2;
  }
  .hero-full h1 {
    font-size: 28px;
    line-height: 1.15;
  }
  .hero-sub {
    font-size: 14px;
  }
  .hero-eye {
    font-size: 11px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.9);
  }
  .hero-loc {
    font-size: 13px;
    margin-bottom: 20px;
  }
  .hero-acts {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }
  .hero-acts .ncta,
  .hero-acts .det-back {
    width: 100%;
    text-align: center;
    justify-content: center;
    display: flex;
  }
  .hero-rating {
    width: fit-content;
    background: rgba(255, 255, 255, 0.9);
  }

  /* ── MARQUEE ── */
  .marq {
    padding: 10px 0;
    font-size: 11px;
  }

  /* ── SECTIONS ── */
  .sec {
    padding: 40px 0;
  }
  .sec-hd {
    margin-bottom: 28px;
  }
  .sec-hd h2 {
    font-size: 24px;
  }
  .sec-hd p {
    font-size: 13px;
  }

  /* ── ROOM CARDS ── */
  .rgrid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .rc-img {
    height: 200px;
  }
  .rc-bod {
    padding: 18px;
  }
  .rc-nm {
    font-size: 17px;
  }
  .rc-pr {
    font-size: 18px;
  }

  /* ── ROOM DETAIL ── */
  .det {
    padding: 20px 0 40px;
  }
  .det-gal {
    grid-template-columns: 1fr;
    height: auto;
    border-radius: var(--r);
    gap: 4px;
  }
  .dg-main {
    height: 220px;
  }
  .dg-side {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }
  .dg-side img {
    height: 110px;
  }
  .det-info h1 {
    font-size: 24px;
  }
  .det-meta {
    gap: 10px;
    margin-bottom: 18px;
  }
  .det-desc {
    font-size: 14px;
  }
  .am-list {
    gap: 6px;
  }
  .am-tag {
    font-size: 11px;
    padding: 6px 12px;
  }
  .bk {
    border-radius: var(--r);
    padding: 22px;
    margin-top: 20px;
  }
  .bk-pr {
    font-size: 24px;
  }
  .bk-note {
    font-size: 10px;
    padding: 8px;
  }

  /* ── ATTRACTIONS / SERVICES / REVIEWS ── */
  .attr-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .attr-card {
    padding: 16px;
    gap: 12px;
  }
  .attr-card::before {
    display: none;
  }
  .attr-icon {
    width: 44px;
    height: 44px;
    font-size: 22px;
    border-radius: 12px;
  }
  .attr-dist {
    font-size: 10px;
    padding: 2px 8px;
  }
  .svc-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .svc-card {
    padding: 18px;
    gap: 14px;
  }
  .svc-icon {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
  .svc-arrow {
    display: none;
  }
  .rev-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .rev-card {
    padding: 22px 20px 20px;
  }
  .rev-card::before {
    display: none;
  }
  .rev-quote {
    font-size: 32px;
    margin-bottom: 4px;
  }
  .rev-text {
    font-size: 13px;
  }
  .rev-carousel .rev-card {
    flex: 0 0 280px;
  }
  .rev-nav {
    display: none;
  }
  /* ── WRITE REVIEW MOBILE ── */
  .write-rev-card{padding:22px 18px}
  .write-rev-header{gap:12px;margin-bottom:18px}
  .write-rev-icon{width:46px;height:46px;font-size:26px;border-radius:12px}
  .write-rev-title{font-size:17px}
  .wr-star{font-size:30px}
  .write-rev-textarea{min-height:80px;font-size:16px}
  .write-rev-footer{flex-wrap:wrap;gap:10px}
  .write-rev-btn{width:100%;text-align:center;padding:14px}
  /* ── COCONUT TREES MOBILE ── */
  .coco-tree{width:100px}
  .coco-left{left:-10px}
  .coco-right{right:-10px}

  /* ── STATS STRIP ── */
  .stats-strip {
    padding: 32px 0;
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .stat-item:nth-child(2)::after {
    display: none;
  }
  .stat-item:nth-child(3)::after,
  .stat-item:nth-child(4)::after {
    display: none;
  }
  .stat-num {
    font-size: 32px;
  }
  .stat-plus, .stat-slash {
    font-size: 16px;
  }
  .stat-label {
    font-size: 11px;
  }

  /* ── BACK TO TOP ── */
  .btt {
    bottom: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
    font-size: 18px;
  }

  /* ── CTA BANNER ── */
  .island-cta-content {
    padding: 36px 20px 32px;
  }
  .island-cta-icon {
    font-size: 36px;
    margin-bottom: 12px;
  }
  .island-cta h2 {
    font-size: 22px;
  }
  .island-cta p {
    font-size: 13px;
    margin-bottom: 22px;
  }
  .island-cta-features {
    gap: 8px;
  }
  .island-feat {
    padding: 6px 12px;
    font-size: 12px;
  }
  .island-feat span {
    font-size: 14px;
  }
  .island-cta-btn {
    width: 100%;
    padding: 14px 24px;
    font-size: 15px;
  }
  .island-cta-note {
    font-size: 11px;
  }

  /* ── FOOTER ── */
  .ft-main {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px 0 32px;
  }
  .ft-brand {
    font-size: 24px;
  }
  .ft-desc {
    font-size: 13px;
    max-width: 100%;
  }
  .ft-links-col h4 {
    margin-bottom: 14px;
    padding-bottom: 10px;
  }
  .ft a {
    font-size: 13px;
    padding: 5px 0;
  }
  .ft-bot {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }

  /* ── PROFILE ── */
  .ph {
    flex-direction: column;
    text-align: center;
    padding: 24px 20px;
    gap: 12px;
    border-radius: var(--r);
  }
  .p-av {
    width: 70px;
    height: 70px;
    font-size: 28px;
    margin: 0 auto;
  }
  .p-info {
    width: 100%;
  }
  .p-nm {
    font-size: 22px;
  }
  .p-em {
    font-size: 12px;
    word-break: break-word;
  }
  .edit-prof-btn {
    width: 100%;
    text-align: center;
    padding: 12px;
    margin-top: 8px;
    display: block;
  }
  .pmi {
    padding: 12px 14px;
    gap: 12px;
  }
  .pmi-ic {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
  .pmi-l {
    font-size: 13px;
  }
  .stl {
    font-size: 24px;
    margin-bottom: 20px;
  }
  .lout {
    margin-top: 8px;
  }

  /* ── EDIT PROFILE ── */
  .ep-avatar {
    width: 80px;
    height: 80px;
    font-size: 32px;
  }

  /* ── CHAT ── */
  .chat-notif-banner {
    flex-direction: row;
    padding: 14px 16px;
    gap: 10px;
  }
  .chat-notif-icon {
    font-size: 24px;
  }
  .chat-notif-txt strong {
    font-size: 13px;
  }
  .chat-notif-btn {
    padding: 8px 16px;
    font-size: 12px;
  }
  .chat-item-top {
    padding: 18px 18px 0;
  }
  .chat-item-body {
    padding: 12px 18px;
    font-size: 13px;
  }
  .chat-item-action {
    padding: 14px 18px;
    font-size: 13px;
  }
  .chat-room {
    height: calc(100vh - 80px);
    height: calc(100dvh - 80px);
    border-radius: 0;
    border: none;
    box-shadow: none;
  }
  .chat-header {
    padding: 14px 16px;
    gap: 10px;
  }
  .chat-header img,
  .chat-av-initial {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
  .chat-header-info h3 {
    font-size: 15px;
  }
  .chat-messages {
    padding: 16px;
  }
  .chat-msg {
    max-width: 85%;
    padding: 10px 14px;
    font-size: 13px;
  }
  .chat-input-bar {
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    gap: 8px;
    position: sticky;
    bottom: 0;
  }
  .chat-input-bar input {
    padding: 10px 14px;
    font-size: 16px;
  }
  .chat-input-bar button {
    width: 42px;
    height: 42px;
    font-size: 16px;
    min-width: 42px;
  }
  .chat-list {
    gap: 6px;
  }
  .chat-item {
    padding: 14px 16px;
    gap: 10px;
  }
  .chat-av,
  .chat-av-icon,
  .chat-av-initial {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  /* ── TICKET MODAL ── */
  .tov {
    padding: 10px;
    align-items: flex-end;
  }
  .tkt {
    max-width: 100%;
    border-radius: var(--r) var(--r) 0 0;
    max-height: 90vh;
    overflow-y: auto;
  }
  .tkt-img {
    height: 140px;
  }
  .tkt-bod {
    padding: 22px 20px;
  }
  .tkt-bod h3 {
    font-size: 20px;
  }
  .tkt-ft {
    padding: 14px;
    font-size: 12px;
  }

  /* ── TRIPS ── */
  .rc[style*="max-width:800px"] .rc-img {
    height: 160px;
  }

  /* ── ADMIN TABS ── */
  .role-toggle {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: 2px;
    padding: 3px;
  }
  .role-toggle button {
    padding: 8px 14px;
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ── ADMIN STATS ── */
  .adm-stat {
    padding: 20px 16px;
  }
  .adm-stat-num {
    font-size: 28px;
  }
  .adm-stat-label {
    font-size: 11px;
  }

  /* ── ADMIN TABLES ── */
  .adm-table {
    border-radius: var(--rs);
  }
  .adm-cell {
    padding: 10px 12px;
    font-size: 12px;
    min-width: 60px;
  }
  .adm-row.adm-header .adm-cell {
    padding: 10px 12px;
    font-size: 10px;
  }
  .adm-row {
    flex-wrap: wrap;
  }

  /* ── ADMIN USER CARDS ── */
  .adm-user-card {
    padding: 16px;
  }
  .adm-user-avatar {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  .adm-user-name {
    font-size: 14px;
  }
  .adm-user-meta {
    font-size: 11px;
  }
  .adm-pref-tag {
    padding: 3px 8px;
    font-size: 10px;
  }
  .adm-user-mini {
    padding: 12px 14px;
    gap: 10px;
  }
  .adm-user-mini-av {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
  .adm-user-mini-name {
    font-size: 13px;
  }
  .adm-user-mini-detail {
    font-size: 11px;
  }

  /* ── ADMIN ROOM MANAGEMENT ── */
  .rm-manage-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  .rm-add-btn {
    width: 100%;
    text-align: center;
    padding: 14px;
    font-size: 15px;
  }
  .rm-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .rm-card-img {
    height: 160px;
  }
  .rm-card-body {
    padding: 16px;
  }
  .rm-card-name {
    font-size: 16px;
  }
  .rm-card-actions {
    flex-direction: column;
    gap: 6px;
  }
  .rm-card-actions button {
    width: 100%;
    text-align: center;
    padding: 12px;
  }
  .rm-photos-grid {
    gap: 8px;
  }
  .rm-photo-item,
  .rm-photo-add {
    width: 100px;
    height: 80px;
  }
  .rm-photo-add-inner {
    font-size: 16px;
  }
  .rm-photo-btns {
    display: flex;
  }
  .rm-amenities-grid {
    gap: 4px;
  }
  .rm-amenity-btn {
    padding: 8px 14px;
    font-size: 12px;
  }
  .rm-editor-section {
    margin-bottom: 20px;
  }
  .rm-editor-label {
    font-size: 15px;
    margin-bottom: 12px;
  }

  /* ── ROOM EDITOR GRIDS ── */
  .form-grid-2,
  .form-grid-2-1,
  .form-grid-4 {
    grid-template-columns: 1fr;
  }
  .form-row-flex {
    flex-direction: column;
  }

  /* ── SUB PAGES ── */
  .ic {
    padding: 18px 16px;
  }
  .ic-hd h4 {
    font-size: 15px;
  }

  /* ── TOAST ── */
  .toast {
    left: 16px;
    right: 16px;
    transform: none;
    text-align: center;
    padding: 12px 20px;
    font-size: 12px;
    bottom: 16px;
    border-radius: var(--rs);
  }

  /* ── EMPTY STATES ── */
  .empty {
    padding: 50px 16px;
  }
  .empty-ic {
    font-size: 44px;
  }
  .empty h3 {
    font-size: 18px;
  }

  /* ── AVAILABILITY GRID ── */
  .avail-table {
    min-width: 600px;
  }
  .avail-table th,
  .avail-table td {
    padding: 8px 6px;
    font-size: 10px;
  }
  .avail-table .avail-room-col {
    min-width: 100px;
  }
  .avail-tag {
    padding: 2px 6px;
    font-size: 9px;
  }

  /* ── SAFE AREA (notched phones) ── */
  .nav {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .chat-input-bar {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .mnav {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .toast {
    bottom: max(16px, env(safe-area-inset-bottom));
  }

  /* ── MISC ── */
  .sb {
    padding: 8px 16px;
    font-size: 13px;
    margin-bottom: 18px;
  }
  .det-back {
    padding: 8px 16px;
    font-size: 13px;
  }
  .ncta {
    padding: 10px 20px;
    font-size: 13px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — Small phones (375px and under)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .hero-full h1 {
    font-size: 24px;
  }
  .hero-overlay {
    padding: 80px 16px 32px;
  }
  .auth-form {
    padding: 20px 16px;
  }
  .auth-brand h1 {
    font-size: 22px;
  }
  .bk {
    padding: 18px;
  }
  .bk-pr {
    font-size: 22px;
  }
  .ph {
    padding: 20px 16px;
  }
  .p-nm {
    font-size: 20px;
  }
  .chat-msg {
    max-width: 90%;
  }
  .rm-photo-item,
  .rm-photo-add {
    width: 90px;
    height: 72px;
  }
  .role-toggle button {
    padding: 6px 10px;
    font-size: 10px;
  }
  .adm-stat-num {
    font-size: 24px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM ENHANCEMENTS — Added April 2026
   ═══════════════════════════════════════════════════════════════════ */

/* ── SKELETON LOADING ──────────────────────────────────────────── */
.skel {
  background: linear-gradient(90deg, #f0ece3 0%, #f6f2e9 50%, #f0ece3 100%);
  background-size: 200% 100%;
  animation: skelShimmer 1.4s infinite;
  border-radius: 8px;
  display: block;
}
@keyframes skelShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skel-card {
  background: var(--wh);
  border-radius: var(--r);
  padding: 16px;
  box-shadow: var(--sh);
  overflow: hidden;
}
.skel-img { height: 200px; border-radius: 12px; margin-bottom: 14px; }
.skel-line { height: 14px; margin-bottom: 8px; width: 100%; }
.skel-line.w60 { width: 60%; }
.skel-line.w40 { width: 40%; }
.skel-line.w80 { width: 80%; }

/* ── PAGE TRANSITIONS ──────────────────────────────────────────── */
.page-fade { animation: pageFade 0.35s var(--ease) both; }
@keyframes pageFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── WHATSAPP FLOATING BUTTON ─────────────────────────────────── */
.wa-fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
  z-index: 480;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.25s var(--spring), box-shadow 0.25s;
  animation: waFloat 3s ease-in-out infinite, fadeUp 0.5s var(--ease) both;
}
.wa-fab::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: #25d366;
  opacity: 0.25;
  animation: waPulse 2s ease-out infinite;
  z-index: -1;
}
.wa-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 28px rgba(37, 211, 102, 0.55);
}
.wa-fab svg { width: 30px; height: 30px; fill: #fff; }
@keyframes waFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes waPulse {
  0% { transform: scale(1); opacity: 0.4; }
  100% { transform: scale(1.5); opacity: 0; }
}
.wa-fab-label {
  position: absolute;
  right: 70px;
  background: #fff;
  color: var(--text);
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--sh);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.wa-fab:hover .wa-fab-label { opacity: 1; }
@media (max-width: 600px) {
  .wa-fab { bottom: 80px; right: 14px; width: 54px; height: 54px; }
  .wa-fab svg { width: 26px; height: 26px; }
  .wa-fab-label { display: none; }
}

/* ── STICKY MOBILE BOOK NOW BAR ───────────────────────────────── */
.sticky-book {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
  z-index: 300;
  display: none;
  transform: translateY(100%);
  transition: transform 0.3s var(--spring);
  border-top: 1px solid var(--olive-10);
}
.sticky-book.show { transform: translateY(0); }
.sticky-book-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 600px;
  margin: 0 auto;
}
.sticky-book-info { flex: 1; min-width: 0; }
.sticky-book-price {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--olive);
  line-height: 1.1;
}
.sticky-book-lbl { font-size: 11px; color: var(--text-m); }
.sticky-book-btn {
  background: var(--olive);
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  font-family: var(--sans);
  letter-spacing: .3px;
  transition: .2s;
  flex-shrink: 0;
}
.sticky-book-btn:hover { background: var(--olive-dark, #3a4a1b); transform: scale(1.03); }
@media (min-width: 900px) { .sticky-book { display: none !important; } }

/* ── LIGHTBOX (Photo Gallery) ─────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.93);
  z-index: 600;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s;
}
.lightbox.show { display: flex; opacity: 1; animation: fadeUp 0.3s var(--ease); }
.lb-img {
  max-width: 94vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  animation: lbZoom 0.35s var(--spring);
}
@keyframes lbZoom {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.lb-close, .lb-nav {
  position: absolute;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s var(--spring);
  border-radius: 50%;
}
.lb-close { top: 20px; right: 20px; width: 44px; height: 44px; font-size: 22px; }
.lb-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 24px; }
.lb-nav.prev { left: 20px; }
.lb-nav.next { right: 20px; }
.lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,.25); transform: scale(1.1); }
.lb-nav.prev:hover, .lb-nav.next:hover { transform: translateY(-50%) scale(1.1); }
.lb-counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  background: rgba(0,0,0,.5);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}
.lb-thumbs {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  max-width: 90vw;
  overflow-x: auto;
  padding: 0 10px;
}
.lb-thumb {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.5;
  object-fit: cover;
  transition: 0.2s;
  flex-shrink: 0;
  border: 2px solid transparent;
}
.lb-thumb:hover { opacity: 0.8; }
.lb-thumb.active { opacity: 1; border-color: #fff; }

/* Room image click cue */
.dg-main, .dg-side img { cursor: zoom-in; position: relative; }
.dg-main::after {
  content: "🔍 Click to expand";
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0,0,0,.55);
  color: #fff;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
}
.dg-main:hover::after { opacity: 1; }

/* ── 404 PAGE ─────────────────────────────────────────────────── */
.page-404 {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
}
.page-404-inner { max-width: 500px; }
.page-404-num {
  font-family: var(--serif);
  font-size: 120px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--olive) 0%, #6b8a3e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  margin-bottom: 12px;
  animation: fadeUp 0.6s var(--ease);
}
.page-404-title {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 12px;
}
.page-404-txt { color: var(--text-m); margin-bottom: 28px; font-size: 15px; }

/* ── MICRO-ANIMATIONS ─────────────────────────────────────────── */
.rc { transition: transform 0.35s var(--ease), box-shadow 0.35s; }
.rc:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(74,93,35,.12); }
.rc-img img { transition: transform 0.6s var(--ease); }
.rc:hover .rc-img img { transform: scale(1.06); }
.ncta, .bk-go, .rc-btn, .chat-send-btn {
  transition: transform 0.2s var(--spring), box-shadow 0.2s, background 0.2s;
}
.ncta:hover:not(:disabled), .rc-btn:hover, .chat-send-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(74,93,35,.3);
}
.attr-card, .svc-card {
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
}
.attr-card:hover, .svc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(74,93,35,.1);
}
button:active:not(:disabled) { transform: scale(0.97); }

/* Scroll smooth */
html { scroll-behavior: smooth; }

/* ── GOOGLE MAPS EMBED ────────────────────────────────────────── */
.map-section {
  background: var(--olive-3);
  padding: 60px 0;
}
.map-wrap {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  border: 1px solid var(--olive-10);
  max-width: 1100px;
  margin: 0 auto;
}
.map-wrap iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}
.map-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
}
.map-btn {
  background: #fff;
  color: var(--olive);
  border: 1px solid var(--olive-10);
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: 0.2s;
  font-family: var(--sans);
}
.map-btn:hover {
  background: var(--olive);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(74,93,35,.2);
}
@media (max-width: 600px) {
  .map-wrap iframe { height: 320px; }
}

/* ── REVIEW AVATARS ──────────────────────────────────────────── */
.rev-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--olive), #6b8a3e);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
  margin-right: 12px;
  box-shadow: 0 2px 8px rgba(74,93,35,.2);
}
.rev-author {
  display: flex !important;
  align-items: center;
  gap: 0;
}
.rev-author .rev-author-txt {
  display: flex;
  flex-direction: column;
  text-align: left;
}

/* ── IMAGE LAZY LOADING (fade-in as it arrives) ────────────── */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
img[loading="lazy"].loaded,
img[loading="lazy"][src] {
  opacity: 1;
}

/* ── AVAILABILITY BADGE ON DATE PICKER ──────────────────────── */
.bk-availability {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: fadeUp 0.3s var(--ease);
}
.bk-availability.avail {
  background: #dcfce7;
  color: #15803d;
}
.bk-availability.unavail {
  background: #fee2e2;
  color: #dc2626;
}
.bk-availability .dot-ind {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.bk-availability.avail .dot-ind { background: #22c55e; animation: avBlink 1.5s ease-in-out infinite; }
.bk-availability.unavail .dot-ind { background: #ef4444; }
@keyframes avBlink {
  50% { opacity: 0.4; }
}

/* ════════════════════════════════════════════════════════════════
   CHECKOUT — Professional multi-step booking flow
   ══════════════════════════════════════════════════════════════ */
.co-modal {
  position: fixed;
  inset: 0;
  background: rgba(20, 25, 18, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  overflow: hidden;
  font-family: "Outfit", sans-serif;
}
.co-modal.show {
  opacity: 1;
  pointer-events: auto;
}
.co-sheet {
  background: #fff;
  width: 100%;
  max-width: 560px;
  max-height: 94vh;
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(30px);
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.25, 1);
  margin: 16px;
}
.co-modal.show .co-sheet { transform: translateY(0); }

.co-sheet-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid #f0eee8;
  background: #fff;
}
.co-back {
  width: 40px;
  height: 40px;
  border: none;
  background: #f5f2ec;
  border-radius: 50%;
  font-size: 18px;
  color: #4a5d23;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
.co-back:hover { background: #e8e2d5; transform: translateX(-2px); }
.co-head-title { flex: 1; min-width: 0; }
.co-head-ov {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #4a5d23;
}
.co-head-stp {
  font-family: "Playfair Display", serif;
  font-size: 17px;
  font-weight: 600;
  color: #1a1a1a;
  margin-top: 1px;
}
.co-head-spacer { width: 40px; flex-shrink: 0; }

.co-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px 12px;
  background: linear-gradient(to bottom, #faf9f6, #fff);
  border-bottom: 1px solid #f0eee8;
}
.co-prog-step {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.4;
  transition: opacity 0.25s;
  flex-shrink: 0;
}
.co-prog-step.active { opacity: 1; }
.co-prog-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e8e2d5;
  color: #8a9182;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.3s;
}
.co-prog-step.active .co-prog-dot {
  background: #4a5d23;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(74, 93, 35, 0.12);
}
.co-prog-step.done .co-prog-dot {
  background: #22c55e;
  color: #fff;
}
.co-prog-lbl {
  font-size: 12px;
  font-weight: 600;
  color: #5a5a5a;
  white-space: nowrap;
}
.co-prog-line {
  flex: 1;
  height: 2px;
  background: #e8e2d5;
  border-radius: 1px;
  min-width: 20px;
}

.co-hold {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: #fef3c7;
  color: #92400e;
  font-size: 12px;
  border-bottom: 1px solid #fde68a;
}
.co-hold-ic { font-size: 14px; }
.co-hold-time {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: #fff;
  padding: 2px 8px;
  border-radius: 6px;
  color: #4a5d23;
}
.co-hold.co-hold-expired {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}

.co-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px 0;
  -webkit-overflow-scrolling: touch;
}

.co-section {
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid #f0eee8;
}
.co-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}
.co-h3 {
  font-family: "Playfair Display", serif;
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 12px;
}
.co-lead { font-size: 13px; color: #5a5a5a; margin: 0 0 14px; line-height: 1.5; }

.co-room-card {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}
.co-room-img {
  width: 90px;
  height: 90px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.co-room-info { min-width: 0; }
.co-room-name {
  font-family: "Playfair Display", serif;
  font-size: 17px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 4px;
}
.co-room-meta { font-size: 12px; color: #8a9182; }

.co-trip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  background: #faf9f6;
  border-radius: 14px;
  padding: 14px;
}
.co-trip-item { text-align: center; padding: 6px 4px; }
.co-trip-item:not(:last-child) { border-right: 1px solid #e8e2d5; }
.co-trip-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #8a9182;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.co-trip-val { font-size: 14px; font-weight: 600; color: #1a1a1a; line-height: 1.2; }
.co-trip-sub { font-size: 10px; color: #8a9182; margin-top: 3px; }

.co-price {
  background: #fff;
  border: 1px solid #f0eee8;
  border-radius: 12px;
  padding: 14px 16px;
}
.co-price-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
  color: #5a5a5a;
}
.co-price-total {
  border-top: 1px solid #f0eee8;
  margin-top: 6px;
  padding-top: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
}

.co-payment-split {
  margin-top: 14px;
  background: linear-gradient(135deg, #f0f7e8, #e8f2d8);
  border: 1px solid #d4e4b8;
  border-radius: 12px;
  padding: 12px 14px;
}
.co-split-hd {
  font-size: 11px;
  font-weight: 700;
  color: #4a5d23;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.co-split-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 13px;
  color: #4a5d23;
  font-weight: 600;
}
.co-split-row strong { font-size: 14px; }
.co-split-row-muted { color: #8a9182; font-weight: 500; }
.co-split-row-muted strong { color: #8a9182; font-weight: 600; }

.co-field { margin-bottom: 14px; }
.co-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #4a5d23;
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}
.co-req { color: #dc2626; }
.co-opt { color: #8a9182; font-weight: 400; font-size: 11px; }
.co-field input,
.co-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #e8e2d5;
  border-radius: 10px;
  font-size: 15px;
  font-family: "Outfit", sans-serif;
  background: #fff;
  transition: all 0.2s;
  box-sizing: border-box;
  color: #1a1a1a;
}
.co-field textarea { resize: vertical; min-height: 72px; }
.co-field input:focus,
.co-field textarea:focus {
  outline: none;
  border-color: #4a5d23;
  box-shadow: 0 0 0 3px rgba(74, 93, 35, 0.1);
}
.co-hint { font-size: 11px; color: #8a9182; margin-top: 5px; }

.co-policy {
  display: flex;
  gap: 12px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  padding: 14px;
  border-bottom: 1px solid #bbf7d0;
}
.co-policy-ic {
  width: 32px;
  height: 32px;
  background: #22c55e;
  color: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 16px;
  flex-shrink: 0;
}
.co-policy-title {
  font-size: 13px;
  font-weight: 600;
  color: #166534;
  margin-bottom: 2px;
}
.co-policy-txt { font-size: 12px; color: #166534; opacity: 0.85; line-height: 1.5; }

/* PAYMENT METHOD SELECTION */
.co-methods {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.co-method {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: #fff;
  border: 1.5px solid #e8e2d5;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: "Outfit", sans-serif;
  text-align: left;
  width: 100%;
}
.co-method:hover {
  border-color: #c4cbb0;
  background: #faf9f6;
}
.co-method.selected {
  border-color: #4a5d23;
  background: #f0f7e8;
  box-shadow: 0 4px 14px rgba(74, 93, 35, 0.1);
}
.co-method-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
}
.co-mic-gcash {
  background: linear-gradient(135deg, #0070e0, #0051b8);
  font-family: "Playfair Display", serif;
  color: #fff;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: 20px;
}
.co-mic-qr {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: 22px;
}
.co-mic-cash {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-family: "Playfair Display", serif;
  font-size: 22px;
}
.co-method-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.co-method-name {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 8px;
}
.co-method-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: #4a5d23;
  color: #fff;
  padding: 2px 7px;
  border-radius: 10px;
  text-transform: uppercase;
}
.co-method-desc { font-size: 12px; color: #8a9182; line-height: 1.4; }
.co-method-radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #d4cdb6;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all 0.2s;
}
.co-method.selected .co-method-radio {
  border-color: #4a5d23;
  background: #4a5d23;
}
.co-method-radio-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transition: opacity 0.2s;
}
.co-method.selected .co-method-radio-dot { opacity: 1; }

.co-trust {
  display: flex;
  justify-content: space-around;
  gap: 10px;
  padding: 12px;
  background: #faf9f6;
  border-radius: 10px;
  border: 1px dashed #e8e2d5;
}
.co-trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #5a5a5a;
  font-weight: 500;
}

/* GCASH DIRECT / QR */
.co-pay-hero {
  background: linear-gradient(135deg, #0070e0, #0051b8);
  color: #fff;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 10px 28px rgba(0, 112, 224, 0.25);
  position: relative;
  overflow: hidden;
}
.co-pay-hero::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 60%;
  height: 180%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12), transparent 70%);
  pointer-events: none;
}
.co-pay-hero-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.co-pay-logo {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #fff;
  color: #0070e0;
  display: grid;
  place-items: center;
  font-family: "Playfair Display", serif;
  font-weight: 800;
  font-size: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.co-pay-hero-lbl {
  font-size: 11px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  margin-bottom: 3px;
}
.co-pay-hero-amt {
  font-family: "Playfair Display", serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.co-pay-big-btn {
  position: relative;
  z-index: 1;
  width: 100%;
  background: #fff;
  color: #0070e0;
  border: none;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
  font-family: "Outfit", sans-serif;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.co-pay-big-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); }
.co-pay-big-btn:active { transform: translateY(0); }
.co-pay-hint {
  position: relative;
  z-index: 1;
  font-size: 11px;
  text-align: center;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.85);
}

.co-pay-info {
  background: #faf9f6;
  border-radius: 12px;
  padding: 4px 14px;
  border: 1px solid #f0eee8;
}
.co-pay-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f0eee8;
  font-size: 13px;
  gap: 12px;
}
.co-pay-row:last-child { border-bottom: none; }
.co-pay-lbl { color: #8a9182; flex-shrink: 0; }
.co-pay-val { display: flex; align-items: center; gap: 8px; }
.co-pay-val strong { font-size: 14px; color: #1a1a1a; }
.co-pay-copy {
  background: #0070e0;
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.co-pay-copy:hover { background: #0051b8; }
.co-pay-copy.copied { background: #22c55e; }

/* QR-specific */
.co-qr-hero {
  background: linear-gradient(135deg, #faf9f6, #f5f2ec);
  border: 1px solid #f0eee8;
  border-radius: 16px;
  padding: 20px;
  text-align: center;
}
.co-qr-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.co-qr-hero-top .co-pay-hero-lbl { color: #8a9182; }
.co-qr-hero-top .co-pay-hero-amt { color: #4a5d23; font-size: 24px; }
.co-qr-badge {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 5px 10px;
  border-radius: 8px;
}
.co-qr-wrap {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  display: inline-block;
  margin-bottom: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}
.co-qr-img {
  width: 240px;
  height: 240px;
  display: block;
}
.co-qr-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  max-width: 320px;
  margin: 0 auto;
}
.co-qr-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #5a5a5a;
}
.co-qr-step span:first-child {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #4a5d23;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* PAY AT PROPERTY */
.co-cash-hero {
  text-align: center;
  padding: 24px 16px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-radius: 16px;
  margin-bottom: 14px;
  border: 1px solid #fcd34d;
}
.co-cash-ic { font-size: 44px; margin-bottom: 8px; }
.co-cash-title {
  font-family: "Playfair Display", serif;
  font-size: 20px;
  font-weight: 600;
  color: #92400e;
  margin: 0 0 6px;
}
.co-cash-sub { font-size: 13px; color: #92400e; margin: 0; line-height: 1.5; }
.co-cash-notice {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
}
.co-cash-notice-ic { font-size: 20px; flex-shrink: 0; }
.co-cash-notice-title {
  font-size: 13px;
  font-weight: 600;
  color: #1e40af;
  margin-bottom: 6px;
}
.co-cash-list {
  margin: 0;
  padding: 0 0 0 18px;
  font-size: 12px;
  color: #1e40af;
  line-height: 1.7;
}

/* FOOTER ACTIONS */
.co-footer {
  background: #fff;
  padding: 16px 22px 22px;
  border-top: 1px solid #f0eee8;
  position: sticky;
  bottom: 0;
  margin: 0 -22px -20px;
}
.co-next,
.co-submit {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #4a5d23, #6b8234);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s;
  font-family: "Outfit", sans-serif;
  letter-spacing: 0.3px;
  box-shadow: 0 6px 18px rgba(74, 93, 35, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.co-next:hover:not(:disabled),
.co-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(74, 93, 35, 0.32);
}
.co-next:disabled,
.co-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #c4cbb0;
  box-shadow: none;
}
.co-footer-note {
  text-align: center;
  font-size: 11px;
  color: #8a9182;
  margin-top: 10px;
  line-height: 1.5;
}

/* SUCCESS STATE */
.co-success {
  text-align: center;
  padding: 24px 10px;
}
.co-success-ic {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 40px;
  box-shadow: 0 12px 32px rgba(34, 197, 94, 0.35);
  animation: coSuccessPop 0.5s cubic-bezier(0.2, 1.4, 0.3, 1);
}
@keyframes coSuccessPop {
  0% { transform: scale(0); }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.co-success-title {
  font-family: "Playfair Display", serif;
  font-size: 26px;
  color: #1a1a1a;
  margin: 0 0 8px;
  font-weight: 600;
}
.co-success-sub {
  font-size: 14px;
  color: #5a5a5a;
  line-height: 1.5;
  margin: 0 0 20px;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}
.co-success-card {
  background: linear-gradient(135deg, #faf9f6, #f5f2ec);
  border: 1px solid #f0eee8;
  border-radius: 14px;
  padding: 20px;
  margin: 0 auto 18px;
  max-width: 380px;
  text-align: left;
}
.co-success-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #8a9182;
  text-transform: uppercase;
  text-align: center;
}
.co-success-ref {
  font-family: "Playfair Display", serif;
  font-size: 22px;
  font-weight: 700;
  color: #4a5d23;
  letter-spacing: 3px;
  text-align: center;
  margin: 4px 0 12px;
}
.co-success-divider {
  height: 1px;
  background: #e8e2d5;
  margin: 10px 0;
  position: relative;
}
.co-success-divider::before,
.co-success-divider::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  top: -8px;
}
.co-success-divider::before { left: -26px; }
.co-success-divider::after { right: -26px; }
.co-success-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 13px;
  color: #5a5a5a;
}
.co-success-row strong { color: #1a1a1a; font-weight: 600; }
.co-success-next {
  text-align: left;
  background: #faf9f6;
  border-radius: 12px;
  padding: 16px;
  margin: 0 auto 20px;
  max-width: 380px;
}
.co-success-next h4 {
  margin: 0 0 10px;
  font-size: 13px;
  color: #4a5d23;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.co-success-next ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: #5a5a5a;
  line-height: 2;
}

/* ADMIN — Payment status badges (kept for dashboard) */
.pay-badge-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 12px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.pay-badge-paid { background: #dcfce7; color: #166534; }
.pay-badge-pending { background: #fef3c7; color: #92400e; }
.pay-badge-unpaid { background: #f3f4f6; color: #6b7280; }

/* MOBILE — Full-screen sheet */
@media (max-width: 600px) {
  .co-modal { padding: 0; }
  .co-sheet {
    margin: 0;
    max-width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }
  .co-sheet-body { padding: 16px 18px 0; }
  .co-footer { padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px)); margin: 0 -18px -16px; }
  .co-prog-lbl { display: none; }
  .co-progress { padding: 12px 16px; }
  .co-head-stp { font-size: 15px; }
  .co-trip-grid { grid-template-columns: 1fr; gap: 0; padding: 4px 14px; }
  .co-trip-item:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid #e8e2d5;
  }
  .co-trip-item {
    text-align: left;
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 12px 0;
  }
  .co-trip-lbl { margin-bottom: 0; }
  .co-trip-sub { margin-top: 0; }
  .co-pay-hero-amt { font-size: 24px; }
  .co-qr-img { width: 200px; height: 200px; }
  .co-success-card,
  .co-success-next { max-width: 100%; }
}