/* =========================
   Trip Jao — consolidated stylesheet (deduped & organized)
   Includes: core layout, header, hero/carousel, packages, experiences, itinerary,
   quick-quote (inline + sticky), gallery, reviews, FAQ, footer, utilities.
   ========================= */

/* ---------- Variables & reset ---------- */
:root{
    --max-width:1200px;
    --brand-blue:#2b7cff;
    --brand-dark:#0b2a66;
    --glass-shadow:0 8px 24px rgba(17,17,17,0.06);
    --muted:#6b7280;
    --qq-sticky-pad:96px;
}
.carousel-item-media{
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
}
.carousel-item-media .hero-media{
    width:100%;
    height:100%;
    object-fit:cover;
}
.hero-video-embed iframe{
    width:100%;
    height:100%;
}
*{box-sizing:border-box}
html{
    height:100%;
    scroll-behavior:smooth;
}
body{
    min-height:100%;
    margin:0;
    font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
    color:#0f1724;
    background:#fff;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.5;
}
a{color:var(--brand-blue);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--max-width);margin:0 auto;padding:0 16px}
.muted,.text-muted{color:var(--muted)}

/* Headings scale */
h1,.h1{font-size:clamp(1.8rem,3.2vw,2.4rem);line-height:1.15;font-weight:700}
h2,.h2{font-size:clamp(1.4rem,2.4vw,1.8rem);line-height:1.2;font-weight:600}
h3,.h3{font-size:1.25rem;line-height:1.25;font-weight:600}
p{margin-bottom:.7rem}

