/* site-body.css — moved out of inline <style> in nav, car-card, compare-bar, bottom-nav.
   Built by Laravel Mix (webpack.mix.cjs); edit here, then npm run dev/prod. */

/* ── layouts/partials/nav.blade.php ── */
    /* ── Account avatar button ── */
    .sc-account .sc-avatar-btn {
        position: relative;
        width: 40px; height: 40px;
        border-radius: 50%;
        border: 2px solid var(--fn-border-color, var(--bs-border-color, #e0e5eb));
        background: var(--fn-tertiary-bg, var(--bs-tertiary-bg, #f5f7fa));
        padding: 0;
        overflow: visible;
        cursor: pointer;
        transition: all .15s;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
    }
    .sc-account .sc-avatar-btn:hover {
        border-color: #d85151;
        transform: scale(1.05);
    }
    .sc-account .sc-avatar-btn:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 3px rgba(216, 81, 81, .25);
    }
    .sc-account .sc-avatar-img {
        width: 36px; height: 36px;
        border-radius: 50%;
        object-fit: cover;
        display: block;
    }
    .sc-account .sc-avatar-initial {
        font-weight: 700;
        font-size: 1rem;
        color: #fff;
        background: linear-gradient(135deg, #d85151, #f59e0b);
        width: 36px; height: 36px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
    }
    .sc-account .sc-avatar-check {
        position: absolute;
        right: -2px; bottom: -2px;
        width: 16px; height: 16px;
        background: #0ea5e9;
        color: #fff;
        border-radius: 50%;
        border: 2px solid var(--fn-body-bg, var(--bs-body-bg, #fff));
        display: flex; align-items: center; justify-content: center;
        font-size: .55rem;
        line-height: 1;
    }
    .sc-account .sc-avatar-dot {
        position: absolute;
        right: -1px; top: -1px;
        width: 10px; height: 10px;
        border-radius: 50%;
        border: 2px solid var(--fn-body-bg, var(--bs-body-bg, #fff));
        animation: scAvatarPulse 2s ease-out infinite;
    }
    /* On the dark header bar (.sc-header): a light ring instead of the page's
       grey fill, and the badge rims cut out in the bar's colour, not the page's */
    header.sc-header .sc-avatar-btn {
        border-color: rgba(255, 255, 255, .25);
        background: rgba(255, 255, 255, .08);
    }
    header.sc-header .sc-avatar-check,
    header.sc-header .sc-avatar-dot {
        border-color: var(--sc-header-bg, #0d1622);
    }
    @keyframes scAvatarPulse {
        0%, 100% { transform: scale(1); opacity: 1; }
        50%      { transform: scale(1.2); opacity: .7; }
    }

    /* ── Dropdown rich card ── */
    .sc-account-menu {
        border-radius: .85rem !important;
        --fn-dropdown-spacer: .65rem;
    }
    .sc-account-head {
        padding: 1rem 1.15rem;
        background: linear-gradient(135deg, rgba(216,81,81,.08), rgba(245,158,11,.08));
        border-bottom: 1px solid var(--fn-border-color, var(--bs-border-color, #e0e5eb));
    }
    .sc-account-head-avatar {
        width: 52px; height: 52px;
        border-radius: 50%;
        background: linear-gradient(135deg, #d85151, #f59e0b);
        color: #fff;
        flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        font-weight: 700; font-size: 1.2rem;
        overflow: hidden;
        border: 2px solid var(--fn-body-bg, var(--bs-body-bg, #fff));
        box-shadow: 0 2px 6px rgba(0,0,0,.08);
    }
    .sc-account-head-avatar img { width: 100%; height: 100%; object-fit: cover; }

    .sc-account-credit {
        padding: .85rem 1.15rem;
        background: var(--fn-tertiary-bg, var(--bs-tertiary-bg, #f5f7fa));
        border-bottom: 1px solid var(--fn-border-color, var(--bs-border-color, #e0e5eb));
    }
    .sc-credit-num {
        font-size: 1.45rem;
        font-weight: 800;
        color: #d85151;
        line-height: 1;
    }

    .sc-account-menu-list .dropdown-item {
        padding: .55rem 1.15rem;
        font-size: .88rem;
        transition: background-color .12s, padding-left .15s;
    }
    .sc-account-menu-list .dropdown-item:hover {
        background-color: rgba(216, 81, 81, .06);
        padding-left: 1.4rem;
    }
    .sc-account-menu-list .dropdown-item i {
        font-size: 1rem;
        width: 1.25rem;
    }

    /* Six top-level items don't fit at 992–1199px with the theme's 18px link
       padding — every label broke onto two lines ("ราคา / น้ำมัน"). Keep them on
       one line and tighten the padding in that band only. */
    @media (min-width: 992px) {
        #navbarNav .navbar-nav > .nav-item > .nav-link { white-space: nowrap; }
    }
    @media (min-width: 992px) and (max-width: 1199.98px) {
        #navbarNav .navbar-nav > .nav-item > .nav-link { padding-left: .6rem; padding-right: .6rem; }
    }

    /* ── ☰ menu on phones/tablets: logo on top, roomy rows, actions at the
       bottom (desktop never sees the extras — they're d-lg-none) ── */
    .sc-nav-logo { height: 28px; width: auto; }
    /* Own classes, not .sc-brand-logo--*: the panel sits inside the navy
       header, whose rules force the white wordmark (and white outline
       buttons) — invisible on the panel's light background */
    .sc-nav-logo--dark { display: none; }
    [data-bs-theme="dark"] .sc-nav-logo--light { display: none; }
    [data-bs-theme="dark"] .sc-nav-logo--dark { display: inline-block; }
    .sc-nav-btn {
        border: 1px solid var(--fn-border-color, #e0e5eb);
        background: var(--fn-body-bg, #fff);
        color: var(--fn-heading-color, #181d25);
    }
    .sc-nav-btn:hover { border-color: var(--fn-heading-color, #181d25); color: var(--fn-heading-color, #181d25); }
    @media (max-width: 991.98px) {
        #navbarNav .offcanvas-header { border-bottom: 1px solid var(--fn-border-color, #e0e5eb); }
        #navbarNav .offcanvas-body { display: flex; flex-direction: column; }
        #navbarNav .navbar-nav > .nav-item > .nav-link {
            padding: .85rem 0;
            border-bottom: 1px solid var(--fn-border-color, #e0e5eb);
            font-size: 1rem;
        }
        .sc-nav-actions { display: flex; flex-direction: column; gap: .5rem; margin-top: auto; padding-top: 1.5rem; }
        .sc-nav-actions .btn { min-height: 2.75rem; }
        .sc-nav-links { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .75rem; font-size: .875rem; }
        .sc-nav-links a { color: var(--fn-secondary-color, #6c727f); text-decoration: none; }
    }

/* ── marketplace/partials/car-card.blade.php ── */
    /* ━━━ Boost (Featured / Top) styles ━━━ */
    .sc-boost-ribbon {
        position: absolute;
        top: .85rem;
        right: -.3rem;
        z-index: 3;
        padding: .25rem .65rem .25rem .85rem;
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .04em;
        color: #fff;
        line-height: 1.2;
        text-transform: uppercase;
        clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%);
        box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
        display: inline-flex;
        align-items: center;
        gap: .25rem;
    }
    .sc-boost-ribbon i { font-size: .75rem; }
    .sc-boost-ribbon--top {
        background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    }
    .sc-boost-ribbon--featured {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    }
    /* Card-level highlight */
    .sc-boost-top {
        box-shadow: 0 0 0 2px #dc2626, 0 4px 12px rgba(220, 38, 38, .15) !important;
    }
    .sc-boost-featured {
        box-shadow: 0 0 0 2px #f59e0b, 0 4px 12px rgba(245, 158, 11, .15) !important;
    }
    /* Subtle pulse for TOP cards (most premium) */
    @keyframes sc-boost-pulse {
        0%, 100% { box-shadow: 0 0 0 2px #dc2626, 0 4px 12px rgba(220, 38, 38, .15); }
        50%      { box-shadow: 0 0 0 2px #dc2626, 0 4px 18px rgba(220, 38, 38, .35); }
    }
    .sc-boost-top { animation: sc-boost-pulse 2.5s ease-in-out infinite; }

    /* ━━━ Highlighted (purple) — add-on feature ━━━ */
    .sc-highlighted {
        background: linear-gradient(135deg, #faf5ff 0%, #ede9fe 100%) !important;
        box-shadow: 0 0 0 2px #8b5cf6, 0 4px 16px rgba(139, 92, 246, .25) !important;
    }
    .sc-highlighted.sc-boost-top,
    .sc-highlighted.sc-boost-featured {
        background: linear-gradient(135deg, #faf5ff 0%, #ede9fe 100%) !important;
    }

    /* ━━━ Multi-image carousel (add-on) ━━━ */
    .sc-mc-carousel { overflow: hidden; }
    .sc-mc-carousel .swiper-pagination-bullet {
        background: #fff;
        opacity: .5;
        width: 6px; height: 6px;
    }
    .sc-mc-carousel .swiper-pagination-bullet-active {
        opacity: 1;
        background: #fff;
        width: 8px;
    }

    /* ━━━ Top-left badge stack — tabs flush in the photo's corner ━━━
       Square on the left so they sit against the edge like the boost ribbon
       does on the right; the card's own rounded corner clips the top one. */
    .sc-card-tabs {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;   /* level with the ribbon; the carousel's Swiper is z-1 */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .sc-card-tabs .badge {
        border-radius: 0 .375rem .375rem 0;
    }
    /* The year tab runs off the top edge, so only its lower-right corner is
       rounded — a curve on the top-right would leave a notch against the edge. */
    .sc-card-tabs .sc-card-tab-year {
        border-radius: 0 0 .375rem 0;
    }
    /* Orange: reads as "new". A deep orange rather than amber, so white
       text on it holds up at badge size. */
    .sc-card-tab-new {
        background: #ea580c;
        color: #fff;
        font-weight: 700;
    }
    /* Dark, not the brand red: red on a card means a price cut (the
       struck-out price, the -฿ tab, the TOP ribbon), and a red year on
       every card made every car look like it was on offer. */
    .sc-card-tab-year {
        background: rgba(17, 24, 39, .8);
        color: #fff;
        font-weight: 700;
        letter-spacing: .02em;
    }

    /* Instalment line under the price (Car::monthly_estimate) */
    .sc-card-monthly { margin-top: .25rem; font-size: .8125rem; color: var(--fn-secondary-color, #6c727f); }

    /* Seller trust line — โชว์รูม / ยืนยันตัวตน, text rather than photo badges */
    .sc-card-seller {
        display: flex;
        flex-wrap: wrap;
        gap: .125rem .75rem;
        margin-top: .5rem;
        font-size: .75rem;
        font-weight: 600;
        line-height: 1.4;
    }
    .sc-card-seller > span { display: inline-flex; align-items: center; gap: .25rem; }
    .sc-card-seller__dealer   { color: #b45309; }
    .sc-card-seller__verified { color: #0369a1; }
    [data-bs-theme="dark"] .sc-card-seller__dealer   { color: #fbbf24; }
    [data-bs-theme="dark"] .sc-card-seller__verified { color: #38bdf8; }

    /* Labelled compare button on the price line */
    .sc-car-card .sc-compare-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .25rem;
        padding: .25rem .625rem;
        font-size: .75rem;
        line-height: 1.2;
    }

    /* ━━━ Phones: two cards a row ━━━
       At ~170px a card keeps photo, title (2 lines), price, instalment and
       province + mileage; fuel and gear drop off (EV/hybrid still show as a
       tab on the photo, and the car page has the full spec). */
    @media (max-width: 575.98px) {
        .sc-car-card .card-body { padding: .625rem .75rem .375rem; }
        .sc-car-card .card-body h3 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            min-height: 2.8em;
            margin-bottom: .375rem !important;
            font-size: .8125rem;
            line-height: 1.4;
        }
        .sc-car-card .card-body .h6 { font-size: .9375rem; }
        /* Icon only: at ~170px "฿1,180,000" and a labelled button do not
           fit on one line. The full-width list view keeps the label. */
        .sc-car-card .sc-compare-btn { width: 1.75rem; height: 1.75rem; padding: 0; }
        .sc-car-card .sc-compare-btn__label { display: none; }
        .sc-list .sc-car-card .sc-compare-btn { width: auto; padding: 0 .625rem; }
        .sc-list .sc-car-card .sc-compare-btn__label { display: inline; }
        .sc-car-card .sc-card-monthly { font-size: .6875rem; }
        .sc-car-card .sc-card-seller { margin-top: .375rem; font-size: .6875rem; }
        .sc-car-card .card-footer { padding: 0 .75rem .625rem; }
        .sc-car-card .card-footer .border-top { padding-top: .5rem !important; }
        .sc-car-card .card-footer .row { font-size: .6875rem; }
        .sc-car-card .card-footer .row > .col { flex: 0 0 100%; max-width: 100%; }
        .sc-car-card .sc-card-spec-extra { display: none !important; }
        /* /cars list view keeps one full-width card a row — room for all four */
        .sc-list .sc-car-card .card-footer .row > .col { flex: 0 0 50%; max-width: 50%; }
        .sc-list .sc-car-card .sc-card-spec-extra { display: flex !important; }
        .sc-car-card .sc-card-tabs .badge { font-size: .625rem; }
        .sc-car-card .sc-boost-ribbon { font-size: .58rem; }
    }

/* ── marketplace/partials/compare-bar.blade.php ── */
        /* ── Floating compare bar ── */
        .sc-compare-bar {
            position: fixed;
            left: 0; right: 0;
            bottom: 0;
            z-index: 1040; /* below modals (1050+), above scroll-top button */
            background: var(--fn-body-bg, var(--bs-body-bg, #fff));
            border-top: 1px solid var(--fn-border-color, var(--bs-border-color, #e0e5eb));
            box-shadow: 0 -6px 24px rgba(0, 0, 0, .08);
            transition: transform .25s ease, opacity .2s;
        }
        [data-bs-theme="dark"] .sc-compare-bar {
            box-shadow: 0 -6px 24px rgba(0, 0, 0, .35);
        }
        .sc-compare-bar.sc-hide {
            transform: translateY(100%);
        }
        /* Body padding so floating bar doesn't cover footer when visible */
        body.sc-has-compare-bar { padding-bottom: 90px; }
        @media (max-width: 575px) { body.sc-has-compare-bar { padding-bottom: 130px; } }

        /* Compare chip (single car in slot) */
        .sc-compare-chip {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            padding: .25rem .5rem .25rem .25rem;
            background: var(--fn-tertiary-bg, var(--bs-tertiary-bg, #f5f7fa));
            border: 1px solid var(--fn-border-color, var(--bs-border-color, #e0e5eb));
            border-radius: 999px;
            font-size: .8125rem;
            max-width: 220px;
        }
        .sc-compare-chip__img {
            width: 32px; height: 32px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
            background: var(--fn-secondary-bg, var(--bs-secondary-bg, #eef1f6));
        }
        .sc-compare-chip__title {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .sc-compare-chip__remove {
            border: 0; background: transparent;
            color: var(--fn-secondary-color, var(--bs-secondary-color, #6c727f));
            padding: 0 .25rem;
            line-height: 1;
            cursor: pointer;
            border-radius: 50%;
            transition: background-color .15s, color .15s;
        }
        .sc-compare-chip__remove:hover {
            background: rgba(216, 81, 81, .12);
            color: #d85151;
        }

        /* Empty slot (placeholder) */
        .sc-compare-slot-empty {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 110px;
            height: 38px;
            border: 1px dashed var(--fn-border-color, var(--bs-border-color, #e0e5eb));
            border-radius: 999px;
            color: var(--fn-secondary-color, var(--bs-secondary-color, #6c727f));
            font-size: .75rem;
        }

        /* Compare button on card */
        .sc-compare-btn { transition: all .15s ease; }
        .sc-compare-btn.is-active {
            background-color: #d85151 !important;
            border-color: #d85151 !important;
            color: #fff !important;
        }
        .sc-compare-btn.is-active i { color: #fff !important; }

/* ── layouts/partials/bottom-nav.blade.php ── */
    .sc-bottom-nav { display: none; }
    /* The ☰ menu lives inside the sticky header's z-index:1030 layer, so this
       bar (also 1030, later in the page) drew over the menu's lower half */
    body:has(.offcanvas.show, .offcanvas.showing) .sc-bottom-nav { display: none !important; }
    @media (max-width: 991.98px) {
        .sc-bottom-nav {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1030;
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            padding: .25rem .25rem calc(.25rem + env(safe-area-inset-bottom));
            border-top: 1px solid var(--fn-border-color, #e0e5eb);
            background: var(--fn-body-bg, #fff);
            box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
        }
        .sc-bottom-nav a,
        .sc-bottom-nav button {
            min-height: 3rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: .125rem;
            padding: 0;
            border: 0;
            background: none;
            font-size: .6875rem;
            line-height: 1.2;
            text-decoration: none;
            color: var(--fn-secondary-color, #6c727f);
        }
        .sc-bottom-nav i { font-size: 1.25rem; }
        .sc-bottom-nav .is-active { font-weight: 600; color: var(--fn-primary, #d85151); }
        .sc-bottom-nav .sc-bottom-nav-sell i {
            width: 2.25rem;
            height: 2.25rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: -.875rem;
            border-radius: 50%;
            background: var(--fn-primary, #d85151);
            box-shadow: 0 4px 10px rgba(216, 81, 81, .35);
            color: #fff;
        }
        .sc-bottom-nav .sc-bottom-nav-sell { font-weight: 600; color: var(--fn-heading-color, #181d25); }

        /* Keep the page, the compare bar and the back-to-top button clear of it */
        body { padding-bottom: calc(3.75rem + env(safe-area-inset-bottom)); }
        body.sc-has-compare-bar { padding-bottom: calc(3.75rem + 130px + env(safe-area-inset-bottom)); }
        .sc-compare-bar { bottom: calc(3.75rem + env(safe-area-inset-bottom)); }
        body .floating-buttons.top-50 { bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
        body.sc-has-compare-bar .floating-buttons.top-50 { bottom: calc(3.75rem + 140px); }
    }