/* =========================================================================
   ELEGANT ADVENTURES — Design tokens
   Palette pulled straight from the brand mark: dusk-blue peaks, a sunset
   sun, walnut-brown palms, on warm paper. Signature device: a jagged
   mountain-ridge divider (echoing the logo's own peaks) breaks up every
   major section instead of a plain straight rule.
   ========================================================================= */
:root{
  --ink:            #1E2A2F;
  --ink-soft:       #4C5C63;
  --paper:          #FBF6EC;
  --paper-alt:      #F3ECDB;
  --dusk:           #1F4E79;
  --dusk-deep:      #16354F;
  --dusk-ice:       #AFCBE0;
  --sun:            #E8871E;
  --sun-deep:       #C96A16;
  --sun-light:      #F5B25C;
  --walnut:         #6B4226;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  --shadow-card: 0 12px 32px -16px rgba(22, 53, 79, 0.35);
  --shadow-pop:  0 20px 48px -18px rgba(22, 53, 79, 0.45);

  --wrap: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0 0 .5em; line-height:1.15; color:var(--dusk-deep); }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }

:focus-visible{ outline:3px solid var(--sun); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------------------------------------------------------------------- */
/* Top utility bar                                                        */
/* ---------------------------------------------------------------------- */
.topbar{ background:var(--dusk-deep); color:#EAF1F7; font-size:.85rem; }
.topbar-inner{ display:flex; justify-content:space-between; align-items:center; padding:8px 24px; flex-wrap:wrap; gap:6px; }
.topbar-contact a{ margin-right:18px; opacity:.9; }
.topbar-contact a:hover, .topbar-social a:hover{ color:var(--sun-light); }
.topbar-social a{ margin-left:14px; opacity:.9; }

/* ---------------------------------------------------------------------- */
/* Header / Nav                                                           */
/* ---------------------------------------------------------------------- */
.site-header{ background:var(--paper); position:sticky; top:0; z-index:80; box-shadow:0 2px 14px rgba(22,53,79,.08); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 24px; gap:20px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:52px; width:auto; }
.brand-text{ display:flex; flex-direction:column; line-height:1.2; }
.brand-text strong{ font-family:var(--font-display); font-size:1.2rem; color:var(--dusk-deep); }
.brand-text em{ font-style:normal; font-size:.72rem; color:var(--sun-deep); letter-spacing:.06em; text-transform:uppercase; }

.main-nav{ display:flex; align-items:center; gap:28px; font-weight:600; font-size:.95rem; }
.main-nav a{ color:var(--ink); position:relative; padding:6px 0; }
.main-nav a:not(.nav-cta):not(.nav-cta-outline):not(.nav-account):after{ content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--sun); transform:scaleX(0); transition:transform .2s ease; }
.main-nav a:not(.nav-cta):not(.nav-cta-outline):not(.nav-account):hover:after{ transform:scaleX(1); }
.nav-cta{
  background:var(--sun); color:#fff !important; padding:11px 22px; border-radius:999px;
  box-shadow:0 8px 18px -8px rgba(201,106,22,.6); font-weight:800; font-size:.92rem;
  white-space:nowrap; transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
  letter-spacing:.01em;
}
.nav-cta:hover{ background:var(--sun-deep); transform:translateY(-1px); box-shadow:0 10px 22px -8px rgba(201,106,22,.75); }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; }
.nav-toggle span{ width:24px; height:2px; background:var(--dusk-deep); display:block; }

/* ---------------------------------------------------------------------- */
/* Buttons                                                                */
/* ---------------------------------------------------------------------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 26px; border-radius:999px; font-weight:700; font-size:.95rem; border:2px solid transparent; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn-primary{ background:var(--sun); color:#fff; box-shadow:0 10px 22px -10px rgba(201,106,22,.65); }
.btn-primary:hover{ background:var(--sun-deep); transform:translateY(-2px); }
.btn-outline{ border-color:var(--dusk); color:var(--dusk-deep); background:transparent; }
.btn-outline:hover{ background:var(--dusk); color:#fff; }

/* The hero banner and the price panel sit on a dark background, so their
   outline buttons need the light-on-dark treatment instead. Everywhere
   else (trip cards, order page, follow button, etc.) .btn-outline now
   renders with visible dark text/border by default — the bug was that
   every .btn-outline was white-on-white outside these two dark contexts. */
