/* ==========================================================
   BuhayAhente — Agent Public Storefront Theme
   Red / Navy brand colors. Mobile-first responsive.
   ========================================================== */

body.site-theme {
    --site-primary:      #e11d2e;
    --site-primary-dark: #b5121f;
    --site-navy:         #0f1b2d;
    --site-navy-soft:    #16233a;

    --bs-primary:        var(--site-primary);
    --bs-primary-rgb:    225, 29, 46;
    --bs-link-color:     var(--site-primary);
    --bs-link-color-rgb: 225, 29, 46;
    --bs-link-hover-color: var(--site-primary-dark);

    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

body.site-theme .btn-primary {
    --bs-btn-bg:           var(--site-primary);
    --bs-btn-border-color: var(--site-primary);
    --bs-btn-hover-bg:     var(--site-primary-dark);
    --bs-btn-hover-border-color: var(--site-primary-dark);
    --bs-btn-active-bg:    var(--site-primary-dark);
}
body.site-theme .btn-outline-primary {
    --bs-btn-color:        var(--site-primary);
    --bs-btn-border-color: var(--site-primary);
    --bs-btn-hover-bg:     var(--site-primary);
    --bs-btn-hover-border-color: var(--site-primary);
}
body.site-theme .text-primary { color: var(--site-primary) !important; }
body.site-theme .bg-primary   { background-color: var(--site-primary) !important; }

/* ---------- In-page anchor navigation (Promos/Financing/About/Testimonials/Contact) ---------- */
/* Fallback offset so the sticky navbar never covers a section heading on
   direct/no-JS anchor navigation. The layout's JS fine-tunes this further
   using the navbar's real rendered height. */
body.site-theme #promos,
body.site-theme #financing,
body.site-theme #about,
body.site-theme #testimonials,
body.site-theme #contact {
    scroll-margin-top: 90px;
}

/* ---------- Navbar ---------- */
.site-navbar .navbar-brand { font-weight: 700; }
.site-navbar .nav-link { font-size: .9rem; font-weight: 600; color: #333; }
.site-navbar .nav-link:hover,
.site-navbar .nav-link.active { color: var(--site-primary); }

/* Mobile nav: add padding and border between items */
@media (max-width: 991.98px) {
    .site-navbar .navbar-collapse {
        border-top: 1px solid #eee;
        padding-top: .75rem;
        margin-top: .5rem;
    }
    .site-navbar .nav-link {
        padding: .6rem .5rem;
        border-bottom: 1px solid #f5f5f5;
    }
    .site-navbar .btn.rounded-pill {
        margin-top: .75rem;
        width: 100%;
    }
}

/* ---------- Hero ---------- */
.site-hero {
    position: relative;
    background-color: var(--site-navy);
    background-size: cover;
    background-position: center top;
    color: #fff;
    overflow: hidden;
}
.site-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(15,27,45,.95) 0%,
        rgba(15,27,45,.80) 55%,
        rgba(15,27,45,.50) 100%
    );
}
.site-hero .hero-content { position: relative; z-index: 1; }
.site-hero .highlight    { color: var(--site-primary); }

/* Hero checklist */
.hero-checklist li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: .4rem;
    font-size: .92rem;
    line-height: 1.4;
}
.hero-checklist i { color: #35d07f; margin-top: .15rem; flex-shrink: 0; }

/* Hero stats bar */
.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: .75rem;
    padding: .75rem 1.1rem;
}
.hero-stats .stat b    { display: block; font-size: 1rem; }
.hero-stats .stat span { font-size: .75rem; color: rgba(255,255,255,.65); }

/* Hero contact buttons: stack on small phones */
@media (max-width: 480px) {
    .hero-btns { flex-direction: column !important; }
    .hero-btns .btn { width: 100%; justify-content: center; }
}

/* ---------- Contact / social buttons ---------- */
/* Messenger — Facebook Blue (links to Facebook Messenger) */
.btn-messenger {
    background: #1877f2;
    border-color:  #1877f2;
    color: #fff;
}
.btn-messenger:hover, .btn-messenger:focus {
    background: #1464d0;
    border-color:  #1464d0;
    color: #fff;
}

