/* ================================================================
   HEAVENLY HORIZON TOURS — shared.css  (Fixed & Complete)
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400;1,600&family=Raleway:wght@300;400;500;600;700&display=swap&display=swap');

:root {
  --navy:       #0B1F3A;
  --navy-mid:   #0E2847;
  --navy-light: #163357;
  --gold:       #C9A84C;
  --gold-light: #E8C97A;
  --gold-pale:  #F5E6C0;
  --cream:      #FAF7F0;
  --white:      #FFFFFF;
  --mist:       #EEF2F7;
  --text:       #0B1F3A;
  --text2:      #4A5568;
  --text3:      #8A9BB0;
  --border:     rgba(201,168,76,.2);
  --border2:    rgba(201,168,76,.4);
  --sh-sm:      0 2px 12px rgba(11,31,58,.08);
  --sh-md:      0 8px 32px rgba(11,31,58,.12);
  --sh-lg:      0 20px 60px rgba(11,31,58,.18);
  --sh-xl:      0 32px 80px rgba(11,31,58,.24);
  --sh-gold:    0 8px 32px rgba(201,168,76,.25);
  --r-sm:  6px; --r-md: 12px; --r-lg: 20px; --r-xl: 32px;
  --ease: all .32s cubic-bezier(.4,0,.2,1);
  --nav-h: 76px;   /* ONE nav height variable used everywhere */
}

/* ── RESET ───────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; }
body {
  font-family:'Raleway',sans-serif;
  background:var(--cream);
  color:var(--text);
  overflow-x:hidden;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { display:block; max-width:100%; height:auto; }
button { cursor:pointer; border:none; font-family:inherit; }
input,select,textarea { font-family:inherit; box-sizing:border-box; }

/* ── LOADER ──────────────────────────────────────────────── */
#ldr {
  position:fixed; inset:0; z-index:9999;
  background:var(--navy);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  transition:opacity .6s, visibility .6s;
}
#ldr.out { opacity:0; visibility:hidden; pointer-events:none; }
.ldr-name {
  font-family:'Playfair Display',serif;
  font-size:clamp(20px,5vw,26px);
  font-weight:700; color:var(--white);
  letter-spacing:1px; text-align:center; padding:0 20px;
}
.ldr-name span { color:var(--gold); }
.ldr-tag {
  font-size:clamp(9px,2.5vw,10px); color:rgba(255,255,255,.45);
  letter-spacing:3px; text-transform:uppercase;
  margin:6px 0 24px; text-align:center; padding:0 20px;
}
.ldr-bar { width:min(180px,60vw); height:2px; background:rgba(255,255,255,.1); border-radius:99px; overflow:hidden; }
.ldr-fill {
  height:100%; width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold-light));
  border-radius:99px; animation:ldrF 1.6s ease-in-out forwards;
}
@keyframes ldrF { to { width:100%; } }

