/* Hide scrollbars inside carousels on WebKit */
.no-scrollbar::-webkit-scrollbar{display:none;} .no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}

/* Header */
.header-bar{display:flex;align-items:center;justify-content:space-between}
.header-center{display:none;gap:28px;align-items:flex-end}
@media (min-width: 840px){ .header-center{display:flex} }
.header-tab{position:relative;display:flex;align-items:center;gap:8px;font-weight:600}
.header-tab .active-underline{position:absolute;left:0;right:0;bottom:-8px;height:3px;background:#0f172a;border-radius:9999px}
.chip-new{position:absolute;top:-14px;right:-20px;background:#1e1b4b;color:#fff;font-size:10px;padding:2px 6px;border-radius:9999px;font-weight:700}

/* Card sizing tokens */
:root{ --card-w:248px; --card-gap:14px; --img-radius:16px; }
@media (min-width: 1536px){ :root{ --card-w:260px; } }
@media (max-width: 1280px){ :root{ --card-w:232px; } }
@media (max-width: 1024px){ :root{ --card-w:220px; } }
@media (max-width: 640px){ :root{ --card-w:78vw; } }

/* Sections & carousels */
.carousel-section{margin:36px 0}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.section-head h2{font-weight:700;font-size:20px;letter-spacing:.1px}
.carousel-row{display:flex;gap:var(--card-gap);overflow-x:auto;scroll-snap-type:x mandatory;padding-right:8px}
.carousel-row::-webkit-scrollbar{display:none}
.nav{display:flex;gap:8px}
.nav-btn{height:30px;width:30px;border-radius:9999px;border:1px solid #e5e7eb;background:#fff;display:grid;place-items:center}
.nav-btn:hover{background:#f8fafc}

/* Listing card */
.listing-card{min-width:var(--card-w);max-width:var(--card-w);scroll-snap-align:start}
.listing-card .media{position:relative}
.listing-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--img-radius)}
.badge{position:absolute;left:10px;top:10px;background:rgba(255,255,255,.96);padding:6px 12px;border-radius:9999px;font-size:12px;font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.heart{position:absolute;right:10px;top:10px;height:34px;width:34px;border-radius:9999px;background:rgba(255,255,255,.96);display:grid;place-items:center;border:0;font-size:18px;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.heart.active{color:#FF385C}
.title{margin-top:10px;font-size:15px;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta{color:#475569;font-size:13px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Pill */
.pill{border-radius:100px;background:#fff;padding:10px;box-shadow:0 22px 50px rgba(0,0,0,.08),0 4px 10px rgba(0,0,0,.06)}
.segment{padding:12px 20px;border-radius:100px;display:inline-block}
.segment:hover{background:#f8fafc}
.segment:focus,.segment:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #e5e7eb;border-radius:100px}
.label{font-size:11px;color:#64748b;letter-spacing:.02em;text-transform:uppercase}
.value{font-size:14px;color:#0f172a}
.where .field{width:100%;background:transparent;outline:none;border:0;padding:0;margin:0;font-size:14px;color:#0f172a}
.where .field::placeholder{color:#6b7280}
.divider{width:1px;height:28px;background:#e5e7eb;display:inline-block}
.search-btn{height:46px;width:46px;border-radius:9999px;background:#FF385C;color:#fff;display:grid;place-items:center;margin-left:8px;box-shadow:0 12px 24px rgba(255,56,92,.3)}
.search-btn:hover{background:#e22b4b}

/* Dropdowns */
#whereDropdown, #dateDropdown { top: 100%; left: 0; margin-top: 10px; }
.dest-item{display:flex; gap:12px; align-items:center; padding:12px 16px; cursor:pointer; background:#fff}
.dest-item:hover{background:#f3f4f6}
.dest-icon{height:40px; width:40px; border-radius:12px; display:grid; place-items:center}
.dest-title{font-weight:600; font-size:14px; color:#0f172a}
.dest-sub{font-size:12px; color:#64748b; margin-top:2px}