/*
  Ultimate Escape Travels - v5
  Reverted back to the v3 layout/spacing, but kept the Ultimate Escape colour scheme:
  deep navy, ocean blue/teal, white and gold accents.
*/
:root{
  --navy:#06142b;
  --navy-2:#0a2340;
  --gold:#f6c72f;
  --gold-dark:#d8a51b;
  --teal:#0e7d86;
  --text:#122039;
  --muted:#667085;
  --line:#e5e8ef;
  --soft:#f6f8fb;
  --white:#fff;
  --danger:#d92d20;
  --success:#15803d;
  --warning:#b45309;
  --shadow:0 20px 50px rgba(6,20,43,.14);
  --radius:18px;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text);background:#fff}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer;border:0}
.container{width:min(1180px,calc(100% - 32px));margin:auto}.topbar{background:var(--navy);color:#fff;font-size:13px}.topbar .container{display:flex;justify-content:space-between;gap:18px;padding:9px 0;align-items:center}.topbar span{opacity:.9}.site-header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 6px 18px rgba(0,0,0,.04)}.nav{display:flex;align-items:center;justify-content:space-between;height:76px}.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.08em;color:var(--navy)}.brand-mark{width:52px;height:42px;border-radius:12px;background:linear-gradient(150deg,var(--gold),#ffef9e 42%,#0d7b86 43%,var(--navy-2));display:grid;place-items:center;color:#fff;font-size:24px;box-shadow:0 8px 18px rgba(6,20,43,.18)}.brand small{display:block;font-weight:700;letter-spacing:.22em;font-size:11px;color:#51607a}.nav-links{display:flex;gap:22px;align-items:center;font-size:14px;font-weight:700}.nav-links a.active,.nav-links a:hover{color:var(--gold-dark)}.nav-actions{display:flex;gap:10px;align-items:center}.mobile-toggle{display:none;background:var(--navy);color:#fff;border-radius:10px;padding:10px 12px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:12px 18px;font-weight:800;background:var(--navy);color:#fff;box-shadow:0 8px 16px rgba(6,20,43,.12)}.btn.gold{background:var(--gold);color:#111827}.btn.light{background:#fff;color:var(--navy);border:1px solid var(--line);box-shadow:none}.btn.danger{background:var(--danger)}.btn.full{width:100%}
/* Main home hero section */
.hero{position:relative;color:#fff;background:linear-gradient(100deg,rgba(6,20,43,.95),rgba(6,20,43,.48)),linear-gradient(135deg,#06446b 0%,#0e7d86 48%,#f6c72f 100%);min-height:480px;overflow:hidden}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 30%,rgba(255,255,255,.28),transparent 22%),radial-gradient(circle at 35% 75%,rgba(247,201,72,.2),transparent 20%);opacity:.9}.hero .container{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr .8fr;gap:38px;padding:68px 0 100px}.hero h1{font-size:clamp(42px,6vw,72px);line-height:.95;margin:0 0 12px}.script{font-family:cursive;color:var(--gold);font-weight:500}.hero p{font-size:18px;line-height:1.6;max-width:590px}.track-card,.glass-card{background:rgba(6,20,43,.86);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);backdrop-filter:blur(8px)}.track-card h3{margin-top:0}.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.field{display:flex;flex-direction:column;gap:7px}.field label{font-size:12px;font-weight:800;color:#344054}.field input,.field select,.field textarea{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff;color:var(--text);outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold-dark);box-shadow:0 0 0 4px rgba(247,201,72,.22)}
/* Flight/hotel/cruise/package search box */
.search-shell{margin-top:-68px;position:relative;z-index:3}.search-box{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.05);overflow:hidden}.tabs{display:flex;border-bottom:1px solid var(--line);background:#fff}.tab{flex:1;padding:18px;font-weight:900;background:#fff;color:var(--navy);border-right:1px solid var(--line)}.tab.active{background:var(--soft);color:var(--gold-dark)}.search-content{padding:18px}.quick-cats{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 14px;font-weight:800;color:var(--navy)}.chip.active,.chip:hover{background:var(--navy);color:#fff}.section{padding:58px 0}.section-title{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:22px}.section-title h2{font-size:32px;margin:0;color:var(--navy)}.section-title p{color:var(--muted);margin:8px 0 0}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
/* Service card strip */
.service-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}.service-card,.package-card,.panel,.auth-card,.order-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 34px rgba(6,20,43,.07)}.service-card{padding:22px}.service-icon{width:54px;height:54px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;margin-bottom:14px;font-size:24px}
/* Package/deal cards */
.package-card{overflow:hidden;position:relative}.package-img{height:170px;background:linear-gradient(135deg,#0b5590,#23b0a8 45%,#f7c948);position:relative}.package-img:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 30%,rgba(255,255,255,.5),transparent 18%),linear-gradient(0deg,rgba(6,20,43,.4),transparent)}.badge{display:inline-flex;align-items:center;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900;background:var(--gold);color:#111827}.package-card .badge{position:absolute;top:12px;left:12px;z-index:2}.package-body{padding:18px}.package-body h3{margin:0 0 6px;color:var(--navy)}.muted{color:var(--muted)}.price{font-size:24px;font-weight:900;color:var(--navy)}.split{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}.why{background:linear-gradient(100deg,rgba(6,20,43,.96),rgba(9,42,79,.9)),linear-gradient(135deg,#0f6d78,#f7c948);color:#fff;border-radius:var(--radius);padding:34px}.why-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
/* Footer */
.footer{background:#06142b;color:#fff;padding:46px 0 18px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:28px}.footer a,.footer p{color:rgba(255,255,255,.76)}.copyright{border-top:1px solid rgba(255,255,255,.12);margin-top:28px;padding-top:18px;font-size:13px;color:rgba(255,255,255,.65)}.page-hero{background:linear-gradient(110deg,var(--navy),var(--teal));color:#fff;padding:54px 0}.filters{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-top:-28px;position:relative;box-shadow:var(--shadow)}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden}.data-table th,.data-table td{padding:14px 12px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}.data-table th{background:var(--soft);color:#344054}.status{padding:6px 10px;border-radius:999px;font-weight:900;font-size:12px}.status.confirmed,.status.paid{background:#dcfce7;color:#166534}.status.pending,.status.processing{background:#fef3c7;color:#92400e}.status.cancelled,.status.failed{background:#fee2e2;color:#991b1b}.dashboard-layout{display:grid;grid-template-columns:240px 1fr;gap:24px}.side-menu{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;height:max-content;box-shadow:0 12px 34px rgba(6,20,43,.06)}.side-menu a{display:block;padding:12px;border-radius:12px;font-weight:800;color:var(--navy)}.side-menu a.active,.side-menu a:hover{background:var(--soft);color:var(--gold-dark)}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:0 12px 34px rgba(6,20,43,.06)}.stat strong{font-size:32px;color:var(--navy)}.notice{border-left:4px solid var(--gold);background:#fffbeb;padding:14px 16px;border-radius:12px;color:#713f12}.error{border-left-color:var(--danger);background:#fff1f2;color:#9f1239}.hidden{display:none!important}.modal-backdrop{position:fixed;inset:0;background:rgba(6,20,43,.64);display:grid;place-items:center;z-index:60}.modal{width:min(760px,calc(100% - 28px));max-height:92vh;overflow:auto;background:#fff;border-radius:22px;padding:24px;box-shadow:var(--shadow)}
@media(max-width:980px){.nav-links{display:none}.mobile-toggle{display:inline-flex}.nav.open .nav-links{display:flex;position:absolute;top:76px;left:0;right:0;flex-direction:column;background:#fff;padding:18px;border-bottom:1px solid var(--line)}.hero .container,.split,.dashboard-layout{grid-template-columns:1fr}.cards,.grid-3{grid-template-columns:repeat(2,1fr)}
/* Service card strip */
.service-grid{grid-template-columns:repeat(3,1fr)}.why-grid,.stat-grid{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.topbar{display:none}.nav{height:68px}.brand strong{font-size:14px}.hero .container{padding:46px 0 90px}.cards,.grid-2,.grid-3,.service-grid,.why-grid,.stat-grid,.form-grid,.footer-grid{grid-template-columns:1fr}.tabs{overflow:auto}.tab{min-width:130px}.section{padding:38px 0}.package-img{height:150px}}

/* ==========================================================
   V7 luxury polish
   These overrides keep the v3 layout but make it feel closer to
   the Ultimate Escape luxury navy/gold travel style.
   ========================================================== */
:root{
  --navy:#061225;
  --navy-2:#0b2442;
  --gold:#f7c948;
  --gold-dark:#c9961d;
  --teal:#0f7480;
  --cream:#fbf7ef;
  --text:#101b2f;
  --shadow:0 24px 60px rgba(6,18,37,.16);
}
body{
  background:linear-gradient(180deg,#ffffff 0%,#fbf7ef 70%,#ffffff 100%);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.topbar{background:#061225;border-bottom:1px solid rgba(247,201,72,.18)}
.site-header{background:rgba(255,255,255,.96);backdrop-filter:blur(10px)}
.brand strong{font-family:Georgia,'Times New Roman',serif;font-size:20px;letter-spacing:.12em}
.brand-mark{background:linear-gradient(140deg,#f7c948 0%,#f4b942 35%,#0f7480 36%,#061225 100%)}
/* =============================
   Real logo styling
   =============================
   The original uploaded logo is a wide/tall banner. The header uses a cropped
   wide web version in assets/logo-ultimate-escape-wide.png. Change the
   width/height below if you want the logo bigger or smaller. */
.brand.brand-image{gap:0;min-width:190px}
.brand-logo-img{display:block;width:300px;max-width:100%;height:75px;object-fit:contain;border-radius:8px}
.site-header .brand-logo-img{filter:drop-shadow(0 4px 10px rgba(6,20,43,.10))}
@media(max-width:860px){.brand-logo-img{width:230px;height:58px}.brand.brand-image{min-width:auto}}
@media(max-width:640px){.brand-logo-img{width:180px;height:45px}}

.nav-links a{position:relative;padding:8px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.hero{
  min-height:540px;
  background:
    linear-gradient(96deg,rgba(6,18,37,.96) 0%,rgba(6,18,37,.78) 45%,rgba(6,18,37,.38) 72%),
    radial-gradient(circle at 78% 20%,rgba(247,201,72,.38),transparent 18%),
    radial-gradient(circle at 78% 74%,rgba(15,116,128,.55),transparent 24%),
    linear-gradient(135deg,#08203f 0%,#0d5f75 52%,#f6c72f 140%);
}
.hero::after{
  content:"";
  position:absolute;
  right:-4%;
  bottom:-10%;
  width:58%;
  height:78%;
  background:
    radial-gradient(ellipse at 50% 78%,rgba(255,255,255,.96) 0 7%,transparent 8%),
    radial-gradient(ellipse at 58% 82%,rgba(247,201,72,.85) 0 8%,transparent 9%),
    radial-gradient(ellipse at 65% 72%,rgba(29,154,163,.85) 0 18%,transparent 19%),
    linear-gradient(155deg,rgba(255,255,255,.15),rgba(255,255,255,0));
  opacity:.5;
  border-radius:48% 0 0 0;
  pointer-events:none;
}
.hero h1{font-family:Georgia,'Times New Roman',serif;letter-spacing:-.045em;text-shadow:0 12px 28px rgba(0,0,0,.25)}
.script{font-family:'Brush Script MT','Segoe Script',cursive;color:var(--gold);display:block;font-size:.72em;letter-spacing:.02em;margin-top:6px}
.hero p{color:rgba(255,255,255,.93)}
.track-card,.glass-card{border:1px solid rgba(247,201,72,.22);box-shadow:0 28px 70px rgba(0,0,0,.28)}
.search-box{border-top:5px solid var(--gold);box-shadow:0 22px 60px rgba(6,18,37,.16)}
.tab.active{background:linear-gradient(180deg,#fff,#fff8df);color:var(--navy)}
.btn{transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(6,18,37,.18)}
.btn.gold{background:linear-gradient(180deg,#ffd95a,#f7c948);border:1px solid rgba(201,150,29,.45)}
.service-card,.package-card,.panel,.auth-card,.order-card,.stat{background:rgba(255,255,255,.96);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.service-card:hover,.package-card:hover,.panel:hover{transform:translateY(-3px);box-shadow:0 18px 48px rgba(6,18,37,.13);border-color:rgba(247,201,72,.48)}
.service-icon{background:linear-gradient(145deg,var(--navy),var(--teal));box-shadow:0 10px 24px rgba(6,18,37,.18)}
.package-img{background:linear-gradient(135deg,#0b5590,#23b0a8 45%,#f7c948)}
.package-img::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,0)),radial-gradient(circle at 18% 20%,rgba(247,201,72,.55),transparent 15%);z-index:0}
.package-img .badge{z-index:2}
.image-turkey{background:linear-gradient(135deg,#09213e 0%,#0e7582 48%,#efb13a 100%)}
.image-greece{background:linear-gradient(135deg,#173b75 0%,#2aa8c7 52%,#ffffff 120%)}
.image-spain{background:linear-gradient(135deg,#1a1f35 0%,#c65b2b 48%,#f7c948 100%)}
.image-jamaica{background:linear-gradient(135deg,#071b33 0%,#047857 48%,#f7c948 100%)}
.image-dubai{background:linear-gradient(135deg,#071b33 0%,#9a6a2f 48%,#f7c948 100%)}
.image-caribbean{background:linear-gradient(135deg,#08203f 0%,#0ea5a4 50%,#f7c948 115%)}
.price{color:#061225}
.why{background:linear-gradient(110deg,rgba(6,18,37,.98),rgba(9,42,79,.92)),radial-gradient(circle at 85% 10%,rgba(247,201,72,.24),transparent 24%)}
.footer{background:#061225;border-top:4px solid var(--gold)}
.page-hero{background:linear-gradient(110deg,#061225 0%,#0b2442 48%,#0f7480 100%);border-bottom:4px solid var(--gold)}
.filters{border-top:4px solid var(--gold)}
.data-table th{background:#fff8df;color:#061225}
.modal{border-top:5px solid var(--gold)}
@media(max-width:980px){.hero::after{opacity:.22;width:90%}}


/* ==============================
   Booking / guest checkout page
   ============================== */
.booking-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 13px 14px;
  font: inherit;
  resize: vertical;
  background: #fff;
}
.booking-summary ul {
  margin: 12px 0 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.8;
}
.booking-summary hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 18px 0;
}
.checkout-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
}
.notice.success {
  border-color: rgba(24, 130, 75, .25);
  background: rgba(24, 130, 75, .08);
}

/* ==========================================================
   V11 home page redesign
   Goal: make the home page match the luxury mockup style:
   beach hero image, overlapping search box, white feature strip,
   featured packages, deals and popular picks.
   ========================================================== */
.home-page {
  background: #fff;
}

/* Hero uses an included SVG beach asset so it works in XAMPP/offline. */
.home-hero {
  min-height: 410px;
  background:
    linear-gradient(90deg, rgba(6,18,37,.82) 0%, rgba(6,18,37,.48) 44%, rgba(6,18,37,.18) 100%),
    url("../assets/hero-beach.svg") center / cover no-repeat;
  overflow: visible;
}
.home-hero::before,
.home-hero::after {
  display: none;
}
.home-hero .hero-inner {
  min-height: 410px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) 430px;
  align-items: center;
  gap: 42px;
  padding: 44px 0 86px;
}
.hero-copy {
  max-width: 690px;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--gold-dark);
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: 12px;
  font-weight: 900;
}
.hero-eyebrow {
  color: #fff3b0;
}
.home-hero h1 {
  margin: 0 0 14px;
  color: #fff;
  font-family: Inter, Segoe UI, Arial, sans-serif;
  font-size: clamp(42px, 5vw, 72px);
  letter-spacing: -.04em;
  line-height: .94;
  text-shadow: 0 12px 28px rgba(0,0,0,.28);
}
.home-hero .script {
  display: block;
  margin-top: 8px;
  font-family: 'Brush Script MT','Segoe Script',cursive;
  color: var(--gold);
  font-size: .72em;
  font-weight: 500;
  letter-spacing: .02em;
}
.home-hero p {
  max-width: 560px;
  margin: 0 0 24px;
  color: rgba(255,255,255,.96);
  font-size: 18px;
  line-height: 1.55;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hero-track-card {
  background: rgba(6,18,37,.92);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  box-shadow: 0 22px 54px rgba(0,0,0,.24);
  padding: 28px;
}
.hero-track-card .field {
  margin-bottom: 12px;
}
.hero-track-card input {
  border-radius: 6px;
}

/* Search box sits over the bottom of the hero, just like the reference image. */
.search-shell {
  margin-top: -56px;
  position: relative;
  z-index: 5;
}
.search-box {
  border-top: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 22px 54px rgba(6,18,37,.17);
}
.tabs {
  background: rgba(255,255,255,.96);
}
.tab {
  flex: 0 0 170px;
  text-align: left;
  padding: 18px 22px;
  border-right: 1px solid var(--line);
  font-size: 14px;
}
.tab.active {
  background: #fff;
  color: var(--navy);
  box-shadow: inset 0 -3px 0 var(--gold);
}
.search-content {
  padding: 18px;
}
.home-search-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1.35fr 170px;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.home-search-grid .field {
  gap: 5px;
  padding: 13px 14px;
  border-right: 1px solid var(--line);
  background: #fff;
}
.home-search-grid .field label {
  color: #667085;
  font-size: 12px;
}
.home-search-grid input,
.home-search-grid select {
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  background: transparent;
  font-size: 13px;
}
.home-search-grid input:focus,
.home-search-grid select:focus {
  box-shadow: none;
}
.search-btn {
  height: 100%;
  border-radius: 0;
  box-shadow: none;
}

/* White service strip directly below the search box. */
.home-services-strip {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 30px rgba(6,18,37,.06);
}
.home-service-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  align-items: center;
  min-height: 108px;
  padding: 18px;
  border-right: 1px solid var(--line);
}
.home-service-item:last-child {
  border-right: 0;
}
.home-service-item .service-icon {
  width: 44px;
  height: 44px;
  margin: 0;
  font-size: 20px;
}
.home-service-item h3 {
  margin: 0 0 4px;
  color: var(--navy);
  font-size: 15px;
}
.home-service-item p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

/* Browse-by-category block. */
.quick-escape-section {
  padding-bottom: 34px;
}
.center-title {
  justify-content: center;
  text-align: center;
}
.center-title p {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.escape-cats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.escape-cat {
  display: flex;
  min-height: 138px;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.96)),
    radial-gradient(circle at 80% 18%, rgba(247,201,72,.38), transparent 30%);
  box-shadow: 0 12px 30px rgba(6,18,37,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.escape-cat:hover {
  transform: translateY(-3px);
  border-color: rgba(247,201,72,.7);
  box-shadow: 0 18px 46px rgba(6,18,37,.12);
}
.escape-cat strong {
  color: var(--navy);
  font-size: 18px;
}
.escape-cat span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}
.escape-cat small {
  color: var(--gold-dark);
  font-weight: 900;
}

/* Package sections on the home page. */
.home-dynamic-packages > .section {
  padding-top: 26px;
  padding-bottom: 26px;
}
.home-package-section .section-title {
  margin-bottom: 18px;
}
.home-package-section .cards {
  grid-template-columns: repeat(4, 1fr);
}
.home-package-section .package-card {
  border-radius: 12px;
  overflow: hidden;
}
.home-package-section .package-img {
  height: 154px;
}
.home-package-section .package-body {
  padding: 16px;
}
.home-package-section .package-body h3 {
  font-size: 18px;
}
.home-package-section .package-body > p:nth-of-type(2) {
  min-height: 44px;
}

.home-why {
  border-radius: 12px;
  background:
    linear-gradient(100deg, rgba(6,18,37,.93), rgba(8,55,83,.86)),
    url("../assets/hero-beach.svg") center 58% / cover no-repeat;
}
.home-why h2 {
  text-align: center;
  margin-top: 0;
}
.home-why .why-grid h3,
.home-why .why-grid p {
  color: #fff;
}
.home-why .why-grid p {
  opacity: .86;
}

/* Footer adjusted to match the reference home page: white card, navy text,
   payment badges and social circles. */
.footer {
  background: #fff;
  color: var(--text);
  border-top: 1px solid var(--line);
  padding: 0 0 18px;
}
.footer .container {
  padding-top: 0;
}
.footer-grid {
  margin-top: 0;
  display: grid;
  grid-template-columns: 1.35fr .75fr .9fr 1.1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 34px rgba(6,18,37,.05);
}
.footer-grid > div {
  padding: 26px 28px;
  border-right: 1px solid var(--line);
}
.footer-grid > div:last-child {
  border-right: 0;
}
.footer h3,
.footer h4 {
  color: var(--navy);
  margin-top: 0;
}
.footer a,
.footer p {
  color: #344054;
  margin: 6px 0;
}
.newsletter-row {
  display: flex;
  gap: 0;
  margin-top: 20px;
}
.newsletter-row input {
  min-width: 0;
  flex: 1;
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  padding: 12px;
}
.newsletter-row .btn {
  border-radius: 0 8px 8px 0;
  box-shadow: none;
}
.payment-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 18px;
}
.payment-badges span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 8px;
  color: #0b2b63;
  background: #f8fafc;
  font-size: 12px;
  font-weight: 900;
}
.social-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.social-row span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-weight: 900;
}
.copyright {
  border-top: 0;
  margin-top: 16px;
  padding-top: 0;
  text-align: center;
  color: #667085;
}

@media (max-width: 1120px) {
  .home-search-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .search-btn {
    min-height: 58px;
  }
  .home-services-strip,
  .escape-cats {
    grid-template-columns: repeat(3, 1fr);
  }
  .home-service-item:nth-child(3) {
    border-right: 0;
  }
  .home-package-section .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 880px) {
  .home-hero .hero-inner {
    grid-template-columns: 1fr;
    padding-top: 38px;
  }
  .hero-track-card {
    max-width: 520px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-grid > div:nth-child(2) {
    border-right: 0;
  }
  .footer-grid > div {
    border-bottom: 1px solid var(--line);
  }
}
@media (max-width: 640px) {
  .home-hero {
    min-height: auto;
  }
  .home-hero .hero-inner {
    padding-bottom: 78px;
  }
  .home-search-grid,
  .home-services-strip,
  .escape-cats,
  .home-package-section .cards,
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .home-search-grid .field {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .home-service-item {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .home-service-item:last-child {
    border-bottom: 0;
  }
  .footer-grid > div,
  .footer-grid > div:nth-child(2) {
    border-right: 0;
  }
  .tab {
    flex: 0 0 145px;
  }
}

/* ==========================================================
   V12 booking page passenger form improvements
   Adult/child forms now match how many people are travelling.
   The first adult is the lead passenger and gets billing fields.
   ========================================================== */
:root {
  --border: var(--line);
}
.booking-layout {
  align-items: start;
}
.booking-panel {
  overflow: hidden;
}
.booking-form h3 {
  margin: 0 0 8px;
  color: var(--navy);
}
.booking-form .field-help {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.contact-grid,
.passenger-grid,
.billing-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.passengers-box {
  margin-top: 24px;
}
.passenger-card,
.billing-card {
  margin: 18px 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, #fff 0%, #fffdf6 100%);
  box-shadow: 0 10px 28px rgba(6,18,37,.06);
}
.passenger-card legend,
.billing-card legend {
  padding: 0 10px;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: -.02em;
}
.passenger-card.lead-passenger {
  border-color: rgba(247, 201, 72, .72);
  box-shadow: 0 14px 36px rgba(247,201,72,.15);
}
.passenger-note {
  margin: 0 0 14px;
  font-size: 14px;
}
.passenger-card input[readonly] {
  background: #f8fafc;
  color: #344054;
  cursor: not-allowed;
}
.billing-card {
  background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
  border-color: rgba(15,116,128,.24);
}
.booking-summary {
  position: sticky;
  top: 96px;
}
.notice.success {
  color: #14532d;
  background: #ecfdf3;
  border-left-color: #16a34a;
}
@media (max-width: 980px) {
  .booking-summary {
    position: static;
  }
}
@media (max-width: 640px) {
  .contact-grid,
  .passenger-grid,
  .billing-grid {
    grid-template-columns: 1fr;
  }
  .passenger-card,
  .billing-card {
    padding: 14px;
  }
}

/* ==========================================================
   V13 booking layout polish
   Room-style guest selector + lead passenger/contact/billing flow.
   ========================================================== */
.booking-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.booking-login-note {
  margin: 0;
}
.guest-selector-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  padding: 18px;
  box-shadow: 0 10px 28px rgba(6,18,37,.06);
}
.guest-selector-card h3 {
  margin: 0 0 14px;
  color: var(--navy);
}
.room-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  margin: 14px 0;
  background: #fff;
}
.room-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
}
.room-header h4 {
  margin: 0;
  color: var(--navy);
}
.room-remove {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ffe4e6;
  color: #e11d48;
}
.guest-counter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 18px;
}
.guest-counter-head {
  display: flex;
  gap: 6px;
  align-items: baseline;
  margin-bottom: 8px;
}
.guest-counter-head strong {
  color: var(--navy);
  font-size: 18px;
}
.guest-counter-head span {
  color: var(--muted);
  font-size: 13px;
}
.counter-control {
  display: grid;
  grid-template-columns: 48px minmax(58px, 1fr) 48px;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  max-width: 210px;
  background: #fff;
}
.counter-btn,
.counter-value {
  height: 42px;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--navy);
  font-weight: 800;
}
.counter-btn {
  font-size: 20px;
  border-right: 1px solid var(--line);
}
.counter-btn:last-child {
  border-right: 0;
  border-left: 1px solid var(--line);
}
.counter-btn:disabled {
  color: #98a2b3;
  background: #f8fafc;
  cursor: not-allowed;
}
.child-age-panel {
  padding: 0 18px 18px;
}
.child-age-panel h4 {
  margin: 4px 0 12px;
  color: var(--navy);
  line-height: 1.2;
}
.child-age-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.child-age-field label {
  display: block;
  margin-bottom: 7px;
  font-weight: 800;
  color: var(--navy);
}
.child-age-field select,
.lux-select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 10px 12px;
  color: var(--navy);
  outline: none;
}
.child-age-field select:focus,
.lux-select:focus {
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 4px rgba(247,201,72,.22);
}
.room-add-btn {
  width: 100%;
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--navy);
  box-shadow: none;
}
.guest-total-line {
  margin: 12px 0 0;
  color: var(--muted);
  font-weight: 700;
}
.lead-contact-block {
  margin: -4px 0 4px;
  padding: 18px;
  border: 1px solid rgba(15,116,128,.24);
  border-radius: 18px;
  background: linear-gradient(180deg,#f8fbff 0%,#fff 100%);
}
.lead-contact-block h4 {
  margin: 0 0 6px;
  color: var(--navy);
}
.other-passengers-box {
  border-top: 1px dashed var(--line);
  padding-top: 12px;
}
.empty-passenger-note {
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 14px;
  color: var(--muted);
  background: #f8fafc;
}
.booking-panel .field select,
.booking-panel .field input,
.booking-panel .field textarea {
  border-radius: 10px;
}
.search-field select {
  appearance: auto;
  cursor: pointer;
}
@media (max-width: 760px) {
  .guest-counter-grid,
  .child-age-grid {
    grid-template-columns: 1fr;
  }
  .counter-control {
    max-width: none;
  }
}

/* ==========================================================
   V14 booking guest selector dropdown
   The Room/Adults/Children panel from V13 is unchanged, but
   it now opens from a compact search-field style button.
   ========================================================== */
.booking-panel {
  overflow: visible;
}
.guest-picker {
  position: relative;
  max-width: 420px;
  z-index: 25;
}
.guest-picker-toggle {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  box-shadow: 0 10px 28px rgba(6,18,37,.08);
  font-weight: 800;
  text-align: left;
}
.guest-picker-toggle:hover,
.guest-picker.open .guest-picker-toggle {
  border-color: rgba(247,201,72,.85);
  box-shadow: 0 12px 34px rgba(6,18,37,.12), 0 0 0 4px rgba(247,201,72,.18);
}
.guest-picker-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--teal);
  font-size: 21px;
  flex: 0 0 auto;
}
.guest-picker-summary {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.guest-picker-chevron {
  flex: 0 0 auto;
  color: var(--navy);
  font-size: 18px;
  transform: rotate(0deg);
  transition: transform .18s ease;
}
.guest-picker.open .guest-picker-chevron {
  transform: rotate(180deg);
}
.guest-picker-popover {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  width: min(620px, calc(100vw - 34px));
  max-height: 72vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(6,18,37,.22);
  z-index: 1000;
}
.guest-picker.open .guest-picker-popover {
  display: block;
}
.guest-picker-popover .guest-selector-card {
  margin: 0;
  border: 0;
  border-radius: 16px;
  box-shadow: none;
}
@media (max-width: 760px) {
  .guest-picker {
    max-width: 100%;
  }
  .guest-picker-popover {
    width: calc(100vw - 34px);
    max-height: 70vh;
  }
}

/* ==========================================================
   V15 booking tweaks requested
   - No logged-in message on booking page
   - Package travel date is a select list of available dates
   - Adult/child counters stop at 12
   - Cancel button closes the guest selector dropdown
   ========================================================== */
.booking-date-grid {
  grid-template-columns: minmax(220px, 360px);
}
.travel-date-select {
  min-height: 52px;
  font-weight: 800;
}
.guest-picker-actions {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.guest-picker-cancel {
  width: 100%;
  background: #eef2f6;
  color: var(--navy);
  border: 1px solid #eef2f6;
  box-shadow: none;
}
.guest-picker-cancel:hover {
  background: #e5e7eb;
}
.counter-btn:disabled:last-child {
  border-left: 1px solid var(--line);
}
@media (max-width: 760px) {
  .booking-date-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   V18 PPS payment modal
   - Shows a branded payment review pop-up after order creation
   - Actual card page is still PPS Hosted Payment Page/redirect
   ========================================================== */
.payment-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(8, 18, 34, .64);
  backdrop-filter: blur(6px);
}
.payment-modal-card {
  width: min(720px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 22px;
  border: 1px solid rgba(212, 175, 55, .28);
  box-shadow: 0 34px 90px rgba(0,0,0,.32);
  padding: 26px;
}
.payment-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.payment-modal-head h2 {
  margin: 8px 0 0;
  color: var(--navy);
  font-size: clamp(26px, 4vw, 38px);
}
.modal-x {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #f8fafc;
  color: var(--navy);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.payment-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.payment-review-grid > div {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #fbf8ef);
  padding: 14px;
}
.payment-review-grid small {
  display: block;
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}
.payment-review-grid strong {
  color: var(--navy);
  font-size: 17px;
}
.payment-modal-message {
  padding: 12px 14px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid var(--line);
}
.payment-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
}
.payment-modal-actions .btn:disabled {
  opacity: .65;
  cursor: wait;
}
@media (max-width: 640px) {
  .payment-modal-card { padding: 20px; }
  .payment-review-grid { grid-template-columns: 1fr; }
  .payment-modal-actions .btn { width: 100%; justify-content: center; }
}

/* ==========================================================
   V19 Package image carousel
   - Used on package cards, package detail modal and booking page.
   - Admin uploaded images come from uploads/packages/ via package_images table.
========================================================== */
.package-carousel{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  background:linear-gradient(135deg,#0b5590,#23b0a8 45%,#f7c948);
  min-height:170px;
}
.package-card .package-carousel{border-radius:var(--radius) var(--radius) 0 0;min-height:190px}
.package-carousel-img,
.package-carousel-fallback{width:100%;height:100%;min-height:inherit;display:block;object-fit:cover}
.package-carousel-fallback{height:190px}
.package-carousel-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,20,43,.08),rgba(6,20,43,.52));pointer-events:none}
.package-carousel-badge{position:absolute;top:12px;left:12px;z-index:3}
.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.88);color:var(--navy);box-shadow:0 10px 24px rgba(6,20,43,.22);font-size:28px;line-height:1;display:grid;place-items:center;cursor:pointer;transition:background .18s ease,transform .18s ease}
.carousel-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.05)}
.carousel-prev{left:12px}.carousel-next{right:12px}
.carousel-count{position:absolute;right:12px;bottom:12px;z-index:4;background:rgba(6,20,43,.78);color:#fff;font-size:12px;font-weight:900;border-radius:999px;padding:5px 9px}
.carousel-dots{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:4;display:flex;gap:6px}
.carousel-dot{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.58);cursor:pointer}
.carousel-dot.active{width:22px;background:var(--gold)}
.modal-package-carousel{min-height:310px;margin-bottom:18px;border-radius:20px}
.modal-package-carousel .package-carousel-img,
.modal-package-carousel .package-carousel-fallback{height:310px}
.package-detail-modal{padding:0;overflow:hidden}
.package-detail-modal>.section-title,
.package-detail-modal>p,
.package-detail-modal>.grid-2{padding-left:24px;padding-right:24px}
.package-detail-modal>.grid-2{padding-bottom:24px}
.modal-title-row{margin-top:4px}
.booking-summary-carousel{min-height:220px;margin:-4px 0 18px;border-radius:18px}
.booking-summary-carousel .package-carousel-img,
.booking-summary-carousel .package-carousel-fallback{height:220px}
@media(max-width:640px){
  .package-card .package-carousel{min-height:165px}
  .modal-package-carousel,.modal-package-carousel .package-carousel-img,.modal-package-carousel .package-carousel-fallback{height:230px;min-height:230px}
  .booking-summary-carousel,.booking-summary-carousel .package-carousel-img,.booking-summary-carousel .package-carousel-fallback{height:180px;min-height:180px}
}

/* V24 customer profile modal and dashboard profile actions */
.side-menu-button{
  width:100%;
  display:block;
  padding:12px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:var(--navy);
  font-weight:800;
  text-align:left;
  cursor:pointer;
  font:inherit;
}
.side-menu-button:hover{background:var(--soft);color:var(--gold-dark)}
.profile-summary-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 20px;
  margin-bottom:18px;
  box-shadow:0 12px 34px rgba(6,20,43,.06);
}
.profile-summary-card h2{margin:0 0 4px}
.profile-modal{max-width:620px}
.modal-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
}
.modal-title-row h2{margin:0}
.modal-close{
  border:0;
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--soft);
  color:var(--navy);
  font-size:22px;
  font-weight:900;
  cursor:pointer;
}
.modal-close:hover{background:var(--gold);color:var(--navy)}
.profile-view-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin:18px 0 22px;
}
.profile-view-grid div{
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--soft);
  padding:16px;
}
.profile-view-grid span{
  display:block;
  color:var(--muted);
  font-size:13px;
  font-weight:800;
  margin-bottom:6px;
}
.profile-view-grid strong{
  color:var(--navy);
  overflow-wrap:anywhere;
}
.modal-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}
.modal-message{margin:0 0 14px;color:var(--muted)}
@media(max-width:720px){
  .profile-summary-card{align-items:flex-start;flex-direction:column}
  .profile-view-grid{grid-template-columns:1fr}
}

/* V27: compact payment action buttons in booking tables */
.btn.small{padding:8px 12px;border-radius:10px;font-size:13px;box-shadow:none;white-space:nowrap}

/* V28 login/register button spacing
   These links used to sit in one line of plain text, so they looked joined together.
   They are now separate button-style actions with proper spacing. */
.auth-links{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  align-items:center;
  margin-top:18px;
}
.auth-links .auth-link{
  min-width:155px;
  padding:11px 16px;
  box-shadow:none;
  border:1px solid rgba(6,18,37,.12);
}
.auth-links .auth-link:hover{
  border-color:var(--gold-dark);
  background:#fff8df;
  color:var(--navy);
}
@media(max-width:520px){
  .auth-links{flex-direction:column;align-items:stretch}
  .auth-links .auth-link{width:100%}
}

/* v32 cleanup: professional coming-soon service pages for Flights, Hotels and Cruises. */
.coming-soon-hero {
  padding: 72px 0;
  background:
    linear-gradient(110deg, rgba(6,18,37,.96), rgba(9,42,79,.88)),
    linear-gradient(135deg, #0f7480, #f7c948);
}
.coming-soon-wrap {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 28px;
  align-items: center;
}
.coming-soon-copy h1 {
  max-width: 760px;
  margin: 10px 0 12px;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.02;
}
.coming-soon-copy p {
  max-width: 680px;
  color: rgba(255,255,255,.86);
  font-size: 18px;
  line-height: 1.7;
}
.coming-soon-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.coming-soon-card {
  background: rgba(255,255,255,.98);
  color: var(--navy);
  border: 1px solid rgba(247,201,72,.46);
  border-radius: 24px;
  padding: 28px;
  box-shadow: var(--shadow);
}
.coming-badge {
  display: inline-flex;
  border-radius: 999px;
  padding: 8px 12px;
  background: var(--gold);
  color: var(--navy);
  font-weight: 900;
  font-size: 13px;
  margin-bottom: 12px;
}
.coming-soon-card h2 { margin: 0 0 10px; }
.coming-soon-card ul { margin: 18px 0 0; padding-left: 20px; }
.coming-soon-card li { margin: 9px 0; font-weight: 700; }
.btn.disabled { opacity: .92; cursor: pointer; }
@media(max-width: 900px) {
  .coming-soon-wrap { grid-template-columns: 1fr; }
}

/* V33 package photo polish
   - Keeps carousel arrow icons centered in their round buttons.
   - Adds full-screen package photo viewer when a package image is clicked. */
.carousel-arrow{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 0 3px 0;
  line-height:1;
  font-family:Georgia, 'Times New Roman', serif;
  font-weight:900;
  text-align:center;
}
.clickable-photo{cursor:zoom-in;}
.image-viewer-backdrop{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(6,20,43,.86);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.image-viewer-modal{
  position:relative;
  width:min(1100px,96vw);
  max-height:92vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.image-viewer-img{
  max-width:100%;
  max-height:88vh;
  object-fit:contain;
  border-radius:20px;
  box-shadow:0 28px 80px rgba(0,0,0,.45);
  background:#fff;
}
.image-viewer-close,
.image-viewer-arrow{
  position:absolute;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.95);
  color:var(--navy);
  box-shadow:0 16px 42px rgba(0,0,0,.28);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  z-index:2;
}
.image-viewer-close{
  top:-18px;
  right:-18px;
  width:48px;
  height:48px;
  font-size:28px;
  line-height:1;
}
.image-viewer-arrow{
  top:50%;
  transform:translateY(-50%);
  width:54px;
  height:54px;
  font-size:42px;
  font-family:Georgia, 'Times New Roman', serif;
  padding:0 0 5px 0;
}
.image-viewer-prev{left:-18px;}
.image-viewer-next{right:-18px;}
.image-viewer-count{
  position:absolute;
  bottom:-18px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(6,20,43,.9);
  color:#fff;
  border-radius:999px;
  padding:7px 12px;
  font-size:13px;
  font-weight:900;
}
@media(max-width:700px){
  .image-viewer-backdrop{padding:14px;}
  .image-viewer-close{top:8px;right:8px;width:44px;height:44px;}
  .image-viewer-arrow{width:44px;height:44px;font-size:34px;}
  .image-viewer-prev{left:8px;}
  .image-viewer-next{right:8px;}
  .image-viewer-count{bottom:8px;}
}

/* V34 richer package inclusion display */
.included-panel{padding:18px!important;}
.included-panel h3{margin-top:0;}
.included-list{display:grid;gap:12px;margin-top:14px;}
.included-row{display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:start;padding:13px;border:1px solid rgba(148,163,184,.25);border-radius:16px;background:linear-gradient(180deg,#fff,#fbfcff);}
.included-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--gold),#fff2ad);color:var(--navy);font-size:20px;font-weight:900;box-shadow:0 10px 20px rgba(247,201,72,.18);}
.included-row strong{display:block;color:var(--navy);font-size:15px;margin-bottom:4px;}
.included-row p{margin:0;color:#334155;line-height:1.5;}
@media(max-width:560px){.included-row{grid-template-columns:36px 1fr;padding:11px}.included-icon{width:36px;height:36px;border-radius:12px;font-size:17px}}

/* V35 package detail modal scroll fix
   The package details/included information can be long. The modal now scrolls
   inside the popup instead of cutting off content at the bottom of the screen. */
.modal-backdrop{
  overflow-y:auto;
  padding:24px 14px;
  align-items:start;
  place-items:start center;
}
.package-detail-modal{
  max-height:calc(100vh - 48px);
  overflow-y:auto !important;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scroll-behavior:smooth;
}
.package-detail-modal .grid-2{
  align-items:start;
}
.package-detail-modal .included-panel{
  max-height:none;
}
.package-detail-modal .included-list{
  max-height:none;
}
@media(max-width:700px){
  .modal-backdrop{padding:12px 8px;}
  .package-detail-modal{max-height:calc(100vh - 24px);}
}

/* V36 package details layout update
   - Booking action now sits beside the package title/date.
   - What’s included now gets the full bottom width for longer descriptions. */
.package-modal-title-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,320px);
  gap:20px;
  align-items:start;
}
.package-modal-title-copy h2{
  margin:8px 0 6px;
}
.package-modal-top-actions{
  display:grid;
  gap:12px;
  justify-items:stretch;
}
.package-modal-top-actions>.btn.light{
  justify-self:end;
  min-width:92px;
}
.package-book-box{
  padding:18px!important;
  margin:0;
  background:linear-gradient(180deg,#fff,#fffdf5);
}
.package-book-box h3{
  margin:0 0 14px;
  color:var(--navy);
}
.package-modal-summary{
  padding-left:24px;
  padding-right:24px;
  margin-top:0;
}
.package-inclusions-full{
  padding:0 24px 24px;
}
.package-inclusions-full .included-panel{
  width:100%;
}
.package-inclusions-full .included-list{
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
}
.package-inclusions-full .included-row{
  min-height:100%;
}
@media(max-width:820px){
  .package-modal-title-row{
    grid-template-columns:1fr;
  }
  .package-modal-top-actions>.btn.light{
    justify-self:start;
  }
  .package-inclusions-full .included-list{
    grid-template-columns:1fr;
  }
}
@media(max-width:560px){
  .package-detail-modal>.section-title,
  .package-detail-modal>p,
  .package-modal-summary,
  .package-inclusions-full{
    padding-left:16px;
    padding-right:16px;
  }
}

/* V37 package modal price
   Shows the package starting price in the top booking box after the V36 layout change. */
.package-modal-price{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin:0 0 14px;
  padding:12px 14px;
  border:1px solid rgba(148,163,184,.28);
  border-radius:16px;
  background:linear-gradient(180deg,#ffffff,#fff9df);
}
.package-modal-price span,
.package-modal-price small{
  color:#64748b;
  font-weight:800;
}
.package-modal-price strong{
  color:var(--navy);
  font-size:26px;
  line-height:1;
}
@media(max-width:560px){
  .package-modal-price strong{font-size:22px;}
}


/* V38 package detail/header and booking dropdown cleanup
   - Package summary now sits beside the booking box under the title/meta.
   - Booking guest dropdown stays behind the sticky header when scrolling.
   - Footer quick links no longer expose the admin link to customers. */
.package-top-summary{
  margin:12px 0 0;
  max-width:720px;
  color:#26364f;
  font-weight:700;
  line-height:1.55;
}
.package-modal-title-copy{
  align-self:center;
}
@media(max-width:820px){
  .package-top-summary{margin-top:10px;}
}
/* Keep the open Adults/Children dropdown under the sticky website header while scrolling. */
.guest-picker{z-index:5;}
.guest-picker-popover{z-index:15;}
.site-header{z-index:20;}

/* V39 package detail title alignment
   Keep the package title/meta at the top of the details modal so it lines up
   naturally with the Close button. The summary stays underneath the title,
   and the booking box stays on the right. */
.package-modal-title-copy{
  align-self:start;
}
.package-modal-title-row{
  align-items:start;
}

/* ==========================================================
   V44 booking review step
   Shows destination, selected package date and guest counts before
   the booking reference is created, with a clear return/edit option.
   ========================================================== */
.booking-review-card {
  display: grid;
  gap: 12px;
}
.booking-review-card h3 {
  margin: 0;
  color: var(--navy);
}
.booking-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.booking-review-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
}
.booking-review-item span {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  font-weight: 900;
  margin-bottom: 4px;
}
.booking-review-item strong {
  color: var(--navy);
  font-size: 15px;
}
.booking-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}
.booking-confirm-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
}
.booking-confirm-summary span {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--muted);
}
.booking-confirm-summary strong {
  color: var(--navy);
}
@media (max-width: 640px) {
  .booking-review-grid {
    grid-template-columns: 1fr;
  }
}


/* V46 booking guest dropdown polish
   Makes the adults/children picker more compact and professional while keeping
   the same room selector behaviour. */
.guest-picker {
  max-width: 430px;
}
.guest-picker-popover {
  width: min(520px, calc(100vw - 28px));
  max-height: min(68vh, 640px);
  border-radius: 20px;
  border-color: rgba(13, 40, 71, .14);
  box-shadow: 0 22px 60px rgba(6,18,37,.18);
}
.guest-picker-popover .guest-selector-card {
  padding: 18px;
  border-radius: 20px;
}
.guest-selector-card h3 {
  font-size: 20px;
  letter-spacing: -.02em;
}
.guest-picker-popover .room-card {
  border-radius: 16px;
  margin: 12px 0;
}
.guest-picker-popover .guest-counter-grid {
  gap: 14px;
  padding: 16px;
}
.guest-picker-popover .counter-control {
  max-width: 190px;
  border-radius: 8px;
}
.guest-picker-cancel {
  min-height: 50px;
  border-radius: 12px;
  font-weight: 900;
}
@media (max-width: 760px) {
  .guest-picker-popover {
    width: calc(100vw - 24px);
    max-height: 68vh;
  }
}

/* V54 booking price and booking-detail polish */
.booking-price-box{
  display:grid;
  gap:4px;
  border:1px solid rgba(247,201,72,.55);
  border-radius:16px;
  background:linear-gradient(135deg,#fff8df,#ffffff);
  padding:14px 16px;
  margin:4px 0 14px;
}
.booking-price-label{
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:900;
}
.booking-price-total{
  color:var(--navy);
  font-size:24px;
  line-height:1.1;
}
.booking-price-breakdown{color:var(--muted);font-weight:800}
.ref-link{
  border:0;
  background:transparent;
  color:var(--teal);
  font:inherit;
  font-weight:900;
  text-decoration:underline;
  cursor:pointer;
  padding:0;
}
.ref-link:hover{color:var(--navy)}
.booking-detail-modal{max-width:820px}
.booking-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:16px 0 20px;
}
.booking-detail-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr));margin:14px 0}
.booking-detail-line,
.booking-detail-grid.compact>div{
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--soft);
  padding:13px 14px;
}
.booking-detail-line span,
.booking-detail-grid.compact span{
  display:block;
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:900;
  margin-bottom:4px;
}
.booking-detail-line strong,
.booking-detail-grid.compact strong{color:var(--navy);overflow-wrap:anywhere}
.passenger-detail-list{display:grid;gap:10px;margin:10px 0 18px}
.passenger-detail-card{
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  padding:12px 14px;
  display:grid;
  gap:2px;
}
.passenger-detail-card span,.passenger-detail-card small{color:var(--muted);font-weight:800}
.booking-address-card{
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  padding:14px 16px;
  margin-top:10px;
}
@media(max-width:720px){.booking-detail-grid,.booking-detail-grid.compact{grid-template-columns:1fr}.booking-price-total{font-size:21px}}

/* ==========================================================
   V59 mobile/footer polish
   Fixes footer stacking on phones and removes cramped fields.
   ========================================================== */
@media (max-width: 700px) {
  .footer {
    padding: 22px 0 18px;
  }
  .footer .container {
    width: min(100% - 24px, var(--container));
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1fr !important;
    border-radius: 18px;
    overflow: hidden;
    margin-top: 0;
  }
  .footer-grid > div,
  .footer-grid > div:nth-child(2),
  .footer-grid > div:last-child {
    border-right: 0 !important;
    border-bottom: 1px solid var(--line);
    padding: 22px 20px;
  }
  .footer-grid > div:last-child {
    border-bottom: 0;
  }
  .footer h3,
  .footer h4 {
    margin-bottom: 10px;
  }
  .footer a {
    display: inline-block;
    padding: 4px 0;
  }
  .newsletter-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 14px;
  }
  .newsletter-row input,
  .newsletter-row .btn {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
  }
  .newsletter-row .btn {
    justify-content: center;
  }
  .payment-badges,
  .social-row {
    justify-content: flex-start;
  }
  .copyright {
    font-size: 12px;
    padding: 0 10px;
  }
}

@media (max-width: 420px) {
  .footer-grid > div,
  .footer-grid > div:nth-child(2),
  .footer-grid > div:last-child {
    padding: 20px 16px;
  }
  .payment-badges span {
    font-size: 11px;
    padding: 5px 7px;
  }
}