/* ==========================================================================
   Customize Your Package
   Navy #082B5C · teal #0095A9 · teal-dark #00707F · tint #F0F7F9 · border #E6ECF2
   Sora headings, Manrope body. No package total is ever rendered.
   ========================================================================== */

.tgp-hp { position:absolute !important; left:-9999px; }

/* ----------------------------------------------------------------- hero */
.tgp-hero {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#082B5C 0%,#0C3A73 55%,#00707F 100%);
  color:#fff; padding:64px 20px 68px; text-align:center;
}
.tgp-hero::after {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(680px 260px at 15% 0%, rgba(0,149,169,.35), transparent 70%),
    radial-gradient(520px 220px at 88% 100%, rgba(127,216,226,.22), transparent 70%);
  pointer-events:none;
}
.tgp-hero-in { position:relative; z-index:1; max-width:820px; margin:0 auto; }
.tgp-hero-kicker {
  font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:#7FD8E2; margin:0 0 12px;
}
.tgp-hero h1 {
  font-family:'Sora',sans-serif; font-size:52px; line-height:1.1; font-weight:700;
  margin:0 0 12px; letter-spacing:-.02em;
}
.tgp-hero p { font-size:18px; line-height:1.6; color:rgba(255,255,255,.86); margin:0 auto 22px; max-width:620px; }
.tgp-trust { display:flex; flex-wrap:wrap; gap:9px; justify-content:center; }
.tgp-trust span {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px; border-radius:999px;
  background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.2);
  font-size:14px; font-weight:600; color:#fff; white-space:nowrap;
}
.tgp-trust span::before { content:"✓"; color:#7FD8E2; font-weight:700; }

/* ---------------------------------------------------------------- layout */
.tgp-wrap { width:min(1320px,92vw); max-width:none; margin:0 auto; padding:38px 0 76px; }
.tgp-grid { display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:30px; align-items:start; }
.tgp-main { min-width:0; }

.tgp-card {
  background:#fff; border:1px solid #E6ECF2; border-radius:22px;
  box-shadow:0 1px 2px rgba(8,43,92,.04), 0 12px 34px rgba(8,43,92,.07);
  padding:40px 44px 34px;
}

/* -------------------------------------------------------------- progress */
.tgp-timeline { display:flex; align-items:flex-start; margin:0 0 30px; }
.tgp-tl-step { flex:1; position:relative; text-align:center; min-width:0; }
.tgp-tl-step::before {
  content:""; position:absolute; top:14px; left:-50%; width:100%; height:2px;
  background:#E6ECF2; z-index:0;
}
.tgp-tl-step:first-child::before { display:none; }
.tgp-tl-step.is-done::before, .tgp-tl-step.is-current::before { background:#0095A9; }
.tgp-tl-dot {
  position:relative; z-index:1; width:29px; height:29px; margin:0 auto 8px;
  border-radius:50%; background:#fff; border:2px solid #E6ECF2;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:#8A97AC;
  transition:background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.tgp-tl-step.is-done .tgp-tl-dot { background:#0095A9; border-color:#0095A9; color:#fff; }
.tgp-tl-step.is-current .tgp-tl-dot {
  background:#082B5C; border-color:#082B5C; color:#fff; transform:scale(1.12);
  box-shadow:0 0 0 4px rgba(8,43,92,.10);
}
.tgp-tl-label { font-size:11.5px; font-weight:600; color:#8A97AC; line-height:1.3; padding:0 3px; }
.tgp-tl-step.is-current .tgp-tl-label { color:#082B5C; font-weight:700; }
.tgp-tl-step.is-done .tgp-tl-label { color:#5A6B85; }

.tgp-mprog { display:none; margin:0 0 22px; }
.tgp-mprog-top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px; }
.tgp-mprog-step { font-size:11.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:#0095A9; }
.tgp-mprog-name { font-family:'Sora',sans-serif; font-size:16px; font-weight:700; color:#082B5C; }
.tgp-mprog-rail { height:5px; border-radius:999px; background:#E6ECF2; overflow:hidden; }
.tgp-mprog-fill { height:100%; border-radius:999px; background:linear-gradient(90deg,#0095A9,#00707F); transition:width .35s cubic-bezier(.4,0,.2,1); }

/* ----------------------------------------------------------------- steps */
.tgp-step { display:none; animation:tgpIn .32s cubic-bezier(.4,0,.2,1); }
.tgp-step.is-active { display:block; }
@keyframes tgpIn { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .tgp-step { animation:none; } }

.tgp-step h2 {
  font-family:'Sora',sans-serif; font-size:30px; font-weight:700; color:#082B5C;
  margin:0 0 6px; letter-spacing:-.01em;
}
.tgp-step-sub { font-size:16px; color:#5A6B85; margin:0 0 24px; line-height:1.55; }
.tgp-field { margin-bottom:22px; }
.tgp-label { display:block; font-size:14px; font-weight:700; color:#082B5C; margin-bottom:8px; }
.tgp-hint { font-size:12px; color:#8A97AC; margin-top:5px; }

/* --------------------------------------------------------- option cards */
.tgp-opts { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.tgp-opt {
  position:relative; text-align:left; cursor:pointer;
  border:1.5px solid #E6ECF2; border-radius:15px; background:#fff;
  padding:20px 18px; min-height:104px; font-family:'Manrope',sans-serif;
  transition:border-color .2s ease, background .2s ease, transform .18s ease, box-shadow .2s ease;
}
.tgp-opt:hover { border-color:#7FD8E2; transform:translateY(-2px); box-shadow:0 8px 20px rgba(8,43,92,.07); }
.tgp-opt:focus-visible { outline:2px solid #0095A9; outline-offset:2px; }
.tgp-opt.is-sel {
  border-color:#0095A9; background:#F0F7F9;
  box-shadow:0 0 0 1px #0095A9 inset, 0 8px 20px rgba(0,149,169,.11);
}
/* Title and description are separate block elements with real spacing, so
   they can never render as "DubaiThe classic city break". */
.tgp-opt-ico  { display:block; font-size:23px; line-height:1; margin-bottom:11px; }
.tgp-opt-name { display:block; font-size:16px; font-weight:700; color:#082B5C; line-height:1.3; margin-bottom:6px; }
.tgp-opt-desc { display:block; font-size:13px; color:#5A6B85; line-height:1.4; margin:0; }
.tgp-opt.is-sel::after {
  content:"✓"; position:absolute; top:11px; right:12px;
  width:19px; height:19px; border-radius:50%; background:#0095A9; color:#fff;
  font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center;
}

/* --------------------------------------------------------------- inputs */
.tgp-in, .tgp-sel, .tgp-ta {
  width:100%; padding:14px 16px; min-height:52px; border:1.5px solid #E6ECF2; border-radius:13px;
  background:#fff; font-family:'Manrope',sans-serif; font-size:15.5px; color:#082B5C;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.tgp-in:focus, .tgp-sel:focus, .tgp-ta:focus {
  outline:none; border-color:#0095A9; box-shadow:0 0 0 3px rgba(0,149,169,.12);
}
.tgp-ta { min-height:112px; resize:vertical; line-height:1.6; }
.tgp-two { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.tgp-err { border-color:#D26A6A !important; }
.tgp-err-msg { font-size:12px; color:#B4483F; margin-top:5px; font-weight:600; }

.tgp-nights {
  display:flex; align-items:center; gap:10px; margin-top:14px;
  padding:13px 16px; border-radius:13px; background:#F0F7F9; border:1px solid #D6E9ED;
  font-size:14.5px; font-weight:700; color:#00707F;
}
.tgp-nights::before { content:"🌙"; font-size:17px; }

/* ------------------------------------------------------------- counters */
.tgp-count-row {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:15px 0; border-bottom:1px solid #F1F5F9;
}
.tgp-count-row:last-of-type { border-bottom:0; }
.tgp-count-name { font-size:16.5px; font-weight:700; color:#082B5C; }
.tgp-count-desc { font-size:12px; color:#8A97AC; margin-top:2px; }
.tgp-count-ctl { display:flex; align-items:center; gap:14px; }
.tgp-cbtn {
  width:46px; height:46px; border-radius:50%; border:1.5px solid #E6ECF2; background:#fff;
  font-size:19px; font-weight:600; color:#0095A9; cursor:pointer; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .18s ease, background .18s ease, transform .12s ease;
}
.tgp-cbtn:hover:not(:disabled) { border-color:#0095A9; background:#F0F7F9; }
.tgp-cbtn:active:not(:disabled) { transform:scale(.93); }
.tgp-cbtn:disabled { opacity:.34; cursor:not-allowed; }
.tgp-cbtn:focus-visible { outline:2px solid #0095A9; outline-offset:2px; }
.tgp-cval { min-width:30px; text-align:center; font-size:19px; font-weight:700; color:#082B5C; }

.tgp-ages { margin-top:16px; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:11px; }
.tgp-age { border:1.5px solid #E6ECF2; border-radius:13px; padding:11px 13px; background:#F5F8FA; }
.tgp-age label { display:block; font-size:11.5px; font-weight:700; color:#5A6B85; margin-bottom:6px; }

/* ---------------------------------------------------------- experiences */
.tgp-searchbar { position:relative; margin-bottom:14px; }
.tgp-searchbar .tgp-in { padding-left:42px; }
.tgp-searchbar::before {
  content:"⌕"; position:absolute; left:15px; top:50%; transform:translateY(-52%);
  font-size:19px; color:#8A97AC; pointer-events:none;
}
.tgp-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.tgp-filter {
  padding:8px 14px; border-radius:999px; border:1.5px solid #E6ECF2; background:#fff;
  font-family:'Manrope',sans-serif; font-size:12.5px; font-weight:600; color:#5A6B85; cursor:pointer;
  transition:all .18s ease; white-space:nowrap;
}
.tgp-filter:hover { border-color:#7FD8E2; color:#082B5C; }
.tgp-filter.is-on { background:#082B5C; border-color:#082B5C; color:#fff; }

.tgp-results { display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:17px; }
.tgp-pcard {
  border:1.5px solid #E6ECF2; border-radius:16px; overflow:hidden; background:#fff;
  display:flex; flex-direction:column; transition:all .2s ease;
}
.tgp-pcard:hover { border-color:#7FD8E2; transform:translateY(-3px); box-shadow:0 12px 26px rgba(8,43,92,.09); }
.tgp-pcard.is-added { border-color:#0095A9; box-shadow:0 0 0 1px #0095A9 inset; }
.tgp-pthumb {
  position:relative; aspect-ratio:16/10; background:#EDF1F5; overflow:hidden;
}
.tgp-pthumb img { width:100%; height:100%; object-fit:cover; display:block; }
/* Branded placeholder so a missing image never breaks the grid. */
.tgp-pthumb.is-empty {
  background:linear-gradient(135deg,#082B5C,#00707F);
  display:flex; align-items:center; justify-content:center;
}
.tgp-pthumb.is-empty::after {
  content:"TRAVEL GATE"; font-family:'Sora',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.16em; color:rgba(255,255,255,.62);
}
.tgp-ptype {
  position:absolute; top:9px; left:9px; padding:4px 9px; border-radius:999px;
  background:rgba(8,43,92,.82); color:#fff; font-size:10.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
}
.tgp-pbody { padding:13px 14px 14px; display:flex; flex-direction:column; flex:1; }
.tgp-pname { font-size:15px; font-weight:700; color:#082B5C; line-height:1.35; margin-bottom:5px; }
.tgp-pmeta { font-size:11.5px; color:#8A97AC; margin-bottom:11px; }
.tgp-pfoot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tgp-pprice { font-size:13px; font-weight:700; color:#00707F; line-height:1.2; }
.tgp-pprice small { display:block; font-size:9.5px; font-weight:600; color:#8A97AC; letter-spacing:.04em; text-transform:uppercase; }
.tgp-padd {
  padding:8px 14px; border-radius:10px; border:1.5px solid #0095A9; background:#fff;
  font-family:'Manrope',sans-serif; font-size:12.5px; font-weight:700; color:#0095A9; cursor:pointer;
  white-space:nowrap; transition:all .18s ease;
}
.tgp-padd:hover { background:#0095A9; color:#fff; }
.tgp-pcard.is-added .tgp-padd { background:#0095A9; border-color:#0095A9; color:#fff; }

.tgp-selected { margin-top:26px; padding-top:22px; border-top:1px solid #EDF1F5; }
.tgp-selected h3 {
  font-family:'Sora',sans-serif; font-size:13px; font-weight:700; color:#082B5C;
  letter-spacing:.05em; text-transform:uppercase; margin:0 0 13px;
}
.tgp-selrow {
  display:flex; align-items:center; gap:12px; padding:11px; margin-bottom:9px;
  border:1.5px solid #E6ECF2; border-radius:13px; background:#F5F8FA;
}
.tgp-selthumb { width:52px; height:40px; border-radius:8px; object-fit:cover; flex:none; background:#EDF1F5; }
.tgp-selname { flex:1; min-width:0; font-size:13.5px; font-weight:700; color:#082B5C; }
.tgp-selday { flex:none; }
.tgp-selday select { padding:7px 10px; border:1.5px solid #E6ECF2; border-radius:9px; font-size:12px; font-family:'Manrope',sans-serif; color:#082B5C; background:#fff; }
.tgp-selrm { flex:none; width:30px; height:30px; border-radius:50%; border:1.5px solid #E6ECF2; background:#fff; color:#8A97AC; cursor:pointer; font-size:15px; line-height:1; }
.tgp-selrm:hover { border-color:#D26A6A; color:#B4483F; }

/* --------------------------------------------------------------- review */
.tgp-rev-head { text-align:center; margin-bottom:26px; }
.tgp-rev-head h2 { font-size:29px; margin-bottom:5px; }
.tgp-rsec { border:1.5px solid #E6ECF2; border-radius:16px; padding:19px 21px; margin-bottom:14px; background:#fff; }
.tgp-rsec-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.tgp-rsec-title {
  font-family:'Sora',sans-serif; font-size:12px; font-weight:700; color:#8A97AC;
  letter-spacing:.11em; text-transform:uppercase;
}
.tgp-edit {
  background:none; border:0; padding:0; cursor:pointer;
  font-family:'Manrope',sans-serif; font-size:12.5px; font-weight:700; color:#0095A9;
}
.tgp-edit:hover { color:#00707F; text-decoration:underline; }
.tgp-rrow { display:flex; justify-content:space-between; gap:14px; padding:7px 0; font-size:14px; }
.tgp-rrow span:first-child { color:#5A6B85; }
.tgp-rrow span:last-child { color:#082B5C; font-weight:600; text-align:right; }

.tgp-itin { position:relative; padding-left:26px; }
.tgp-itin::before { content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:#D6E9ED; }
.tgp-itin-item { position:relative; display:flex; gap:12px; align-items:center; padding:9px 0; }
.tgp-itin-item::before {
  content:""; position:absolute; left:-23px; top:50%; transform:translateY(-50%);
  width:10px; height:10px; border-radius:50%; background:#0095A9; border:2px solid #fff;
  box-shadow:0 0 0 2px #D6E9ED;
}
.tgp-itin-thumb { width:54px; height:42px; border-radius:9px; object-fit:cover; flex:none; background:#EDF1F5; }
.tgp-itin-name { font-size:14px; font-weight:700; color:#082B5C; }
.tgp-itin-day { font-size:11.5px; color:#0095A9; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }

/* ------------------------------------------------------------------ nav */
.tgp-nav { display:flex; gap:12px; align-items:center; margin-top:28px; padding-top:22px; border-top:1px solid #EDF1F5; }
.tgp-btn {
  padding:15px 28px; min-height:52px; border-radius:13px; border:0; cursor:pointer;
  font-family:'Manrope',sans-serif; font-size:15.5px; font-weight:700;
  transition:all .2s ease; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
}
.tgp-btn-primary { background:#0095A9; color:#fff; box-shadow:0 4px 14px rgba(0,149,169,.26); }
.tgp-btn-primary:hover { background:#00707F; transform:translateY(-1px); box-shadow:0 7px 20px rgba(0,149,169,.32); }
.tgp-btn-ghost { background:#fff; border:1.5px solid #E6ECF2; color:#5A6B85; }
.tgp-btn-ghost:hover { border-color:#0095A9; color:#0095A9; }
.tgp-btn-wa { background:#25D366; color:#fff; }
.tgp-btn-wa:hover { background:#1DA851; }
.tgp-btn-lg { padding:17px 34px; font-size:15.5px; width:100%; justify-content:center; }
.tgp-btn:focus-visible { outline:2px solid #082B5C; outline-offset:2px; }
.tgp-btn:disabled { opacity:.55; cursor:not-allowed; transform:none; }
.tgp-nav-spacer { flex:1; }
.tgp-startover { background:none; border:0; font-family:'Manrope',sans-serif; font-size:12.5px; color:#8A97AC; cursor:pointer; text-decoration:underline; }
.tgp-startover:hover { color:#B4483F; }

/* --------------------------------------------------------- your trip */
.tgp-side-toggle { display:none; }
.tgp-side-inner {
  position:sticky; top:24px;
  border:1px solid #E6ECF2; border-radius:20px; background:#fff; overflow:hidden;
  box-shadow:0 1px 2px rgba(8,43,92,.04), 0 12px 30px rgba(8,43,92,.06);
}
.tgp-side-head {
  background:linear-gradient(135deg,#082B5C,#0C3A73); color:#fff; padding:17px 20px;
}
.tgp-side-head h3 {
  font-family:'Sora',sans-serif; font-size:13px; font-weight:700; margin:0;
  letter-spacing:.14em; text-transform:uppercase;
}
.tgp-side-head p { margin:4px 0 0; font-size:12px; color:rgba(255,255,255,.72); }
.tgp-side-body { padding:20px 22px; }
.tgp-sum-block { padding:11px 0; border-bottom:1px solid #F1F5F9; }
.tgp-sum-block:last-child { border-bottom:0; }
.tgp-sum-k {
  font-size:11.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:#8A97AC; margin-bottom:4px;
}
.tgp-sum-v { font-size:15.5px; font-weight:700; color:#082B5C; line-height:1.4; }
.tgp-sum-v.is-ph { color:#B7C2D0; font-weight:600; font-style:italic; }
.tgp-sum-sub { font-size:13px; color:#5A6B85; margin-top:2px; }
.tgp-sum-exps { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.tgp-sum-exp { display:flex; align-items:center; gap:9px; }
.tgp-sum-exp img { width:38px; height:30px; border-radius:6px; object-fit:cover; flex:none; background:#EDF1F5; }
.tgp-sum-exp span { font-size:12.5px; color:#082B5C; font-weight:600; line-height:1.3; }
.tgp-side-foot {
  padding:14px 20px; background:#F0F7F9; border-top:1px solid #D6E9ED;
  font-size:11.5px; color:#5A6B85; line-height:1.5;
}

/* -------------------------------------------------------------- success */
.tgp-success { max-width:640px; margin:0 auto; }
.tgp-success .tgp-card { text-align:center; padding:44px 40px 38px; }
.tgp-tick {
  width:66px; height:66px; margin:0 auto 20px; border-radius:50%;
  background:linear-gradient(135deg,#0095A9,#00707F); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:31px;
  box-shadow:0 8px 24px rgba(0,149,169,.3); animation:tgpPop .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes tgpPop { from { transform:scale(.5); opacity:0; } to { transform:scale(1); opacity:1; } }
.tgp-success h1 { font-family:'Sora',sans-serif; font-size:27px; font-weight:700; color:#082B5C; margin:0 0 9px; }
.tgp-success .tgp-lead { font-size:15px; color:#5A6B85; line-height:1.6; margin:0 0 22px; }
.tgp-refbox { background:#F0F7F9; border:1px solid #D6E9ED; border-radius:15px; padding:16px; margin-bottom:22px; }
.tgp-refbox-k { font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:#5A6B85; }
.tgp-refbox-v { font-family:'Sora',sans-serif; font-size:21px; font-weight:700; color:#082B5C; letter-spacing:.03em; margin-top:4px; }
.tgp-recap { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:26px; text-align:left; }
.tgp-recap div { border:1px solid #E6ECF2; border-radius:12px; padding:12px 13px; }
.tgp-recap dt { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#8A97AC; margin-bottom:3px; }
.tgp-recap dd { margin:0; font-size:13.5px; font-weight:700; color:#082B5C; }
.tgp-next { text-align:left; border-top:1px solid #EDF1F5; padding-top:22px; margin-bottom:24px; }
.tgp-next h3 { font-family:'Sora',sans-serif; font-size:12px; font-weight:700; color:#8A97AC; letter-spacing:.12em; text-transform:uppercase; margin:0 0 14px; }
.tgp-next ol { margin:0; padding:0; list-style:none; counter-reset:tgpn; }
.tgp-next li { counter-increment:tgpn; position:relative; padding:0 0 14px 38px; font-size:13.5px; color:#3C4A63; line-height:1.5; }
.tgp-next li::before {
  content:counter(tgpn); position:absolute; left:0; top:-1px;
  width:25px; height:25px; border-radius:50%; background:#F0F7F9; border:1.5px solid #D6E9ED;
  color:#00707F; font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center;
}
.tgp-success-btns { display:flex; flex-direction:column; gap:10px; }

/* -------------------------------------------------------- homepage promo */
.tgp-promo {
  position:relative; overflow:hidden; border-radius:24px;
  background:linear-gradient(135deg,#082B5C 0%,#0C3A73 52%,#00707F 100%);
  color:#fff; padding:52px 46px;
}
.tgp-promo::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(560px 240px at 12% 8%, rgba(0,149,169,.38), transparent 68%),
    radial-gradient(460px 210px at 92% 96%, rgba(127,216,226,.24), transparent 70%);
}
.tgp-promo-in { position:relative; z-index:1; display:grid; grid-template-columns:1.35fr .95fr; gap:40px; align-items:center; }
.tgp-promo-kicker { font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#7FD8E2; margin:0 0 12px; }
.tgp-promo h2 { font-family:'Sora',sans-serif; font-size:33px; line-height:1.16; font-weight:700; margin:0 0 13px; letter-spacing:-.02em; }
.tgp-promo p { font-size:15.5px; line-height:1.62; color:rgba(255,255,255,.85); margin:0 0 20px; max-width:520px; }
.tgp-promo-pts { display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; margin:0 0 4px; padding:0; list-style:none; }
.tgp-promo-pts li { display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.93); }
.tgp-promo-pts li::before {
  content:"✓"; flex:none; width:20px; height:20px; border-radius:50%;
  background:rgba(127,216,226,.19); color:#7FD8E2; font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.tgp-promo-cta { text-align:center; }
.tgp-promo-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px; width:100%;
  padding:18px 30px; border-radius:15px; background:#fff; color:#082B5C;
  font-family:'Manrope',sans-serif; font-size:15px; font-weight:800; letter-spacing:.02em;
  text-decoration:none; box-shadow:0 10px 30px rgba(0,0,0,.2); transition:transform .2s ease, box-shadow .2s ease;
}
.tgp-promo-btn:hover { transform:translateY(-2px); box-shadow:0 15px 38px rgba(0,0,0,.27); color:#082B5C; }
.tgp-promo-note { margin:13px 0 0; font-size:12px; color:rgba(255,255,255,.62); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1080px) {
  .tgp-grid { grid-template-columns:minmax(0,1fr) 320px; gap:22px; }
  .tgp-card { padding:28px 26px 26px; }
}
@media (max-width: 900px) {
  .tgp-hero { padding:36px 18px 40px; }
  .tgp-hero h1 { font-size:30px; }
  .tgp-hero p { font-size:14.5px; margin-bottom:18px; }
  .tgp-trust span { font-size:11.5px; padding:6px 11px; }
  .tgp-wrap { width:auto; padding:20px 15px calc(130px + env(safe-area-inset-bottom)); }
  .tgp-grid { grid-template-columns:1fr; gap:15px; }
  .tgp-card { padding:22px 18px 22px; border-radius:18px; }
  .tgp-timeline { display:none; }
  .tgp-mprog { display:block; }
  .tgp-step h2 { font-size:23px; }
  .tgp-two { grid-template-columns:1fr; gap:12px; }
  .tgp-opts { grid-template-columns:1fr 1fr; gap:10px; }
  .tgp-results { grid-template-columns:1fr; }
  .tgp-recap { grid-template-columns:1fr; }

  .tgp-side { order:-1; }
  .tgp-side-toggle {
    display:flex; align-items:center; justify-content:space-between; width:100%;
    padding:14px 17px; border:1.5px solid #E6ECF2; border-radius:15px; background:#fff;
    font-family:'Manrope',sans-serif; font-size:13.5px; font-weight:700; color:#082B5C; cursor:pointer;
  }
  .tgp-side-inner { position:static; display:none; margin-top:9px; }
  .tgp-side.is-open .tgp-side-inner { display:block; }
  .tgp-side.is-open .tgp-side-caret { transform:rotate(180deg); }
  .tgp-side-caret { transition:transform .25s ease; color:#0095A9; }

  /* Sticky bottom bar.
     z-index sits above the site modal (120) and above the floating chat
     widgets that commonly render around 9000-9999, so Continue is never
     covered. The safe-area inset keeps it clear of the iOS home indicator
     and the Safari toolbar. */
  .tgp-nav {
    position:fixed; left:0; right:0; bottom:0; z-index:9998;
    margin:0;
    padding:12px 15px calc(12px + env(safe-area-inset-bottom));
    background:#fff; border-top:1px solid #E6ECF2;
    box-shadow:0 -4px 18px rgba(8,43,92,.10);
    box-sizing:border-box;
  }
  .tgp-btn {
    min-height:52px; padding:14px 20px; font-size:15px;
    flex:1; justify-content:center; box-sizing:border-box;
  }
  /* A disabled Continue stays visible and legible - never hidden. */
  .tgp-wrap .tgp-btn:disabled,
  .tgp-wrap .tgp-btn[disabled] {
    opacity:1 !important;
    background:#B7C2D0 !important;
    color:#fff !important;
    cursor:not-allowed;
    box-shadow:none !important;
  }
  .tgp-startover { display:none; }
  .tgp-promo { padding:34px 22px; border-radius:18px; }
  .tgp-promo-in { grid-template-columns:1fr; gap:26px; }
  .tgp-promo h2 { font-size:25px; }
  .tgp-promo-pts { grid-template-columns:1fr; }
  .tgp-success .tgp-card { padding:32px 22px 28px; }
}
@media (max-width: 380px) {
  .tgp-opts { grid-template-columns:1fr; }
}


/* Brand colour lock.
   The Back button was picking up a red/pink from outside the plugin, so every
   builder button states its own colours at higher specificity. Red appears
   only on genuine validation errors. */
.tgp-wrap .tgp-btn.tgp-btn-ghost,
.tgp-wrap .tgp-btn.tgp-btn-ghost:hover,
.tgp-wrap .tgp-btn.tgp-btn-ghost:focus,
.tgp-wrap .tgp-btn.tgp-btn-ghost:active,
.tgp-wrap .tgp-btn.tgp-btn-ghost:visited {
  background:#fff !important;
  border:1.5px solid #E6ECF2 !important;
  color:#082B5C !important;
  box-shadow:none !important;
}
.tgp-wrap .tgp-btn.tgp-btn-ghost:hover { border-color:#0095A9 !important; color:#00707F !important; }
.tgp-wrap .tgp-btn.tgp-btn-primary,
.tgp-wrap .tgp-btn.tgp-btn-primary:hover,
.tgp-wrap .tgp-btn.tgp-btn-primary:focus,
.tgp-wrap .tgp-btn.tgp-btn-primary:visited {
  background:#0095A9 !important; color:#fff !important; border:0 !important;
}
.tgp-wrap .tgp-btn.tgp-btn-primary:hover { background:#00707F !important; }
.tgp-wrap .tgp-btn:focus-visible { outline:2px solid #082B5C !important; outline-offset:2px; }

/* ==========================================================================
   Brand state lock — option cards
   The crimson fill seen on a selected card came from outside the plugin:
   these are real <button> elements, and a theme rule on button:focus or
   button:active outranks a single-class .is-sel. Every state is therefore
   declared here at high specificity. No pink, magenta or purple.
   ========================================================================== */
.tgp-wrap .tgp-opt,
.tgp-wrap .tgp-opt:link,
.tgp-wrap .tgp-opt:visited,
.tgp-wrap .tgp-opt:hover,
.tgp-wrap .tgp-opt:focus,
.tgp-wrap .tgp-opt:focus-visible,
.tgp-wrap .tgp-opt:active,
.tgp-wrap .tgp-opt:focus-within {
  background:#fff !important;
  border:1.5px solid #E6ECF2 !important;
  color:#082B5C !important;
  box-shadow:none !important;
  -webkit-tap-highlight-color:transparent;
}
.tgp-wrap .tgp-opt:hover { border-color:#7FD8E2 !important; }
.tgp-wrap .tgp-opt:focus-visible { outline:2px solid #0095A9 !important; outline-offset:2px; }

.tgp-wrap .tgp-opt.is-sel,
.tgp-wrap .tgp-opt.is-sel:link,
.tgp-wrap .tgp-opt.is-sel:visited,
.tgp-wrap .tgp-opt.is-sel:hover,
.tgp-wrap .tgp-opt.is-sel:focus,
.tgp-wrap .tgp-opt.is-sel:focus-visible,
.tgp-wrap .tgp-opt.is-sel:active,
.tgp-wrap .tgp-opt.is-sel:focus-within {
  background:#F0F7F9 !important;
  border:1.5px solid #0095A9 !important;
  color:#082B5C !important;
  box-shadow:0 0 0 1px #0095A9 inset !important;
}
.tgp-wrap .tgp-opt.is-sel .tgp-opt-name { color:#082B5C !important; }
.tgp-wrap .tgp-opt.is-sel .tgp-opt-desc { color:#5A6B85 !important; }
.tgp-wrap .tgp-opt.is-sel::after { background:#0095A9 !important; color:#fff !important; }

/* Filters, counters, add buttons and day selects follow the same lock. */
.tgp-wrap .tgp-filter,
.tgp-wrap .tgp-filter:hover,
.tgp-wrap .tgp-filter:focus,
.tgp-wrap .tgp-filter:active { background:#fff !important; color:#5A6B85 !important; border:1.5px solid #E6ECF2 !important; }
.tgp-wrap .tgp-filter.is-on,
.tgp-wrap .tgp-filter.is-on:hover,
.tgp-wrap .tgp-filter.is-on:focus,
.tgp-wrap .tgp-filter.is-on:active { background:#082B5C !important; border-color:#082B5C !important; color:#fff !important; }

.tgp-wrap .tgp-cbtn,
.tgp-wrap .tgp-cbtn:hover,
.tgp-wrap .tgp-cbtn:focus,
.tgp-wrap .tgp-cbtn:active { background:#fff !important; color:#0095A9 !important; border:1.5px solid #E6ECF2 !important; }
.tgp-wrap .tgp-cbtn:hover:not(:disabled) { border-color:#0095A9 !important; background:#F0F7F9 !important; }

.tgp-wrap .tgp-padd,
.tgp-wrap .tgp-padd:focus,
.tgp-wrap .tgp-padd:active { background:#fff !important; color:#0095A9 !important; border:1.5px solid #0095A9 !important; }
.tgp-wrap .tgp-padd:hover,
.tgp-wrap .tgp-pcard.is-added .tgp-padd { background:#0095A9 !important; color:#fff !important; }

.tgp-wrap .tgp-edit,
.tgp-wrap .tgp-edit:hover,
.tgp-wrap .tgp-edit:focus { background:none !important; color:#0095A9 !important; }
.tgp-wrap .tgp-startover,
.tgp-wrap .tgp-startover:hover { background:none !important; color:#5A6B85 !important; }

/* Genuine validation only. */
.tgp-wrap .tgp-err { border-color:#B4483F !important; }
.tgp-wrap .tgp-err-msg { color:#B4483F !important; }

/* ==========================================================================
   Mobile: overflow and floating-widget clearance
   ========================================================================== */
@media (max-width: 900px) {
  /* Every control sized inside its card. A date input in particular reports
     an intrinsic width wider than its container on iOS unless border-box is
     forced, which is what pushed Arrival and Departure past the card edge. */
  .tgp-wrap .tgp-in,
  .tgp-wrap .tgp-sel,
  .tgp-wrap .tgp-ta,
  .tgp-wrap input[type="date"],
  .tgp-wrap input[type="text"],
  .tgp-wrap input[type="email"],
  .tgp-wrap input[type="tel"],
  .tgp-wrap input[type="number"],
  .tgp-wrap input[type="search"] {
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    min-width:0;
    -webkit-appearance:none;
    appearance:none;
  }
  .tgp-wrap input[type="date"] { min-height:52px; }

  /* No element may scroll the page sideways. */
  .tgp-wrap, .tgp-card, .tgp-grid, .tgp-main, .tgp-two, .tgp-opts, .tgp-results {
    max-width:100%; box-sizing:border-box;
  }
  .tgp-wrap * { min-width:0; }
  .tgp-two { grid-template-columns:1fr; }

  /* Third-party chat launchers sit bottom-right by default and land on top
     of Continue. On this page only, they are lifted above the action bar.
     The plugin has no floating chat button of its own; these selectors cover
     the common widgets. */
  body.tgp-page .wa__floating_chat_box,
  body.tgp-page .wa__btn_popup,
  body.tgp-page .joinchat,
  body.tgp-page .ht-ctc,
  body.tgp-page .ht-ctc-chat,
  body.tgp-page #whatsapp-chat,
  body.tgp-page .whatsapp-chat-widget,
  body.tgp-page .tawk-min-container,
  body.tgp-page #tawkchat-container,
  body.tgp-page .crisp-client {
    bottom:calc(88px + env(safe-area-inset-bottom)) !important;
    z-index:9990 !important;
  }
}

/* ==========================================================================
   Mobile option-card layout
   Two columns at 375px leaves roughly 150px of usable card width, which is
   not enough for "Airport Transfer Required". Titles must wrap rather than
   be clipped, so the long-labelled groups go full width.
   ========================================================================== */
@media (max-width: 900px) {
  /* Titles and descriptions wrap freely; nothing is ever truncated. */
  .tgp-wrap .tgp-opt-name {
    font-size:18px; line-height:1.25; margin-bottom:6px;
    white-space:normal; overflow:visible; text-overflow:clip;
    word-break:normal; overflow-wrap:anywhere; hyphens:none;
  }
  .tgp-wrap .tgp-opt-desc {
    font-size:14.5px; line-height:1.4; margin-top:6px;
    white-space:normal; overflow:visible;
  }
  .tgp-wrap .tgp-opt {
    width:100%; max-width:100%; min-width:0; box-sizing:border-box;
    min-height:0; padding:18px 16px;
  }
  /* Room for the tick without it sitting on the title. */
  .tgp-wrap .tgp-opt.is-sel { padding-right:44px; }

  /* Long-labelled groups: one card per row. */
  .tgp-wrap .tgp-opts[data-opts="airport_transfer"],
  .tgp-wrap .tgp-opts[data-opts="local_transfer"],
  .tgp-wrap .tgp-opts[data-opts="destination"],
  .tgp-wrap .tgp-opts[data-opts="transfers"],
  .tgp-wrap .tgp-opts[data-opts="area"],
  .tgp-wrap .tgp-opts[data-opts="flights"],
  .tgp-wrap .tgp-opts[data-opts="other_emirates"] {
    grid-template-columns:1fr;
  }

  /* Short labels stay side by side. */
  .tgp-wrap .tgp-opts[data-opts="airport_trip"],
  .tgp-wrap .tgp-opts[data-opts="visa"],
  .tgp-wrap .tgp-opts[data-opts="contact_pref"],
  .tgp-wrap .tgp-opts[data-opts="hotel_tier"] {
    grid-template-columns:1fr 1fr;
  }
}

/* Below 380px nothing sits two-up: even "Round Trip" and the hotel tiers
   become cramped once padding and the tick are accounted for. */
@media (max-width: 380px) {
  .tgp-wrap .tgp-opts,
  .tgp-wrap .tgp-opts[data-opts="airport_trip"],
  .tgp-wrap .tgp-opts[data-opts="visa"],
  .tgp-wrap .tgp-opts[data-opts="contact_pref"],
  .tgp-wrap .tgp-opts[data-opts="hotel_tier"] {
    grid-template-columns:1fr;
  }
  .tgp-wrap .tgp-opt-name { font-size:17px; }
}

/* --- D. 320px support ----------------------------------------------------
   The smallest existing tier is 380px. At 320px the card interior is only
   254px, so gutters and padding are trimmed and everything stacks. No
   redesign: the same components, sized to fit. */
@media (max-width: 340px) {
  .tgp-wrap { padding-left: 12px; padding-right: 12px; }
  .tgp-card { padding: 18px 14px; }
  .tgp-hero { padding: 30px 14px 34px; }
  .tgp-hero h1 { font-size: 26px; }
  .tgp-hero p { font-size: 13.5px; }
  .tgp-trust span { font-size: 11px; padding: 5px 9px; }
  .tgp-step h2 { font-size: 20px; }
  .tgp-opt { padding: 15px 13px; }
  .tgp-wrap .tgp-opt-name { font-size: 16px; }
  .tgp-wrap .tgp-opt-desc { font-size: 13.5px; }
  .tgp-nav { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 8px; }
  .tgp-btn { padding: 14px 12px; font-size: 14px; }
  .tgp-results { grid-template-columns: 1fr; }
  .tgp-recap { grid-template-columns: 1fr; }
}

/* ==========================================================================
   New Year collection — mobile-first, TravelGate palette.
   A restrained gold is used only as a seasonal accent on the badge and
   kicker; navy and teal remain dominant.
   ========================================================================== */
.tgny-hero {
  position:relative; overflow:hidden; text-align:center;
  background:linear-gradient(135deg,#082B5C 0%,#0C3A73 55%,#00707F 100%);
  color:#fff; padding:56px 18px 60px;
}
.tgny-hero::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(620px 240px at 18% 0%, rgba(0,149,169,.34), transparent 70%),
    radial-gradient(480px 200px at 86% 100%, rgba(212,175,55,.16), transparent 70%);
}
.tgny-hero-in { position:relative; z-index:1; max-width:780px; margin:0 auto; }
.tgny-hero-kicker {
  font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:#D9C27A; margin:0 0 12px;
}
.tgny-hero h1 {
  font-family:'Sora',sans-serif; font-size:40px; line-height:1.12; font-weight:700;
  margin:0 0 14px; letter-spacing:-.02em;
}
.tgny-years { color:#7FD8E2; }
.tgny-hero-sub { font-size:17px; line-height:1.6; color:rgba(255,255,255,.87); margin:0 auto 24px; max-width:600px; }
.tgny-hero-cta { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }

.tgny-btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:14px 26px; border-radius:13px;
  font-family:'Manrope',sans-serif; font-size:15px; font-weight:700;
  text-decoration:none; box-sizing:border-box; transition:all .2s ease;
}
.tgny-btn-primary { background:#0095A9; color:#fff; }
.tgny-btn-primary:hover { background:#00707F; color:#fff; }
.tgny-btn-ghost { background:rgba(255,255,255,.12); color:#fff; border:1.5px solid rgba(255,255,255,.34); }
.tgny-btn-ghost:hover { background:rgba(255,255,255,.2); color:#fff; }
.tgny-btn:focus-visible { outline:2px solid #7FD8E2; outline-offset:2px; }

.tgny-wrap { width:min(1320px,92vw); margin:0 auto; padding:40px 0 64px; }

.tgny-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.tgny-chip {
  padding:9px 15px; border-radius:999px; border:1.5px solid #E6ECF2; background:#fff;
  font-family:'Manrope',sans-serif; font-size:13px; font-weight:600; color:#5A6B85;
  cursor:pointer; white-space:nowrap; transition:all .18s ease;
}
.tgny-chip:hover { border-color:#7FD8E2; color:#082B5C; }
.tgny-chip.is-on { background:#082B5C; border-color:#082B5C; color:#fff; }

.tgny-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.tgny-item { position:relative; min-width:0; }
.tgny-item[hidden] { display:none; }
.tgny-badge {
  position:absolute; top:12px; left:12px; z-index:3;
  padding:5px 11px; border-radius:999px;
  background:linear-gradient(135deg,#082B5C,#00707F);
  border:1px solid rgba(217,194,122,.55);
  color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
}

.tgny-prelaunch {
  max-width:620px; margin:0 auto; text-align:center;
  background:#fff; border:1px solid #E6ECF2; border-radius:22px;
  box-shadow:0 1px 2px rgba(8,43,92,.04), 0 12px 30px rgba(8,43,92,.06);
  padding:44px 32px 38px;
}
.tgny-prelaunch h2 {
  font-family:'Sora',sans-serif; font-size:26px; font-weight:700; color:#082B5C;
  margin:0 0 12px; line-height:1.25;
}
.tgny-prelaunch p { font-size:16px; line-height:1.6; color:#5A6B85; margin:0 0 26px; }
.tgny-prelaunch-cta { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.tgny-prelaunch .tgny-btn-ghost { background:#fff; color:#082B5C; border:1.5px solid #E6ECF2; }
.tgny-prelaunch .tgny-btn-ghost:hover { border-color:#0095A9; color:#00707F; }

.tgny-promo { padding:36px 0; text-align:center; }
.tgny-promo-kicker {
  font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:#00707F; margin:0 0 8px;
}
.tgny-promo h2 { font-family:'Sora',sans-serif; font-size:28px; color:#082B5C; margin:0 0 18px; }

@media (max-width: 900px) {
  .tgny-hero { padding:38px 16px 42px; }
  .tgny-hero h1 { font-size:30px; }
  .tgny-hero-sub { font-size:15px; }
  .tgny-wrap { width:auto; padding:26px 16px 48px; }
  .tgny-grid { grid-template-columns:1fr; gap:16px; }
  .tgny-btn { width:100%; }
  .tgny-hero-cta, .tgny-prelaunch-cta { flex-direction:column; }
  .tgny-prelaunch { padding:32px 20px 28px; }
  .tgny-prelaunch h2 { font-size:23px; }
  .tgny-chips { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
}
@media (max-width: 340px) {
  .tgny-hero h1 { font-size:26px; }
  .tgny-wrap { padding-left:12px; padding-right:12px; }
  .tgny-prelaunch { padding:26px 16px 24px; }
}

/* ==========================================================================
   New Year visual polish (v1.61.1)
   ========================================================================== */

/* --- Button colour lock --------------------------------------------------
   body.tg-body a { color:#0095A9 } is specificity 0,2,1 and beat
   .tgny-btn-primary at 0,1,0, so the primary CTA rendered teal text on a
   teal fill and looked empty. Every button state is now declared at higher
   specificity, the same approach used for the package builder's buttons. */
.tgny-hero .tgny-btn-primary,
.tgny-prelaunch .tgny-btn-primary,
.tgny-promo .tgny-btn-primary,
body.tg-body .tgny-btn-primary,
body.tg-body .tgny-btn-primary:link,
body.tg-body .tgny-btn-primary:visited,
body.tg-body .tgny-btn-primary:hover,
body.tg-body .tgny-btn-primary:focus,
body.tg-body .tgny-btn-primary:active {
  background: #0095A9 !important;
  color: #ffffff !important;
  border: 0 !important;
  text-decoration: none !important;
}
body.tg-body .tgny-btn-primary:hover { background: #00707F !important; }

body.tg-body .tgny-hero .tgny-btn-ghost,
body.tg-body .tgny-hero .tgny-btn-ghost:link,
body.tg-body .tgny-hero .tgny-btn-ghost:visited,
body.tg-body .tgny-hero .tgny-btn-ghost:hover,
body.tg-body .tgny-hero .tgny-btn-ghost:focus {
  color: #ffffff !important;
  text-decoration: none !important;
}
body.tg-body .tgny-prelaunch .tgny-btn-ghost,
body.tg-body .tgny-prelaunch .tgny-btn-ghost:link,
body.tg-body .tgny-prelaunch .tgny-btn-ghost:visited,
body.tg-body .tgny-prelaunch .tgny-btn-ghost:focus {
  background: #ffffff !important;
  color: #082B5C !important;
  border: 1.5px solid #E6ECF2 !important;
  text-decoration: none !important;
}
body.tg-body .tgny-prelaunch .tgny-btn-ghost:hover {
  border-color: #0095A9 !important;
  color: #00707F !important;
}

/* --- Hero depth ----------------------------------------------------------
   Layered radial light, a fine starfield rendered purely in CSS, and a thin
   gold hairline. No image dependency, no fireworks graphic, and the navy
   and teal base stays dominant. */
.tgny-hero {
  padding: 72px 18px 76px;
  background:
    radial-gradient(1100px 460px at 50% -12%, rgba(0,149,169,.42), transparent 66%),
    linear-gradient(160deg, #061F45 0%, #082B5C 42%, #00566A 100%);
}
.tgny-hero::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1.4px 1.4px at 28% 68%, rgba(217,194,122,.75), transparent 60%),
    radial-gradient(1.2px 1.2px at 46% 16%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(1.8px 1.8px at 63% 54%, rgba(127,216,226,.75), transparent 60%),
    radial-gradient(1.3px 1.3px at 78% 28%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 72%, rgba(217,194,122,.6), transparent 60%),
    radial-gradient(1.2px 1.2px at 34% 88%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 70% 88%, rgba(127,216,226,.5), transparent 60%);
}
.tgny-hero::after {
  background:
    radial-gradient(620px 260px at 18% 0%, rgba(0,149,169,.34), transparent 70%),
    radial-gradient(520px 220px at 86% 100%, rgba(212,175,55,.20), transparent 72%);
}
.tgny-hero-in { position: relative; z-index: 2; }
.tgny-hero-kicker {
  display: inline-block;
  padding: 7px 16px; margin: 0 0 20px;
  border: 1px solid rgba(217,194,122,.42);
  border-radius: 999px;
  background: rgba(217,194,122,.10);
  letter-spacing: .22em;
}
.tgny-hero h1 { font-size: 46px; text-shadow: 0 2px 30px rgba(0,0,0,.28); }
.tgny-years {
  /* Five stops rather than three, so each year holds its own colour instead of
     sitting mid-fade: teal through 2026, gold across the slash, teal again for
     2027. Same 100deg angle and the same teal-gold-teal design.

     background-clip:text makes the fill transparent, so text-shadow paints
     behind nothing - which is why this line read flat against the photograph
     while the heading above it did not. drop-shadow works on the clipped
     glyphs themselves. The first matches the heading's shadow; the second is a
     22% teal halo for separation from the navy, deliberately short of a glow. */
  background: linear-gradient(100deg,
    #46E8F5 0%,
    #4BD9E8 34%,
    #F5D77A 52%,
    #F0CB63 62%,
    #5FE2EE 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #46E8F5;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .55))
          drop-shadow(0 0 18px rgba(70, 232, 245, .22));
}
.tgny-hero-sub { margin-bottom: 30px; }
.tgny-hero-cta { gap: 12px; }
.tgny-hero .tgny-btn-primary { box-shadow: 0 10px 30px rgba(0,149,169,.35); }
.tgny-hero .tgny-btn-ghost { backdrop-filter: blur(6px); }

/* A gold hairline where the hero meets the page. */
.tgny-hero::after { border-bottom: 1px solid rgba(217,194,122,.30); }

/* --- Pre-launch card ----------------------------------------------------- */
.tgny-prelaunch {
  max-width: 560px;
  margin: -46px auto 0;              /* lifts into the hero, less dead space */
  position: relative; z-index: 3;
  padding: 38px 34px 34px;
  border-radius: 24px;
  box-shadow: 0 2px 4px rgba(8,43,92,.05), 0 22px 50px rgba(8,43,92,.13);
}
.tgny-prelaunch::before {
  content: "Early availability";
  display: inline-block; margin-bottom: 14px;
  padding: 6px 13px; border-radius: 999px;
  background: #F0F7F9; border: 1px solid #D6E9ED;
  color: #00707F; font-family: 'Manrope', sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
}
.tgny-prelaunch h2 { font-size: 24px; margin-bottom: 10px; }
.tgny-prelaunch p { font-size: 15.5px; margin-bottom: 24px; }

@media (max-width: 900px) {
  .tgny-hero { padding: 48px 16px 54px; }
  .tgny-hero h1 { font-size: 32px; }
  .tgny-hero-kicker { margin-bottom: 16px; letter-spacing: .16em; font-size: 11px; }
  .tgny-hero-sub { font-size: 15px; margin-bottom: 24px; }
  .tgny-prelaunch { margin: -34px 0 0; max-width: none; padding: 28px 20px 26px; }
  .tgny-prelaunch h2 { font-size: 21px; }
  .tgny-prelaunch p { font-size: 15px; }
}
@media (max-width: 340px) {
  .tgny-hero { padding: 40px 14px 46px; }
  .tgny-hero h1 { font-size: 27px; }
  .tgny-prelaunch { padding: 24px 16px 22px; }
}

/* ==========================================================================
   New Year cards (v1.71.0)
   Scoped to .tgny-item, so the shared card partial is unchanged everywhere
   else. The event badge replaces the everyday category chip, and rows with
   no value are hidden rather than rendering hollow.
   ========================================================================== */
.tgny-item .tg-card-cat { display: none; }          /* "CRUISES" would read as an everyday product */

.tgny-badge {
  background: linear-gradient(135deg, #082B5C, #0C3A73);
  border: 1px solid rgba(217, 194, 122, .6);
  color: #F3E7C4;
  letter-spacing: .1em;
}

/* An empty meta row leaves a gap on a product whose details are not yet
   confirmed, so rows without content are removed. */
.tgny-item .tg-card-meta:empty,
.tgny-item .tg-card-loc:empty,
.tgny-item .tg-meta-line:empty { display: none; }

.tgny-note {
  margin: 16px auto 0; max-width: 620px;
  font-size: 14px; line-height: 1.55;
  color: rgba(255, 255, 255, .78);
}
@media (max-width: 900px) { .tgny-note { font-size: 13px; } }

/* Administrator-only preview flag on /new-year-dubai/?preview_nye=1 */
.tgny-preview-flag {
  margin: 0 0 22px;
  padding: 11px 16px;
  border-radius: 12px;
  background: #FFF8E5;
  border: 1px solid #F0D999;
  color: #8A6D00;
  font-family: 'Manrope', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
}

/* ==========================================================================
   New Year detail + card treatment (v1.72.0)
   Everything is scoped to .tgny-item or the event-only classes, so normal
   tours and attractions are untouched.
   ========================================================================== */
.tgny-detail-flag {
  display: inline-block; margin-bottom: 10px;
  padding: 6px 13px; border-radius: 999px;
  background: linear-gradient(135deg, #082B5C, #0C3A73);
  border: 1px solid rgba(217, 194, 122, .55);
  color: #F3E7C4;
  font-family: 'Manrope', sans-serif;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}

.tgny-fixed-date {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 15px; border-radius: 13px;
  background: #F0F7F9; border: 1px solid #D6E9ED;
}
.tgny-fixed-kicker {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #00707F;
}
.tgny-fixed-value {
  font-family: 'Sora', sans-serif; font-size: 15.5px; font-weight: 700; color: #082B5C;
}

/* Zone chip on the card, shown only when a group is configured. */
.tgny-zone {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); border: 1px solid #E6ECF2;
  color: #00707F; font-size: 10px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
}

/* A clearer CTA than the shared card's small arrow link. */
.tgny-item .tg-card-cta::after { content: " Experience"; }

/* ==========================================================================
   New Year presentation (v1.72.1)
   Scoped to .tgny-* throughout: the shared card partial and every normal
   archive are untouched.
   ========================================================================== */

/* ---------- Hero ---------- */
.tgny-hero { padding: 84px 18px 88px; }
.tgny-hero h1 { font-size: 50px; letter-spacing: -.025em; }
.tgny-hero-sub { font-size: 18px; max-width: 640px; margin-bottom: 34px; }
.tgny-hero-cta { gap: 14px; }
.tgny-hero .tgny-btn-primary {
  background: #0095A9; box-shadow: 0 10px 28px rgba(0,149,169,.34);
}
.tgny-hero .tgny-btn-ghost {
  background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(217,194,122,.42);
  backdrop-filter: blur(6px);
}
.tgny-hero .tgny-btn-ghost:hover { border-color: rgba(217,194,122,.8); background: rgba(255,255,255,.13); }
.tgny-note { color: rgba(255,255,255,.72); font-size: 14.5px; }

/* ---------- Filters ---------- */
.tgny-chips { gap: 9px; margin-bottom: 28px; }
.tgny-chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 17px;
  border-radius: 12px;
  border: 1.5px solid #E6ECF2; background: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #3C4A63;
  transition: all .18s ease;
}
.tgny-chip:hover { border-color: #7FD8E2; color: #082B5C; transform: translateY(-1px); }
.tgny-chip.is-on {
  background: linear-gradient(135deg, #082B5C, #0C3A73);
  border-color: #082B5C; color: #fff;
  box-shadow: 0 4px 14px rgba(8,43,92,.2);
}

/* ---------- Grid: 4 columns only where they stay readable ---------- */
.tgny-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (min-width: 1500px) { .tgny-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1024px)  { .tgny-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (max-width: 620px)   { .tgny-grid { grid-template-columns: 1fr; gap: 16px; } }

.tgny-wrap { padding-bottom: 44px; }   /* less dead space under the catalogue */

/* ---------- Cards ---------- */
.tgny-item { display: flex; }
.tgny-item > .tg-card,
.tgny-item > a { flex: 1; display: flex; flex-direction: column; }
.tgny-item .tg-card {
  border-radius: 18px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tgny-item:hover .tg-card {
  transform: translateY(-4px);
  border-color: #7FD8E2;
  box-shadow: 0 18px 40px rgba(8, 43, 92, .13);
}
.tgny-item .tg-card-title,
.tgny-item .tg-card-name {
  font-size: 16.5px; line-height: 1.32; font-weight: 700; color: #082B5C;
}
/* Price and CTA balanced on one baseline. */
.tgny-item .tg-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-top: 12px; margin-top: auto;
  border-top: 1px solid #F1F5F9;
}

/* ---------- Group-differentiated placeholders ----------
   Clearly branded panels, not photographs: each group gets its own gradient
   and label so the eight products are distinguishable while real images are
   still to come. */
.tgny-item .tg-card-img,
.tgny-item .tgny-ph { position: relative; }
.tgny-item[data-g] .tg-card-img::after {
  content: attr(data-ph);
  position: absolute; inset: auto 0 10px 0;
  text-align: center;
  font-family: 'Sora', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: .16em; color: rgba(255,255,255,.6);
}
.tgny-item[data-g="marina"]   .tg-card-img { background: linear-gradient(135deg,#082B5C,#0095A9) !important; }
.tgny-item[data-g="creek"]    .tg-card-img { background: linear-gradient(135deg,#06305A,#00707F) !important; }
.tgny-item[data-g="yacht"]    .tg-card-img { background: linear-gradient(135deg,#061F45,#0C3A73) !important; }
.tgny-item[data-g="premium"]  .tg-card-img { background: linear-gradient(135deg,#061F45,#4A3F1E) !important; }
.tgny-item[data-g="desert"]   .tg-card-img { background: linear-gradient(135deg,#3D2E14,#8A6D3B) !important; }
.tgny-item[data-g="downtown"] .tg-card-img { background: linear-gradient(135deg,#082B5C,#1B4C86) !important; }

/* ---------- Mobile ---------- */
@media (max-width: 620px) {
  .tgny-hero { padding: 46px 16px 50px; }
  .tgny-hero h1 { font-size: 31px; }
  .tgny-hero-sub { font-size: 15px; margin-bottom: 24px; }
  .tgny-chips {
    flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }
  .tgny-chips::-webkit-scrollbar { display: none; }
  .tgny-chip { flex: 0 0 auto; height: 38px; padding: 0 14px; font-size: 12.5px; scroll-snap-align: start; }
  .tgny-item .tg-card-title,
  .tgny-item .tg-card-name { font-size: 16px; }
  .tgny-wrap { padding-bottom: 32px; }
}

/* Fixed-event date block on the product panel. */
.tgny-fixed-note {
  font-size: 12.5px; line-height: 1.5; color: #5A6B85; margin-top: 4px;
}

/* ==========================================================================
   New Year hero photograph (v1.73.15)
   Applied only when .is-photo is present, which the template adds only when a
   configured attachment actually resolves. With no image the class is absent
   and every gradient rule above continues to apply unchanged.
   ========================================================================== */
.tgny-hero.is-photo {
  background-color: #061F45;          /* never white behind white text */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: scroll;      /* fixed is unreliable on iOS */
}

/* Densest behind the heading and buttons, thinning toward the left and right
   so the photograph stays visible at the edges. */
.tgny-hero.is-photo::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%,
      rgba(6, 31, 69, .86) 0%,
      rgba(6, 31, 69, .62) 45%,
      rgba(6, 31, 69, .30) 100%),
    linear-gradient(180deg,
      rgba(6, 31, 69, .55) 0%,
      rgba(6, 31, 69, .20) 40%,
      rgba(6, 31, 69, .70) 100%);
}
.tgny-hero.is-photo > * { position: relative; z-index: 1; }

/* Narrower viewports crop harder, so the centre is carried a little stronger. */
@media (max-width: 620px) {
  .tgny-hero.is-photo::before {
    background:
      radial-gradient(150% 100% at 50% 45%,
        rgba(6, 31, 69, .90) 0%,
        rgba(6, 31, 69, .72) 55%,
        rgba(6, 31, 69, .48) 100%),
      linear-gradient(180deg,
        rgba(6, 31, 69, .60) 0%,
        rgba(6, 31, 69, .30) 40%,
        rgba(6, 31, 69, .75) 100%);
  }
}

/* ==========================================================================
   New Year hero: readability and mobile proportions (v1.73.16)
   Desktop layout, crop, height and overlay are unchanged; only a text shadow
   is added there. The mobile block tightens spacing and re-crops.
   ========================================================================== */
.tgny-hero .tgny-hero-kicker,
.tgny-hero .tgny-hero-sub,
.tgny-hero .tgny-note { text-shadow: 0 2px 10px rgba(0, 0, 0, .55); }

/* The heading sits over the brightest part of the photograph, so it carries a
   slightly deeper shadow than the supporting text. */
.tgny-hero h1 { text-shadow: 0 2px 14px rgba(0, 0, 0, .62); }

@media (max-width: 620px) {
  /* With cover at this aspect only about 40% of the image width is visible,
     and the cruise and the fireworks sit roughly 65% apart - they cannot both
     be in frame. Weighted right so the fireworks and the wheel are kept, since
     the centre of the image is the darkest part and reads as empty sky. */
  .tgny-hero.is-photo { background-position: 68% center; }

  .tgny-hero { padding: 34px 16px 30px; }

  .tgny-hero .tgny-hero-kicker { margin-bottom: 12px; }

  .tgny-hero h1 {
    font-size: 28px;
    line-height: 1.08;
    margin-bottom: 4px;
  }
  .tgny-hero .tgny-hero-year { margin-top: 2px; }

  .tgny-hero .tgny-hero-sub {
    font-size: 14.5px;
    line-height: 1.5;
    margin: 12px auto 10px;
  }
  .tgny-hero .tgny-note {
    font-size: 13px;
    line-height: 1.45;
    margin: 8px auto 16px;
  }

  .tgny-hero .tgny-hero-cta {
    flex-direction: column;
    gap: 9px;
    width: 100%;
  }
  .tgny-hero .tgny-hero-cta > a {
    width: 100%;
    min-height: 46px;
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* The tighter crop already helps legibility, so the overlay is eased back a
     little rather than flattening the photograph. */
  .tgny-hero.is-photo::before {
    background:
      radial-gradient(150% 100% at 50% 45%,
        rgba(6, 31, 69, .84) 0%,
        rgba(6, 31, 69, .66) 55%,
        rgba(6, 31, 69, .44) 100%),
      linear-gradient(180deg,
        rgba(6, 31, 69, .56) 0%,
        rgba(6, 31, 69, .26) 40%,
        rgba(6, 31, 69, .70) 100%);
  }
}

/* ==========================================================================
   New Year hero: mobile spacing and crop (v1.73.17)
   Desktop is untouched. The height stays where v1.73.16 put it - raising it
   would scale the photograph up under `cover` and NARROW the visible window,
   which is why the crop and the breathing room pull against each other here.
   Spacing is redistributed within the same budget instead.
   ========================================================================== */
@media (max-width: 620px) {
  /* 66%: the widest window this height allows still cannot hold both the
     cruise (~20% across) and the fireworks (~85%), so this sits between them
     - skyline and reflections at 390px, reaching the fireworks edge at 430px. */
  .tgny-hero.is-photo { background-position: 66% center; }

  .tgny-hero { padding: 32px 16px 28px; }

  .tgny-hero .tgny-hero-kicker { margin-bottom: 11px; }

  /* Description and pricing note carry their spacing on the top margin only,
     so the gaps stay predictable rather than collapsing against each other. */
  .tgny-hero .tgny-hero-sub { margin: 14px auto 0; }
  .tgny-hero .tgny-note     { margin: 16px auto 19px; }
}

/* A4.43 Customize Package: stop legacy hero enhancer breaking the native mobile hero. */
body .tgp-hero.tg-final-hero,body .tgp-hero.tg-approved-hero{min-height:0!important;display:block!important;padding:64px 20px 68px!important;text-align:center!important;background-color:#082B5C!important;background-image:linear-gradient(135deg,#082B5C 0%,#0C3A73 55%,#00707F 100%);background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;filter:none!important;backdrop-filter:none!important}
body .tgp-hero.tg-final-hero:before,body .tgp-hero.tg-approved-hero:before{display:none!important}
body .tgp-hero.tg-final-hero:after,body .tgp-hero.tg-approved-hero:after{display:block!important;content:""!important;position:absolute!important;inset:0!important;background:radial-gradient(680px 260px at 15% 0%,rgba(0,149,169,.35),transparent 70%),radial-gradient(520px 220px at 88% 100%,rgba(127,216,226,.22),transparent 70%)!important;pointer-events:none!important}
body .tgp-hero .tg-hero-kicker,body .tgp-hero .tg-approved-features{display:none!important}
body .tgp-hero .tgp-hero-in{position:relative!important;z-index:2!important;width:auto!important;max-width:820px!important;margin:0 auto!important;padding:0!important;display:block!important}
body .tgp-hero.tg-final-hero h1,body .tgp-hero.tg-approved-hero h1{max-width:none!important;margin:0 0 12px!important;font-family:'Sora',sans-serif!important;font-size:52px!important;line-height:1.1!important;letter-spacing:-.02em!important;text-align:center!important;color:#fff!important}
body .tgp-hero.tg-final-hero .tgp-hero-in>p:not(.tgp-hero-kicker),body .tgp-hero.tg-approved-hero .tgp-hero-in>p:not(.tgp-hero-kicker){display:block!important;width:auto!important;max-width:620px!important;margin:0 auto 22px!important;font-size:18px!important;line-height:1.6!important;text-align:center!important;color:rgba(255,255,255,.86)!important}
@media(max-width:900px){
body .tgp-hero.tg-final-hero,body .tgp-hero.tg-approved-hero{min-height:0!important;padding:34px 18px 38px!important}
body .tgp-hero.tg-final-hero h1,body .tgp-hero.tg-approved-hero h1{font-size:30px!important;line-height:1.15!important;letter-spacing:-.02em!important}
body .tgp-hero.tg-final-hero .tgp-hero-in>p:not(.tgp-hero-kicker),body .tgp-hero.tg-approved-hero .tgp-hero-in>p:not(.tgp-hero-kicker){font-size:14.5px!important;line-height:1.55!important;margin-bottom:18px!important}
body .tgp-hero .tgp-trust{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;max-width:430px!important;margin:0 auto!important}
body .tgp-hero .tgp-trust span{white-space:normal!important;justify-content:center!important;text-align:center!important;min-width:0!important;padding:7px 8px!important;font-size:11.5px!important;line-height:1.3!important}
.tgp-wrap{max-width:100%!important;overflow:hidden}.tgp-card,.tgp-side,.tgp-side-inner,.tgp-step,.tgp-field,.tgp-two,.tgp-opts{max-width:100%!important;min-width:0!important}.tgp-in,.tgp-step input,.tgp-step select,.tgp-step textarea{max-width:100%!important}
}
@media(max-width:390px){body .tgp-hero .tgp-trust{grid-template-columns:1fr!important}}

/* A4.44 — remove the remaining inherited magenta state from package builder. */
.tgp-side-toggle,
.tgp-side-toggle:hover,
.tgp-side-toggle:focus,
.tgp-side-toggle:active,
.tgp-side.is-open .tgp-side-toggle {
  background:#FFFFFF !important;
  background-image:none !important;
  border-color:#BFDDE3 !important;
  color:#082B5C !important;
  box-shadow:none !important;
}
.tgp-side-toggle .tgp-side-caret { color:#0095A9 !important; }
.tgp-btn-primary,
.tgp-btn-primary:hover,
.tgp-btn-primary:focus,
.tgp-btn-primary:active,
#tgp-next,#tgp-next:hover,#tgp-next:focus,#tgp-next:active,
#tgp-submit,#tgp-submit:hover,#tgp-submit:focus,#tgp-submit:active {
  background:#0095A9 !important;
  background-image:none !important;
  border-color:#0095A9 !important;
  color:#fff !important;
}


/* A4.51 — native Elementor New Year page hardening. Elementor's global button
   palette must never recolour the catalogue filters. */
body.page .tgny-wrap button.tgny-chip {
  appearance:none !important;
  background:#fff !important;
  border:1.5px solid #E6ECF2 !important;
  color:#5A6B85 !important;
  box-shadow:none !important;
}
body.page .tgny-wrap button.tgny-chip:hover {
  background:#F5FAFB !important;
  border-color:#7FD8E2 !important;
  color:#082B5C !important;
}
body.page .tgny-wrap button.tgny-chip.is-on {
  background:#082B5C !important;
  border-color:#082B5C !important;
  color:#fff !important;
}

/* A4.52 deterministic New Year filters */
.tgny-chips a.tgny-chip{text-decoration:none!important;display:inline-flex;align-items:center;justify-content:center}


/* V12.17: .tgpl-check had no rule of its own, so the label inherited the
   theme's block-level label styling and the text dropped below the checkbox.
   This is the shared filter-row component: every checkbox group in the
   packages sidebar uses .tgpl-check, so one rule fixes them all. Names,
   values and filter behaviour are untouched. */
.tgpl-check{display:flex!important;align-items:center;gap:9px;padding:6px 0;font-size:14px;line-height:1.35;color:#172033;cursor:pointer}
.tgpl-check input[type="checkbox"]{flex:0 0 auto;width:16px;height:16px;margin:0;accent-color:#22B8CF;cursor:pointer}
.tgpl-check:hover{color:#082B5C}
@media(max-width:600px){.tgpl-check{padding:8px 0}}