/* ==========================================================================
   Holiday Vibez — Phase 2 components (logo, mega menu, home page)
   Loaded after app.css.
   ========================================================================== */

/* ---- SVG logo wordmark ---- */
.hv-logo { gap: .6rem; }
.hv-wordmark { line-height: 1; }
.hv-wordmark .hv-wm-row { display: flex; align-items: baseline; gap: .12em; }
.hv-wordmark b { font-weight: 800; font-size: 1.32rem; letter-spacing: -.02em; }
.hv-wordmark b:first-child { color: var(--w-main); }
.hv-wordmark b.accent { color: var(--w-accent); }
.hv-wordmark small { font-size: .6rem; font-weight: 600; letter-spacing: .22em; color: var(--w-dot); text-transform: lowercase; }

/* ---- Redesigned mega menu ---- */
.hv-mega-links a {
  display: flex; align-items: center; gap: .6rem; padding: .42rem .55rem; margin: 0 -.55rem;
  border-radius: 10px; color: var(--hv-body); font-size: .9rem; font-weight: 500;
}
.hv-mega-links a:hover { background: rgba(0,65,208,.06); color: var(--hv-primary); }
.hv-mega-ico {
  width: 26px; height: 26px; flex: 0 0 26px; display: flex; align-items: center; justify-content: center;
  background: var(--hv-light); border-radius: 8px; font-size: .95rem;
}
.hv-mega-links a:hover .hv-mega-ico { background: #fff; box-shadow: var(--hv-shadow-sm); }
.hv-mega-arrow { margin-left: auto; font-size: .8rem; opacity: 0; transform: translateX(-4px); transition: all .18s ease; }
.hv-mega-links a:hover .hv-mega-arrow { opacity: 1; transform: translateX(0); }

.hv-mega-foot {
  margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--hv-line);
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.4rem; align-items: stretch;
}
.hv-mega-feature { min-height: 150px; border-radius: var(--hv-radius); }
.hv-mega-feature-body { width: 100%; }
.hv-mega-help {
  background: var(--hv-light); border: 1px solid var(--hv-line); border-radius: var(--hv-radius);
  padding: 1.1rem 1.25rem; display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 991px){ .hv-mega-foot { grid-template-columns: 1fr; } }

/* ---- Hero ---- */
.hv-hero { position: relative; color: #fff; overflow: hidden; }
.hv-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.hv-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(2,4,28,.92) 0%, rgba(0,65,208,.78) 55%, rgba(0,82,255,.5) 100%); }
.hv-hero-inner { position: relative; z-index: 1; padding: clamp(3rem,6vw,5.5rem) 0; }
.hv-hero h1 { color: #fff; }
.hv-trust-pill { display: inline-flex; align-items: center; gap: .45rem; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); padding: .4rem .9rem; border-radius: var(--hv-radius-pill); font-size: .85rem; font-weight: 500; }

