/* ===========================================================
   assets/css/main.css
   أساس التصميم — سيتم توسيعه بشكل كبير في PHASE 3 (Homepage)
   Color Palette: Dark Navy / White / Orange Accent (قابلة للتعديل من Admin — القسم 36)
   =========================================================== */

:root{
    --color-primary: #0B1F3A;      /* Dark Navy */
    --color-secondary: #E4572E;    /* Orange Accent */
    --color-bg: #F5F7FA;
    --color-white: #FFFFFF;
    --color-text: #1B1F27;
    --color-muted: #6B7280;
    --color-border: #E5E7EB;
    --color-success: #16A34A;
    --color-danger: #DC2626;
    --radius: 12px;
    --shadow-soft: 0 4px 20px rgba(11,31,58,0.08);
    --font-main: 'Segoe UI', Tahoma, Arial, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }

body{
    font-family: var(--font-main);
    background: var(--color-bg);
    color: var(--color-text);
    line-height:1.6;
}

.container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:0 16px;
}

a{ color: var(--color-secondary); text-decoration:none; }

/* ---------------- Alerts / Flash messages ---------------- */
.alert{
    padding:14px 18px;
    border-radius:8px;
    margin:12px auto;
    max-width:600px;
    font-size:14px;
}
.alert-success{ background:#E7F8EE; color:var(--color-success); border:1px solid #BBF0D0; }
.alert-error{ background:#FDEDEC; color:var(--color-danger); border:1px solid #F8C9C4; }

/* ---------------- Auth pages (login/register/forgot) ---------------- */
.auth-wrapper{
    min-height:80vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 16px;
}
.auth-card{
    background:var(--color-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding:40px;
    width:100%;
    max-width:440px;
}
.auth-card h1{
    font-size:22px;
    margin-bottom:6px;
    color:var(--color-primary);
}
.auth-card p.subtitle{
    color:var(--color-muted);
    font-size:14px;
    margin-bottom:24px;
}
.form-group{ margin-bottom:18px; }
.form-group label{
    display:block;
    font-size:14px;
    font-weight:600;
    margin-bottom:6px;
    color:var(--color-primary);
}
.form-control{
    width:100%;
    padding:12px 14px;
    border:1px solid var(--color-border);
    border-radius:8px;
    font-size:15px;
    transition: border-color .2s;
}
.form-control:focus{
    outline:none;
    border-color: var(--color-secondary);
}
.form-row{
    display:flex;
    gap:12px;
}
.form-row .form-group{ flex:1; }

.radio-group{ display:flex; gap:16px; flex-wrap:wrap; }
.radio-group label{ display:flex; align-items:center; gap:6px; font-weight:400; font-size:14px; }

.btn{
    display:inline-block;
    width:100%;
    padding:13px 20px;
    background: var(--color-secondary);
    color:#fff;
    border:none;
    border-radius:8px;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    text-align:center;
    transition: opacity .2s;
}
.btn:hover{ opacity:.9; }
.btn-outline{
    background:transparent;
    border:1px solid var(--color-primary);
    color:var(--color-primary);
}

.auth-links{
    margin-top:18px;
    font-size:14px;
    text-align:center;
    color:var(--color-muted);
}
.field-errors{
    background:#FDEDEC;
    border:1px solid #F8C9C4;
    color:var(--color-danger);
    border-radius:8px;
    padding:12px 16px;
    margin-bottom:18px;
    font-size:14px;
}
.field-errors ul{ padding-inline-start:18px; }


.site-footer{
    background: var(--color-footer);
    color:var(--color-footer-text);
    padding:24px 0;
    margin-top:60px;
    text-align:center;
    font-size:14px;
}
.footer-col h5{
    color:var(--color-footer-link);
}

.footer-desc{
    color:var(--color-footer-link);
}

.footer-col ul a{
    color:var(--color-footer-link);
}

.footer-contact li{
    color:var(--color-footer-link);
}
/* ===========================================================
   HEADER / NAVBAR
   =========================================================== */
    .site-header{
    background: var(--color-header);
    border-bottom:1px solid var(--color-border);
    position:sticky;
    top:0;
    z-index:100;
}
.site-header__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:68px;
}
.site-logo{
    font-size:22px;
    font-weight:800;
    color: var(--color-primary);
}
.main-nav__list{
    display:flex;
    list-style:none;
    gap:22px;
}
.main-nav__list a{
    color: var(--color-text);
    font-size:14.5px;
    font-weight:500;
    padding:6px 2px;
    border-bottom:2px solid transparent;
}
.main-nav__list a:hover,
.main-nav__list a.is-active{
    color: var(--color-secondary);
    border-bottom-color: var(--color-secondary);
}
.main-nav{
    display:flex;
    align-items:center;
    gap:28px;
    flex:1;
    justify-content:space-between;
    margin-inline-start:32px;
}
.main-nav__auth{
    display:flex;
    align-items:center;
    gap:14px;
}
.btn-link{ font-size:14px; font-weight:600; color: var(--color-primary); }
.btn-outline-sm{
    border:1px solid var(--color-primary);
    color: var(--color-primary);
    padding:8px 16px;
    border-radius:8px;
    font-size:14px;
    font-weight:600;
}
.btn-outline-sm:hover{ background: var(--color-primary); color:#fff; }
.lang-switch{ display:flex; gap:6px; font-size:12px; }
.lang-switch a{ color: var(--color-muted); font-weight:700; padding:2px 4px; }
.lang-switch a.is-active{ color: var(--color-secondary); }

.hamburger-btn{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:38px;
    height:38px;
    background:none;
    border:none;
    cursor:pointer;
}
.hamburger-btn span{
    display:block;
    height:2px;
    background: var(--color-primary);
    border-radius:2px;
    transition: transform .25s, opacity .25s;
}
.hamburger-btn.is-active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger-btn.is-active span:nth-child(2){ opacity:0; }
.hamburger-btn.is-active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.flash-wrap{ padding-top:12px; }

/* ===========================================================
   HERO
   =========================================================== */
.hero{
    background: linear-gradient(135deg, var(--color-primary) 0%, #14335c 100%);
    color:#fff;
    padding:64px 0 48px;
}
.hero__inner{ text-align:center; }
.hero__title{
    font-size:34px;
    font-weight:800;
    margin-bottom:12px;
}
.hero__subtitle{
    color:#C9D3E0;
    font-size:16px;
    max-width:640px;
    margin:0 auto 32px;
}
.hero__stats{
    margin-top:20px;
    color:#C9D3E0;
    font-size:14px;
}

/* ---------------- Search Box ---------------- */
.search-box{
    background:#fff;
    border-radius:16px;
    padding:20px;
    max-width:960px;
    margin:0 auto;
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.search-box__row{
    display:flex;
    gap:12px;
    margin-bottom:12px;
}
.search-box__field{
    flex:1;
    text-align:start;
}
.search-box__field label{
    display:block;
    font-size:12px;
    font-weight:700;
    color: var(--color-muted);
    margin-bottom:4px;
}
.search-box__field select,
.search-box__field input{
    width:100%;
    padding:11px 12px;
    border:1px solid var(--color-border);
    border-radius:8px;
    font-size:14px;
    color: var(--color-text);
    background:#fff;
}
.search-box__actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:6px;
    gap:12px;
}
.btn-search{ width:auto; padding:13px 32px; }
.btn-link-white{ color: var(--color-primary); font-size:14px; font-weight:600; }

/* ===========================================================
   SECTIONS / VEHICLE GRID / CARDS
   =========================================================== */
.section{ padding:56px 0; }
.section--muted{ background:#fff; }
.section__title{
    font-size:24px;
    font-weight:800;
    color: var(--color-primary);
    margin-bottom:24px;
}
.section__more{ text-align:center; margin-top:28px; }
.empty-state{ color: var(--color-muted); text-align:center; padding:40px 0; }

.brands-strip__list{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}
.brand-pill{
    display:flex;
    align-items:center;
    gap:8px;
    background:#fff;
    border:1px solid var(--color-border);
    border-radius:999px;
    padding:9px 18px;
    font-weight:600;
    font-size:14px;
    color: var(--color-primary);
}
.brand-pill:hover{ border-color: var(--color-secondary); color: var(--color-secondary); }
.brand-pill small{ color: var(--color-muted); font-weight:400; }

.vehicle-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;
}

.vehicle-card{
    background:#fff;
    border-radius: var(--radius);
    overflow:hidden;
    box-shadow: var(--shadow-soft);
    transition: transform .2s;
    position:relative;
}
.vehicle-card:hover{ transform: translateY(-3px); }
.vehicle-card__img-wrap{
    position:relative;
    aspect-ratio: 4/3;
    background:#eef1f5;
    overflow:hidden;
}
.vehicle-card__img-wrap img{
    width:100%; height:100%; object-fit:cover; display:block;
}
.badge{
    position:absolute;
    top:10px;
    font-size:11px;
    font-weight:700;
    padding:4px 9px;
    border-radius:6px;
    color:#fff;
}
.badge-verified{ inset-inline-start:10px; background: var(--color-success); }
.badge-featured{ inset-inline-end:10px; background: var(--color-secondary); }
.btn-icon{
    background:rgba(255,255,255,.9);
    border:none;
    border-radius:50%;
    width:34px; height:34px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    font-size:16px;
}
.btn-favorite{
    position:absolute;
    bottom:10px;
    inset-inline-end:10px;
}
.vehicle-card__body{ padding:14px 16px 16px; }
.vehicle-card__title{ font-size:16px; font-weight:700; margin-bottom:6px; }
.vehicle-card__title a{ color: var(--color-text); }
.vehicle-card__specs{
    display:flex; flex-wrap:wrap; gap:6px;
    font-size:12.5px; color: var(--color-muted); margin-bottom:6px;
}
.vehicle-card__location{ font-size:13px; color: var(--color-muted); margin-bottom:10px; }
.vehicle-card__footer{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:10px; border-top:1px solid var(--color-border);
}
.vehicle-card__price{ font-size:17px; font-weight:800; color: var(--color-primary); }
.seller-type{
    display:inline-block;
    margin-top:8px;
    font-size:11px;
    font-weight:700;
    padding:3px 8px;
    border-radius:5px;
    background:#EEF2F7;
    color: var(--color-primary);
}
.seller-type--showroom{ background:#FDEEE7; color: var(--color-secondary); }

/* ===========================================================
   CTA SELL
   =========================================================== */
.cta-sell{ background: var(--color-secondary); color:#fff; }
.cta-sell__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
}
.cta-sell h2{ font-size:22px; margin-bottom:6px; }
.cta-sell p{ opacity:.9; }
.btn-cta{
    width:auto;
    padding:14px 30px;
    background:#fff;
    color: var(--color-secondary);
    font-weight:800;
}

/* ===========================================================
   FOOTER
   =========================================================== */
.footer-grid{
    display:grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap:32px;
    padding:48px 0 24px;
}
.footer-col h4{ font-size:18px; margin-bottom:10px; }
.footer-col h5{ font-size:14px; margin-bottom:14px; color:#C9D3E0; text-transform:uppercase; letter-spacing:.5px; }
.footer-desc{ color:#AEB9C9; font-size:14px; max-width:280px; }
.footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:9px; }
.footer-col ul a{ color:#C9D3E0; font-size:14px; }
.footer-col ul a:hover{ color:#fff; }
.footer-contact li{ color:#C9D3E0; font-size:14px; }
.footer-bottom{
    border-top:1px solid rgba(255,255,255,.1);
    padding:18px 0;
    text-align:center;
    font-size:13px;
    color:#AEB9C9;
}

/* ===========================================================
   SEARCH RESULTS PAGE — PHASE 4/5
   =========================================================== */
.search-page{ padding:28px 0 56px; }
.search-page__inner{
    display:grid;
    grid-template-columns: 280px 1fr;
    gap:28px;
    align-items:start;
}

.sticky-search-mobile{ display:none; }

/* ---- Sidebar / Filters form ---- */
.search-sidebar{
    background:#fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding:20px;
    position:sticky;
    top:84px;
    max-height:calc(100vh - 100px);
    overflow-y:auto;
}
.search-sidebar__header{ display:none; }

.filters-form__section{ margin-bottom:16px; }
.filters-form__section label{
    display:block;
    font-size:13px;
    font-weight:700;
    color: var(--color-primary);
    margin-bottom:6px;
}
.filters-form__section select,
.filters-form__section input[type="number"],
.filters-form__section input[type="text"]{
    width:100%;
    padding:10px 11px;
    border:1px solid var(--color-border);
    border-radius:8px;
    font-size:13.5px;
}
.range-row{ display:flex; gap:8px; }
.range-row input{ flex:1; }

.chip-group{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
    border:1px solid var(--color-border);
    border-radius:999px;
    padding:6px 14px;
    font-size:13px;
    cursor:pointer;
    display:flex; align-items:center; gap:6px;
}
.chip input{ display:none; }
.chip:has(input:checked){
    background: var(--color-primary);
    color:#fff;
    border-color: var(--color-primary);
}

.filters-form__actions{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:20px;
    padding-top:16px;
    border-top:1px solid var(--color-border);
}
.filters-form__actions .btn-link{ text-align:center; }

.advanced-search-card{
    background:#fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding:28px;
    max-width:900px;
}
.advanced-search-card .filters-form{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:0 20px;
}
.advanced-search-card .filters-form__actions{
    grid-column: 1 / -1;
    flex-direction:row;
    justify-content:flex-start;
}
.advanced-search-card .filters-form__actions .btn{ width:auto; padding:13px 32px; }

/* ---- Results toolbar ---- */
.search-results__toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
}
.results-count{ font-weight:700; color: var(--color-primary); }
.sort-wrap{ display:flex; align-items:center; gap:8px; font-size:13.5px; }
.sort-wrap select{
    padding:9px 12px;
    border:1px solid var(--color-border);
    border-radius:8px;
    font-size:13.5px;
}

#resultsGrid.is-loading{ opacity:.5; pointer-events:none; transition:opacity .15s; }

/* ---- Pagination ---- */
.pagination{
    display:flex;
    justify-content:center;
    gap:6px;
    margin-top:32px;
    flex-wrap:wrap;
}
.page-link{
    min-width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--color-border);
    border-radius:8px;
    color: var(--color-primary);
    font-weight:600;
    font-size:14px;
}
.page-link.is-active{ background: var(--color-primary); color:#fff; border-color: var(--color-primary); }
.page-link:hover:not(.is-active){ border-color: var(--color-secondary); color: var(--color-secondary); }
.page-dots{ display:flex; align-items:center; padding:0 4px; color: var(--color-muted); }

/* ---- Mobile: filters drawer + sticky search ---- */
.search-sidebar-overlay{
    display:none;
}

@media (max-width:1024px){
    .search-page__inner{ grid-template-columns:1fr; }

    .sticky-search-mobile{
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:10px;
        background:#fff;
        padding:10px 14px;
        border-radius:10px;
        box-shadow: var(--shadow-soft);
        margin-bottom:16px;
        position:sticky;
        top:76px;
        z-index:20;
    }
    .sort-select-mobile{
        padding:9px 10px;
        border:1px solid var(--color-border);
        border-radius:8px;
        font-size:13px;
    }
    .search-results__toolbar .sort-wrap{ display:none; }

    .search-sidebar{
        position:fixed;
        inset-inline-start:0;
        top:0;
        height:100vh;
        width:85%;
        max-width:340px;
        max-height:none;
        border-radius:0;
        transform: translateX(-100%);
        transition: transform .3s ease;
        z-index:200;
        padding-top:16px;
    }
    html[dir="rtl"] .search-sidebar{ transform: translateX(100%); }
    .search-sidebar.is-open{ transform: translateX(0); }
    .search-sidebar__header{
        display:flex;
        justify-content:space-between;
        align-items:center;
        margin-bottom:12px;
        padding-bottom:12px;
        border-bottom:1px solid var(--color-border);
    }
    .close-drawer-btn{
        background:none; border:none; font-size:26px; line-height:1; cursor:pointer; color: var(--color-muted);
    }
    .search-sidebar-overlay{
        display:block;
        position:fixed; inset:0;
        background:rgba(11,31,58,.5);
        z-index:150;
        opacity:0; visibility:hidden;
        transition: opacity .25s;
    }
    .search-sidebar-overlay.is-visible{ opacity:1; visibility:visible; }

    .advanced-search-card .filters-form{ grid-template-columns:1fr 1fr; }
}

@media (max-width:480px){
    .advanced-search-card .filters-form{ grid-template-columns:1fr; }
    .advanced-search-card{ padding:20px; }
}

/* ===========================================================
   VEHICLE DETAILS PAGE — PHASE 5
   =========================================================== */
.breadcrumb{ font-size:13px; color: var(--color-muted); margin:18px 0; }
.breadcrumb a{ color: var(--color-muted); }
.breadcrumb a:hover{ color: var(--color-secondary); }

.vehicle-detail__grid{
    display:grid;
    grid-template-columns: 1fr 340px;
    gap:28px;
    align-items:start;
}

/* ---- Gallery ---- */
.gallery__main{
    position:relative;
    aspect-ratio:16/10;
    background:#0B1F3A;
    border-radius: var(--radius);
    overflow:hidden;
}
.gallery__main img{ width:100%; height:100%; object-fit:contain; background:#0B1F3A; }
.gallery__zoom-btn{
    position:absolute; bottom:14px; inset-inline-end:14px;
    background:rgba(0,0,0,.55); color:#fff; border:none; border-radius:8px;
    width:38px; height:38px; font-size:18px; cursor:pointer;
}
.gallery__nav{
    position:absolute; top:50%; transform:translateY(-50%);
    background:rgba(255,255,255,.85); border:none; border-radius:50%;
    width:40px; height:40px; font-size:22px; cursor:pointer; color: var(--color-primary);
}
.gallery__nav--prev{ inset-inline-start:12px; }
.gallery__nav--next{ inset-inline-end:12px; }
.gallery__thumbs{
    display:flex; gap:8px; margin-top:10px; overflow-x:auto; padding-bottom:4px;
}
.gallery__thumb{
    width:78px; height:58px; object-fit:cover; border-radius:8px; cursor:pointer;
    opacity:.6; border:2px solid transparent; flex-shrink:0;
}
.gallery__thumb.is-active{ opacity:1; border-color: var(--color-secondary); }

/* ---- Heading / Price ---- */
.vehicle-detail__heading{
    display:flex; justify-content:space-between; align-items:flex-start;
    gap:16px; margin:20px 0 14px; flex-wrap:wrap;
}
.vehicle-detail__heading h1{ font-size:24px; color: var(--color-primary); margin-bottom:6px; }
.vehicle-detail__location{ font-size:13.5px; color: var(--color-muted); }
.vehicle-detail__price{
    font-size:28px; font-weight:800; color: var(--color-secondary); white-space:nowrap;
}
.vehicle-detail__price small{
    display:block; font-size:12px; font-weight:600; color: var(--color-muted);
}

.vehicle-detail__quick-actions{
    display:flex; gap:10px; margin-bottom:24px; flex-wrap:wrap;
}
.btn-icon-label{
    background:#fff; border:1px solid var(--color-border); border-radius:8px;
    padding:9px 16px; font-size:13.5px; font-weight:600; cursor:pointer; color: var(--color-primary);
}
.btn-icon-label.is-active{ background:#FDEEE7; border-color: var(--color-secondary); color: var(--color-secondary); }

/* ---- Detail cards ---- */
.detail-card{
    background:#fff; border-radius: var(--radius); box-shadow: var(--shadow-soft);
    padding:24px; margin-bottom:20px;
}
.detail-card h2{ font-size:18px; color: var(--color-primary); margin-bottom:16px; }

.specs-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:16px 20px;
}
.spec-item{ display:flex; flex-direction:column; gap:4px; }
.spec-label{ font-size:12px; color: var(--color-muted); }
.spec-value{ font-size:14.5px; font-weight:700; color: var(--color-text); }

.vehicle-description{ font-size:14.5px; line-height:1.9; color: var(--color-text); white-space:pre-line; }

.features-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;
}
.feature-item{
    display:flex; align-items:center; gap:10px; font-size:14px; color: var(--color-text);
}
.feature-item i{ color: var(--color-secondary); width:18px; text-align:center; }

.map-embed{ border-radius:10px; overflow:hidden; }

/* ---- Seller card ---- */
.seller-card{
    background:#fff; border-radius: var(--radius); box-shadow: var(--shadow-soft);
    padding:22px; position:sticky; top:84px;
}
.seller-card__header{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.seller-card__avatar{ width:52px; height:52px; border-radius:50%; object-fit:cover; background:#eef1f5; }
.seller-card__header h3{ font-size:16px; color: var(--color-primary); }
.seller-card__member-since{ font-size:12.5px; color: var(--color-muted); margin-bottom:18px; }

.btn-reveal-phone{ background: var(--color-primary); margin-bottom:10px; }
.btn-whatsapp{
    display:flex; align-items:center; justify-content:center; gap:8px;
    background:#25D366; color:#fff; margin-bottom:10px; text-decoration:none;
    padding:13px 20px; border-radius:8px; font-weight:600; font-size:15px;
}
.btn-outline-full{
    width:100%; background:transparent; border:1px solid var(--color-primary);
    color: var(--color-primary); padding:13px 20px; border-radius:8px; font-weight:600; font-size:15px; cursor:pointer;
}
.seller-card__extra-actions{
    display:flex; flex-direction:column; gap:8px; margin-top:14px;
    padding-top:14px; border-top:1px solid var(--color-border);
}
.seller-card__extra-actions .btn-link{ text-align:start; font-size:13.5px; }
.seller-card__view-showroom{ display:block; margin-top:14px; text-align:center; font-size:13.5px; }

/* ---- Sticky mobile contact bar ---- */
.sticky-contact-mobile{ display:none; }

/* ---- Modal ---- */
.modal-overlay{
    position:fixed; inset:0; background:rgba(11,31,58,.55);
    z-index:300; opacity:0; visibility:hidden; transition:opacity .2s;
}
.modal-overlay.is-open{ opacity:1; visibility:visible; }
.modal-box{
    position:fixed; top:50%; inset-inline-start:50%;
    transform:translate(-50%,-50%) scale(.96);
    background:#fff; border-radius:16px; padding:28px;
    width:92%; max-width:440px; max-height:88vh; overflow-y:auto;
    z-index:301; opacity:0; visibility:hidden; transition:opacity .2s, transform .2s;
}
.modal-box.is-open{ opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); }
.modal-close{
    position:absolute; top:14px; inset-inline-end:14px;
    background:none; border:none; font-size:26px; cursor:pointer; color: var(--color-muted);
}
.modal-content h3{ font-size:18px; color: var(--color-primary); margin-bottom:18px; }
.modal-form__result{ margin-top:12px; font-size:13.5px; }
.modal-form__result.is-success{ color: var(--color-success); }
.modal-form__result.is-error{ color: var(--color-danger); }

.phone-reveal-box{ text-align:center; padding:10px 0; }
.phone-reveal-number{
    display:block; font-size:26px; font-weight:800; color: var(--color-primary);
    margin-top:10px; direction:ltr;
}

/* ---- Lightbox ---- */
.lightbox{
    position:fixed; inset:0; background:rgba(0,0,0,.92);
    z-index:400; display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transition:opacity .2s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:90%; max-height:88vh; object-fit:contain; }
.lightbox__close{
    position:absolute; top:20px; inset-inline-end:24px;
    background:none; border:none; color:#fff; font-size:36px; cursor:pointer;
}

@media (max-width:1024px){
    .vehicle-detail__grid{ grid-template-columns:1fr; }
    .seller-card{ position:static; }
    .specs-grid{ grid-template-columns:repeat(2, 1fr); }
    .features-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:768px){
    .sticky-contact-mobile{
        display:flex; gap:8px; position:fixed; bottom:0; inset-inline-start:0; inset-inline-end:0;
        background:#fff; padding:10px 14px; box-shadow:0 -4px 16px rgba(0,0,0,.1); z-index:90;
    }
    .sticky-contact-mobile .btn{ flex:1; padding:12px; font-size:13.5px; }
    .sticky-contact-mobile .btn-whatsapp{ flex:0 0 52px; padding:12px 0; }
    .sticky-contact-mobile .btn-outline-full{ flex:0 0 52px; padding:12px 0; }
    .vehicle-detail{ padding-bottom:70px; }
    .vehicle-detail__price{ font-size:22px; }
}

@media (max-width:480px){
    .specs-grid, .features-grid{ grid-template-columns:1fr 1fr; }
    .detail-card{ padding:18px; }
    .gallery__main{ aspect-ratio:4/3; }
}

/* ===========================================================
   SELL WIZARD — PHASE 6
   =========================================================== */
.wizard-steps{
    display:flex;
    justify-content:space-between;
    margin-bottom:28px;
    overflow-x:auto;
    gap:4px;
    padding-bottom:6px;
}
.wizard-step-dot{
    display:flex; flex-direction:column; align-items:center; gap:6px;
    flex:1; min-width:80px; opacity:.45; cursor:default;
}
.wizard-step-dot.is-active,
.wizard-step-dot.is-done{ opacity:1; cursor:pointer; }
.dot-num{
    width:30px; height:30px; border-radius:50%; background: var(--color-border);
    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:#fff;
}
.wizard-step-dot.is-active .dot-num{ background: var(--color-secondary); }
.wizard-step-dot.is-done .dot-num{ background: var(--color-success); }
.dot-label{ font-size:11px; text-align:center; color: var(--color-muted); white-space:nowrap; }

.wizard-card{
    background:#fff; border-radius: var(--radius); box-shadow: var(--shadow-soft);
    padding:32px; max-width:760px; margin:0 auto;
}
.wizard-step{ display:none; }
.wizard-step.is-active{ display:block; animation: fadeIn .25s ease; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
.wizard-step h2{ font-size:19px; color: var(--color-primary); margin-bottom:20px; }

.tile-group{ display:flex; gap:12px; flex-wrap:wrap; }
.tile{
    border:1.5px solid var(--color-border); border-radius:10px; padding:14px 18px;
    cursor:pointer; font-size:14px; font-weight:600; color: var(--color-text);
}
.tile input{ display:none; }
.tile:has(input:checked){ border-color: var(--color-secondary); background:#FDEEE7; color: var(--color-secondary); }

.checkbox-label{ display:flex; align-items:center; gap:8px; font-size:14px; cursor:pointer; }

.wizard-hint{ font-size:13px; color: var(--color-muted); margin:14px 0; }

.features-checklist{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:14px;
}
.features-checklist i{ color: var(--color-secondary); width:16px; }

/* ---- Dropzone ---- */
.dropzone{
    border:2px dashed var(--color-border); border-radius:12px;
    padding:40px 20px; text-align:center; cursor:pointer; transition: border-color .2s, background .2s;
}
.dropzone.is-dragover{ border-color: var(--color-secondary); background:#FFF8F5; }
.dropzone__icon{ font-size:34px; display:block; margin-bottom:10px; }
.dropzone p{ color: var(--color-muted); font-size:14px; }

.image-previews{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-top:18px;
}
.image-preview-item{
    position:relative; aspect-ratio:1; border-radius:8px; overflow:hidden; border:2px solid transparent;
}
.image-preview-item.is-main{ border-color: var(--color-secondary); }
.image-preview-item img{ width:100%; height:100%; object-fit:cover; }
.preview-badge{
    position:absolute; bottom:4px; inset-inline-start:4px;
    background: var(--color-secondary); color:#fff; font-size:10px; font-weight:700;
    padding:2px 6px; border-radius:4px;
}
.preview-remove{
    position:absolute; top:4px; inset-inline-end:4px;
    background:rgba(0,0,0,.6); color:#fff; border:none; border-radius:50%;
    width:22px; height:22px; cursor:pointer; font-size:14px; line-height:1;
}

.review-summary{
    background:#F5F7FA; border-radius:10px; padding:16px 18px; margin:16px 0; font-size:14px;
}
.review-summary > div{ margin-bottom:6px; }

.wizard-nav{
    display:flex; justify-content:space-between; align-items:center;
    margin-top:28px; padding-top:20px; border-top:1px solid var(--color-border);
}
.wizard-nav .btn,
.wizard-nav .btn-outline-sm{ width:auto; padding:12px 28px; }

@media (max-width:768px){
    .wizard-card{ padding:22px; }
    .wizard-steps{ justify-content:flex-start; }
    .features-checklist{ grid-template-columns:1fr; }
    .image-previews{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:480px){
    .image-previews{ grid-template-columns:repeat(2, 1fr); }
}

/* ===========================================================
   FAVORITES / COMPARE — PHASE 7
   =========================================================== */
.compare-bar{
    position:fixed; bottom:0; inset-inline-start:0; inset-inline-end:0;
    background: var(--color-primary); color:#fff;
    padding:14px 20px; display:flex; align-items:center; justify-content:space-between;
    z-index:250; transform:translateY(100%); transition: transform .3s ease;
}
.compare-bar.is-visible{ transform:translateY(0); }
.compare-bar__actions{ display:flex; gap:14px; align-items:center; }
.compare-bar .btn-outline-sm{ border-color:#fff; color:#fff; }
.compare-bar .btn-link{ color:#C9D3E0; }

.btn-icon.is-active{ background: var(--color-secondary); color:#fff; }
.btn-favorite.is-active{ color: var(--color-secondary); }

/* ---- Compare table ---- */
.compare-table-wrap{ overflow-x:auto; }
.compare-table{
    width:100%; border-collapse:collapse; background:#fff; border-radius: var(--radius);
    overflow:hidden; box-shadow: var(--shadow-soft); min-width:600px;
}
.compare-table th, .compare-table td{
    padding:14px 16px; border-bottom:1px solid var(--color-border); text-align:center; font-size:14px;
}
.compare-table__label-col{ text-align:start; font-weight:700; color: var(--color-primary); background:#F5F7FA; min-width:140px; }
.compare-vehicle-head{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.compare-vehicle-head img{ width:100px; height:70px; object-fit:cover; border-radius:8px; }
.compare-vehicle-head a{ font-weight:700; color: var(--color-primary); font-size:14px; }
.compare-remove{ font-size:12px; color: var(--color-danger); }

/* ---- Alerts ---- */
.alerts-layout{ display:grid; grid-template-columns:400px 1fr; gap:28px; align-items:start; }
.alert-form-card{ padding:26px; max-width:none; }
.alert-form-card h2{ font-size:17px; color: var(--color-primary); margin-bottom:18px; }

.alert-item{
    background:#fff; border-radius:10px; box-shadow: var(--shadow-soft);
    padding:16px 18px; display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;
}
.alert-item__info strong{ color: var(--color-primary); font-size:14.5px; }
.alert-item__meta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; font-size:12.5px; color: var(--color-muted); }
.alert-item__actions{ display:flex; align-items:center; gap:14px; }

.switch{ position:relative; display:inline-block; width:42px; height:24px; }
.switch input{ opacity:0; width:0; height:0; }
.switch__slider{
    position:absolute; cursor:pointer; inset:0; background:#ccc; border-radius:24px; transition:.2s;
}
.switch__slider::before{
    content:""; position:absolute; height:18px; width:18px; inset-inline-start:3px; bottom:3px;
    background:#fff; border-radius:50%; transition:.2s;
}
.switch input:checked + .switch__slider{ background: var(--color-secondary); }
.switch input:checked + .switch__slider::before{ transform: translateX(18px); }
html[dir="rtl"] .switch input:checked + .switch__slider::before{ transform: translateX(-18px); }

@media (max-width:1024px){
    .alerts-layout{ grid-template-columns:1fr; }
}

/* ===========================================================
   DASHBOARD LAYOUT — PHASE 8
   =========================================================== */
.unread-badge{
    background: var(--color-secondary); color:#fff; font-size:10.5px; font-weight:800;
    padding:1px 6px; border-radius:999px; margin-inline-start:6px;
}

.dashboard-layout{ padding:28px 0 60px; }
.dashboard-layout__inner{
    display:grid; grid-template-columns:250px 1fr; gap:24px; align-items:start;
}

.dashboard-sidebar{
    background:#fff; border-radius: var(--radius); box-shadow: var(--shadow-soft);
    padding:20px; position:sticky; top:84px;
}
.dashboard-sidebar__user{
    display:flex; align-items:center; gap:10px; padding-bottom:16px; margin-bottom:12px;
    border-bottom:1px solid var(--color-border);
}
.dashboard-sidebar__user img{ width:44px; height:44px; border-radius:50%; object-fit:cover; background:#eef1f5; }
.dashboard-sidebar__user strong{ display:block; font-size:14px; color: var(--color-primary); }
.dashboard-sidebar__user span{ font-size:12px; color: var(--color-muted); }

.dashboard-nav{ display:flex; flex-direction:column; gap:2px; }
.dashboard-nav a{
    display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:8px;
    font-size:14px; color: var(--color-text); font-weight:500;
}
.dashboard-nav a i{ width:18px; text-align:center; color: var(--color-muted); }
.dashboard-nav a:hover{ background:#F5F7FA; }
.dashboard-nav a.is-active{ background:#FDEEE7; color: var(--color-secondary); font-weight:700; }
.dashboard-nav a.is-active i{ color: var(--color-secondary); }
.dashboard-nav__admin-link{ margin-top:10px; padding-top:10px; border-top:1px solid var(--color-border); color: var(--color-primary) !important; font-weight:700 !important; }

.dashboard-content{ min-width:0; }
.dashboard-title{ font-size:22px; color: var(--color-primary); margin-bottom:20px; }

.dashboard-stats-grid{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-bottom:24px;
}
.dashboard-stat-card{
    background:#fff; border-radius: var(--radius); box-shadow: var(--shadow-soft);
    padding:20px; text-align:center;
}
.dashboard-stat-card__num{ display:block; font-size:26px; font-weight:800; color: var(--color-primary); }
.dashboard-stat-card__label{ font-size:12.5px; color: var(--color-muted); }

.dashboard-quick-links{ display:flex; gap:12px; }
.dashboard-quick-links .btn, .dashboard-quick-links .btn-outline-sm{ width:auto; padding:12px 24px; }

/* ---- Messages ---- */
.messages-layout{
    display:grid; grid-template-columns:320px 1fr; gap:20px; height:600px;
}
.threads-list{
    background:#fff; border-radius: var(--radius); box-shadow: var(--shadow-soft);
    overflow-y:auto;
}
.thread-item{
    display:flex; gap:10px; padding:14px 16px; border-bottom:1px solid var(--color-border);
}
.thread-item.is-active{ background:#FDEEE7; }
.thread-item img{ width:42px; height:42px; border-radius:50%; object-fit:cover; background:#eef1f5; flex-shrink:0; }
.thread-item__top{ display:flex; justify-content:space-between; align-items:center; }
.thread-item__top strong{ font-size:13.5px; color: var(--color-primary); }
.thread-item__vehicle{ font-size:11.5px; color: var(--color-secondary); font-weight:600; }
.thread-item__preview{ font-size:12.5px; color: var(--color-muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.thread-view{
    background:#fff; border-radius: var(--radius); box-shadow: var(--shadow-soft);
    display:flex; flex-direction:column; overflow:hidden;
}
.thread-view__header{
    padding:16px 20px; border-bottom:1px solid var(--color-border);
    display:flex; justify-content:space-between; align-items:center;
}
.thread-view__messages{ flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:10px; }

.msg-bubble{
    max-width:70%; background:#F5F7FA; padding:10px 14px; border-radius:12px; align-self:flex-start;
}
.msg-bubble--mine{ background: var(--color-primary); color:#fff; align-self:flex-end; }
.msg-bubble p{ font-size:14px; }
.msg-bubble__time{ font-size:10.5px; opacity:.65; display:block; margin-top:4px; }

.thread-reply-form{
    display:flex; gap:10px; padding:14px 16px; border-top:1px solid var(--color-border);
}
.thread-reply-form textarea{
    flex:1; resize:none; border:1px solid var(--color-border); border-radius:8px; padding:10px 12px; font-size:14px;
}
.thread-reply-form .btn{ width:auto; padding:0 22px; }

@media (max-width:1024px){
    .dashboard-layout__inner{ grid-template-columns:1fr; }
    .dashboard-sidebar{ position:static; }
    .dashboard-stats-grid{ grid-template-columns:1fr 1fr; }
    .messages-layout{ grid-template-columns:1fr; height:auto; }
    .threads-list{ max-height:260px; }
    .thread-view{ height:500px; }
}

/* ---- My listings table ---- */
.my-listings-table-wrap{ overflow-x:auto; }
.my-listings-table{
    width:100%; border-collapse:collapse; background:#fff; border-radius: var(--radius);
    overflow:hidden; box-shadow: var(--shadow-soft); min-width:640px;
}
.my-listings-table th{ text-align:start; padding:12px 16px; background:#F5F7FA; font-size:12.5px; color: var(--color-muted); }
.my-listings-table td{ padding:12px 16px; border-top:1px solid var(--color-border); font-size:13.5px; vertical-align:middle; }
.my-listings-thumb{ width:64px; height:46px; object-fit:cover; border-radius:6px; }
.status-badge{ font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:6px; }
.status--draft{ background:#EEF2F7; color:#6B7280; }
.status--pending{ background:#FFF4E0; color:#B7791F; }
.status--published{ background:#E7F8EE; color: var(--color-success); }
.status--rejected{ background:#FDEDEC; color: var(--color-danger); }
.status--expired{ background:#EEF2F7; color:#6B7280; }
.status--sold{ background:#E6E9F5; color:#4C51BF; }

/* ===========================================================
   SHOWROOMS — PHASE 9
   =========================================================== */
.verified-tick{ color: var(--color-success); font-size:13px; font-weight:700; }

.showrooms-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
}
.showroom-card{
    background:#fff; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-soft);
}
.showroom-card__cover{
    height:100px; background-color:#0B1F3A; background-size:cover; background-position:center;
    display:flex; align-items:flex-end; padding:0 16px;
}
.showroom-card__logo{
    width:64px; height:64px; border-radius:10px; object-fit:cover; background:#fff;
    border:3px solid #fff; transform:translateY(32px); box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.showroom-card__body{ padding:44px 16px 18px; }
.showroom-card__body h3{ font-size:15.5px; color: var(--color-primary); margin-bottom:4px; }
.showroom-card__body p{ font-size:13px; color: var(--color-muted); margin-bottom:8px; }
.showroom-card__count{ font-size:12px; font-weight:700; color: var(--color-secondary); }

.showroom-hero{
    background-color: var(--color-primary); background-size:cover; background-position:center;
    padding:40px 0; position:relative;
}
.showroom-hero::before{ content:""; position:absolute; inset:0; background:rgba(11,31,58,.65); }
.showroom-hero__inner{ position:relative; display:flex; align-items:center; gap:20px; color:#fff; }
.showroom-hero__logo{ width:88px; height:88px; border-radius:14px; object-fit:cover; border:3px solid #fff; background:#fff; }
.showroom-hero__inner h1{ font-size:24px; margin-bottom:6px; }

.showroom-page-grid{ display:grid; grid-template-columns:1fr 300px; gap:28px; align-items:start; }

/* ===========================================================
   BLOG / MAGAZINE — PHASE 10
   =========================================================== */
.blog-layout{ display:grid; grid-template-columns:1fr 260px; gap:28px; align-items:start; }
.blog-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.blog-card{
    background:#fff; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-soft);
}
.blog-card__img{ height:150px; background-size:cover; background-position:center; background-color:#eef1f5; }
.blog-card__body{ padding:16px; }
.blog-card__category{
    display:inline-block; font-size:11px; font-weight:700; color: var(--color-secondary);
    background:#FDEEE7; padding:3px 9px; border-radius:6px; margin-bottom:8px;
}
.blog-card__body h3{ font-size:15.5px; color: var(--color-primary); margin-bottom:6px; line-height:1.4; }
.blog-card__body p{ font-size:13px; color: var(--color-muted); margin-bottom:10px; }
.blog-card__meta{ display:flex; justify-content:space-between; font-size:11.5px; color: var(--color-muted); }

.blog-sidebar{ background:#fff; border-radius: var(--radius); box-shadow: var(--shadow-soft); padding:20px; }
.blog-sidebar h3{ font-size:15px; color: var(--color-primary); margin-bottom:12px; }
.blog-categories-list{ list-style:none; }
.blog-categories-list li a{
    display:block; padding:9px 0; font-size:13.5px; color: var(--color-text); border-bottom:1px solid var(--color-border);
}
.blog-categories-list li a.is-active,
.blog-categories-list li a:hover{ color: var(--color-secondary); font-weight:700; }

/* ---- Single article ---- */
.article-title{ font-size:28px; color: var(--color-primary); margin:12px 0 14px; line-height:1.35; }
.article-meta{ display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.article-meta img{ width:38px; height:38px; border-radius:50%; object-fit:cover; background:#eef1f5; }
.article-meta strong{ display:block; font-size:13.5px; color: var(--color-primary); }
.article-meta span{ font-size:12px; color: var(--color-muted); }
.article-cover{
    display:block;
    width:100%;
    height:auto;
    border-radius:var(--radius);
    margin-bottom:24px;
}
.article-content{ font-size:15.5px; line-height:1.95; color: var(--color-text); }
.article-content p{ margin-bottom:16px; }
.article-content h2, .article-content h3{ color: var(--color-primary); margin:24px 0 12px; }
.article-content img{ max-width:100%; border-radius:10px; }

/* ---- Comments ---- */
.comments-section{ margin-top:40px; padding-top:30px; border-top:1px solid var(--color-border); }
.comments-section h2{ font-size:19px; color: var(--color-primary); margin-bottom:18px; }
.comment-form{ display:flex; flex-direction:column; gap:10px; margin-bottom:26px; }
.comment-form textarea{
    border:1px solid var(--color-border); border-radius:8px; padding:12px; font-size:14px; resize:vertical;
}
.comment-form .btn{ width:auto; padding:11px 26px; align-self:flex-end; }
.comment-item{ display:flex; gap:12px; margin-bottom:20px; }
.comment-item img{ width:38px; height:38px; border-radius:50%; object-fit:cover; background:#eef1f5; flex-shrink:0; }
.comment-item strong{ font-size:13.5px; color: var(--color-primary); }
.comment-item__date{ font-size:11.5px; color: var(--color-muted); margin-inline-start:8px; }
.comment-item p{ font-size:14px; margin-top:4px; }

@media (max-width:1024px){
    .showrooms-grid{ grid-template-columns:repeat(2, 1fr); }
    .blog-layout, .showroom-page-grid{ grid-template-columns:1fr; }
    .blog-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:480px){
    .showrooms-grid, .blog-grid{ grid-template-columns:1fr; }
    .showroom-hero__inner{ flex-direction:column; text-align:center; }
    .article-title{ font-size:22px; }
}

/* ===========================================================
   FORUM — PHASE 11
   =========================================================== */
.forum-layout{ display:grid; grid-template-columns:1fr 260px; gap:28px; align-items:start; }
.forum-cat-count{ color: var(--color-muted); font-weight:400; }

.forum-topics-list{ display:flex; flex-direction:column; gap:2px; background:#fff; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-soft); }
.forum-topic-item{
    display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--color-border);
}
.forum-topic-item:last-child{ border-bottom:none; }
.forum-topic-item img{ width:38px; height:38px; border-radius:50%; object-fit:cover; background:#eef1f5; flex-shrink:0; }
.forum-topic-item__body{ flex:1; min-width:0; }
.forum-topic-item__top{ display:flex; align-items:center; gap:6px; }
.forum-topic-item__top strong{ font-size:14.5px; color: var(--color-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.forum-topic-item__meta{ font-size:12px; color: var(--color-muted); }
.forum-topic-item__meta a{ color: var(--color-muted); text-decoration:underline; }
.forum-topic-item__stats{ display:flex; flex-direction:column; gap:2px; text-align:end; font-size:11.5px; color: var(--color-muted); flex-shrink:0; }
.pin-badge, .lock-badge{ font-size:13px; }

.forum-post{ background:#fff; border-radius: var(--radius); box-shadow: var(--shadow-soft); padding:20px; margin-bottom:14px; }
.forum-post__author{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.forum-post__author img{ width:34px; height:34px; border-radius:50%; object-fit:cover; background:#eef1f5; }
.forum-post__author strong{ font-size:13.5px; color: var(--color-primary); }
.forum-post__author span{ font-size:11.5px; color: var(--color-muted); }
.forum-post__body{ font-size:14.5px; line-height:1.8; color: var(--color-text); }

@media (max-width:1024px){
    .forum-layout{ grid-template-columns:1fr; }
}
@media (max-width:480px){
    .forum-topic-item{ flex-wrap:wrap; }
    .forum-topic-item__stats{ flex-direction:row; gap:10px; text-align:start; margin-top:6px; }
}

/* ===========================================================
   ADMIN PANEL — PHASE 12
   =========================================================== */
.admin-tabs{ display:flex; gap:4px; margin-bottom:20px; border-bottom:1px solid var(--color-border); overflow-x:auto; }
.admin-tab{
    padding:10px 16px; font-size:13.5px; font-weight:600; color: var(--color-muted); white-space:nowrap;
    border-bottom:2px solid transparent;
}
.admin-tab.is-active{ color: var(--color-secondary); border-bottom-color: var(--color-secondary); }

.admin-vehicles-list{ display:flex; flex-direction:column; gap:2px; background:#fff; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-soft); }
.admin-vehicle-row{
    display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--color-border); flex-wrap:wrap;
}
.admin-vehicle-row:last-child{ border-bottom:none; }
.admin-vehicle-row img{ width:70px; height:50px; object-fit:cover; border-radius:6px; flex-shrink:0; }
.admin-vehicle-row__info{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:200px; }
.admin-vehicle-row__info a{ font-weight:700; color: var(--color-primary); font-size:14px; }
.admin-vehicle-row__info span{ font-size:12px; color: var(--color-muted); }
.admin-vehicle-row__status{ display:flex; align-items:center; gap:8px; }
.admin-vehicle-row__actions{ display:flex; gap:10px; flex-wrap:wrap; font-size:12.5px; }
.admin-reject-form{ display:flex; gap:8px; width:100%; margin-top:10px; }
.admin-reject-form input{ flex:1; padding:8px 10px; border:1px solid var(--color-border); border-radius:6px; font-size:13px; }

.taxonomy-list{ display:flex; flex-direction:column; gap:4px; max-height:400px; overflow-y:auto; }
.taxonomy-item{
    display:flex; justify-content:space-between; align-items:center; padding:9px 12px;
    border-radius:8px; font-size:13.5px; color: var(--color-text);
}
.taxonomy-item:hover{ background:#F5F7FA; }
.taxonomy-item.is-active{ background:#FDEEE7; color: var(--color-secondary); font-weight:700; }
.taxonomy-item.is-inactive{ opacity:.5; }
.taxonomy-item small{ color: var(--color-muted); }
.taxonomy-item__actions{ display:flex; gap:8px; }

.banners-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.banner-item{ background:#fff; border-radius:10px; overflow:hidden; box-shadow: var(--shadow-soft); }
.banner-item img{ width:100%; height:110px; object-fit:cover; }
.banner-item__info{ padding:12px; display:flex; justify-content:space-between; align-items:center; font-size:12.5px; }

@media (max-width:768px){
    .banners-grid{ grid-template-columns:1fr 1fr; }
    .admin-vehicle-row{ flex-direction:column; align-items:flex-start; }
}

/* ===========================================================
   RESPONSIVE — Mobile First (القسم 33)
   Breakpoints: 320 / 375 / 390 / 414 / 768 / 1024 / 1280 / 1440 / 1920
   =========================================================== */
@media (max-width:1024px){
    .vehicle-grid{ grid-template-columns:repeat(3, 1fr); }
    .footer-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width:768px){
    .vehicle-grid{ grid-template-columns:repeat(2, 1fr); }
    .hamburger-btn{ display:flex; }

    .main-nav{
        position:fixed;
        inset-inline-end:0;
        top:68px;
        height:calc(100vh - 68px);
        width:78%;
        max-width:320px;
        background:#fff;
        flex-direction:column;
        align-items:stretch;
        padding:24px 20px;
        transform: translateX(100%);
        transition: transform .3s ease;
        box-shadow: -8px 0 24px rgba(0,0,0,.08);
        overflow-y:auto;
        margin-inline-start:0;
    }
    html[dir="rtl"] .main-nav{ transform: translateX(-100%); }
    .main-nav.is-open{ transform: translateX(0); }

    .main-nav__list{ flex-direction:column; gap:4px; margin-bottom:20px; }
    .main-nav__list a{ display:block; padding:12px 4px; border-bottom:1px solid var(--color-border); }
    .main-nav__auth{ flex-direction:column; align-items:stretch; gap:10px; }
    .main-nav__auth .btn-outline-sm,
    .main-nav__auth .btn-link{ text-align:center; padding:12px; border:1px solid var(--color-border); border-radius:8px; }

    body.nav-open{ overflow:hidden; }

    .search-box__row{ flex-direction:column; }
    .hero__title{ font-size:26px; }
    .hero{ padding:40px 0 32px; }
}

@media (max-width:480px){
    .auth-card{ padding:28px 20px; }
    .form-row{ flex-direction:column; gap:0; }
    .vehicle-grid{ grid-template-columns:1fr 1fr; gap:12px; }
    .cta-sell__inner{ flex-direction:column; text-align:center; }
    .footer-grid{ grid-template-columns:1fr; }
}

@media (max-width:375px){
    .vehicle-grid{ grid-template-columns:1fr; }
    .hero__title{ font-size:22px; }
}
.wizard-search-input {
    display: block !important;
    width: 100% !important;
    min-height: 44px !important;
    margin-bottom: 10px !important;
    padding: 10px 12px !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #222 !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
}

.wizard-search-input:focus {
    outline: none !important;
    border-color: #999 !important;
}

#wizardBrand,
#wizardModel {
    width: 100%;
}
.wizard-search-input {
    display: block !important;
    width: 100% !important;
    min-height: 44px !important;
    margin-bottom: 8px !important;
    padding: 10px 12px !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #222 !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
}

.wizard-search-input:focus {
    outline: none !important;
    border-color: #e85b2a !important;
}

.add-brand-request-btn,
.add-model-request-btn {
    display: block !important;
    margin: 0 0 10px 0 !important;
    padding: 7px 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #e85b2a !important;
    font-size: 13px !important;
    cursor: pointer !important;
    text-align: right !important;
}

.add-brand-request-btn:hover,
.add-model-request-btn:hover {
    text-decoration: underline !important;
}

.add-brand-request-btn:disabled,
.add-model-request-btn:disabled {
    opacity: .5 !important;
    cursor: not-allowed !important;
}
.article-content .article-inline-image {
    display: block !important;
    float: none !important;

    width: 75% !important;
    max-width: 700px !important;
    height: auto !important;

    margin-top: 30px !important;
    margin-bottom: 30px !important;
    margin-left: auto !important;
    margin-right: auto !important;

    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

    border-radius: 12px;
}

@media (max-width: 768px) {
    .article-content .article-inline-image {
        width: 100% !important;
    }
}
.homepage-banners--top {
    padding: 20px 0;
}

.homepage-banner {
    display: block;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 20px;
}

.homepage-banner img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

@media (max-width: 768px) {
    .homepage-banners--top {
        padding: 12px 0;
    }

    .homepage-banner {
        margin-bottom: 12px;
    }

    .homepage-banner img {
        border-radius: 8px;
    }
}
/* =========================
   HEADER LOGO
   ========================= */

.site-logo {
    display: flex !important;
    align-items: center !important;
    width: 170px !important;
    max-width: 170px !important;
    height: 60px !important;
    overflow: hidden !important;
}

.site-logo__image {
    display: block !important;
    width: 170px !important;
    height: 60px !important;
    max-width: 170px !important;
    max-height: 60px !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
}


/* =========================
   HOMEPAGE BANNERS
   ========================= */

.homepage-banners--top {
    padding: 18px 0;
}

.homepage-banner {
    display: block;
    width: 90%;
    max-width: 900px;
    margin: 0 auto 18px;
}

.homepage-banner img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    border-radius: 12px;
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 768px) {

    .site-logo {
        width: 125px !important;
        max-width: 125px !important;
        height: 48px !important;
    }

    .site-logo__image {
        width: 125px !important;
        max-width: 125px !important;
        height: 48px !important;
        max-height: 48px !important;
    }

    .homepage-banner {
        width: 100%;
        margin-bottom: 12px;
    }

    .homepage-banners--top {
        padding: 10px 0;
    }
}
@media (max-width: 768px) {
    .hero > .container > p {
        margin-bottom: 18px;
    }

    .hero .search-box {
        margin-top: 8px;
    }
}
@media (max-width: 768px) {

    .site-header {
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .site-header__inner {
        position: relative;
    }

    .main-nav {
        position: fixed !important;
        top: 68px !important;
        right: 0 !important;
        left: auto !important;

        width: 80% !important;
        max-width: 320px !important;
        height: calc(100vh - 68px) !important;

        background: #fff !important;
        padding: 24px 20px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        overflow-y: auto !important;

        box-shadow: -8px 0 24px rgba(0,0,0,.12) !important;

        transform: translateX(110%) !important;
        transition: transform .3s ease !important;

        z-index: 999 !important;
    }

    html[dir="rtl"] .main-nav {
        right: 0 !important;
        left: auto !important;
        transform: translateX(110%) !important;
    }

    html[dir="ltr"] .main-nav {
        left: 0 !important;
        right: auto !important;
        transform: translateX(-110%) !important;
    }

    .main-nav.is-open {
        transform: translateX(0) !important;
    }

    .main-nav__list {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        margin: 0 0 20px !important;
    }

    .main-nav__list li {
        width: 100%;
    }

    .main-nav__list a {
        display: block !important;
        width: 100% !important;
        padding: 14px 4px !important;
        border-bottom: 1px solid var(--color-border) !important;
    }

    .main-nav__auth {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .main-nav__auth a {
        text-align: center;
    }

    .hamburger-btn {
        display: flex !important;
        position: relative;
        z-index: 1001;
    }

    body.nav-open {
        overflow: hidden;
    }
}
@media (max-width: 768px) {

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

    .container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .site-header__inner {
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero,
    .section,
    .homepage-banners {
        width: 100% !important;
        max-width: 100% !important;
    }

    .homepage-banner {
        width: 100% !important;
        max-width: 100% !important;
    }

    .homepage-banner img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .search-box {
        width: 100% !important;
        max-width: 100% !important;
    }

    .search-box__row {
        width: 100% !important;
    }

    .search-box__field {
        width: 100% !important;
        min-width: 0 !important;
    }

    .brands-strip__list {
        width: 100% !important;
    }
}
/* =========================================================
   MOBILE - FIX HORIZONTAL OVERFLOW / RTL MENU
   ========================================================= */

@media (max-width: 768px) {

    html,
    body {
        max-width: 100%;
        overflow-x: clip !important;
    }

    .site-header,
    .site-header__inner {
        max-width: 100%;
    }

    /*
     * RTL menu
     * Hidden خارج الشاشة من جهة اليمين
     */
    html[dir="rtl"] .main-nav {
        position: fixed !important;
        top: 68px !important;
        right: 0 !important;
        left: auto !important;

        width: min(320px, 82vw) !important;
        max-width: 320px !important;
        height: calc(100vh - 68px) !important;

        transform: translateX(110%) !important;
        transition: transform .25s ease !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        z-index: 9999 !important;
    }

    html[dir="rtl"] .main-nav.is-open {
        transform: translateX(0) !important;
    }

    /*
     * LTR menu
     */
    html[dir="ltr"] .main-nav {
        position: fixed !important;
        top: 68px !important;
        left: 0 !important;
        right: auto !important;

        width: min(320px, 82vw) !important;
        max-width: 320px !important;
        height: calc(100vh - 68px) !important;

        transform: translateX(-110%) !important;
        transition: transform .25s ease !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        z-index: 9999 !important;
    }

    html[dir="ltr"] .main-nav.is-open {
        transform: translateX(0) !important;
    }
}
/* =========================================================
   FOOTER - MOBILE CLEANUP
   ========================================================= */

.footer-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.footer-logo img {
    display: block;
    width: 150px;
    height: 55px;
    max-width: 100%;
    object-fit: contain;
}

.footer-col {
    min-width: 0;
}

.footer-desc {
    margin: 0 auto;
}

.footer-col ul {
    align-items: center;
}

.footer-contact li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

@media (max-width: 768px) {

    .site-footer {
        margin-top: 35px;
        padding: 20px 0 0;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding: 30px 0 20px !important;
        text-align: center;
    }

    .footer-col {
        width: 100%;
        text-align: center;
    }

    .footer-col h4 {
        margin-bottom: 8px;
    }

    .footer-col h5 {
        margin-bottom: 10px;
    }

    .footer-logo img {
        width: 125px;
        height: 46px;
    }

    .footer-desc {
        max-width: 280px;
        font-size: 12.5px;
        line-height: 1.7;
    }

    .footer-col ul {
        gap: 7px;
    }

    .footer-col ul a {
        font-size: 13px;
    }

    .footer-contact li {
        font-size: 13px;
    }

    .footer-bottom {
        padding: 14px 0;
        font-size: 11.5px;
    }
}

@media (max-width: 375px) {

    .footer-grid {
        gap: 20px !important;
    }

    .footer-logo img {
        width: 110px;
        height: 42px;
    }

    .footer-desc {
        font-size: 12px;
    }

    .footer-col ul a {
        font-size: 12.5px;
    }
}
/* =========================================================
   FOOTER - MOBILE FINAL FIX
   ========================================================= */

.site-footer .footer-grid {
    align-items: start;
}

.site-footer .footer-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 125px !important;
    max-width: 125px !important;

    height: 50px !important;
    max-height: 50px !important;

    margin: 0 auto 10px !important;
    padding: 0 !important;

    overflow: hidden !important;
    line-height: 0 !important;
}

.site-footer .footer-logo img {
    display: block !important;

    width: 125px !important;
    max-width: 125px !important;

    height: 50px !important;
    max-height: 50px !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;
    object-position: center !important;
}

.site-footer .footer-desc {
    margin: 0 auto !important;
    max-width: 260px !important;
}

@media (max-width: 768px) {

    .site-footer {
        margin-top: 30px !important;
        padding-top: 10px !important;
    }

    .site-footer .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        padding: 20px 0 16px !important;
    }

    .site-footer .footer-logo {
        width: 115px !important;
        max-width: 115px !important;
        height: 46px !important;
        max-height: 46px !important;
    }

    .site-footer .footer-logo img {
        width: 115px !important;
        max-width: 115px !important;
        height: 46px !important;
        max-height: 46px !important;
    }

    .site-footer .footer-desc {
        font-size: 12px !important;
        line-height: 1.6 !important;
    }

    .site-footer .footer-col h5 {
        margin-bottom: 8px !important;
    }

    .site-footer .footer-col ul {
        gap: 5px !important;
    }

    .site-footer .footer-col ul a {
        font-size: 12.5px !important;
    }

    .site-footer .footer-contact li {
        font-size: 12.5px !important;
    }

    .site-footer .footer-bottom {
        padding: 12px 0 !important;
        font-size: 10.5px !important;
    }
}

@media (max-width: 375px) {

    .site-footer .footer-logo {
        width: 105px !important;
        max-width: 105px !important;
        height: 42px !important;
        max-height: 42px !important;
    }

    .site-footer .footer-logo img {
        width: 105px !important;
        max-width: 105px !important;
        height: 42px !important;
        max-height: 42px !important;
    }
}
/* =========================================================
   FOOTER - MOBILE WIDTH FIX
   ========================================================= */

@media (max-width: 768px) {

    .site-footer {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 10px 14px 0 !important;
    }

    .site-footer > .container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .site-footer .footer-grid {
        width: 100% !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        padding: 20px 0 !important;
    }

    .site-footer .footer-col {
        width: 100% !important;
        text-align: center !important;
    }

    .site-footer .footer-logo,
    .site-footer .footer-logo img {
        width: 110px !important;
        max-width: 110px !important;
        height: 44px !important;
        max-height: 44px !important;
    }

    .site-footer .footer-logo {
        margin: 0 auto 8px !important;
    }

    .site-footer .footer-desc {
        margin: 0 auto !important;
        max-width: 260px !important;
        font-size: 12px !important;
    }

    .site-footer .footer-bottom {
        width: 100% !important;
        padding: 12px 0 !important;
        font-size: 10.5px !important;
    }
}
/* =========================================================
   FOOTER LOGO - SIZE
   ========================================================= */

.site-footer .footer-col:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

.site-footer .footer-logo {
    display: block !important;
    width: 180px !important;
    height: 72px !important;
    margin: 0 auto 10px !important;
    overflow: hidden !important;
}

.site-footer .footer-logo img {
    display: block !important;
    width: 180px !important;
    height: 72px !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
}

@media (max-width: 768px) {
    .site-footer .footer-logo {
        width: 160px !important;
        height: 64px !important;
    }

    .site-footer .footer-logo img {
        width: 160px !important;
        height: 64px !important;
    }
}

@media (max-width: 375px) {
    .site-footer .footer-logo {
        width: 145px !important;
        height: 58px !important;
    }

    .site-footer .footer-logo img {
        width: 145px !important;
        height: 58px !important;
    }
}
/* =========================================================
   MOBILE MENU - WIDTH / POSITION FIX
   ========================================================= */

@media (max-width: 768px) {

    .main-nav {
        position: fixed !important;

        top: 68px !important;
        bottom: 0 !important;

        width: 82vw !important;
        max-width: 320px !important;

        height: auto !important;

        background: #fff !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        z-index: 9999 !important;
    }

    html[dir="rtl"] .main-nav {
        right: 0 !important;
        left: auto !important;
        transform: translateX(105%) !important;
    }

    html[dir="ltr"] .main-nav {
        left: 0 !important;
        right: auto !important;
        transform: translateX(-105%) !important;
    }

    html[dir="rtl"] .main-nav.is-open {
        transform: translateX(0) !important;
    }

    html[dir="ltr"] .main-nav.is-open {
        transform: translateX(0) !important;
    }

    body.nav-open {
        overflow-x: hidden !important;
    }
}
/* =========================================================
   MOBILE MENU ORDER
   ========================================================= */

@media (max-width: 768px) {

    .main-nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .main-nav__auth {
        order: 1 !important;
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        gap: 10px !important;

        padding-bottom: 18px !important;
        margin-bottom: 18px !important;

        border-bottom: 1px solid var(--color-border) !important;
    }

    .main-nav__auth .lang-switch {
        order: -1 !important;

        display: flex !important;
        justify-content: center !important;
        align-items: center !important;

        gap: 16px !important;

        margin: 0 0 8px !important;
    }

    .main-nav__auth .lang-switch a {
        display: inline-block !important;
        width: auto !important;
        padding: 4px 7px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
    }

    .main-nav__auth > .btn-link,
    .main-nav__auth > .btn-outline-sm {
        width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .main-nav__list {
        order: 2 !important;
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 0 !important;
    }

    .main-nav__list li {
        width: 100% !important;
    }

    .main-nav__list li a {
        display: block !important;
        width: 100% !important;

        padding: 12px 4px !important;

        text-align: start !important;
        box-sizing: border-box !important;
    }
}
/* =========================================================
   ADMIN COLOR CONTROLS
   ========================================================= */

.color-control {
    display: flex;
    align-items: center;
    gap: 10px;
}

.color-picker {
    flex: 0 0 54px;
    width: 54px !important;
    height: 46px !important;
    padding: 3px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 8px !important;
    background: #fff !important;
    cursor: pointer;
}

.color-code {
    flex: 1;
    font-family: Consolas, Monaco, monospace;
    letter-spacing: .5px;
}
/* =========================================================
   ADMIN COLOR PICKER + HEX INPUT
   ========================================================= */

.color-control {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.color-picker {
    flex: 0 0 58px !important;
    width: 58px !important;
    height: 44px !important;
    padding: 3px !important;

    border: 1px solid var(--color-border) !important;
    border-radius: 8px !important;

    background: #fff !important;
    cursor: pointer !important;
}

.color-code {
    flex: 1 1 auto !important;
    min-width: 0 !important;

    height: 44px !important;
    padding: 10px 12px !important;

    font-family: Consolas, Monaco, monospace !important;
    font-size: 14px !important;
    letter-spacing: .4px !important;

    direction: ltr !important;
    text-align: left !important;
}
.brand-pill--extra{
    display:none;
}