/* WhatsApp — brand green */
.btn-whatsapp { background: #25d366; border-color: #25d366; color: #fff; }
.btn-whatsapp:hover { background: #1ebe5b; border-color: #1ebe5b; color: #fff; }

/* Viber — brand purple */
.btn-viber { background: #7360f2; border-color: #7360f2; color: #fff; }
.btn-viber:hover { background: #5f4cd6; border-color: #5f4cd6; color: #fff; }

/* ---------- Section eyebrow label ---------- */
.section-eyebrow {
    color: var(--site-primary);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* ---------- Vehicle cards ---------- */
.vehicle-card {
    transition: transform .15s ease, box-shadow .15s ease;
}
@media (hover: hover) {
    .vehicle-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.1) !important;
    }
}

/* ---------- Promotion cards ---------- */
.promo-card {
    transition: transform .25s ease, box-shadow .25s ease,
                border-color .25s ease, background-color .25s ease;
}
.promo-card-img-wrap {
    overflow: hidden;
    border-radius: 1rem 1rem 0 0;
}
.promo-card-img-wrap img {
    display: block;
    width: 100%;
    transition: transform .45s ease;
}
.promo-card .promo-link {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    transition: gap .2s ease, color .2s ease;
}
.promo-card .promo-link .arrow {
    transition: transform .2s ease;
}
@media (hover: hover) {
    .promo-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 1rem 2rem rgba(0,0,0,.12) !important;
    }
    .promo-card:hover .promo-card-img-wrap img {
        transform: scale(1.08);
    }
    .promo-card:hover .promo-link {
        gap: .4rem;
    }
    .promo-card:hover .promo-link .arrow {
        transform: translateX(2px);
    }
}
/* Touch devices: a brief pressed state on tap instead of a stuck :hover */
@media (hover: none) {
    .promo-card:active {
        transform: scale(.98);
        transition-duration: .12s;
    }
}

/* ---------- Quick-links icons ---------- */
.quick-icon {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--site-navy);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    margin: 0 auto .5rem;
    transition: transform .15s ease;
}

/* Quick-links strip: 2×2 on mobile, 4×1 on desktop — already handled by
   Bootstrap col-6 col-md-3 in the view, just ensure card height is fine */
.quick-icon-card {
    min-height: 180px;
    transition: transform .15s ease, box-shadow .15s ease;
}
@media (max-width: 575.98px) {
    .quick-icon-card { min-height: 160px; }
}
@media (hover: hover) {
    .quick-icon-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.1) !important;
    }
    .quick-icon-card:hover .quick-icon {
        transform: scale(1.08);
    }
}
/* Touch devices (mobile/tablet): a brief pressed state on tap instead of
   a hover effect that would otherwise get stuck after the tap. */
@media (hover: none) {
    .quick-icon-card:active {
        transform: scale(.97);
        box-shadow: 0 .35rem .9rem rgba(0,0,0,.12) !important;
        transition-duration: .12s;
    }
    .quick-icon-card:active .quick-icon {
        transform: scale(1.05);
    }
}

/* ---------- Testimonials section ---------- */
.site-testimonials {
    background: var(--site-navy);
    color: #fff;
}
.site-testimonials .testimonial-card {
    background: #fff;
    color: #212529;
    border-radius: 1rem;
    height: 100%;
    transition: transform .25s ease, box-shadow .25s ease;
}
@media (hover: hover) {
    .site-testimonials .testimonial-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 1rem 2rem rgba(0,0,0,.18) !important;
    }
}
@media (hover: none) {
    .site-testimonials .testimonial-card:active {
        transform: scale(.98);
        transition-duration: .12s;
    }
}
.site-testimonials .quote-mark {
    color: var(--site-primary);
    font-size: 1.6rem;
    line-height: 1;
    font-weight: 700;
}
/* Carousel dots */
.carousel-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,.3);
    display: inline-block;
    transition: all .2s;
}
.carousel-dot.active {
    background: var(--site-primary);
    width: 20px;
    border-radius: 4px;
}

/* ---------- Contact bar (bottom) ---------- */
.site-contact-bar {
    background: var(--site-navy-soft);
    color: #fff;
}
.site-contact-bar img { object-fit: cover; }

/* Stack contact bar buttons on mobile */
@media (max-width: 767.98px) {
    .site-contact-bar .d-flex.flex-wrap {
        justify-content: center !important;
        width: 100%;
    }
    .site-contact-bar .btn {
        flex: 1 1 calc(50% - .5rem);
        justify-content: center;
        text-align: center;
    }
}

