/* ═══════════════════════════════════════════════════════════════════════
   TripHunt site-fixes.css — CLEAN v16
   Only contains styles NOT covered by th_master.css or th-design-system.css
   th_master.css loads AFTER this and wins all specificity battles.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Scroll reveal animation (used by .reveal class across pages) ─── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; }
.reveal.visible { opacity: 1; transform: none; }
.th-rv { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.th-rv.visible { opacity: 1; transform: none; }
.th-rv-scale { opacity: 0; transform: scale(.94); transition: opacity .5s ease, transform .5s ease; }
.th-rv-scale.visible { opacity: 1; transform: scale(1); }

/* ── Skeleton loaders ────────────────────────────────────────────────── */
.th-skel, .sk-box, .skel-card, .skel {
  background: linear-gradient(90deg,#e8edf4 25%,#f4f7fc 50%,#e8edf4 75%);
  background-size: 200% 100%;
  animation: thSkShimmer 1.4s ease-in-out infinite;
  border-radius: 12px;
}
@keyframes thSkShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Flip card 3D perspective ─────────────────────────────────────── */
.th-flip-card { perspective: 1200px; }
.th-flip-inner { width: 100%; height: 100%; transition: transform .55s cubic-bezier(.4,0,.2,1); transform-style: preserve-3d; position: absolute; inset: 0; }
.th-flip-card:hover .th-flip-inner,
.th-flip-card:focus-within .th-flip-inner { transform: rotateY(180deg); }
.th-flip-front, .th-flip-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.th-flip-back { transform: rotateY(180deg); }

/* ── Score ring SVG ──────────────────────────────────────────────────── */
.th-card-score { position: absolute; top: 12px; right: 12px; z-index: 5; }
.ring-bg { fill: none; stroke: rgba(255,255,255,.15); stroke-width: 3; }
.ring-fill { fill: none; stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset .8s ease; transform-origin: center; transform: rotate(-90deg); }

/* ── Sparkline SVG ───────────────────────────────────────────────────── */
.th-card-sparkline, .pp-sparkline { display: block; overflow: visible; }

/* ── Package type chips ──────────────────────────────────────────────── */
.pkg-type-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border: 1.5px solid rgba(0,0,0,.1); border-radius: 99px; background: #fff; color: #475569; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; font-family: var(--th-font-body, 'Outfit', sans-serif); }
.pkg-type-chip:hover { border-color: #1e40ff; color: #1e40ff; }
.pkg-type-chip.active { background: #1e40ff; border-color: #1e40ff; color: #fff; }

/* ── Multi-city search legs ──────────────────────────────────────────── */
.mc-leg { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(0,0,0,.07); }
.mc-leg:last-child { border-bottom: none; }

/* ── Search count bar (live results counter) ─────────────────────────── */
.search-count-bar { padding: 8px 0 0; font-size: 11px; color: #94a3b8; min-height: 22px; }

/* ── Nearby airports chips ───────────────────────────────────────────── */
.nearby-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.nearby-chip { padding: 4px 11px; border: 1px solid rgba(0,0,0,.1); border-radius: 99px; background: rgba(30,64,255,.05); color: #1e40ff; font-size: 11px; font-weight: 700; cursor: pointer; transition: all .12s; }
.nearby-chip:hover { background: #1e40ff; color: #fff; }
.nearby-airports { display: none; margin-top: 6px; }
.nearby-airports.show { display: block; }

/* ── Trend/explore card specialist styles ────────────────────────────── */
.trend-card-img-header { position: relative; overflow: hidden; }
.trend-card-img-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(4,13,26,.85) 100%); pointer-events: none; }
.trend-card-img-dest { position: absolute; bottom: 12px; left: 14px; font-family: 'Fraunces', Georgia, serif; font-size: 20px; font-weight: 900; color: #fff; letter-spacing: -.03em; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.trend-card-img-price { position: absolute; top: 10px; right: 10px; font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 900; color: #fff; letter-spacing: -.04em; background: rgba(0,0,0,.45); backdrop-filter: blur(10px); padding: 4px 10px; border-radius: 99px; }
.tc2-emoji { font-size: 32px; flex-shrink: 0; }
.tc2-dest { font-family: 'Fraunces', Georgia, serif; font-size: 20px; font-weight: 900; letter-spacing: -.03em; }
.tc2-price { font-family: 'Fraunces', Georgia, serif; font-size: 26px; font-weight: 900; letter-spacing: -.04em; color: #1e40ff; }

/* ── Weekend cards ───────────────────────────────────────────────────── */
.th-weekend-card { position: relative; border-radius: 16px; overflow: hidden; min-height: 180px; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; }
.th-weekend-card-bg { position: absolute; inset: 0; z-index: 0; }
.th-weekend-card-bg img { width: 100%; height: 100%; object-fit: cover; }
.th-weekend-card-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 30%, rgba(4,13,26,.85) 100%); }
.th-weekend-card-fallback { position: absolute; inset: 0; background: linear-gradient(135deg, #1e3a8a, #1e40ff); display: flex; align-items: center; justify-content: center; font-size: 48px; }
.th-weekend-card-content { position: relative; z-index: 2; padding: 14px; }
.th-weekend-card-dest { font-family: 'Fraunces', Georgia, serif; font-size: 18px; font-weight: 900; color: #fff; margin-bottom: 2px; }
.th-weekend-card-price { font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 900; color: #fb923c; }
.th-weekend-card-date { font-size: 11px; color: rgba(255,255,255,.6); }

/* ── Explore cards ───────────────────────────────────────────────────── */
.th-explore-card { position: relative; border-radius: 18px; overflow: hidden; cursor: pointer; }
.th-explore-card-bg { position: absolute; inset: 0; }
.th-explore-card-bg img { width: 100%; height: 100%; object-fit: cover; }
.th-explore-card-dest { font-family: 'Fraunces', Georgia, serif; font-size: 20px; font-weight: 900; color: #fff; }
.th-explore-card-meta { font-size: 11px; color: rgba(255,255,255,.65); }

/* ── Fare card photo background ──────────────────────────────────────── */
.fare-card-photobg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.fare-card-photobg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(4,13,26,.35), rgba(4,13,26,.85)); }
.fare-card { position: relative; }
.fare-inner { position: relative; z-index: 1; }
.fare-actions { position: relative; z-index: 1; }

/* ── Offer drawer (multi-source comparison) ──────────────────────────── */
.offer-drawer { display: none; border-top: 1px solid rgba(0,0,0,.07); }
.od-toggle { width: 100%; padding: 8px; background: none; border: none; color: #1e40ff; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.od-toggle:hover { background: rgba(30,64,255,.05); }

/* ── Deal badge pulse (error fares) ─────────────────────────────────── */
.is-error, .fare-card.is-mistake { animation: efPulse 3s ease-in-out infinite; }
@keyframes efPulse { 0%,100%{border-color:rgba(220,38,38,.35)} 50%{border-color:rgba(220,38,38,.65)} }

/* ── Share/social buttons ────────────────────────────────────────────── */
.share-via-wa { background: #25d366 !important; color: #fff !important; }
.share-via-tw { background: #1da1f2 !important; color: #fff !important; }

/* ── Progressive reveal classes ─────────────────────────────────────── */
.th-hidden { opacity: 0; pointer-events: none; }
.th-visible { opacity: 1; pointer-events: auto; }

/* ── Push notification prompt ────────────────────────────────────────── */
.push-prompt { position: fixed; bottom: 80px; right: 20px; z-index: 900; max-width: 320px; }

/* ── Ad slot ─────────────────────────────────────────────────────────── */
.th-ad-slot { text-align: center; padding: 10px 0; }

/* ── Modal overlay ───────────────────────────────────────────────────── */
.th-modal-overlay { position: fixed; inset: 0; background: rgba(4,13,26,.6); backdrop-filter: blur(8px); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.th-modal { background: #fff; border-radius: 20px; box-shadow: 0 24px 80px rgba(0,0,0,.25); max-width: 520px; width: 100%; overflow: hidden; }

/* ── AI context cards ────────────────────────────────────────────────── */
.ctx-icon { font-size: 24px; flex-shrink: 0; }
.ctx-title { font-size: 14px; font-weight: 700; color: #0a1628; margin-bottom: 2px; }
.ctx-desc { font-size: 12px; color: #64748b; }

/* ── Price alert chip on cards ───────────────────────────────────────── */
.th-alert-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: #059669; background: rgba(5,150,105,.08); border: 1px solid rgba(5,150,105,.2); padding: 3px 10px; border-radius: 99px; }

/* ── Trustpilot modal ────────────────────────────────────────────────── */
.tp-prompt-modal { background: #fff; border-radius: 16px; padding: 24px; max-width: 360px; text-align: center; }