.hero-copy .btn-outline,
.price-panel .btn-outline{
  border-color:#fff; color:#fff; background:transparent;
}
.hero-copy .btn-outline:hover,
.price-panel .btn-outline:hover{ background:rgba(255,255,255,.15); color:#fff; }
.btn-dusk{ background:var(--dusk); color:#fff; }
.btn-dusk:hover{ background:var(--dusk-deep); }
.btn-ghost{ background:transparent; color:var(--dusk-deep); border-color:var(--dusk-ice); }
.btn-ghost:hover{ background:var(--dusk-ice); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---------------------------------------------------------------------- */
/* Mountain-ridge divider — the signature element, echoes the logo peaks  */
/* ---------------------------------------------------------------------- */
.ridge{ display:block; width:100%; line-height:0; }
.ridge svg{ width:100%; height:60px; display:block; }
.ridge-down{ margin-top:-1px; }

/* ---------------------------------------------------------------------- */
/* Hero + slider                                                          */
/* ---------------------------------------------------------------------- */
.hero{ position:relative; background:var(--dusk-deep); color:#fff; overflow:hidden; }
.hero-slider{ position:relative; height:min(78vh, 640px); min-height:420px; }
.hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1s ease; }
.hero-slide.is-active{ opacity:1; z-index:1; }
.hero-slide img{ width:100%; height:100%; object-fit:cover; }
.hero-slide::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(22,53,79,.15) 0%, rgba(22,53,79,.55) 65%, rgba(22,53,79,.85) 100%); }
.hero-copy{ position:absolute; left:0; right:0; bottom:0; z-index:5; padding:0 24px 90px; text-align:center; }
.hero-copy .wrap{ max-width:820px; }
.hero-copy h1{ color:#fff; font-size:clamp(2.1rem, 4.6vw, 3.6rem); text-shadow:0 4px 24px rgba(0,0,0,.3); }
.hero-copy p{ font-size:1.15rem; color:#F1EAD9; max-width:620px; margin-inline:auto; }
.hero-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:20px; }
.hero-dots{ position:absolute; bottom:24px; left:0; right:0; display:flex; justify-content:center; gap:8px; z-index:6; }
.hero-dots button{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.45); border:0; padding:0; transition:all .2s ease; }
.hero-dots button.is-active{ background:var(--sun); width:26px; border-radius:6px; }
.hero-arrow{ position:absolute; top:50%; translate:0 -50%; z-index:6; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.4); color:#fff; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; backdrop-filter:blur(4px); }
.hero-arrow:hover{ background:rgba(255,255,255,.3); }
.hero-arrow.prev{ left:20px; } .hero-arrow.next{ right:20px; }
@media (max-width:640px){ .hero-arrow{ display:none; } }

/* ---------------------------------------------------------------------- */
/* Section basics                                                         */
/* ---------------------------------------------------------------------- */
.section{ padding:76px 0; }
.section-alt{ background:var(--paper-alt); }
.section-dusk{ background:var(--dusk-deep); color:#fff; }
.section-dusk h2{ color:#fff; }
.eyebrow{ display:inline-block; font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--sun-deep); margin-bottom:10px; }
.section-head{ text-align:center; max-width:680px; margin:0 auto 44px; }
.section-head h2{ font-size:clamp(1.7rem, 3vw, 2.5rem); }
.section-head p{ color:var(--ink-soft); }
.section-dusk .section-head p{ color:#CBDCE9; }

/* ---------------------------------------------------------------------- */
/* Tour category tiles                                                    */
/* ---------------------------------------------------------------------- */
.category-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
@media (max-width:900px){ .category-grid{ grid-template-columns:1fr; } }
.category-card{ position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:300px; display:flex; align-items:flex-end; box-shadow:var(--shadow-card); }
.category-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.category-card:hover img{ transform:scale(1.06); }
.category-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 30%, rgba(22,53,79,.92) 100%); }
.category-card-body{ position:relative; z-index:2; padding:26px; color:#fff; }
.category-card-body h3{ color:#fff; margin-bottom:6px; }
.category-card-body a{ font-weight:700; color:var(--sun-light); }

/* ---------------------------------------------------------------------- */
/* Tour cards                                                             */
/* ---------------------------------------------------------------------- */
.tour-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
@media (max-width:980px){ .tour-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .tour-grid{ grid-template-columns:1fr; } }
.tour-card{ background:#fff; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-card); transition:transform .2s ease, box-shadow .2s ease; display:flex; flex-direction:column; }
.tour-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-pop); }
.tour-card-img{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.tour-card-img img{ width:100%; height:100%; object-fit:cover; }
.tour-badge{ position:absolute; top:14px; left:14px; background:var(--sun); color:#fff; font-size:.72rem; font-weight:800; padding:5px 12px; border-radius:999px; text-transform:uppercase; letter-spacing:.04em; }
.tour-card-body{ padding:20px 22px 24px; display:flex; flex-direction:column; flex:1; }
.tour-card-body h3{ font-size:1.15rem; margin-bottom:8px; }
.tour-meta{ display:flex; gap:14px; font-size:.82rem; color:var(--ink-soft); margin-bottom:12px; flex-wrap:wrap; }
.tour-price{ margin-top:auto; display:flex; align-items:baseline; justify-content:space-between; padding-top:14px; border-top:1px dashed #E4D9C2; }
.tour-price strong{ font-family:var(--font-display); font-size:1.35rem; color:var(--dusk-deep); }
.tour-price span{ font-size:.78rem; color:var(--ink-soft); }

/* ---------------------------------------------------------------------- */
/* Why choose us                                                          */
/* ---------------------------------------------------------------------- */
.feature-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media (max-width:900px){ .feature-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .feature-grid{ grid-template-columns:1fr; } }
.feature-card{ background:#fff; border-radius:var(--radius-md); padding:28px 24px; box-shadow:var(--shadow-card); }
.feature-card .icon{ width:46px; height:46px; border-radius:12px; background:var(--sun); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:14px; }
.feature-card h3{ font-size:1.05rem; }
.feature-card p{ color:var(--ink-soft); font-size:.92rem; margin:0; }

/* ---------------------------------------------------------------------- */
/* Trip customizer promo band                                             */
/* ---------------------------------------------------------------------- */
.customizer-promo{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
@media (max-width:860px){ .customizer-promo{ grid-template-columns:1fr; } }
.customizer-promo img{ border-radius:var(--radius-lg); box-shadow:var(--shadow-pop); }

/* ---------------------------------------------------------------------- */
/* TRIP CUSTOMIZER PAGE                                                   */
/* ---------------------------------------------------------------------- */
.customizer-layout{ display:grid; grid-template-columns:1fr 380px; gap:32px; align-items:start; }
@media (max-width:980px){ .customizer-layout{ grid-template-columns:1fr; } }

.step-card{ background:#fff; border-radius:var(--radius-md); box-shadow:var(--shadow-card); padding:28px; margin-bottom:24px; }
.step-card h2{ font-size:1.2rem; display:flex; align-items:center; gap:10px; }
.step-num{ width:30px; height:30px; border-radius:50%; background:var(--dusk); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:.9rem; font-family:var(--font-body); font-weight:800; }

.dest-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:16px; }
.dest-tile{
  position:relative; border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:1/1;
  cursor:grab; border:3px solid transparent; box-shadow:0 8px 18px -10px rgba(22,53,79,.4);
  transition:border-color .15s ease, transform .15s ease;
  background:var(--dusk-ice);
}
.dest-tile:active{ cursor:grabbing; }
.dest-tile img{ width:100%; height:100%; object-fit:cover; }
.dest-tile::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(22,53,79,.88) 100%); }
.dest-tile-label{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:10px; color:#fff; font-weight:700; font-size:.85rem; }
.dest-tile-price{ position:absolute; top:8px; right:8px; z-index:2; background:rgba(255,255,255,.92); color:var(--dusk-deep); font-size:.7rem; font-weight:800; padding:3px 8px; border-radius:999px; }
.dest-tile.is-selected{ border-color:var(--sun); transform:scale(.97); }
.dest-tile.is-selected .dest-tile-label::before{ content:'✓ '; color:var(--sun-light); }
.dest-tile:focus-visible{ outline:3px solid var(--sun); outline-offset:3px; }

.dropzone{
  min-height:90px; border:2px dashed var(--dusk-ice); border-radius:var(--radius-sm);
  padding:14px; display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; align-content:flex-start;
  background:var(--paper-alt); transition:border-color .15s ease, background .15s ease;
}
.dropzone.is-dragover{ border-color:var(--sun); background:#FDF1DF; }
.dropzone-empty{ color:var(--ink-soft); font-size:.9rem; margin:auto; }
.dropzone-chip{ display:flex; align-items:center; gap:8px; background:#fff; border-radius:999px; padding:6px 8px 6px 12px; box-shadow:0 4px 10px -4px rgba(22,53,79,.35); font-size:.85rem; font-weight:600; }
.dropzone-chip button{ background:var(--dusk); color:#fff; border:0; width:20px; height:20px; border-radius:50%; font-size:.75rem; line-height:1; }

.rec-card{ position:relative; border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:1/1; box-shadow:0 8px 18px -10px rgba(22,53,79,.4); }
.rec-card img{ width:100%; height:100%; object-fit:cover; }
.rec-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(22,53,79,.9) 100%); }
.rec-card-body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:10px; color:#fff; }
.rec-card-body strong{ display:block; font-size:.85rem; }
.rec-card-badge{ position:absolute; top:8px; left:8px; z-index:2; background:var(--sun); color:#fff; font-size:.68rem; font-weight:800; padding:3px 8px; border-radius:999px; }
.rec-card-add{ position:absolute; top:8px; right:8px; z-index:2; background:#fff; color:var(--dusk-deep); border:0; width:28px; height:28px; border-radius:50%; font-weight:800; font-size:1rem; cursor:pointer; }
.rec-card-msg{ font-size:.68rem; color:#EAF1F7; opacity:.9; }

.field-row{ display:flex; gap:16px; flex-wrap:wrap; }
.field{ flex:1; min-width:160px; margin-bottom:16px; }
.field label{ display:block; font-weight:700; font-size:.85rem; margin-bottom:6px; color:var(--dusk-deep); }
.field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=number], .field input[type=date], .field input[type=password], .field input[type=url], .field select, .field textarea{
  width:100%; padding:12px 14px; border:1.5px solid #E4D9C2; border-radius:var(--radius-sm); font-family:inherit; font-size:.95rem; background:#fff; color:var(--ink);
}
.field textarea{ resize:vertical; min-height:90px; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--sun); }

.stepper{ display:flex; align-items:center; gap:0; border:1.5px solid #E4D9C2; border-radius:999px; overflow:hidden; width:fit-content; }
.stepper button{ width:38px; height:38px; border:0; background:var(--paper-alt); font-size:1.1rem; font-weight:800; color:var(--dusk-deep); }
.stepper button:hover{ background:var(--dusk-ice); }
.stepper output{ width:42px; text-align:center; font-weight:800; }

.vehicle-grid, .tier-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:14px; }
.option-card{ border:2px solid #E4D9C2; border-radius:var(--radius-sm); padding:14px; cursor:pointer; text-align:center; background:#fff; transition:border-color .15s ease, box-shadow .15s ease; }
.option-card img{ height:56px; margin:0 auto 8px; object-fit:contain; }
.option-card strong{ display:block; font-size:.88rem; }
.option-card span{ display:block; font-size:.76rem; color:var(--ink-soft); }
.option-card.is-selected{ border-color:var(--sun); box-shadow:0 0 0 3px rgba(232,135,30,.18); }
.option-card input{ position:absolute; opacity:0; pointer-events:none; }

.couple-toggle{ display:flex; align-items:center; gap:10px; background:var(--paper-alt); padding:12px 16px; border-radius:999px; width:fit-content; }
.switch{ position:relative; width:44px; height:24px; }
.switch input{ opacity:0; width:0; height:0; }
.switch .track{ position:absolute; inset:0; background:#D7CBA9; border-radius:999px; transition:.2s; }
.switch .track::before{ content:''; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; }
.switch input:checked + .track{ background:var(--sun); }
.switch input:checked + .track::before{ transform:translateX(20px); }

/* live price summary panel */
.price-panel{ position:sticky; top:100px; background:var(--dusk-deep); color:#fff; border-radius:var(--radius-md); padding:26px; box-shadow:var(--shadow-pop); }
.price-panel h3{ color:#fff; font-size:1.1rem; }
.price-line{ display:flex; justify-content:space-between; font-size:.88rem; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.12); color:#DCE8F1; }
.price-line.discount span:last-child{ color:#8FE3A3; }
.price-total{ display:flex; justify-content:space-between; align-items:baseline; margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.25); }
.price-total strong{ font-family:var(--font-display); font-size:1.9rem; }
.price-days{ font-size:.78rem; color:var(--sun-light); margin-top:4px; }
.price-panel .btn{ margin-top:18px; }
.price-panel small{ display:block; margin-top:10px; color:#B7C9D6; font-size:.72rem; }

/* ---------------------------------------------------------------------- */
/* Forms (contact / inquiry)                                              */
/* ---------------------------------------------------------------------- */
.form-card{ background:#fff; border-radius:var(--radius-md); box-shadow:var(--shadow-card); padding:32px; }
.alert{ padding:14px 18px; border-radius:var(--radius-sm); margin-bottom:20px; font-size:.9rem; font-weight:600; }
.alert-success{ background:#E4F5E8; color:#1E6B34; }
.alert-error{ background:#FBE4E1; color:#9B2C1F; }

/* ---------------------------------------------------------------------- */
/* Footer                                                                 */
/* ---------------------------------------------------------------------- */
.site-footer{ background:var(--dusk-deep); color:#CBDCE9; padding-top:60px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; padding-bottom:36px; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-col img{ height:44px; margin-bottom:14px; }
.footer-col h4{ color:#fff; font-size:1rem; margin-bottom:14px; }
.footer-col a, .footer-col span{ display:block; margin-bottom:10px; font-size:.9rem; opacity:.85; }
.footer-col a:hover{ opacity:1; color:var(--sun-light); }
.footer-social a{ display:inline-block; margin-right:16px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding:18px 24px; display:flex; justify-content:space-between; font-size:.8rem; opacity:.75; flex-wrap:wrap; gap:8px; }

.whatsapp-fab{ position:fixed; right:22px; bottom:22px; z-index:90; background:#25D366; color:#fff; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px -8px rgba(0,0,0,.4); }

/* ---------------------------------------------------------------------- */
/* Mobile nav                                                             */
/* ---------------------------------------------------------------------- */
@media (max-width:900px){
  .nav-toggle{ display:flex; }
  .main-nav{
    position:absolute; top:100%; left:0; right:0; background:var(--paper);
    flex-direction:column; align-items:stretch; gap:0; padding:6px 24px 18px;
    box-shadow:0 12px 24px -12px rgba(22,53,79,.3);
    display:none;
  }
  .main-nav.is-open{ display:flex; }
  .main-nav a{ padding:14px 0; border-bottom:1px solid #EDE3CE; }
  .nav-cta, .nav-cta-outline{ margin-top:12px; text-align:center; display:block; }
}

/* generic skeleton/loading shimmer for AJAX price updates */
.is-updating{ opacity:.55; filter:blur(.3px); transition:opacity .15s ease; }

/* ---------------------------------------------------------------------- */
/* Account nav (header)                                                   */
/* ---------------------------------------------------------------------- */
.nav-cta-outline{
  border:2px solid var(--sun); border-radius:999px; padding:9px 20px; color:var(--sun-deep) !important;
  font-weight:800; font-size:.92rem; white-space:nowrap;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.nav-cta-outline:hover{ background:var(--sun); color:#fff !important; transform:translateY(-1px); }
.nav-account{ display:flex; align-items:center; gap:8px; font-weight:700; }
.nav-avatar{ width:28px; height:28px; border-radius:50%; object-fit:cover; border:2px solid var(--sun); }

/* ---------------------------------------------------------------------- */
/* Favorite heart toggle (on destination tiles in the trip customizer)    */
/* ---------------------------------------------------------------------- */
.fav-btn{
  position:absolute; top:8px; left:8px; z-index:3; width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.92); border:0; display:flex; align-items:center; justify-content:center;
  font-size:1rem; cursor:pointer; color:#B7C9D6; transition:transform .15s ease, color .15s ease;
}
.fav-btn:hover{ transform:scale(1.12); }
.fav-btn.is-favorited{ color:#E5484D; }
.fav-btn.is-favorited::before{ content:'♥'; }
.fav-btn:not(.is-favorited)::before{ content:'♡'; }

/* ---------------------------------------------------------------------- */
/* Badge / points widget (account dashboard + profile)                    */
/* ---------------------------------------------------------------------- */
.badge-panel{ display:flex; align-items:center; gap:18px; background:linear-gradient(135deg, var(--dusk-deep), var(--dusk)); color:#fff; border-radius:var(--radius-md); padding:24px 28px; box-shadow:var(--shadow-pop); }
.badge-icon{ font-size:2.6rem; line-height:1; }
.badge-info strong{ display:block; font-family:var(--font-display); font-size:1.3rem; }
.badge-info span{ font-size:.85rem; color:var(--dusk-ice); }
.badge-progress{ margin-top:8px; height:6px; border-radius:999px; background:rgba(255,255,255,.2); overflow:hidden; width:180px; }
.badge-progress-fill{ height:100%; background:var(--sun); border-radius:999px; }

/* ---------------------------------------------------------------------- */
/* My Trips dashboard cards                                               */
/* ---------------------------------------------------------------------- */
.trip-status-pill{ display:inline-block; padding:3px 12px; border-radius:999px; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.trip-status-draft{ background:#FCEAD3; color:var(--sun-deep); }
.trip-status-new, .trip-status-contacted{ background:#DDEAF6; color:var(--dusk); }
.trip-status-confirmed{ background:#DFF3E5; color:#1E7A44; }
.trip-status-cancelled{ background:#F1E9E9; color:#9A8E8E; }

.trip-card{ background:#fff; border-radius:var(--radius-md); box-shadow:var(--shadow-card); padding:22px 24px; margin-bottom:16px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.trip-card h4{ margin:0 0 6px; font-size:1.05rem; }
.trip-card .trip-meta{ font-size:.82rem; color:var(--ink-soft); }
.trip-card .trip-total{ font-family:var(--font-display); font-size:1.3rem; color:var(--dusk-deep); }

.favorite-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:14px; }

/* ---------------------------------------------------------------------- */
/* Avatar upload (profile page)                                           */
/* ---------------------------------------------------------------------- */
.avatar-upload{ display:flex; align-items:center; gap:20px; margin-bottom:18px; }
.avatar-preview{ width:88px; height:88px; border-radius:50%; object-fit:cover; border:3px solid var(--sun-light); background:var(--paper-alt); }

/* ---------------------------------------------------------------------- */
/* Fun empty states                                                       */
/* ---------------------------------------------------------------------- */
.empty-state{ text-align:center; padding:50px 20px; color:var(--ink-soft); }
.empty-state .big-emoji{ font-size:2.6rem; display:block; margin-bottom:10px; }

/* ---------------------------------------------------------------------- */
/* Social feed: post cards, double-tap-to-like, comments                  */
/* ---------------------------------------------------------------------- */
.post-card{ background:#fff; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-card); margin-bottom:24px; }
.post-image-wrap{ position:relative; aspect-ratio:4/3; overflow:hidden; user-select:none; -webkit-user-select:none; cursor:pointer; }
.post-image-wrap img{ width:100%; height:100%; object-fit:cover; }
.post-like-burst{
  position:absolute; top:50%; left:50%; font-size:5rem; line-height:1; pointer-events:none;
  transform:translate(-50%,-50%) scale(0); opacity:0;
}
.post-like-burst.is-bursting{ animation:heartBurst .75s cubic-bezier(.17,.89,.32,1.49); }
@keyframes heartBurst{
  0%{ transform:translate(-50%,-50%) scale(0); opacity:0; }
  25%{ transform:translate(-50%,-50%) scale(1.15); opacity:1; }
  50%{ transform:translate(-50%,-50%) scale(.95); opacity:1; }
  100%{ transform:translate(-50%,-50%) scale(1.3); opacity:0; }
}
.post-body{ padding:16px 18px 18px; }
.post-caption{ font-size:.94rem; margin-bottom:10px; }
.post-actions{ display:flex; align-items:center; gap:18px; margin-bottom:10px; }
.post-like-btn{ background:none; border:0; font-size:1.3rem; color:var(--ink-soft); cursor:pointer; display:flex; align-items:center; gap:6px; padding:0; }
.post-like-btn .like-count{ font-size:.85rem; font-weight:700; }
.post-like-btn.is-liked{ color:#E5484D; }
.post-like-btn:disabled{ cursor:default; opacity:.6; }
.post-comment-count{ font-size:.85rem; color:var(--ink-soft); }
.post-comments{ margin-bottom:10px; max-height:180px; overflow-y:auto; }
.post-comment{ font-size:.86rem; margin:0 0 6px; color:var(--ink); }
.comment-form{ display:flex; gap:8px; border-top:1px solid #EFE7D6; padding-top:12px; }
.comment-form input{ flex:1; border:1.5px solid #E4D9C2; border-radius:999px; padding:9px 14px; font-size:.88rem; font-family:inherit; }
.comment-form button{ background:var(--dusk); color:#fff; border:0; border-radius:999px; padding:9px 18px; font-weight:700; font-size:.85rem; }

/* Nav follow-button carried avatar next to "My Trips" already uses .nav-avatar above */

/* ---------------------------------------------------------------------- */
/* Cookie consent banner                                                  */
/* ---------------------------------------------------------------------- */
.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:200; max-width:640px; margin:0 auto;
  background:var(--dusk-deep); color:#EAF1F7; border-radius:var(--radius-md); padding:18px 22px;
  box-shadow:var(--shadow-pop); display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.cookie-banner p{ margin:0; font-size:.86rem; flex:1; min-width:220px; }
.cookie-banner .btn{ white-space:nowrap; }