/* ---------- Vehicle detail page ---------- */
/* Main gallery image: fixed 420px height + cover on desktop (unchanged). */
.vehicle-gallery-img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
}

@media (max-width: 767.98px) {
    /* A fixed pixel height combined with object-fit:cover is what was
       cropping the vehicle on narrow screens: the browser must zoom in
       to "cover" a tall box with a much narrower width, cutting off the
       front/roof/wheels. Switch to a responsive aspect-ratio box with
       object-fit:contain so the entire vehicle is always visible,
       regardless of orientation (sedan, SUV, pickup, van, etc). */
    .vehicle-gallery-img {
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: contain;
        background-color: #f2f3f5;
    }
}

/* ---------- Vehicle listing/card thumbnails (Featured Cars on Home,
   full grid on /vehicles) ---------- */
/* Desktop/tablet: fixed height + cover keeps the grid visually uniform,
   same as before — unchanged. */
.vehicle-thumb-img {
    height: 180px;
    width: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 767.98px) {
    /* Same crop problem and same fix as .vehicle-gallery-img above: a
       fixed 180px height forced a zoomed-in crop on narrow cards. Switch
       to a responsive aspect-ratio box with object-fit:contain so the
       full vehicle is visible instead of overlapping/cut off. */
    .vehicle-thumb-img {
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: contain;
        background-color: #f2f3f5;
    }
}

/* ---------- Promo banner thumbnails (Home) ---------- */
/* Desktop/tablet: fixed height + cover, unchanged. */
.promo-thumb-img {
    height: 180px;
    width: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 767.98px) {
    /* Promo banners are full graphic designs (price, terms, branding all
       baked into the image) — cropping them at a fixed 180px height cuts
       off text/details, not just background like a car photo. Same fix:
       responsive aspect-ratio box + object-fit:contain so the whole
       banner is always readable on mobile. A slightly taller ratio than
       the vehicle thumbs (3/2) suits typical promo banner proportions
       better while still keeping cards a reasonable height. */
    .promo-thumb-img {
        height: auto;
        aspect-ratio: 3 / 2;
        object-fit: contain;
        background-color: #f2f3f5;
    }
}

/* Floating "Get Free Quotation" CTA: desktop keeps its current in-flow,
   centered appearance. On mobile it becomes a fixed bar pinned above the
   browser chrome (iOS Safari / Android Chrome), using safe-area insets so
   it never sits behind the home indicator / gesture bar. */
@media (max-width: 767.98px) {
    /* Reserve space at the bottom of this page only, so the fixed CTA
       never overlaps the specs/related-vehicles content above it. */
    .vehicle-details-page { padding-bottom: 88px; }

    .vehicle-quote-cta {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        margin: 0;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(to top, rgba(255,255,255,.98) 65%, rgba(255,255,255,0));
    }
    .vehicle-quote-cta .btn {
        width: 100%;
        box-shadow: 0 6px 18px rgba(0,0,0,.2);
    }
}

/* ---------- Vehicles listing: filter sidebar on mobile ---------- */
@media (max-width: 991.98px) {
    /* Filter sidebar collapses below the grid on small screens */
    .filter-sidebar { order: 2; }
    .vehicles-grid  { order: 1; }
}

/* ---------- Modals: better mobile sizing ---------- */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: .5rem;
    }
    .modal-content {
        border-radius: 1rem !important;
    }
}

/* ---------- General mobile tweaks ---------- */
@media (max-width: 575.98px) {
    .display-5 { font-size: 1.75rem !important; }
    h2.fw-bold  { font-size: 1.4rem !important; }
    .fs-5.fw-bold { font-size: 1rem !important; }

    /* Ensure buttons in card footers don't overflow */
    .card-body .d-flex.gap-2 .btn {
        font-size: .8rem;
        padding: .35rem .5rem;
    }
}

/* ---------- Vehicle description (free-typed body text) ---------- */
.vehicle-description {
    text-align: justify;
    text-align-last: left;
    hyphens: auto;
    word-break: break-word;
    line-height: 1.7;
}

/* ---------- Header Branding: personal logo shown in the public site navbar ---------- */
.header-brand-logo {
    height: 42px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    padding: 2px;
    border-radius: .5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    background-color: #fff;
}

@media (max-width: 575.98px) {
    .header-brand-logo { height: 36px; }
}