/* ── NAVBAR ──────────────────────────────────────────────── */
#nav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  height:var(--nav-h);
  background:rgba(11,31,58,.97);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:height .3s ease, box-shadow .3s ease;
}
#nav.sc {
  height:62px;
  box-shadow:0 2px 20px rgba(0,0,0,.28);
}
.nav-in {
  max-width:1220px; margin:0 auto; padding:0 clamp(14px,3vw,24px);
  display:flex; align-items:center; justify-content:space-between;
  height:100%;
}
/* Brand */
.brand { display:flex; flex-direction:column; z-index:901; position:relative; text-decoration:none; }
.brand-name {
  font-family:'Playfair Display',serif;
  font-size:clamp(17px,2.5vw,21px);
  font-weight:700; color:var(--white); letter-spacing:1px; line-height:1.1;
}
.brand-name span { color:var(--gold); }
.brand-sub { font-size:9px; color:rgba(255,255,255,.38); letter-spacing:2.5px; text-transform:uppercase; }
/* Nav links */
.nav-links {
  display:flex; align-items:center; gap:2px;
  list-style:none; margin:0; padding:0;
}
.nav-links a {
  font-size:12px; font-weight:600; letter-spacing:.5px;
  color:rgba(255,255,255,.78);
  padding:7px 13px; border-radius:99px;
  transition:var(--ease); display:block; white-space:nowrap;
}
.nav-links a:hover, .nav-links a.active {
  color:var(--white); background:rgba(255,255,255,.1);
}
.nav-cta {
  background:var(--gold) !important; color:var(--navy) !important;
  font-weight:700 !important; padding:8px 20px !important;
  border-radius:99px !important;
  box-shadow:0 3px 12px rgba(201,168,76,.4);
}
.nav-cta:hover { background:var(--gold-light) !important; transform:translateY(-1px) !important; }
/* Hamburger */
.hbg {
  display:none; flex-direction:column; justify-content:center;
  align-items:center; gap:5px;
  width:40px; height:40px;
  cursor:pointer; background:none; border:none;
  padding:4px; z-index:901; position:relative;
}
.hbg span {
  display:block; width:22px; height:2px;
  background:var(--white); border-radius:2px;
  transition:transform .3s, opacity .3s;
  pointer-events:none;
}
.hbg.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hbg.open span:nth-child(2) { opacity:0; }
.hbg.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Raleway',sans-serif; font-weight:700;
  font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  padding:12px 24px; border-radius:99px;
  transition:var(--ease); cursor:pointer; border:none;
  white-space:nowrap; text-decoration:none;
}
.btn-gold { background:linear-gradient(135deg,var(--gold),#b8922e); color:var(--navy); box-shadow:var(--sh-gold); }
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 14px 40px rgba(201,168,76,.45); }
.btn-out  { background:transparent; color:var(--white); border:1.5px solid rgba(255,255,255,.4); }
.btn-out:hover { background:rgba(255,255,255,.1); border-color:var(--gold); color:var(--gold-light); transform:translateY(-2px); }
.btn-nav  { background:var(--navy); color:var(--white); box-shadow:var(--sh-md); }
.btn-nav:hover { background:var(--navy-light); transform:translateY(-2px); }
.btn-og   { background:transparent; color:var(--gold); border:1.5px solid var(--border2); }
.btn-og:hover { background:rgba(201,168,76,.08); transform:translateY(-2px); }
.btn-wa   { background:#25D366; color:var(--white); box-shadow:0 4px 16px rgba(37,211,102,.3); }
.btn-wa:hover { background:#1eba57; transform:translateY(-2px); }
.btn-wh   { background:var(--white); color:var(--navy); box-shadow:0 4px 20px rgba(0,0,0,.15); }
.btn-wh:hover { transform:translateY(-2px); }
.btn-sm   { padding:9px 18px; font-size:10px; }

/* ── LAYOUT ──────────────────────────────────────────────── */
.wrap    { max-width:1220px; margin:0 auto; padding:0 clamp(14px,4vw,28px); }
.sec     { padding:clamp(56px,10vw,96px) 0; }
.sec-sm  { padding:clamp(40px,7vw,64px) 0; }

/* ── LABELS / TITLES ─────────────────────────────────────── */
.lbl {
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; font-weight:700; letter-spacing:3px;
  text-transform:uppercase; color:var(--gold); margin-bottom:12px;
}
.lbl::before,.lbl::after {
  content:''; display:block; width:24px; height:1px;
  background:var(--gold); flex-shrink:0;
}
.ttl {
  font-family:'Playfair Display',serif;
  font-size:clamp(26px,5vw,52px);
  font-weight:700; color:var(--navy);
  line-height:1.15; margin-bottom:14px;
}
.ttl em  { font-style:italic; color:var(--gold); }
.ttl.lt  { color:var(--white); }
.ttl.lt em { color:var(--gold-light); }
.sub     { font-size:clamp(13px,2vw,15px); color:var(--text2); max-width:520px; line-height:1.8; }
.sub.lt  { color:rgba(255,255,255,.62); }
.sh      { margin-bottom:clamp(32px,6vw,52px); }
.sh.c    { text-align:center; }
.sh.c .lbl { justify-content:center; }
.sh.c .sub { margin:0 auto; }

/* ── REVEAL ──────────────────────────────────────────────── */
.rv  { opacity:0; transform:translateY(28px);  transition:opacity .65s cubic-bezier(.4,0,.2,1),transform .65s cubic-bezier(.4,0,.2,1); }
.rvl { opacity:0; transform:translateX(-28px); transition:opacity .65s cubic-bezier(.4,0,.2,1),transform .65s cubic-bezier(.4,0,.2,1); }
.rvr { opacity:0; transform:translateX(28px);  transition:opacity .65s cubic-bezier(.4,0,.2,1),transform .65s cubic-bezier(.4,0,.2,1); }
.rv.in,.rvl.in,.rvr.in { opacity:1; transform:translate(0); }

/* ── PAGE HERO (inner pages) ─────────────────────────────── */
.ph {
  position:relative; height:clamp(220px,45vw,360px);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; margin-top:var(--nav-h);
}
.ph-bg  { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ph-ov  { position:absolute; inset:0; background:linear-gradient(135deg,rgba(11,31,58,.88),rgba(11,31,58,.62)); }
.ph-cnt { position:relative; z-index:2; text-align:center; padding:0 clamp(16px,5vw,40px); width:100%; }
.bc {
  display:flex; align-items:center; gap:7px;
  justify-content:center; margin-bottom:10px;
  font-size:clamp(10px,2vw,12px); color:rgba(255,255,255,.5); flex-wrap:wrap;
}
.bc a    { color:rgba(255,255,255,.62); transition:var(--ease); }
.bc a:hover { color:var(--gold-light); }
.bc i    { font-size:8px; }
.ph-cnt h1 {
  font-family:'Playfair Display',serif;
  font-size:clamp(24px,6vw,58px); font-weight:700;
  color:var(--white); line-height:1.1; margin-bottom:10px;
}
.btn-out {
  background-color: #28a745; /* green */
  color: #fff; /* white text */
  border: 1px solid #28a745;
}

.btn-out:hover {
  background-color: #218838; /* darker green on hover */
  border-color: #218838;
  color: #fff;
}
.ph-cnt h1 em { font-style:italic; color:var(--gold-light); }
.ph-cnt p { font-size:clamp(12px,2.5vw,14px); color:rgba(255,255,255,.7); max-width:460px; margin:0 auto; }

/* ── FORM FIELDS ─────────────────────────────────────────── */
.fg { margin-bottom:14px; }
.fg label { display:block; font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--text3); margin-bottom:6px; }
.fg input,.fg select,.fg textarea {
  width:100%; padding:11px 14px;
  border:1.5px solid rgba(11,31,58,.14);
  border-radius:var(--r-md); font-size:14px; color:var(--text);
  background:var(--white); transition:var(--ease); outline:none;
  -webkit-appearance:none; appearance:none;
}
.fg input:focus,.fg select:focus,.fg textarea:focus {
  border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,168,76,.12);
}
.fg textarea { resize:vertical; }
.fr { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* ── FILTER PILLS ────────────────────────────────────────── */
.pills { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:clamp(24px,5vw,38px); }
.pill {
  font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  padding:7px 16px; border-radius:99px; border:1.5px solid var(--border2);
  color:var(--text2); background:var(--white); cursor:pointer; transition:var(--ease);
  font-family:'Raleway',sans-serif;
}
.pill:hover,.pill.on { background:var(--navy); color:var(--gold-light); border-color:var(--navy); box-shadow:var(--sh-md); }

/* ── TOAST ───────────────────────────────────────────────── */
.toast {
  position:fixed; bottom:86px; left:50%;
  transform:translateX(-50%) translateY(16px);
  background:var(--navy); color:var(--white);
  padding:11px 22px; border-radius:99px;
  font-size:12px; font-weight:500; z-index:9990;
  opacity:0; pointer-events:none; transition:all .38s;
  border:1px solid rgba(201,168,76,.28);
  box-shadow:var(--sh-lg); white-space:nowrap;
  max-width:calc(100vw - 32px); text-align:center;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.ok   { background:#0a2218; border-color:rgba(37,211,102,.35); }
.toast.err  { background:#1a0808; border-color:rgba(239,68,68,.35); }

/* ── WA FLOAT ────────────────────────────────────────────── */
.wa {
  position:fixed; bottom:24px; right:24px; z-index:990;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:26px; box-shadow:0 6px 26px rgba(37,211,102,.45);
  transition:var(--ease); animation:wap 3s ease-in-out infinite;
  text-decoration:none;
}
.wa:hover { transform:scale(1.1); }
.wa-tip {
  position:absolute; right:66px; top:50%; transform:translateY(-50%);
  background:var(--navy); color:var(--white);
  font-size:11px; font-weight:600; padding:6px 12px; border-radius:99px;
  white-space:nowrap; opacity:0; pointer-events:none; transition:var(--ease);
  border:1px solid var(--border);
}
.wa:hover .wa-tip { opacity:1; }
@keyframes wap {
  0%,100%{ box-shadow:0 6px 26px rgba(37,211,102,.45),0 0 0 0 rgba(37,211,102,.4); }
  50%    { box-shadow:0 6px 26px rgba(37,211,102,.45),0 0 0 14px rgba(37,211,102,0); }
}

/* ── CALL FLOAT ──────────────────────────────────────────── */
.call-float {
  position:fixed; bottom:92px; right:24px; z-index:991;
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg,var(--navy),#163357); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; box-shadow:0 6px 22px rgba(11,31,58,.45);
  text-decoration:none; transition:var(--ease);
  border:2px solid rgba(201,168,76,.35);
}
.call-float:hover { transform:scale(1.1); background:var(--gold); color:var(--navy); border-color:var(--gold); box-shadow:0 8px 28px rgba(201,168,76,.45); }
.call-tip {
  position:absolute; right:66px; top:50%; transform:translateY(-50%);
  background:var(--navy); color:var(--white);
  font-size:11px; font-weight:600; padding:6px 13px; border-radius:99px;
  white-space:nowrap; opacity:0; pointer-events:none; transition:var(--ease);
  border:1px solid var(--border);
}
.call-float:hover .call-tip { opacity:1; }

/* ── SCROLL TOP ──────────────────────────────────────────── */
.sct {
  position:fixed; bottom:24px; left:24px; z-index:990;
  width:44px; height:44px; border-radius:50%;
  background:var(--navy); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; box-shadow:var(--sh-md);
  transition:var(--ease); opacity:0; pointer-events:none;
  cursor:pointer; border:none;
}
.sct.show { opacity:1; pointer-events:auto; }
.sct:hover { background:var(--gold); transform:translateY(-2px); }

/* ── STICKY BOOK BAR ─────────────────────────────────────── */
.sbb {
  position:fixed; bottom:0; left:0; right:0; z-index:800;
  background:rgba(11,31,58,.97); backdrop-filter:blur(20px);
  border-top:1px solid rgba(201,168,76,.2);
  padding:10px clamp(14px,4vw,26px);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  transform:translateY(100%); transition:transform .4s ease;
  box-shadow:0 -4px 24px rgba(0,0,0,.28);
}
.sbb.show { transform:translateY(0); }
.sbb-txt strong { display:block; font-family:'Playfair Display',serif; font-size:clamp(13px,3vw,15px); color:var(--gold-light); }
.sbb-txt span   { font-size:clamp(10px,2vw,11px); color:rgba(255,255,255,.5); }
.sbb-btns { display:flex; gap:8px; flex-shrink:0; }

/* ── FORM SUCCESS ────────────────────────────────────────── */
.fs { text-align:center; padding:36px 16px; }
.fs i { font-size:48px; color:#25D366; display:block; margin-bottom:12px; }
.fs h3 { font-family:'Playfair Display',serif; font-size:clamp(20px,4vw,24px); color:var(--navy); margin-bottom:8px; }
.fs p  { color:var(--text2); font-size:14px; margin-bottom:20px; }

/* ── FOOTER ──────────────────────────────────────────────── */
.footer { background:var(--navy); color:rgba(255,255,255,.65); }
.ft { padding:clamp(40px,8vw,68px) 0 clamp(28px,5vw,40px); border-bottom:1px solid rgba(255,255,255,.08); }
.fg4 { display:grid; grid-template-columns:1.7fr 1fr 1fr 1.2fr; gap:40px; }
.f-name { font-family:'Playfair Display',serif; font-size:clamp(18px,4vw,21px); font-weight:700; color:var(--white); }
.f-name span { color:var(--gold); }
.f-sub  { font-size:9px; color:var(--gold-light); letter-spacing:2.5px; text-transform:uppercase; margin-top:2px; }
.f-about { font-size:13px; line-height:1.8; margin:13px 0 16px; max-width:250px; color:rgba(255,255,255,.44); }
.mmt {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(201,168,76,.1); border:1px solid var(--border);
  color:var(--gold-light); font-size:11px; font-weight:600;
  padding:6px 14px; border-radius:99px; transition:var(--ease);
}
.mmt:hover { background:rgba(201,168,76,.2); }
.f-soc { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.f-soc a {
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:rgba(255,255,255,.55); transition:var(--ease);
}
.f-soc a:hover { background:var(--gold); color:var(--navy); border-color:var(--gold); transform:translateY(-2px); }
.f-col h4 { font-size:10px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--white); margin-bottom:16px; }
.f-col ul { display:flex; flex-direction:column; gap:9px; }
.f-col ul li a { font-size:13px; color:rgba(255,255,255,.46); transition:var(--ease); }
.f-col ul li a:hover { color:var(--gold-light); padding-left:4px; }
.fc-item { display:flex; align-items:flex-start; gap:9px; font-size:13px; color:rgba(255,255,255,.46); margin-bottom:9px; }
.fc-item i { color:var(--gold); margin-top:3px; flex-shrink:0; font-size:13px; }
.fc-item a { color:rgba(255,255,255,.46); transition:var(--ease); word-break:break-word; }
.fc-item a:hover { color:var(--gold-light); }
.fb { padding:16px 0; text-align:center; font-size:clamp(11px,2.5vw,12px); color:rgba(255,255,255,.3); }
.fb a { color:var(--gold-light); }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .fg4 { grid-template-columns:1fr 1fr; gap:28px; }
}
@media(max-width:768px){
  :root { --nav-h:64px; }
  .hbg { display:flex !important; }
  .nav-links {
    position:fixed !important; top:0 !important; left:0 !important;
    width:100% !important; height:100vh !important;
    background:rgba(11,31,58,.98) !important;
    backdrop-filter:blur(24px) !important;
    -webkit-backdrop-filter:blur(24px) !important;
    flex-direction:column !important; align-items:center !important;
    justify-content:center !important; gap:0 !important;
    z-index:900 !important; opacity:0 !important;
    pointer-events:none !important; transition:opacity .28s ease !important;
    padding:80px 0 40px !important; overflow-y:auto !important;
  }
  .nav-links.open { opacity:1 !important; pointer-events:auto !important; }
  .nav-links li { width:100% !important; text-align:center !important; }
  .nav-links li a {
    font-size:15px !important; padding:15px 24px !important;
    display:block !important; border-radius:0 !important;
    border-bottom:1px solid rgba(255,255,255,.07) !important;
  }
  .nav-cta {
    margin:16px auto 0 !important; width:calc(100% - 40px) !important;
    display:block !important; text-align:center !important;
    border-radius:99px !important; padding:13px 20px !important;
    font-size:13px !important;
  }
  .sec    { padding:clamp(40px,8vw,60px) 0; }
  .sec-sm { padding:clamp(28px,6vw,44px) 0; }
  .fr     { grid-template-columns:1fr !important; gap:0 !important; }
  .fg4    { grid-template-columns:1fr 1fr; gap:22px; }
  .sbb    { flex-direction:column; text-align:center; padding:12px 16px; gap:8px; }
  .sbb-btns { justify-content:center; }
  .wa         { width:50px; height:50px; font-size:23px; bottom:18px; right:18px; }
  .wa-tip     { display:none; }
  .call-float { width:50px; height:50px; font-size:19px; bottom:80px; right:18px; }
  .call-tip   { display:none; }
  .sct { left:18px; bottom:18px; width:40px; height:40px; }
}
@media(max-width:480px){
  .fg4  { grid-template-columns:1fr; }
  .btn  { padding:10px 18px; font-size:10px; }
  .btn-sm { padding:8px 15px; font-size:9px; }
  .pills  { gap:6px; }
  .pill   { padding:6px 12px; font-size:10px; }
  .call-float { bottom:78px; right:14px; }
}