:root {
    --brand-dark: #0c2f78;
    --brand: #1a41a8;
    --brand-light: #eaf1fd;
    --brand-accent: #2158e0;
    --radius: 16px;
    --brand-logo-bg: var(--brand);
    --brand-logo-fg: #ffffff;
}

html {
    overflow-x: hidden;
    width: 100%;
}

body {
    background: #fbfdfc;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: #1a1a1a;
    overflow-x: hidden;
    max-width: 100vw;
}

/* Bootstrap's .container snaps to a fixed max-width (540px, 720px...) starting
   at the 576px breakpoint. Many Samsung phones report a CSS viewport wider
   than that, so the site would suddenly render as a small boxed column with
   empty margins on both sides. Force it to stay fluid (full width) through
   phones AND tablets in portrait, only capping on real desktop-sized screens. */
.container {
    width: 100%;
    max-width: 100%;
}
@media (min-width: 992px) {
    .container { max-width: 960px; }
}
@media (min-width: 1200px) {
    .container { max-width: 1140px; }
}
@media (min-width: 1400px) {
    .container { max-width: 1320px; }
}

.navbar-brand-logo {
    width: 40px;
    height: 40px;
    background: var(--brand-accent);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.navbar-brand-logo-img {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}
.brand-logo-svg {
    flex-shrink: 0;
    display: block;
}
@media (max-width: 380px) {
    .brand-logo-svg { width: 34px; height: 34px; }
}
.brand-name { color: #1a1a1a; font-size: 1.3rem; }

/* ---------- Header ---------- */
.site-header {
    background: #fff;
    border-bottom: 1px solid #eef1ef;
}
.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.icon-circle-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e3ece7;
    background: #f7faf8;
    color: #4b5b53;
    font-size: 1.05rem;
    flex-shrink: 0;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
}
.icon-circle-btn:hover { background: #eef1ef; color: #1a1a1a; transform: translateY(-1px); }
.currency-btn {
    width: auto;
    min-width: 42px;
    padding: 0 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.icon-circle-whatsapp {
    background: #25D366;
    border-color: #25D366;
    color: #fff;
}
.icon-circle-whatsapp:hover { background: #1ebe5b; color: #fff; }

.pill-nav {
    background: #f2f5f3;
    border: 1px solid #e7ede9;
    border-radius: 999px;
    padding: 6px;
    width: 100%;
    display: flex;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.pill-nav::-webkit-scrollbar { display: none; }
.pill-nav .nav-item { flex: 0 0 auto; min-width: 0; }
.pill-nav .nav-link {
    color: var(--brand-dark);
    border-radius: 16px;
    padding: 10px 14px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}
.pill-nav .nav-link.active {
    background: var(--brand-dark);
    color: #fff;
}
@media (max-width: 480px) {
    .pill-nav .nav-link { padding: 9px 11px; font-size: 0.92rem; }
    .pill-nav .nav-link i { margin-right: 4px !important; }
}
@media (max-width: 360px) {
    .pill-nav .nav-link { padding: 8px 9px; font-size: 0.86rem; }
}

.btn-brand {
    background: var(--brand-accent);
    border-color: var(--brand-accent);
    color: #fff;
}
.btn-brand:hover { background: #17399a; color: #fff; }

.hero-section {
    background: linear-gradient(135deg, var(--brand-light) 0%, #f2f9f5 55%, #ffffff 100%);
    border-radius: 28px;
    padding: 0;
    overflow: hidden;
    position: relative;
    display: block;
    min-height: auto;
}
@media (max-width: 991px) {
    .hero-section {
        grid-template-columns: 1fr;
        min-height: auto;
    }
}

.hero-copy {
    padding: 48px 40px;
    position: relative;
    z-index: 2;
}
@media (max-width: 991px) {
    .hero-copy { padding: 40px 24px 8px; text-align: center; }
}

.badge-soft {
    background: #fff;
    border: 1px solid #cddcf7;
    color: var(--brand);
    border-radius: 999px;
    padding: 8px 18px;
    font-weight: 600;
    font-size: .8rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hero-search {
    border-radius: 999px;
    border: 1px solid #dde8e2;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 61, 46, .08);
}

.product-card {
    border-radius: var(--radius);
    border: 1px solid #eef1ef;
    overflow: hidden;
    background: #fff;
    transition: transform .15s ease, box-shadow .15s ease;
    height: 100%;
}
.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(15, 61, 46, .08);
}
.product-card img {
    height: 180px;
    width: 100%;
    object-fit: cover;
    background: #f3f6f4;
}
.product-price {
    color: var(--brand-accent);
    font-weight: 700;
    font-size: 1.15rem;
}

.product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: .75rem;
}
.product-meta .meta-pill {
    background: var(--brand-light);
    color: var(--brand-dark);
    border-radius: 999px;
    padding: 3px 10px;
    font-weight: 600;
}

.btn-whatsapp {
    background: #25D366;
    border-color: #25D366;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}
.btn-whatsapp:hover {
    background: #1ebe5b;
    border-color: #1ebe5b;
    color: #fff;
}
@media (max-width: 400px) {
    .btn-whatsapp.btn-sm { font-size: 0.8rem; padding: 6px 10px; }
}

.category-chip {
    border-radius: 999px;
    border: 1px solid #e3ece7;
    padding: 8px 16px;
    background: #fff;
    color: var(--brand-dark);
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.category-chip:hover { background: var(--brand-light); color: var(--brand-dark); }

.section-card {
    border-radius: 20px;
    border: 1px solid #eef1ef;
    background: #fff;
    padding: 28px;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    display: inline-block;
}

footer {
    background: var(--brand-dark);
    color: #cddcf7;
}
footer a { color: #fff; }

/* ---------- Product gallery thumbnails ---------- */
.gallery-thumb { border: 2px solid transparent; transition: border-color .15s ease, opacity .15s ease; opacity: .75; }
.gallery-thumb:hover { opacity: 1; }
.gallery-thumb.active { border-color: var(--brand-accent); opacity: 1; }

/* ---------- Force brand blue over leftover Bootstrap "success" (green) utility classes ---------- */
.text-success { color: var(--brand-accent) !important; }
.btn-outline-success {
    color: var(--brand-accent) !important;
    border-color: var(--brand-accent) !important;
}
.btn-outline-success:hover,
.btn-outline-success:focus {
    background: var(--brand-accent) !important;
    border-color: var(--brand-accent) !important;
    color: #fff !important;
}

/* ---------- Automatic checklist under every product description ---------- */
.check-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #252b2b;
    font-size: 1.02rem;
    line-height: 1.35;
}
.check-list .check-icon {
    color: #1f9d4d; /* green tick — not .text-success, which this stylesheet turns blue */
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}

/* ---- Car specifications (public product page) ---- */
.car-specs {
    background: #f3f6fd;
    border: 1px solid #e3eaf7;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(12, 47, 120, .08);
}
.car-specs-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #0a3d9c 0%, #1f5be0 100%);
    color: #fff;
}
.car-specs-head-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}
.car-specs-title { font-size: 1.2rem; font-weight: 800; margin: 0; color: #fff; }
.car-specs-sub { margin: 2px 0 0; font-size: .8rem; opacity: .85; }
.car-specs-list { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.spec-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: 0 1px 4px rgba(12, 47, 120, .07);
}
.spec-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}
.spec-icon.tone-blue   { background: #2158e0; }
.spec-icon.tone-green  { background: #22a861; }
.spec-icon.tone-purple { background: #7c3aed; }
.spec-icon.tone-orange { background: #f97316; }
.spec-icon.tone-teal   { background: #0d9488; }
.spec-icon.tone-pink   { background: #ec4899; }
.spec-icon.tone-indigo { background: #4f46e5; }
.spec-label { flex: 1 1 auto; min-width: 0; font-size: .85rem; color: #4a5672; line-height: 1.25; }
.spec-value {
    flex: 0 1 auto;
    max-width: 48%;
    text-align: right;
    font-size: 1rem;
    font-weight: 800;
    color: #0b1f55;
    overflow-wrap: anywhere;
}
.spec-chevron { flex: 0 0 auto; color: #aab4cc; font-size: .8rem; }
.spec-row.spec-empty .spec-value { color: #9aa5bd; font-weight: 600; font-size: .9rem; }
.spec-row.spec-empty .spec-icon { background: #c5cfe4; }

/* ---- Featured car slider (homepage) ---- */
.car-slider-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 2px 6px;
}
.car-slider-track::-webkit-scrollbar { display: none; }
.car-slide {
    position: relative;
    flex: 0 0 62%;
    max-width: 260px;
    height: 160px;
    border-radius: 20px;
    overflow: hidden;
    scroll-snap-align: start;
    display: block;
    text-decoration: none;
    background: var(--brand-light);
    box-shadow: 0 8px 20px rgba(12, 47, 120, .14);
    transition: transform .2s ease;
}
.car-slide:hover { transform: translateY(-3px); }
.car-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.car-slide-shade {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(12,47,120,0) 40%, rgba(12,47,120,.85) 100%);
}
.car-slide-year {
    position: absolute; top: 10px; left: 10px;
    background: #fff; color: var(--brand-dark);
    font-size: .7rem; font-weight: 700;
    padding: 3px 10px; border-radius: 999px;
}
.car-slide-info {
    position: absolute; left: 12px; right: 12px; bottom: 10px;
    display: flex; flex-direction: column; gap: 2px; color: #fff;
}
.car-slide-title {
    font-weight: 600; font-size: .9rem; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.car-slide-price { font-weight: 800; font-size: 1rem; }
.car-slider-nav { display: flex; gap: 6px; }
.car-slider-btn {
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid #cddcf7; background: #fff; color: var(--brand);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .8rem; padding: 0;
}
.car-slider-btn:hover { background: var(--brand-light); }
.car-slider-dots { display: flex; justify-content: center; gap: 6px; margin-top: 6px; }
.car-slider-dots span {
    width: 6px; height: 6px; border-radius: 999px;
    background: #cddcf7; transition: all .25s ease;
}
.car-slider-dots span.active { width: 18px; background: var(--brand-accent); }
@media (min-width: 768px) { .car-slide { flex-basis: 30%; height: 180px; } }
@media (min-width: 992px) { .car-slide { flex-basis: 23%; } }

.car-slider-hero { text-align: left; margin-top: 1rem; }
.car-slider-hero .car-slide { flex-basis: 70%; height: 150px; }
@media (min-width: 768px) { .car-slider-hero .car-slide { flex-basis: 34%; } }

/* ---- Hero box options (admin: Site Content) ---- */
.hero-section.hero-thin .hero-copy { padding: 16px 18px 12px; }
.hero-section.hero-thin h1 { font-size: 1.4rem; margin-bottom: .6rem !important; }
.hero-section.hero-thin .badge-soft { margin-bottom: .5rem !important; padding: 5px 12px; font-size: .7rem; }
.hero-section.hero-thin .car-slider-hero { margin-top: .75rem !important; }
.hero-section.hero-thin .car-slider-hero .car-slide { height: 120px; }
.hero-section.hero-large .hero-copy { padding: 72px 28px 40px; }
.hero-section.hero-nobox {
    background: none; box-shadow: none; border: 0; border-radius: 0; overflow: visible;
}
.hero-section.hero-nobox .hero-copy { padding-left: 0; padding-right: 0; }

/* ---- Animated hero (admin: Site Content, Hero animation On/Off) ---- */
.hero-animated::before,
.hero-animated::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
    z-index: 1;
}
.hero-animated::before {
    width: 260px; height: 260px; left: -70px; top: -60px;
    background: radial-gradient(circle, rgba(33, 88, 224, .30), transparent 70%);
    animation: heroDriftA 11s ease-in-out infinite alternate;
}
.hero-animated::after {
    width: 300px; height: 300px; right: -90px; bottom: -90px;
    background: radial-gradient(circle, rgba(34, 197, 94, .24), transparent 70%);
    animation: heroDriftB 13s ease-in-out infinite alternate;
}
.hero-animated.hero-nobox::before,
.hero-animated.hero-nobox::after { display: none; }
@keyframes heroDriftA { to { transform: translate(140px, 110px) scale(1.3); } }
@keyframes heroDriftB { to { transform: translate(-130px, -90px) scale(1.25); } }

/* text rises in one after another (uses the separate "translate" property so admin position settings still work) */
.hero-animated #hero-badge { animation: heroRise .7s ease-out .05s backwards; }
.hero-animated #hero-title { animation: heroRise .8s ease-out .2s backwards; }
.hero-animated #hero-search-form { animation: heroRise .8s ease-out .4s backwards; }
.hero-animated .car-slider-hero { animation: heroRise .8s ease-out .6s backwards; }
@keyframes heroRise { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }

.hero-animated .badge-soft i { display: inline-block; animation: heroPulse 2.4s ease-in-out infinite; }
@keyframes heroPulse { 0%, 100% { scale: 1; } 50% { scale: 1.28; } }

.hero-animated .hero-search .btn-brand { animation: heroRing 2.6s ease-out infinite; }
@keyframes heroRing {
    0% { box-shadow: 0 0 0 0 rgba(33, 88, 224, .45); }
    70%, 100% { box-shadow: 0 0 0 12px rgba(33, 88, 224, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-animated, .hero-animated *, .hero-animated::before, .hero-animated::after { animation: none !important; }
}

/* ---- Hero image slider (admin: Site Content, Hero Image Slider). Slides glide in from the right like a video ---- */
.hero-bg-slider { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; background: #0b1b3a; }
/* Every animation brings the next photo in from the right (admin picks one, or Mix) */
.hero-bg-slide {
    position: absolute; inset: 0; z-index: 0;
    transform: translateX(100%);
    transition: transform var(--hero-speed, 1100ms) cubic-bezier(.65, 0, .35, 1),
                opacity var(--hero-speed, 1100ms) ease,
                filter var(--hero-speed, 1100ms) ease,
                clip-path var(--hero-speed, 1100ms) cubic-bezier(.65, 0, .35, 1);
    will-change: transform, opacity;
}
.hero-bg-slide.is-active { z-index: 2; transform: none; opacity: 1; filter: none; clip-path: inset(0 0 0 0); }
.hero-bg-slide.is-prev { z-index: 1; transform: translateX(-100%); }
.hero-bg-slide.snap { transition: none !important; }

/* parallax: old photo drifts slowly behind the new one */
[data-fx="parallax"] .hero-bg-slide.is-prev { transform: translateX(-30%); filter: brightness(.55); }
/* zoom: new photo grows in from the right, old one zooms away */
[data-fx="zoom"] .hero-bg-slide { transform: translateX(55%) scale(.8); opacity: 0; }
[data-fx="zoom"] .hero-bg-slide.is-prev { transform: translateX(-15%) scale(1.2); opacity: 0; }
/* fade: soft glide + cross-fade */
[data-fx="fade"] .hero-bg-slide { transform: translateX(14%); opacity: 0; }
[data-fx="fade"] .hero-bg-slide.is-prev { transform: translateX(-14%); opacity: 0; }
/* wipe: new photo is revealed from the right edge */
[data-fx="wipe"] .hero-bg-slide { transform: none; clip-path: inset(0 0 0 100%); }
[data-fx="wipe"] .hero-bg-slide.is-prev { transform: none; clip-path: inset(0 0 0 0); }
/* flip: 3D swing in from the right */
[data-fx="flip"] .hero-bg-slider { perspective: 1200px; }
[data-fx="flip"] .hero-bg-slide { transform: translateX(100%) rotateY(-40deg); opacity: 0; }
[data-fx="flip"] .hero-bg-slide.is-prev { transform: translateX(-100%) rotateY(40deg); opacity: 0; }
/* blur: arrives out of focus and sharpens */
[data-fx="blur"] .hero-bg-slide { transform: translateX(40%); opacity: 0; filter: blur(16px); }
[data-fx="blur"] .hero-bg-slide.is-prev { transform: translateX(-40%); opacity: 0; filter: blur(16px); }
.hero-bg-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* slow cinematic zoom while a photo is on screen */
.hero-bg-slide.is-active img,
.hero-bg-slide.is-prev img { animation: heroBgZoom 9s ease-out forwards; }
@keyframes heroBgZoom { from { transform: scale(1); } to { transform: scale(1.1); } }
/* dark overlay so the text stays readable (strength set by admin) */
.hero-bg-slider::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
    background: linear-gradient(180deg, rgba(8, 18, 40, calc(var(--hero-overlay, .4) * .8)), rgba(8, 18, 40, var(--hero-overlay, .4)));
}
.hero-bg-dots { position: absolute; left: 0; right: 0; bottom: 8px; z-index: 4; display: flex; justify-content: center; gap: 6px; }
.hero-bg-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .45); transition: all .3s; }
.hero-bg-dots span.active { width: 20px; border-radius: 6px; background: #fff; }

.hero-has-bg { background: #0b1b3a; }
.hero-has-bg #hero-title { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.hero-has-bg.hero-nobox { overflow: hidden; border-radius: 28px; }
.hero-has-bg.hero-nobox .hero-copy { padding-left: 24px; padding-right: 24px; }
.hero-has-bg.hero-animated::before,
.hero-has-bg.hero-animated::after { display: none; }

@media (prefers-reduced-motion: reduce) {
    .hero-bg-slide { transition: none !important; }
    .hero-bg-slide.is-active img, .hero-bg-slide.is-prev img { animation: none; }
}


/* ---------- Hero + search box (matches approved mobile design) ---------- */
#home-hero { font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif; }
#home-hero .hero-copy { text-align: center; }
#home-hero .badge-soft {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 7px 16px;
    border: 1px solid #cddcf7;
}
#home-hero .badge-soft i { font-size: .9rem; }
/* softer pastel glow behind the text, as in the approved design */
#home-hero.hero-animated::before { background: radial-gradient(circle, rgba(33, 88, 224, .14), transparent 70%); }
#home-hero.hero-animated::after { background: radial-gradient(circle, rgba(34, 197, 94, .10), transparent 70%); }
#home-hero #hero-title {
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    color: #1a1a1a;
}
#home-hero .hero-subtitle {
    color: #5b6168;
    font-size: 1.02rem;
    line-height: 1.5;
    font-weight: 400;
    margin: 0 auto 1.5rem;
    max-width: 320px;
}
#home-hero #hero-search-form { margin-left: auto; margin-right: auto; }
#home-hero .hero-search {
    background: #fff;
    border: 1px solid #e3ebf6;
    border-radius: 999px;
    box-shadow: 0 12px 30px rgba(26, 65, 168, .10);
    flex-wrap: nowrap;
    align-items: center;
}
#home-hero .hero-search .form-control {
    font-size: 1rem;
    color: #333;
    background: transparent;
    min-width: 0;
}
#home-hero .hero-search .form-control::placeholder { color: #6b7280; opacity: 1; }
#home-hero .hero-search .bi-search { color: var(--brand-accent) !important; font-size: 1.05rem; }
#home-hero .hero-search .btn-brand { border-radius: 999px; padding-left: 16px; padding-right: 16px; }
@media (min-width: 992px) {
    #home-hero .hero-copy { text-align: left; }
    #home-hero .hero-subtitle { margin-left: 0; max-width: 520px; }
    #home-hero #hero-search-form { margin-left: 0; margin-right: auto; }
}