/* ---- Package card ---- */
.hv-pkg-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--hv-line); border-radius: var(--hv-radius-lg); overflow: hidden; box-shadow: var(--hv-shadow-sm); transition: transform .25s ease, box-shadow .25s ease; }
.hv-pkg-card:hover { transform: translateY(-6px); box-shadow: var(--hv-shadow-lg); }
.hv-pkg-media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.hv-pkg-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.hv-pkg-card:hover .hv-pkg-media img { transform: scale(1.06); }
.hv-pkg-media::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 45%, rgba(2,4,28,.78)); }
.hv-pkg-region { position: absolute; top: .8rem; left: .8rem; z-index: 2; background: rgba(0,65,208,.92); color: #fff; font-size: .72rem; font-weight: 600; padding: .3rem .7rem; border-radius: var(--hv-radius-pill); display: inline-flex; align-items: center; gap: .3rem; }
.hv-pkg-fav { position: absolute; top: .7rem; right: .7rem; z-index: 2; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--hv-primary); display: flex; align-items: center; justify-content: center; }
.hv-pkg-media-cap { position: absolute; left: .9rem; right: .9rem; bottom: .8rem; z-index: 2; color: #fff; }
.hv-pkg-media-cap h3 { color: #fff; font-size: 1.12rem; font-weight: 700; margin: 0; line-height: 1.25; }
.hv-pkg-media-cap .loc { font-size: .8rem; opacity: .9; }
.hv-pkg-tags { display: flex; flex-wrap: wrap; gap: .4rem; padding: .9rem .9rem 0; }
.hv-pkg-tag { font-size: .72rem; font-weight: 600; color: var(--hv-primary); background: rgba(0,65,208,.07); border-radius: var(--hv-radius-pill); padding: .25rem .6rem; }
.hv-pkg-body { padding: .7rem .9rem 0; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.hv-pkg-meta { display: flex; gap: 1rem; font-size: .8rem; color: var(--hv-muted); flex-wrap: wrap; }
.hv-pkg-meta i { color: var(--hv-primary); }
.hv-pkg-foot { display: flex; align-items: flex-end; justify-content: space-between; padding: .8rem .9rem 1rem; margin-top: auto; }
.hv-pkg-price .old { text-decoration: line-through; color: var(--hv-muted); font-size: .82rem; }
.hv-pkg-price .now { font-weight: 800; color: var(--hv-ink); font-size: 1.3rem; line-height: 1; }
.hv-pkg-price .pp { font-size: .72rem; color: var(--hv-muted); }
.hv-pkg-rating { font-size: .8rem; color: var(--hv-muted); }

/* ---- Horizontal scroll rail ---- */
.hv-rail-wrap { position: relative; }
.hv-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 80%); gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: .5rem .25rem 1.25rem; -ms-overflow-style: none; scrollbar-width: none; }
.hv-rail::-webkit-scrollbar { display: none; }
.hv-rail > * { scroll-snap-align: start; }
@media (min-width:768px){ .hv-rail { grid-auto-columns: minmax(300px, calc(33.333% - .85rem)); } }
@media (min-width:1200px){ .hv-rail { grid-auto-columns: minmax(300px, calc(25% - .94rem)); } }
.hv-rail-btn { position: absolute; top: 38%; width: 46px; height: 46px; border-radius: 50%; border: none; background: #fff; color: var(--hv-primary); box-shadow: var(--hv-shadow); z-index: 3; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.hv-rail-btn:hover { background: var(--hv-primary); color: #fff; }
.hv-rail-btn.prev { left: -14px; } .hv-rail-btn.next { right: -14px; }
@media (max-width: 991px){ .hv-rail-btn { display: none; } }

/* ---- Section heading row ---- */
.hv-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.hv-head-row .btn { white-space: nowrap; }

/* ---- Why-us tiles ---- */
.hv-feature-tile { text-align: center; padding: 1.5rem 1rem; height: 100%; }
.hv-feature-ico { width: 64px; height: 64px; border-radius: 18px; background: var(--hv-grad); color: #fff; font-size: 1.6rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; box-shadow: var(--hv-shadow-primary); }
.hv-feature-tile h5 { font-size: 1.05rem; margin-bottom: .4rem; }
.hv-feature-tile p { font-size: .9rem; color: var(--hv-muted); margin: 0; }

/* ---- Split cards ---- */
.hv-split-card { position: relative; min-height: 320px; border-radius: var(--hv-radius-lg); overflow: hidden; display: flex; align-items: flex-end; color: #fff; background-size: cover; background-position: center; }
.hv-split-card::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(2,4,28,.15) 0%, rgba(2,4,28,.85) 100%); }
.hv-split-body { position: relative; z-index: 1; padding: 1.8rem; width: 100%; }
.hv-split-body h3 { color: #fff; font-size: 1.6rem; }

/* ---- Destination tiles ---- */
.hv-dest-tile { position: relative; border-radius: var(--hv-radius); overflow: hidden; aspect-ratio: 1/1; display: flex; align-items: flex-end; color: #fff; background-size: cover; background-position: center; }
.hv-dest-tile::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 40%, rgba(2,4,28,.8)); transition: background .3s ease; }
.hv-dest-tile:hover::after { background: linear-gradient(180deg, rgba(0,65,208,.3) 0%, rgba(2,4,28,.85) 100%); }
.hv-dest-tile span { position: relative; z-index: 1; padding: .9rem; font-weight: 700; width: 100%; }
.hv-dest-tile small { display:block; font-weight: 500; opacity: .85; font-size: .72rem; }

/* ---- Reviews ---- */
.hv-review-card { background: #fff; border: 1px solid var(--hv-line); border-radius: var(--hv-radius-lg); padding: 1.5rem; height: 100%; box-shadow: var(--hv-shadow-sm); }
.hv-review-stars { color: var(--hv-accent); margin-bottom: .6rem; }
.hv-review-text { color: var(--hv-body); font-size: .94rem; }
.hv-review-author { display: flex; align-items: center; gap: .7rem; margin-top: 1rem; }
.hv-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--hv-grad); color: #fff; display:flex; align-items:center; justify-content:center; font-weight: 700; }

/* ---- CTA band ---- */
.hv-cta-band { background: var(--hv-grad); color: #fff; border-radius: var(--hv-radius-lg); padding: clamp(2rem,4vw,3rem); position: relative; overflow: hidden; }
.hv-cta-band h2 { color: #fff; }
.hv-cta-band::before { content:""; position:absolute; right:-40px; top:-40px; width: 220px; height: 220px; background: rgba(255,255,255,.08); border-radius: 50%; }

/* ---- FAQ teaser ---- */
.hv-faq .accordion-item { border: 1px solid var(--hv-line); border-radius: var(--hv-radius) !important; margin-bottom: .75rem; overflow: hidden; }
.hv-faq .accordion-button { font-weight: 600; color: var(--hv-ink); }
.hv-faq .accordion-button:not(.collapsed) { color: var(--hv-primary); background: rgba(0,65,208,.04); box-shadow: none; }
.hv-faq .accordion-button:focus { box-shadow: none; }

/* ---- Stats ---- */
.hv-stat { text-align: center; }
.hv-stat .num { font-size: clamp(1.6rem,3vw,2.3rem); font-weight: 800; color: var(--hv-primary); line-height: 1; }
.hv-stat .lbl { font-size: .85rem; color: var(--hv-muted); margin-top: .3rem; }

/* ==========================================================================
   Package detail page
   ========================================================================== */
.hv-breadcrumb { font-size: .85rem; color: var(--hv-muted); padding: 1rem 0; }
.hv-breadcrumb a { color: var(--hv-muted); }
.hv-breadcrumb a:hover { color: var(--hv-primary); }
.hv-breadcrumb .sep { margin: 0 .45rem; opacity: .6; }

/* Gallery */
.hv-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: .6rem; border-radius: var(--hv-radius-lg); overflow: hidden; }
.hv-gallery a { position: relative; overflow: hidden; display: block; }
.hv-gallery a:first-child { grid-row: 1 / span 2; }
.hv-gallery img { width: 100%; height: 100%; object-fit: cover; min-height: 130px; transition: transform .4s ease; }
.hv-gallery a:hover img { transform: scale(1.05); }
.hv-gallery .more { position: absolute; inset: 0; background: rgba(2,4,28,.55); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; }
@media (max-width: 767px){ .hv-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } .hv-gallery a:first-child { grid-row: auto; grid-column: 1 / span 2; } }

/* Lightbox */
.hv-lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(2,4,28,.94); display: none; align-items: center; justify-content: center; }
.hv-lightbox.open { display: flex; }
.hv-lightbox img { max-width: 92vw; max-height: 82vh; border-radius: 10px; }
.hv-lb-btn { position: absolute; background: rgba(255,255,255,.14); border: none; color: #fff; width: 52px; height: 52px; border-radius: 50%; font-size: 1.4rem; }
.hv-lb-btn:hover { background: rgba(255,255,255,.28); }
.hv-lb-prev { left: 3vw; } .hv-lb-next { right: 3vw; } .hv-lb-close { top: 3vh; right: 3vw; }
.hv-lb-count { position: absolute; bottom: 3vh; color: #fff; font-size: .9rem; opacity: .8; }

/* Title block */
.hv-pkg-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; }
.hv-pkg-meta-row { display: flex; flex-wrap: wrap; gap: 1.2rem; color: var(--hv-muted); font-size: .92rem; margin-top: .6rem; }
.hv-pkg-meta-row i { color: var(--hv-primary); }

/* Overview 6-box grid */
.hv-overview { display: grid; grid-template-columns: repeat(3,1fr); gap: .9rem; }
@media (max-width: 575px){ .hv-overview { grid-template-columns: repeat(2,1fr); } }
.hv-ov-box { background: var(--hv-light); border: 1px solid var(--hv-line); border-radius: var(--hv-radius); padding: 1rem; }
.hv-ov-box .ico { width: 38px; height: 38px; border-radius: 10px; background: #fff; color: var(--hv-primary); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; box-shadow: var(--hv-shadow-sm); margin-bottom: .55rem; }
.hv-ov-box .lbl { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--hv-muted); }
.hv-ov-box .val { font-weight: 700; color: var(--hv-ink); font-size: .95rem; }

/* Section blocks within detail */
.hv-detail-block { padding-top: 2.5rem; }
.hv-detail-block h2 { font-size: 1.5rem; margin-bottom: 1.1rem; }

/* Highlights */
.hv-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
@media (max-width:575px){ .hv-highlights { grid-template-columns: 1fr; } }
.hv-highlights li { list-style: none; display: flex; gap: .6rem; align-items: flex-start; font-size: .94rem; }
.hv-highlights i { color: var(--hv-accent-2); margin-top: .15rem; }

/* Itinerary accordion */
.hv-itin .accordion-item { border: 1px solid var(--hv-line); border-radius: var(--hv-radius) !important; margin-bottom: .8rem; overflow: hidden; }
.hv-itin .accordion-button { font-weight: 600; color: var(--hv-ink); padding: 1rem 1.1rem; }
.hv-itin .accordion-button:not(.collapsed) { color: var(--hv-primary); background: rgba(0,65,208,.04); box-shadow: none; }
.hv-itin .accordion-button:focus { box-shadow: none; }
.hv-day-num { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; background: var(--hv-grad); color: #fff; font-weight: 700; font-size: .82rem; display: flex; align-items: center; justify-content: center; margin-right: .8rem; }
.hv-itin-thumb { width: 100%; max-width: 180px; border-radius: 10px; aspect-ratio: 4/3; object-fit: cover; }
.hv-itin-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }

/* Inclusions / exclusions */
.hv-inex { background: #fff; border: 1px solid var(--hv-line); border-radius: var(--hv-radius); padding: 1.3rem; height: 100%; }
.hv-inex ul { list-style: none; padding: 0; margin: 0; }
.hv-inex li { display: flex; gap: .6rem; align-items: flex-start; padding: .4rem 0; font-size: .92rem; border-bottom: 1px dashed var(--hv-line); }
.hv-inex li:last-child { border-bottom: none; }
.hv-inc i { color: #16a34a; } .hv-exc i { color: #e11d48; }

/* Review summary */
.hv-rev-summary { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; background: var(--hv-light); border-radius: var(--hv-radius); padding: 1.3rem; margin-bottom: 1.3rem; }
.hv-rev-score { font-size: 3rem; font-weight: 800; color: var(--hv-primary); line-height: 1; }
.hv-rev-bars { flex: 1; min-width: 220px; }
.hv-rev-bar { display: flex; align-items: center; gap: .6rem; font-size: .8rem; color: var(--hv-muted); }
.hv-rev-bar .track { flex: 1; height: 7px; border-radius: 4px; background: #e2e6f3; overflow: hidden; }
.hv-rev-bar .fill { height: 100%; background: var(--hv-grad-gold); }

/* Sticky form price header */
.hv-price-save { font-size: .78rem; }