:root{
  --brand:#1E7F56;--brand-dark:#16654A;--brand-soft:#E6F3EC;
  --ink:#222;--ink2:#3A3A3A;--muted:#6A6A6A;--line:#DDDDDD;--line2:#EBEBEB;--chip:#F0F0F0;--bg:#fff;
  --r:14px;--r-lg:20px;--shadow:0 6px 20px rgba(0,0,0,.12);--shadow-sm:0 2px 10px rgba(0,0,0,.08);
  --pad:40px;--max:1440px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Figtree,Inter,system-ui,sans-serif;font-size:15px;line-height:1.45}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-weight:600}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.wrap-narrow{max-width:1120px;margin:0 auto;padding:0 var(--pad)}
.muted{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hidden{display:none!important}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line2);transition:box-shadow .2s}
.hdr.scrolled{box-shadow:0 1px 12px rgba(0,0,0,.06)}
.hdr-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;padding-bottom:4px}
.logo{display:flex;align-items:center;gap:8px}
.logo-mark{width:34px;height:34px;border-radius:9px;background:var(--brand);display:grid;place-items:center;flex:none}
.logo-word{font-family:Nunito,Figtree,sans-serif;font-weight:900;font-size:26px;letter-spacing:-.8px;color:var(--brand)}
.hdr-actions{display:flex;align-items:center;gap:8px}
.link-btn{font-size:15px;font-weight:500;padding:11px 14px;border-radius:999px;border:0;background:none;cursor:pointer}
.link-btn:hover{background:var(--chip)}
.icon-btn{width:44px;height:44px;border-radius:999px;border:0;background:var(--line2);display:grid;place-items:center;cursor:pointer;position:relative;flex:none}
.icon-btn:hover{background:#E0E0E0}
.dot-badge{position:absolute;top:9px;right:10px;width:9px;height:9px;border-radius:9px;background:#E0483E;border:2px solid #fff}
.avatar{width:32px;height:32px;border-radius:99px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.menu-btn{display:flex;align-items:center;gap:8px;height:44px;padding:0 6px 0 14px;border:1px solid var(--line);border-radius:999px;background:#fff;cursor:pointer}
.menu-btn:hover{box-shadow:var(--shadow-sm)}

.tabs{display:flex;justify-content:center;gap:6px;margin-top:6px;flex-wrap:wrap}
.tab{display:flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;font-size:15px;font-weight:500;color:#555;position:relative}
.tab:hover{background:var(--chip);color:var(--ink)}
.tab.on{background:var(--chip);font-weight:600;color:var(--ink)}
.tab .new{position:absolute;top:-6px;right:-4px;background:var(--brand);color:#fff;font-size:9px;font-weight:700;letter-spacing:.4px;padding:2px 6px;border-radius:99px}

/* search bar */
.sbar{max-width:860px;margin:14px auto 0;border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow-sm);display:flex;align-items:center;background:#fff;position:relative}
.sbar.active{background:var(--chip)}
.sf{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:1px;padding:13px 24px;border-radius:999px;cursor:pointer;position:relative;border:0;background:none;text-align:left}
.sf:hover{background:var(--line2)}
.sbar.active .sf:hover{background:#E4E4E4}
.sf.on{background:#fff!important;box-shadow:var(--shadow)}
.sf b{font-size:12px;font-weight:700}
.sf span,.sf input{font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;outline:0;background:transparent;padding:0;font-family:inherit}
.sf input{color:var(--ink)}
.sf input::placeholder{color:var(--muted)}
.sf span.val{color:var(--ink);font-weight:500}
.sf-where{flex:1.5 1 0}
.sdiv{width:1px;height:32px;background:var(--line);flex:none}
.sgo{flex:none;height:50px;min-width:50px;margin:0 8px 0 0;border-radius:999px;border:0;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-weight:600;padding:0 15px;transition:all .2s}
.sgo:hover{background:var(--brand-dark)}
.sbar.active .sgo .lbl{display:inline}
.sgo .lbl{display:none}
.pop{position:absolute;top:calc(100% + 10px);background:#fff;border-radius:28px;box-shadow:0 10px 40px rgba(0,0,0,.18);padding:24px;z-index:60;animation:pop .16s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.pop-where{left:0;width:420px}
.pop-dates{left:50%;transform:translateX(-50%);width:760px;max-width:calc(100vw - 32px)}
.pop-dates{animation:none}
.pop-who{right:0;width:400px}
.sugg{display:flex;align-items:center;gap:14px;padding:10px;border-radius:14px;cursor:pointer;width:100%;border:0;background:none;text-align:left}
.sugg:hover,.sugg.kb{background:var(--chip)}
.sugg-ico{width:52px;height:52px;border-radius:12px;background:var(--chip);display:grid;place-items:center;flex:none;overflow:hidden}
.sugg-ico img{width:100%;height:100%;object-fit:cover}
.sugg b{display:block;font-weight:600;font-size:15px}
.sugg small{color:var(--muted);font-size:13px}
.pop h4{font-size:12px;font-weight:700;margin:0 0 8px 10px;color:var(--ink2)}

/* calendar */
.cal{display:grid;grid-template-columns:1fr 1fr;gap:36px;user-select:none}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-head strong{font-size:16px;flex:1;text-align:center}
.cal-nav{width:34px;height:34px;border-radius:99px;border:0;background:none;cursor:pointer;display:grid;place-items:center;font-size:20px}
.cal-nav:hover{background:var(--chip)}
.cal-nav[disabled]{opacity:.25;cursor:default;background:none}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:2px}
.cal-dow{font-size:12px;color:var(--muted);text-align:center;padding:6px 0;font-weight:600}
.cal-d{aspect-ratio:1;border:0;background:none;cursor:pointer;font-size:14px;font-weight:600;position:relative;padding:0}
.cal-d span{display:grid;place-items:center;width:100%;height:100%;border-radius:99px;position:relative;z-index:1}
.cal-d:hover span{outline:1.5px solid var(--ink)}
.cal-d.past{color:#C4C4C4;cursor:default;text-decoration:line-through;font-weight:400}
.cal-d.past:hover span{outline:none}
.cal-d.in{background:var(--chip)}
.cal-d.s,.cal-d.e{background:linear-gradient(90deg,transparent 50%,var(--chip) 50%)}
.cal-d.e{background:linear-gradient(90deg,var(--chip) 50%,transparent 50%)}
.cal-d.s.e{background:none}
.cal-d.s span,.cal-d.e span{background:var(--ink);color:#fff}
.cal-d.today span::after{content:"";position:absolute;bottom:5px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:9px;background:var(--brand)}
.cal-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:10px;flex-wrap:wrap}
.flex-chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:#fff;border-radius:99px;padding:7px 14px;font-size:13px;cursor:pointer;font-weight:500}
.chip:hover{border-color:var(--ink)}
.chip.on{border-color:var(--ink);background:var(--chip);box-shadow:inset 0 0 0 1px var(--ink)}

/* guests */
.grow{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--line2)}
.grow:last-child{border-bottom:0}
.grow b{display:block;font-weight:600}
.grow small{color:var(--muted);font-size:13px}
.step{display:flex;align-items:center;gap:14px}
.step button{width:32px;height:32px;border-radius:99px;border:1px solid #B0B0B0;background:#fff;cursor:pointer;font-size:18px;line-height:1;color:var(--ink2);display:grid;place-items:center}
.step button:hover:not([disabled]){border-color:var(--ink)}
.step button[disabled]{opacity:.3;cursor:not-allowed}
.step output{min-width:18px;text-align:center}

/* categories */
.cats{display:flex;gap:28px;margin-top:20px;overflow-x:auto;scrollbar-width:none;padding-bottom:0}
.cats::-webkit-scrollbar{display:none}
.cat{flex:none;min-width:60px;display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;cursor:pointer;font-size:13px;font-weight:500;color:var(--muted);padding:4px 2px 12px;border-bottom:2px solid transparent;opacity:.85}
.cat svg path{stroke:currentColor}
.cat:hover{color:var(--ink);border-bottom-color:var(--line);opacity:1}
.cat.on{color:var(--ink);border-bottom-color:var(--ink);font-weight:600;opacity:1}
.cats-row{display:flex;align-items:center;gap:16px}
.cats-row .cats{flex:1}
.filter-btn{flex:none;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:11px 14px;font-size:13px;font-weight:600;cursor:pointer;margin-top:8px}
.filter-btn:hover{border-color:var(--ink)}

/* ---------- main sections ---------- */
main{min-height:60vh}
.rows{display:flex;flex-direction:column;gap:36px;padding:28px 0 56px}
.row-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.row-h h2{font-size:22px}
.row-h h2 a:hover{text-decoration:underline}
.arrows{display:flex;gap:8px}
.arr{width:32px;height:32px;border-radius:99px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:16px;display:grid;place-items:center;transition:opacity .2s}
.arr:hover:not([disabled]){box-shadow:var(--shadow-sm);border-color:#aaa}
.arr[disabled]{opacity:.35;cursor:default}
.track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 5*16px)/6);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.track>*{scroll-snap-align:start}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:36px 22px}

/* card */
.card{display:flex;flex-direction:column;gap:10px;cursor:pointer;min-width:0}
.ph{aspect-ratio:1;border-radius:var(--r-lg);position:relative;overflow:hidden;background:#E9EFEC}
.ph-strip{display:flex;height:100%;transition:transform .35s cubic-bezier(.3,.7,.3,1)}
.ph-strip img{width:100%;height:100%;object-fit:cover;flex:none}
.badge{position:absolute;top:12px;left:12px;background:#fff;border-radius:999px;padding:6px 11px;font-size:12px;font-weight:600;line-height:1.2;box-shadow:0 1px 4px rgba(0,0,0,.12);z-index:2}
.heart{position:absolute;top:6px;right:6px;width:44px;height:44px;border:0;background:none;cursor:pointer;display:grid;place-items:center;z-index:2;transition:transform .15s}
.heart:active{transform:scale(.85)}
.heart path{fill:rgba(0,0,0,.35);stroke:#fff;stroke-width:2;transition:fill .15s}
.heart.on path{fill:#E0483E}
.heart.pulse{animation:pulse .35s}
@keyframes pulse{50%{transform:scale(1.3)}}
.dots{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:4px;z-index:2}
.dots i{width:6px;height:6px;border-radius:9px;background:rgba(255,255,255,.6);transition:all .2s}
.dots i.on{background:#fff;transform:scale(1.15)}
.ph-nav{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:99px;border:0;background:rgba(255,255,255,.92);cursor:pointer;display:grid;place-items:center;opacity:0;transition:opacity .2s;z-index:2;font-size:15px;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.ph-nav.l{left:10px}.ph-nav.r{right:10px}
.card:hover .ph-nav{opacity:1}
.card:hover .ph-nav[disabled]{opacity:0}
.ci{display:flex;flex-direction:column;gap:1px;font-size:14px}
.ci-top{display:flex;justify-content:space-between;gap:8px}
.ci h3{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci .rt{display:flex;align-items:center;gap:3px;flex:none;font-size:14px}
.ci .muted{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci .price{margin-top:3px}
.ci .price strong{font-weight:600}
.card.hl .ph{box-shadow:0 0 0 3px var(--brand)}

/* destinations */
.dest{display:flex;flex-direction:column;gap:10px;cursor:pointer}
.dest .im{aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:#E9EFEC}
.dest img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.dest:hover img{transform:scale(1.05)}
.dest strong{font-size:15px;font-weight:600}
.dest small{font-size:12px;color:var(--muted);display:block}
.dtrack{grid-auto-columns:calc((100% - 7*16px)/8)}

/* promo band */
.band{border-radius:28px;overflow:hidden;display:grid;grid-template-columns:1.1fr 1fr;background:#0F3D2C;color:#fff;min-height:320px}
.band-copy{padding:48px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.band-copy h2{font-size:34px;line-height:1.1;letter-spacing:-.5px}
.band-copy p{margin:0;color:#CFE6DA;font-size:16px;max-width:460px}
.band-im{background-size:cover;background-position:center;position:relative}
.band-stats{display:flex;gap:28px;flex-wrap:wrap;margin-top:6px}
.band-stats b{display:block;font-size:24px}
.band-stats small{color:#A9CDBB;font-size:13px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:14px 22px;font-weight:600;font-size:16px;cursor:pointer;transition:transform .1s,background .2s}
.btn:active{transform:scale(.98)}
.btn-pri{background:var(--brand);color:#fff}
.btn-pri:hover{background:var(--brand-dark)}
.btn-grad{background:linear-gradient(90deg,#1E7F56,#27A06D);color:#fff;width:100%}
.btn-grad:hover{background:linear-gradient(90deg,#16654A,#1E7F56)}
.btn-white{background:#fff;color:var(--ink)}
.btn-ghost{background:#fff;border:1px solid var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--chip)}
.btn-sm{padding:9px 14px;font-size:14px;border-radius:10px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- footer ---------- */
footer{background:#F7F7F7;border-top:1px solid var(--line2);margin-top:20px}
.ft-insp{padding:40px 0 28px}
.ft-insp h2{font-size:22px;margin-bottom:14px}
.ft-tabs{display:flex;gap:22px;border-bottom:1px solid var(--line);margin-bottom:22px;overflow-x:auto}
.ft-tabs button{border:0;background:none;padding:8px 0 12px;cursor:pointer;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.ft-tabs button.on{color:var(--ink);border-bottom-color:var(--ink);font-weight:600}
.ft-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px 20px}
.ft-links a b{display:block;font-weight:600;font-size:14px}
.ft-links a small{color:var(--muted)}
.ft-links a:hover b{text-decoration:underline}
.ft-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:32px 0;border-top:1px solid var(--line)}
.ft-cols h3{font-size:14px;font-weight:600;margin-bottom:12px}
.ft-cols a{display:block;font-size:14px;margin-bottom:10px}
.ft-cols a:hover{text-decoration:underline}
.ft-bot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:22px 0 30px;border-top:1px solid var(--line);font-size:14px}
.ft-bot button{border:0;background:none;cursor:pointer;font-weight:600;font-size:14px;display:inline-flex;gap:6px;align-items:center;padding:4px 6px;border-radius:8px}
.ft-bot button:hover{background:var(--line2)}

/* ---------- detail ---------- */
.det{padding-top:24px;padding-bottom:60px}
.det-title{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.det-title h1{font-size:28px;letter-spacing:-.3px}
.det-acts{display:flex;gap:6px}
.det-acts button{border:0;background:none;display:flex;gap:6px;align-items:center;padding:8px 10px;border-radius:8px;cursor:pointer;font-weight:600;font-size:14px;text-decoration:underline}
.det-acts button:hover{background:var(--chip)}
.gal{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:220px 220px;gap:8px;border-radius:var(--r-lg);overflow:hidden;position:relative}
.gal button{border:0;padding:0;cursor:pointer;background:#E9EFEC;overflow:hidden}
.gal img{width:100%;height:100%;object-fit:cover;transition:filter .2s}
.gal button:hover img{filter:brightness(.88)}
.gal .g0{grid-row:1/3}
.gal-all{position:absolute;right:20px;bottom:20px;background:#fff;border:1px solid var(--ink)!important;border-radius:10px;padding:8px 14px!important;font-weight:600;font-size:14px;display:flex;gap:8px;align-items:center}
.det-body{display:grid;grid-template-columns:1fr 380px;gap:80px;margin-top:36px}
.det-main>section{padding:30px 0;border-bottom:1px solid var(--line)}
.det-main>section:first-child{padding-top:0}
.det-main h2{font-size:22px;margin-bottom:6px}
.det-sub{font-size:16px}
.host-row{display:flex;align-items:center;gap:16px}
.host-av{width:56px;height:56px;border-radius:99px;background:linear-gradient(135deg,#27A06D,#0F3D2C);color:#fff;font-weight:700;font-size:20px;display:grid;place-items:center;flex:none;position:relative}
.host-av .sh{position:absolute;right:-4px;bottom:-2px;width:22px;height:22px;border-radius:99px;background:#E0483E;border:2px solid #fff;display:grid;place-items:center}
.hl-list{display:flex;flex-direction:column;gap:22px}
.hl{display:flex;gap:20px;align-items:flex-start}
.hl svg{flex:none;margin-top:2px}
.hl b{display:block;font-weight:600}
.hl small{color:var(--muted);font-size:14px}
.desc{white-space:pre-line;font-size:16px;line-height:1.6}
.amen{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;margin:18px 0 24px}
.amen div{display:flex;gap:14px;align-items:center;font-size:16px}
.amen div.x{text-decoration:line-through;color:var(--muted)}
.fav{display:flex;align-items:center;justify-content:center;gap:16px;text-align:center;padding:10px 0 20px}
.fav .big{font-size:56px;font-weight:700;letter-spacing:-2px;line-height:1}
.laurel{font-size:44px;line-height:1;color:var(--ink)}
.rbars{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);margin:16px 0 28px}
.rbars>div{padding:16px 14px;border-right:1px solid var(--line2);display:flex;flex-direction:column;gap:4px}
.rbars>div:last-child{border-right:0}
.rbars small{font-size:14px;font-weight:500}
.rbars b{font-size:18px}
.rev-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px 70px}
.rev .who{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.rev .ava{width:44px;height:44px;border-radius:99px;display:grid;place-items:center;color:#fff;font-weight:700}
.rev .who b{display:block}
.rev .stars{font-size:11px;letter-spacing:1px;margin-bottom:4px}
.rev p{margin:0;line-height:1.55}
.map{height:420px;border-radius:var(--r-lg);overflow:hidden;background:#E9EFEC;margin-top:16px;z-index:0;position:relative}
.faq details{border-bottom:1px solid var(--line2);padding:16px 0}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between}
.faq summary::after{content:"+";font-size:20px;font-weight:400;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:10px 0 0;color:var(--ink2)}

/* booking card */
.book{position:sticky;top:110px;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:24px;background:#fff}
.book-price{font-size:22px;font-weight:600;margin-bottom:18px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.book-price s{color:var(--muted);font-weight:400;font-size:18px}
.book-price small{font-size:16px;font-weight:400}
.bk-box{border:1px solid #B0B0B0;border-radius:12px;overflow:visible;position:relative}
.bk-dates{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #B0B0B0}
.bk-f{padding:10px 12px;cursor:pointer;border:0;background:none;text-align:left;border-radius:12px;width:100%}
.bk-f:hover{background:#FAFAFA}
.bk-f.on{box-shadow:inset 0 0 0 2px var(--ink)}
.bk-dates .bk-f:first-child{border-right:1px solid #B0B0B0;border-radius:12px 0 0 0}
.bk-dates .bk-f:last-child{border-radius:0 12px 0 0}
.bk-f b{display:block;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.bk-f span{font-size:14px}
.bk-pop{position:absolute;right:-24px;top:-24px;width:680px;z-index:30;background:#fff;border-radius:24px;box-shadow:0 10px 40px rgba(0,0,0,.2);padding:28px}
.bk-pop-who{left:0;right:0;width:auto;top:calc(100% + 6px);padding:12px 18px}
.bk-note{text-align:center;font-size:14px;color:var(--ink2);margin:12px 0 0}
.lines{margin-top:20px;display:flex;flex-direction:column;gap:12px;font-size:16px}
.lines>div{display:flex;justify-content:space-between;gap:10px}
.lines>div span:first-child{text-decoration:underline;color:var(--ink2)}
.lines .tot{border-top:1px solid var(--line);padding-top:18px;margin-top:6px;font-weight:600}
.lines .tot span:first-child{text-decoration:none;color:var(--ink)}
.lines .disc span:last-child{color:var(--brand);font-weight:600}
.slots{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.slot{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;background:#fff;text-align:left;width:100%}
.slot:hover{border-color:var(--ink)}
.slot.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:#FAFAFA}
.slot b{display:block;font-size:14px}
.slot small{color:var(--muted);font-size:13px}
.rare{display:flex;gap:14px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-top:18px;font-size:14px}
.rare b{display:block}

/* cross sell */
.xs-wrap{background:linear-gradient(180deg,var(--brand-soft),#fff);border-radius:24px;padding:28px;margin-top:8px}
.xs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:16px}
.xs-head p{margin:4px 0 0;color:var(--muted)}
.xs-track{grid-auto-columns:calc((100% - 3*16px)/4)}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--brand-soft);color:var(--brand-dark);border-radius:99px;padding:5px 11px;font-size:12px;font-weight:700}

/* ---------- search page ---------- */
.srch{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px;padding-top:20px}
.srch-list{padding-bottom:50px}
.srch-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.srch-head h1{font-size:18px;font-weight:600}
.srch .grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:30px 18px}
.srch-map{position:sticky;top:var(--hdr-h,180px);height:calc(100vh - var(--hdr-h,180px) - 20px);border-radius:var(--r-lg);overflow:hidden;background:#E9EFEC;z-index:0}
.pm{background:#fff;border-radius:99px;padding:5px 10px;font-weight:700;font-size:13px;box-shadow:0 2px 8px rgba(0,0,0,.25);white-space:nowrap;transition:transform .15s;font-family:Figtree,sans-serif;color:var(--ink);display:inline-block;transform:translate(-50%,-50%)}
.pm.on,.pm:hover{background:var(--ink);color:#fff;transform:translate(-50%,-50%) scale(1.1);z-index:1000}
.leaflet-div-icon.pmi{background:none;border:0;width:0!important;height:0!important}
.leaflet-popup-content-wrapper{border-radius:16px!important;padding:0!important;overflow:hidden}
.leaflet-popup-content{margin:0!important;width:240px!important}
.mpop img{width:100%;aspect-ratio:3/2;object-fit:cover}
.mpop div{padding:10px 12px;font-family:Figtree,sans-serif;font-size:13px}
.mpop b{display:block;font-size:14px}
.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.empty h3{color:var(--ink);font-size:22px;margin-bottom:8px}
.map-toggle{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);z-index:40;background:var(--ink);color:#fff;border:0;border-radius:99px;padding:14px 20px;font-weight:600;display:none;align-items:center;gap:8px;box-shadow:var(--shadow);cursor:pointer}

/* ---------- checkout ---------- */
.co{display:grid;grid-template-columns:1fr 440px;gap:80px;padding:30px 0 70px;align-items:start}
.co h1{font-size:30px;display:flex;align-items:center;gap:14px;margin-bottom:30px}
.back{width:40px;height:40px;border-radius:99px;border:0;background:none;cursor:pointer;display:grid;place-items:center;font-size:20px}
.back:hover{background:var(--chip)}
.co-sec{padding:24px 0;border-bottom:1px solid var(--line)}
.co-sec h2{font-size:22px;margin-bottom:16px}
.co-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
.co-row b{display:block}
.co-row button{border:0;background:none;font-weight:600;text-decoration:underline;cursor:pointer}
.pay-opts{display:flex;flex-direction:column;border:1px solid #B0B0B0;border-radius:12px;overflow:hidden}
.pay-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;cursor:pointer;border-bottom:1px solid var(--line2)}
.pay-opt:last-child{border-bottom:0}
.pay-opt input{width:22px;height:22px;accent-color:var(--ink)}
.pay-opt b{display:block}
.pay-opt small{color:var(--muted)}
.addon{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--line);border-radius:14px;margin-bottom:10px;cursor:pointer}
.addon:hover{border-color:#999}
.addon.on{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand);background:var(--brand-soft)}
.addon img{width:60px;height:60px;border-radius:10px;object-fit:cover;flex:none}
.addon .t{flex:1}
.addon .t b{display:block;font-size:15px}
.addon .t small{color:var(--muted)}
.addon .ck{width:24px;height:24px;border-radius:7px;border:1.5px solid #999;display:grid;place-items:center;flex:none;background:#fff}
.addon.on .ck{background:var(--brand);border-color:var(--brand)}
.co-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;position:sticky;top:110px}
.co-top{display:flex;gap:16px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.co-top img{width:120px;height:104px;border-radius:12px;object-fit:cover;flex:none}
.co-top small{color:var(--muted)}
.notice{background:#FFF8E6;border:1px solid #F3DFA2;color:#6B5310;border-radius:12px;padding:12px 14px;font-size:13px;display:flex;gap:10px;align-items:flex-start}
.terms{font-size:12px;color:var(--muted);margin:18px 0}

/* confirmation */
.conf{max-width:760px;margin:0 auto;padding:50px var(--pad) 80px;text-align:center}
.conf .tick{width:84px;height:84px;border-radius:99px;background:var(--brand);display:grid;place-items:center;margin:0 auto 22px;animation:tick .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes tick{from{transform:scale(0)}to{transform:scale(1)}}
.conf h1{font-size:34px;letter-spacing:-.5px;margin-bottom:10px}
.conf-card{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;text-align:left;margin:30px 0;display:grid;grid-template-columns:240px 1fr}
.conf-card img{width:100%;height:100%;object-fit:cover;min-height:200px}
.conf-card .b{padding:22px;display:flex;flex-direction:column;gap:12px}
.code{font-family:ui-monospace,Menlo,monospace;background:var(--chip);border-radius:8px;padding:4px 10px;font-weight:700;letter-spacing:1px}
.conf-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:14px}
.conf-grid small{color:var(--muted);display:block}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:200;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg)}}

/* trips / wishlists / generic page */
.page{padding-top:34px;padding-bottom:70px}
.page h1{font-size:32px;letter-spacing:-.5px;margin-bottom:24px}
.trip{display:grid;grid-template-columns:200px 1fr auto;gap:22px;border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;align-items:center;margin-bottom:16px;cursor:pointer;transition:box-shadow .2s}
.trip:hover{box-shadow:var(--shadow-sm)}
.trip img{width:200px;aspect-ratio:3/2;object-fit:cover;border-radius:12px}
.trip h3{font-size:18px;margin-bottom:4px}
.status{display:inline-block;background:var(--brand-soft);color:var(--brand-dark);font-weight:700;font-size:12px;border-radius:99px;padding:4px 10px;margin-bottom:8px}
.wl-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px}

/* host page */
.host-hero{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:60px 0 40px}
.host-hero h1{font-size:54px;line-height:1.02;letter-spacing:-1.5px}
.host-hero h1 em{font-style:normal;color:var(--brand)}
.earn{font-size:64px;font-weight:700;letter-spacing:-2px;margin:10px 0 0}
.range{width:100%;accent-color:var(--brand);margin:20px 0 10px}
.host-ctrl{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.host-ctrl select{border:1px solid var(--line);border-radius:99px;padding:10px 16px;font:inherit;background:#fff;cursor:pointer}
.host-img{border-radius:28px;overflow:hidden;aspect-ratio:1;position:relative}
.host-img img{width:100%;height:100%;object-fit:cover}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:40px 0}
.steps3>div{background:#F7F7F7;border-radius:22px;padding:28px}
.steps3 .n{width:36px;height:36px;border-radius:99px;background:var(--brand);color:#fff;font-weight:700;display:grid;place-items:center;margin-bottom:14px}
.steps3 h3{font-size:18px;margin-bottom:6px}
.steps3 p{margin:0;color:var(--muted)}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.modal{background:#fff;border-radius:24px;width:100%;max-width:568px;max-height:calc(100vh - 40px);overflow:auto;animation:up .25s cubic-bezier(.2,.9,.3,1)}
.modal.wide{max-width:780px}
@keyframes up{from{transform:translateY(30px);opacity:0}}
.modal-h{display:flex;align-items:center;justify-content:center;padding:18px 24px;border-bottom:1px solid var(--line2);position:sticky;top:0;background:#fff;z-index:2}
.modal-h b{font-size:16px}
.modal-h .x{position:absolute;left:16px;width:34px;height:34px;border-radius:99px;border:0;background:none;cursor:pointer;display:grid;place-items:center;font-size:18px}
.modal-h .x:hover{background:var(--chip)}
.modal-b{padding:24px}
.field{border:1px solid #B0B0B0;border-radius:12px;padding:10px 14px;display:flex;flex-direction:column;margin-bottom:12px}
.field:focus-within{box-shadow:inset 0 0 0 2px var(--ink);border-color:var(--ink)}
.field label{font-size:12px;color:var(--muted)}
.field input,.field select,.field textarea{border:0;outline:0;font:inherit;font-size:16px;padding:2px 0;background:transparent}
.or{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:12px;margin:20px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.sso{width:100%;border:1px solid var(--ink);background:#fff;border-radius:12px;padding:13px;font-weight:600;cursor:pointer;margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:10px;position:relative}
.sso:hover{background:#F7F7F7}

/* lightbox */
.lb{position:fixed;inset:0;background:#fff;z-index:120;overflow:auto;animation:fade .2s}
.lb-h{position:sticky;top:0;background:#fff;display:flex;justify-content:space-between;align-items:center;padding:14px 24px;z-index:2}
.lb-grid{max-width:820px;margin:0 auto;padding:10px 24px 60px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lb-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px;cursor:zoom-in}
.lb-grid img:nth-child(3n+1){grid-column:1/3;aspect-ratio:3/2}
.viewer{position:fixed;inset:0;background:#000;z-index:130;display:flex;align-items:center;justify-content:center}
.viewer img{max-width:90vw;max-height:84vh;border-radius:6px}
.viewer button{position:absolute;border:0;background:rgba(255,255,255,.15);color:#fff;width:48px;height:48px;border-radius:99px;cursor:pointer;font-size:22px}
.viewer button:hover{background:rgba(255,255,255,.3)}
.viewer .vc{top:20px;left:20px}
.viewer .vl{left:20px;top:50%}
.viewer .vr{right:20px;top:50%}
.viewer .cnt{position:absolute;top:30px;left:0;right:0;text-align:center;color:#fff;font-weight:600}

/* dropdown menu */
.dd{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border-radius:16px;box-shadow:0 8px 28px rgba(0,0,0,.16);width:260px;padding:8px 0;z-index:70;animation:pop .15s}
.dd a,.dd button{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;padding:12px 18px;border:0;background:none;cursor:pointer;font-size:14px}
.dd a:hover,.dd button:hover{background:#F7F7F7}
.dd hr{border:0;border-top:1px solid var(--line2);margin:6px 0}
.dd .b{font-weight:600}
.notif{width:340px}
.notif .n{display:flex;gap:12px;padding:12px 18px;align-items:flex-start;font-size:14px;cursor:pointer}
.notif .n:hover{background:#F7F7F7}
.notif .n img{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:none}
.notif .n small{color:var(--muted);display:block;margin-top:2px}
.rel{position:relative}

/* toast */
.toasts{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--ink);color:#fff;border-radius:12px;padding:12px 16px;font-size:14px;box-shadow:var(--shadow);display:flex;gap:12px;align-items:center;animation:up .25s}
.toast img{width:36px;height:36px;border-radius:8px;object-fit:cover}
.toast a{text-decoration:underline;font-weight:600;margin-left:6px}

/* mobile tab bar */
.mbar{display:none}

/* skeleton shimmer for images */
.ph img,.dest img,.gal img{background:linear-gradient(90deg,#E9EFEC 0,#F4F7F5 50%,#E9EFEC 100%);background-size:200% 100%}

/* ---------- responsive ---------- */
@media (max-width:1280px){
  .track{grid-auto-columns:calc((100% - 4*16px)/5)}
  .dtrack{grid-auto-columns:calc((100% - 5*16px)/6)}
}
@media (max-width:1100px){
  .track{grid-auto-columns:calc((100% - 3*16px)/4)}
  .dtrack{grid-auto-columns:calc((100% - 4*16px)/5)}
  .det-body{grid-template-columns:1fr 340px;gap:40px}
  .srch{grid-template-columns:1fr 1fr}
  .co{grid-template-columns:1fr 380px;gap:40px}
  .xs-track{grid-auto-columns:calc((100% - 2*16px)/3)}
}
@media (max-width:900px){
  :root{--pad:24px}
  .track{grid-auto-columns:calc((100% - 2*16px)/3)}
  .dtrack{grid-auto-columns:calc((100% - 3*16px)/4)}
  .det-body,.co{grid-template-columns:1fr}
  .book,.co-card{position:static}
  .band{grid-template-columns:1fr}
  .band-im{min-height:220px}
  .srch{grid-template-columns:1fr}
  .srch-map{display:none}
  .srch.show-map .srch-map{display:block;position:fixed;inset:0;top:0;height:100%;z-index:45;border-radius:0}
  .map-toggle{display:flex}
  .host-hero{grid-template-columns:1fr;gap:30px;padding-top:30px}
  .steps3{grid-template-columns:1fr}
  .rbars{grid-template-columns:repeat(3,1fr)}
  .rbars>div:nth-child(3){border-right:0}
  .bk-pop{right:0;left:0;top:calc(100% + 6px);width:auto;padding:18px}
  .bk-pop .cal{grid-template-columns:1fr}
  .bk-pop .cal>div:last-child{display:none}
}
@media (max-width:760px){
  :root{--pad:16px}
  body{padding-bottom:64px}
  .hdr-top .link-btn,.hdr-top .icon-btn.bell{display:none}
  .tabs{gap:2px}
  .tab{padding:8px 12px;font-size:14px}
  .tab svg{display:none}
  .sbar{flex-direction:column;border-radius:22px;align-items:stretch;padding:6px}
  .sbar .sdiv{display:none}
  .sf{padding:10px 16px;border-radius:14px}
  .sgo{margin:6px 0 0;height:46px;border-radius:14px}
  .sgo .lbl{display:inline}
  .pop{left:0!important;right:0!important;width:auto!important;transform:none!important;border-radius:22px;padding:18px}
  .pop .cal{grid-template-columns:1fr}
  .pop .cal>div:last-child{display:none}
  .track{grid-auto-columns:72%}
  .dtrack{grid-auto-columns:42%}
  .xs-track{grid-auto-columns:62%}
  .row-h h2{font-size:19px}
  .arrows{display:none}
  .gal{grid-template-columns:1fr;grid-template-rows:280px;border-radius:0;margin:0 calc(-1*var(--pad))}
  .gal button:not(.g0):not(.gal-all){display:none}
  .gal .g0{grid-row:auto}
  .det-title h1{font-size:24px}
  .amen,.rev-grid{grid-template-columns:1fr}
  .rbars{grid-template-columns:repeat(2,1fr)}
  .rbars>div:nth-child(2n){border-right:0}
  .rbars>div:nth-child(3){border-right:1px solid var(--line2)}
  .band-copy{padding:30px}
  .band-copy h2{font-size:26px}
  .ft-cols{grid-template-columns:1fr}
  .conf-card{grid-template-columns:1fr}
  .conf-card img{min-height:180px;max-height:220px}
  .trip{grid-template-columns:1fr}
  .trip img{width:100%}
  .host-hero h1{font-size:40px}
  .earn{font-size:48px}
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;height:64px;background:#fff;border-top:1px solid var(--line2);z-index:55;justify-content:space-around;align-items:center;padding-bottom:env(safe-area-inset-bottom)}
  .mbar a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--muted);min-width:64px}
  .mbar a.on{color:var(--brand)}
  .mbar a svg path,.mbar a svg circle{stroke:currentColor}
  .toasts{bottom:80px;width:calc(100% - 32px)}
  .map-toggle{bottom:84px}
  .dd{position:fixed;left:16px;right:16px;top:70px;width:auto}
  .cats{gap:18px}
  .filter-btn span{display:none}
}

/* late additions */
.mres{display:none}
.spin{width:18px;height:18px;border-radius:99px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.compact-pill{box-shadow:var(--shadow-sm)}
.compact-pill:hover{box-shadow:var(--shadow)}
select.chip{font:inherit;font-size:13px;font-weight:500;appearance:auto}
@media (max-width:1000px){.compact-pill{display:none!important}}
@media (max-width:760px){
  .mres{display:flex;position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line2);z-index:56;padding:12px 16px calc(12px + env(safe-area-inset-bottom));justify-content:space-between;align-items:center;gap:12px}
  .rare{display:none}
}
.leaflet-tile-pane{filter:saturate(.75) brightness(1.03)}
.pop-where{max-height:min(560px,70vh);overflow:auto}
@media (max-width:760px){
  .sbar:not(.active){flex-direction:row;border-radius:999px;align-items:center;padding:4px 4px 4px 6px}
  .sbar:not(.active) .sf:not(.sf-where),.sbar:not(.active) .sdiv{display:none}
  .sbar:not(.active) .sgo{margin:0;height:46px;width:46px;min-width:46px;border-radius:99px;padding:0}
  .sbar:not(.active) .sgo .lbl{display:none}
  .sbar:not(.active) .sf-where{padding:8px 14px}
}
.map-toggle.float{display:flex;bottom:28px;text-decoration:none}
@media (max-width:760px){.map-toggle.float{bottom:84px}.hdr{position:relative}}