/* ---------- Header / branding ---------- */
.site-header{background:#fff;border-bottom:1px solid rgba(0,0,0,0.04)}
.brand-name{font-weight:700;font-size:1.05rem}
.brand-sub{color:#6c757d;font-size:.85rem}

/* Mobile offcanvas nav tweaks */
#mobileMenu.offcanvas{
    max-width:280px;
    background:linear-gradient(180deg, rgba(15,23,42,0.96), rgba(15,23,42,0.94));
    color:#e5e7eb;
    backdrop-filter:blur(18px);
}
#mobileMenu .offcanvas-header,
#mobileMenu .offcanvas-body{color:inherit}
#mobileMenu a{color:#e5e7eb;text-decoration:none}
#mobileMenu a:hover{text-decoration:underline}

/* ---------- Hero / Carousel ---------- */
.hero-carousel{position:relative;overflow:visible}
.hero-carousel .carousel-item{
    height:64vh;
    min-height:360px;
    background-size:cover;
    background-position:center;
    position:relative;
    overflow:visible;
}
@media (min-width:1000px){
    .hero-carousel .carousel-item{ height:72vh; }
}
.hero-carousel .carousel-item::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 60%);
    z-index:0;
}
.hero-caption{
    position:relative;
    z-index:2;
    max-width:720px;
    color:#fff;
    padding:1rem;
    text-shadow:0 6px 18px rgba(0,0,0,0.45);
}
.hero-caption h1{
    font-size:clamp(1.4rem,3.5vw,3rem);
    line-height:1.05;
    margin:.1rem 0 .6rem;
}
.hero-caption .lead{font-size:1rem;max-width:60ch}
.pkg-badge{
    background:rgba(255,255,255,0.12);
    color:#fff;
    padding:6px 10px;
    border-radius:999px;
    font-size:.9rem;
    display:inline-block;
}
.carousel-control-prev-icon,.carousel-control-next-icon{filter:drop-shadow(0 2px 6px rgba(0,0,0,0.45))}
.carousel-indicators{z-index:3;bottom:18px}
.carousel-indicators [data-bs-target]{background-color:rgba(255,255,255,0.6)}
.carousel-indicators .active{background-color:#fff}

/* Global carousel controls: solid dark circle with white icon */
.carousel-control-prev,.carousel-control-next{
    width:44px;
    height:44px;
    border-radius:50%;
    background:rgba(15,23,42,0.9);
    border:none;
    filter:drop-shadow(0 3px 10px rgba(0,0,0,0.4));
    top:50%;
    transform:translateY(-50%);
}

.carousel-control-prev-icon,.carousel-control-next-icon{
    filter:invert(1) brightness(1.2) drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}

.carousel-control-prev:hover,.carousel-control-next:hover{
    background:rgba(15,23,42,1);
}

.carousel-control-prev:focus,.carousel-control-next:focus{
    background:rgba(15,23,42,1);
    outline:none;
    box-shadow:0 0 0 2px rgba(255,255,255,0.4);
}
@media (max-width:767px){
    .hero-caption{padding:.75rem}
    .hero-caption h1{font-size:1.6rem}
    .hero-caption .lead{font-size:.95rem}
}

/* ---------- Cards / package previews ---------- */
.card{border:none;border-radius:10px;box-shadow:var(--glass-shadow);background:#fff}

/* Buttons */
.btn-primary{
    background:var(--brand-blue);
    border-color:var(--brand-blue);
    border-radius:999px;
    padding:.45rem 1.1rem;
    font-weight:600;
}
.btn-primary:hover{
    background:#1d4ed8;
    border-color:#1d4ed8;
}
.btn-outline-secondary{
    border-radius:999px;
}

/* ---------- Why / Generic Experiences (homepage) ---------- */
.why-experiences{padding:32px 16px}
.why-inner{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap;padding-left:0;padding-right:0}
.why-left{flex:1 1 320px;min-width:260px}
.why-right{flex:2 1 540px;min-width:280px}
.why-left h2{font-size:1.6rem;margin-bottom:6px}
.why-list{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px;color:#374151}
.why-list li{font-size:.98rem}

/* experiences grid */
.we-grid{display:grid;gap:12px;grid-template-columns:repeat(1,1fr)}
@media (min-width:600px){ .we-grid{grid-template-columns:repeat(2,1fr);gap:14px} }
@media (min-width:992px){ .we-grid{grid-template-columns:repeat(3,1fr);gap:16px} }

.we-card{
    display:flex;
    gap:12px;
    align-items:center;
    padding:12px;
    border-radius:12px;
    background:#fff;
    border:1px solid rgba(15,23,42,0.04);
    box-shadow:0 8px 20px rgba(11,18,30,0.04);
    transition:transform .12s ease,box-shadow .12s ease;
    cursor:default;
}
.we-card:focus,.we-card:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(11,18,30,0.08);outline:none}
.we-icon{width:56px;height:56px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:linear-gradient(180deg, rgba(11,37,80,0.06), rgba(11,37,80,0.03));color:var(--brand-dark);flex-shrink:0}
.we-icon svg{width:26px;height:26px}
.we-title{font-weight:700;font-size:1rem;color:#0f1724}
.we-sub{font-size:.92rem;color:#64748b;margin-top:2px}
@media (max-width:480px){ .why-inner{gap:18px} .we-card{padding:10px;gap:10px} .we-icon{width:48px;height:48px} }

/* ---------- Experiences (package page version) ---------- */
.experiences-section{padding:16px 0 20px}
.exp-grid{display:grid;gap:12px;grid-template-columns:repeat(1,1fr)}
@media (min-width:600px){ .exp-grid{grid-template-columns:repeat(2,1fr);gap:14px} }
@media (min-width:992px){ .exp-grid{grid-template-columns:repeat(4,1fr);gap:18px} }
.exp-card{display:flex;gap:12px;align-items:center;background:#fff;border-radius:12px;padding:12px;border:1px solid rgba(15,23,42,0.04);box-shadow:0 6px 18px rgba(11,18,30,0.04);transition:transform .12s ease,box-shadow .12s ease}
.exp-card:hover,.exp-card:focus-within{transform:translateY(-4px);box-shadow:0 12px 28px rgba(11,18,30,0.08)}
.exp-icon{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:linear-gradient(180deg, rgba(11,37,80,0.06), rgba(11,37,80,0.03));color:var(--brand-dark);flex-shrink:0}
.exp-icon svg{width:22px;height:22px}
.exp-body{min-width:0}
.exp-title{font-weight:700;font-size:1rem;color:#0f1724}
.exp-sub{font-size:.92rem;color:#64748b;margin-top:2px}
@media (max-width:480px){ .exp-card{padding:10px;gap:10px} .exp-icon{width:44px;height:44px} }

/* ---------- Itinerary snapshot ---------- */
.itinerary-section{padding:18px 0 28px}
.itinerary-grid{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:700px){ .itinerary-grid{grid-template-columns:repeat(2,1fr);gap:16px} }
@media (min-width:992px){ .itinerary-grid{grid-template-columns:repeat(3,1fr);gap:18px} }
.it-day{
    display:flex;
    gap:12px;
    align-items:flex-start;
    background:#fff;
    border-radius:12px;
    padding:14px;
    border:1px solid rgba(15,23,42,0.04);
    box-shadow:0 8px 18px rgba(11,18,30,0.04);
    transition:transform .12s ease,box-shadow .12s ease;
}
.it-day:focus,.it-day:hover{transform:translateY(-6px);box-shadow:0 14px 32px rgba(11,18,30,0.08);outline:none}
.it-day-number{background:linear-gradient(180deg,#f6f9ff,#eef5ff);color:var(--brand-dark);font-weight:700;min-width:56px;height:56px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;font-size:.95rem;box-shadow:0 6px 14px rgba(11,18,30,0.04);flex-shrink:0}
.it-day-body{min-width:0}
.it-day-title{margin:0 0 6px 0;font-size:1rem;color:#0f1724}
.it-day-desc{margin:0;font-size:.95rem;color:#64748b}
@media (max-width:480px){ .it-day{padding:12px;gap:10px} .it-day-number{min-width:48px;height:48px;font-size:.9rem} .it-day-title{font-size:.98rem} .it-day-desc{font-size:.9rem} }

/* ---------- Quick Quote (inline + sticky) ---------- */
.quick-quote-root{position:relative}

/* Sticky bar (mobile) - default hidden until mobile */
.qq-sticky{
    display:none;
    position:fixed;
    left:12px;
    right:12px;
    bottom:12px;
    z-index:1045;
    align-items:center;
    justify-content:space-between;
    background:linear-gradient(90deg, rgba(11,31,56,0.96), rgba(15,44,75,0.98));
    color:#fff;
    padding:10px 12px;
    border-radius:12px;
    gap:10px;
    box-shadow:0 18px 40px rgba(7,18,30,0.32);
}
.qq-left{display:flex;flex-direction:column;gap:3px}
.qq-title{font-weight:700;font-size:14px;line-height:1}
.qq-sub{font-size:12px;opacity:.95;color:rgba(255,255,255,0.92)}
.qq-actions{display:flex;gap:8px;align-items:center}
.qq-actions .btn-outline-light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.12);padding:6px 8px;border-radius:8px}
.qq-actions .btn-light{background:#fff;color:var(--brand-dark);font-weight:600;padding:7px 10px;border-radius:8px;box-shadow:0 8px 18px rgba(12,60,160,0.12)}
.qq-actions .btn[data-phone=""]{display:none}

/* Inline form — desktop only (show on ≥992px) */
.qq-inline { display: none; }
@media (min-width: 992px) {
    .qq-inline {
        display: flex;
        max-width: 1150px;
        margin: -52px auto 32px;
        padding: 16px 18px;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 18px 40px rgba(12,18,26,0.12);
        border: 1px solid rgba(18,24,32,0.04);
        gap: 12px;
        align-items: center;
        position: relative;
        z-index: 1040;
        transform: translateY(8px);
    }

    .qq-inline form {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
    }

    .qq-inline .qq-input {
        flex: 1;
        min-width: 140px;
        height: 46px;
        padding: 10px 12px;
    }

    .qq-inline .btn-primary {
        height: 46px;
        padding: 0 22px;
        border-radius: 10px;
        white-space: nowrap;
    }
}

/* Tablet inline behavior: show sticky-like compact overlap for 768–991 */
@media (min-width:768px) and (max-width:991px){
    .qq-inline{
        display:flex;
        max-width:95%;
        margin:-40px auto 20px;
        padding:14px 16px;
        flex-direction:column;
        gap:10px;
        z-index:1085;
    }
    .qq-inline form > .qq-fields,
    .qq-inline form > div {
        display:grid !important;
        grid-template-columns:repeat(3,1fr);
        gap:8px;
        width:100%;
        box-sizing:border-box;
        align-items:center;
    }
    .qq-inline .qq-input{width:100% !important;min-width:0;height:44px}
    #qqInlineSubmit{grid-column:1/-1;margin-top:6px;width:100%;box-sizing:border-box}
}

/* Mobile: hide inline, show sticky */
@media (max-width:767px){
    .qq-inline{display:none!important}
    .qq-sticky{
        display:flex;
        left:10px;right:10px;bottom:12px;padding:8px 10px;border-radius:12px;gap:8px;min-height:48px;max-height:64px;overflow:visible;box-shadow:0 18px 40px rgba(7,18,30,0.28);
        z-index:1085;
    }
    .qq-left{align-items:flex-start;min-width:0}
    .qq-sub{display:none}
    .qq-actions .btn-outline-light{display:none!important}
    .qq-actions .btn-light{padding:8px 12px;border-radius:10px;height:44px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
    body.qq-has-qq-sticky{padding-bottom:var(--qq-sticky-pad)}
}

/* Defensive: ensure sticky visible/tappable if something else hides it */
@media (max-width:767px){
    #qqSticky{pointer-events:auto}
    #qqSticky .btn{pointer-events:auto}
}

/* Modal z-index override to ensure modal is above QQ */
.modal,.modal-backdrop,.modal.show{z-index:9999!important}
.modal-backdrop.show{z-index:9998!important}
.modal .modal-content{border-radius:12px}

/* ---------- Floating-label helper styles (inline fields) ---------- */
.qq-fields{display:grid;gap:10px;align-items:center;grid-template-columns:repeat(3,minmax(0,1fr))}
.qq-field{position:relative;min-width:0}
.qq-field .qq-input{padding-top:14px;padding-bottom:10px;height:44px}
.floating-label{position:absolute;left:12px;top:10px;font-size:12px;color:rgba(15,23,42,0.6);pointer-events:none;transform-origin:left top;transition:transform .12s ease,font-size .12s ease,top .12s ease,color .12s ease;padding:0 4px}
.qq-field .floating-input:focus + .floating-label,
.qq-field .floating-input.filled + .floating-label{transform:translateY(-10px) scale(0.86);top:6px;color:rgba(11,37,80,0.95);font-size:11px}
.qq-field input[type="date"]{padding-top:14px}
@media (max-width:767px){ .qq-fields{grid-template-columns:1fr} .floating-label{left:10px} }

/* ---------- Gallery Section (Instagram-like grid) ---------- */
.gallery-section { padding: 40px 0; }
.gallery-title { font-size: 1.6rem; font-weight: 700; margin-bottom: 6px; }
.gallery-sub { font-size: 1rem; margin-bottom: 20px; }

.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gallery-item { position: relative; width: 100%; padding-top: 100%; overflow: hidden; border-radius: 12px; background: #f3f4f6; box-shadow: 0 6px 18px rgba(0,0,0,0.05); }
.gallery-item img, .gallery-item video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }

/* Video hover auto-play (desktop) */
@media (hover:hover) {
    .gallery-item.video video:hover { filter: brightness(1.08); transform: scale(1.03); transition: .3s ease; }
}

/* Play icon for video (mobile/tablet/touch) */
.gallery-item.video .play-overlay { position: absolute; right: 10px; bottom: 10px; z-index: 2; background: rgba(0,0,0,0.55); color: #fff; font-size: 22px; width: 36px; height: 36px; border-radius: 50%; display: flex; justify-content: center; align-items: center; }

/* Caption overlay */
.gallery-item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 90% ); border-radius: inherit; z-index: 2; pointer-events: none; }
.gallery-item::before { content: attr(data-title); position: absolute; left: 12px; bottom: 10px; right: 12px; z-index: 3; color: #fff; font-size: 0.95rem; font-weight: 600; text-shadow: 0 2px 6px rgba(0,0,0,0.4); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .gallery-item::before { font-size: 0.82rem; bottom: 8px; } }

@media (max-width: 991px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .gallery-grid { gap: 8px; grid-template-columns: repeat(2, 1fr); } }
.gallery-cta { margin-top: 20px; text-align: center; }

/* ---------- Reviews / Testimonials ---------- */
.reviews-section{padding:36px 0}
.reviews-title{font-size:1.5rem;font-weight:700;margin-bottom:6px}
.reviews-sub{margin-bottom:16px;color:var(--muted)}

.reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch; }
@media (max-width:991px){ .reviews-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:767px){ .reviews-grid{display:none} }

.review-card{ background:#fff; border-radius:12px; padding:16px; border:1px solid rgba(15,23,42,0.04); box-shadow:0 10px 26px rgba(11,18,30,0.04); min-height:160px; display:flex; flex-direction:column; justify-content:space-between; }
.review-top{ display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.stars{ color:#f59e0b; font-weight:700; font-size:1rem }
.review-meta{ font-size:.95rem; color:#111827 }
.review-quote{ margin:10px 0 12px; font-size:0.98rem; color:#374151; line-height:1.4 }
.review-footer{ font-size:.86rem; color:var(--muted) }

/* reviewer avatar */
.review-avatar{ width:48px; height:48px; border-radius:50%; object-fit:cover; flex-shrink:0; box-shadow:0 2px 6px rgba(0,0,0,0.12); }

/* Carousel adjustments for mobile */
#reviewsCarousel .review-card{margin:0 12px}
.carousel-control-prev,.carousel-control-next{width:44px;height:44px;border-radius:50%;background:rgba(15,23,42,0.06);border:none}
.carousel-control-prev-icon,.carousel-control-next-icon{filter:drop-shadow(0 2px 6px rgba(0,0,0,0.2))}

/* ---------- FAQ Section ---------- */
.faq-section{ padding:36px 0 }
.faq-title{ font-size:1.5rem; font-weight:700; margin-bottom:6px }
.faq-sub{ margin-bottom:12px; color:var(--muted) }
.faq-header{ margin-bottom:12px }

.accordion-button{ background:#fff; border-radius:10px; box-shadow:0 8px 20px rgba(11,18,30,0.04); padding:14px 16px; color:#0f1724; font-weight:600 }
.accordion-button:not(.collapsed){ color:#0b2a66; background:linear-gradient(180deg, rgba(11,37,80,0.03), rgba(11,37,80,0.02)); box-shadow:0 10px 26px rgba(11,18,30,0.06) }
.accordion-item{ border:none; margin-bottom:10px }
.accordion-body{ padding:12px 16px 18px; background:#fff; border-radius:8px; box-shadow:0 6px 20px rgba(11,18,30,0.03); color:#374151; font-size:0.98rem; line-height:1.45 }

/* Expand all toggle */
.faq-actions .btn-ghost{ border:1px solid rgba(15,23,42,0.06); background:transparent; padding:8px 12px; border-radius:8px }

@media (max-width:767px){ .faq-header{ gap:8px; flex-direction:column; align-items:flex-start } .accordion-button{ padding:12px 14px; font-size:0.98rem } }

/* ===============================
   Enhanced footer + QQ-sticky interaction styles
   =============================== */

/* Footer core */
.site-footer{ background:linear-gradient(180deg,#ffffff,#fbfdff); border-top:1px solid rgba(15,23,42,0.04); color:#0f1724; padding-top:36px; padding-bottom:calc(36px + env(safe-area-inset-bottom)); position:relative; z-index:1000 }

/* responsive wrap + grid */
.footer-top{ padding-bottom:18px }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:18px; align-items:start }
@media (max-width:992px){ .footer-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:600px){ .footer-grid{ grid-template-columns:1fr; gap:12px; padding-left:8px; padding-right:8px } }

.footer-col h4{ margin:0 0 8px; font-size:0.98rem; font-weight:700 }
.footer-col ul{ list-style:none; padding:0; margin:0 }
.footer-col ul li{ margin:8px 0 }
.footer-col a{ color:var(--brand-dark); text-decoration:none }
.footer-desc{ margin-top:8px; color:var(--muted); max-width:40ch }

/* newsletter inline row */
.newsletter-form .nf-row{ display:flex; gap:8px; align-items:center }
.newsletter-form input[type="email"]{ flex:1; padding:10px 12px; border-radius:8px; border:1px solid rgba(15,23,42,0.06); min-width:0; background:#fff }
.newsletter-form .btn-primary{ padding:9px 12px; border-radius:8px }

/* footer bottom */
.footer-bottom{ border-top:1px solid rgba(15,23,42,0.03); margin-top:18px; padding-top:14px }
.footer-bottom-inner{ display:flex; justify-content:space-between; gap:12px; align-items:center; font-size:0.95rem }
@media (max-width:600px){ .footer-bottom-inner{ flex-direction:column; align-items:flex-start; gap:6px } }

/* ensure footer text is readable above sticky transition */
.site-footer, .site-footer * { z-index:1000 }

/* ---------- Quick Quote sticky hide / transition ---------- */
.qq-sticky.qq-hidden{ transform:translateY(120%); opacity:0; pointer-events:none; transition:transform .28s ease, opacity .2s ease; }

/* keep sticky above page until JS hides it when footer is visible */
@media (max-width:991px){ .site-footer{ z-index:1000 } .qq-sticky{ z-index:10999 } }

/* small accessibility tweak */
.newsletter-form input:focus{ outline:3px solid rgba(11,100,255,0.12); outline-offset:2px }

/* ---------- Utilities ---------- */
button:focus,a:focus,input:focus,select:focus{ outline:3px solid rgba(11,100,255,0.12); outline-offset:2px }
.small{ font-size:.9rem; color:var(--muted) }
.btn-ghost{ background:transparent; border:1px solid rgba(15,23,42,0.06); padding:8px 14px; border-radius:10px; color:var(--brand-dark) }
.hero-bottom-gap{ height:24px }

/* ---------- Packages page (Bootstrap-first) ---------- */
.page-hero{padding:24px 0 8px}
@media (min-width:768px){.page-hero{padding:32px 0 12px}}
.page-title{color:#0f1724}
.page-sub{max-width:42rem}

.packages-list{background:#f9fafb}
.package-card{
    background:#fff;
    border-radius:12px;
    border:1px solid rgba(15,23,42,0.04);
    padding:12px 12px 14px;
    box-shadow:0 8px 18px rgba(11,18,30,0.04);
    display:flex;
    flex-direction:column;
    position:relative;
    overflow:hidden;
}
/* top image inside package card */
.package-card > img{
    width:100%;
    display:block;
    border-radius:10px;
    max-height:190px;
    object-fit:cover;
    margin-bottom:8px;
}
@media (min-width:992px){
    .package-card > img{max-height:210px}
}

.package-card:hover,.package-card:focus-within{
    box-shadow:0 14px 32px rgba(11,18,30,0.08);
    transform:translateY(-2px);
}
.package-points{margin-bottom:0}

.package-footer,
.package-footer .btn{position:relative;z-index:2}

/* End of stylesheet */

/* ---------- Media page grid & overlays ---------- */
.media-grid img{display:block;width:100%;border-radius:12px;object-fit:cover}
.media-card{position:relative;overflow:hidden;border-radius:12px}
.media-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(15,23,42,0) 0%,rgba(15,23,42,0.7) 90%);
    opacity:0;
    transition:opacity .2s ease-out;
}
.media-overlay{
    position:absolute;
    inset:auto 0 0 0;
    padding:10px 12px 12px;
    color:#fff;
    transform:translateY(40%);
    transition:transform .2s ease-out;
    z-index:2;
}
.media-text h2{font-size:.98rem;font-weight:600;margin:0}
.media-text p{font-size:.86rem;margin:2px 0 0}
.media-card:hover::before,.media-card:focus-within::before{opacity:1}
.media-card:hover .media-overlay,.media-card:focus-within .media-overlay{transform:translateY(0)}

/* ---------- Tag filter buttons ---------- */
.tag-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.tag-filters .btn-sm {
    padding: 0.375rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 2rem;
    white-space: nowrap;
    transition: all 0.15s ease-in-out;
    min-width: fit-content;
    text-align: center;
}
.tag-filters .btn-outline-secondary {
    color: var(--muted);
    border-color: #dee2e6;
    background-color: #fff;
}
.tag-filters .btn-outline-secondary:hover {
    color: var(--brand-blue);
    background-color: #f8f9fa;
    border-color: var(--brand-blue);
}
.tag-filters .btn-primary {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #fff;
}
.tag-filters .btn-primary:hover {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
}
@media (max-width: 576px) {
    .tag-filters .btn-sm {
        font-size: 0.8rem;
        padding: 0.3rem 0.75rem;
    }
}
.hover-bg-light:hover {
    background-color: #f8f9fa;
}
.autocomplete-dropdown a:hover {
    background-color: #f8f9fa;
}