/* ============================================================
   SaharParts — Header (Automotive Marketplace, light theme)
   ============================================================ */

.sp-header {
    background: var(--sp-header-bg, var(--brand-card, #FFFFFF));
    border-bottom: 1px solid var(--sp-header-border, var(--brand-border, #E2E8F0));
    position: var(--sp-header-sticky, sticky);
    top: 0;
    z-index: 1000;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    direction: rtl;
    font-family: var(--header-font-family, var(--brand-font, 'Vazirmatn', sans-serif));
}

/* ── Top bar ─────────────────────────────────────────────── */
.sp-top-bar {
    background: var(--brand-primary-dark, #0A3558);
}
.sp-top-bar__inner {
    max-width: var(--header-nav-max-width, 1400px);
    margin: 0 auto;
    padding: 7px var(--header-nav-padding-x, 20px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
}
.sp-top-bar__item {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color .2s ease;
}
.sp-top-bar__item:hover {
    color: #FFFFFF;
}

/* ── Header main row ─────────────────────────────────────── */
.sp-header-inner {
    display: flex;
    flex-direction: column;
    padding: 0 var(--header-nav-padding-x, 20px);
    max-width: var(--header-nav-max-width, 1400px);
    margin: 0 auto;
}
.sp-header-main {
    display: flex;
    align-items: center;
    gap: var(--header-gap, 16px);
    justify-content: space-between;
    min-height: var(--header-height, 72px);
}

/* ── Logo ────────────────────────────────────────────────── */
.sp-logo-area {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}
.sp-logo-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.sp-logo-img {
    width: var(--header-logo-img-size, 44px);
    height: var(--header-logo-img-size, 44px);
    object-fit: contain;
    border-radius: var(--header-logo-img-radius, 10px);
}
.sp-logo-fallback {
    font-size: 26px;
    color: var(--brand-primary, #0F4C81);
}
.sp-logo-text {
    font-size: var(--header-logo-size, 24px);
    font-weight: 800;
    color: var(--sp-header-logo-text, var(--brand-primary, #0F4C81));
    letter-spacing: .2px;
}
.sp-location {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-inline-start: 14px;
    border-inline-start: 1px solid var(--brand-border, #E2E8F0);
    color: var(--sp-header-text-muted, var(--brand-text-muted, #64748B));
    font-size: var(--header-text-size, 13px);
}
.sp-location i {
    color: var(--sp-header-primary, var(--brand-primary, #0F4C81));
}

/* ── Main navigation ─────────────────────────────────────── */
.sp-main-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.sp-main-nav a,
.sp-mega-trigger {
    color: var(--sp-header-text-muted, var(--brand-text-muted, #64748B));
    text-decoration: none;
    font-size: var(--header-text-size, 14px);
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 8px;
    white-space: nowrap;
    transition: color .2s ease, background .2s ease;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sp-main-nav a:hover,
.sp-main-nav a.active,
.sp-mega-trigger:hover,
.sp-mega-wrap.is-open .sp-mega-trigger {
    color: var(--brand-primary, #0F4C81);
    background: var(--brand-primary-light, #EAF4FB);
}
.sp-mega-trigger i {
    font-size: 10px;
    transition: transform .2s ease;
}
.sp-mega-wrap.is-open .sp-mega-trigger i { transform: rotate(180deg); }

/* Mega menu */
.sp-mega-wrap { position: relative; }
.sp-mega {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(880px, 92vw);
    background: #fff;
    border: 1px solid var(--brand-border, #E2E8F0);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
    padding: 18px;
    z-index: 1200;
    display: none;
}
.sp-mega-wrap:hover .sp-mega,
.sp-mega-wrap.is-open .sp-mega { display: block; }
.sp-mega__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 20px;
}
.sp-mega__cat {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--brand-primary, #0F4C81);
    text-decoration: none;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--brand-border, #E2E8F0);
}
.sp-mega__cat:hover { color: var(--brand-primary-dark, #0A3558); }
.sp-mega__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sp-mega__list a {
    display: block;
    padding: 3px 0;
    font-size: 0.8rem;
    color: var(--brand-text-muted, #64748B);
    text-decoration: none;
    transition: color .15s ease;
}
.sp-mega__list a:hover { color: var(--brand-primary, #0F4C81); }

/* ── Search ──────────────────────────────────────────────── */
.sp-search-area {
    flex: 1;
    max-width: var(--header-search-max-width, 620px);
    margin: 0 12px;
    position: relative;
    min-width: 0;
}
.sp-search-box {
    display: flex;
    height: var(--header-element-height, 48px);
    border-radius: var(--sp-header-radius-sm, 10px);
    overflow: hidden;
    background: var(--sp-header-search-bg, #F1F5F9);
    border: 1px solid var(--sp-header-search-border, var(--brand-border, #E2E8F0));
    transition: border-color .2s ease, box-shadow .2s ease;
}
.sp-search-box:focus-within {
    border-color: var(--brand-primary, #0F4C81);
    box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.12);
    background: #FFFFFF;
}
.sp-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 0 16px;
    color: var(--sp-header-search-text, var(--brand-text, #172033));
    font-size: var(--header-search-size, 15px);
    font-family: inherit;
}
.sp-search-input::placeholder {
    color: var(--sp-header-search-placeholder, #94A3B8);
}
.sp-search-btn {
    border: none;
    cursor: pointer;
    min-width: var(--header-search-btn-width, 52px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-primary, #0F4C81);
    color: #FFFFFF;
    transition: background .2s ease;
}
.sp-search-btn:hover {
    background: var(--brand-primary-dark, #0A3558);
}
.sp-search-btn i {
    font-size: 16px;
}

/* Search suggestions */
.sp-search-suggestions {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #FFFFFF;
    border: 1px solid var(--brand-border, #E2E8F0);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.10);
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
    padding: 8px;
}
.sp-suggestion-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sp-suggestion-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    color: var(--brand-text, #172033);
    font-size: 14px;
    transition: background .15s ease;
}
.sp-suggestion-item:hover {
    background: var(--brand-primary-light, #EAF4FB);
}
.sp-suggestion-img img {
    width: var(--suggestion-img-size, 48px);
    height: var(--suggestion-img-size, 48px);
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--brand-border, #E2E8F0);
}
.sp-suggestion-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.sp-suggestion-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sp-suggestion-price {
    color: var(--brand-primary, #0F4C81);
    font-size: 12px;
    font-weight: 700;
}

/* ── Actions (account / compare / favorites / cart) ──────── */
.sp-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.sp-user-menu {
    position: relative;
}
.sp-dropdown {
    position: relative;
}
.sp-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid var(--brand-border, #E2E8F0);
    background: #FFFFFF;
    color: var(--sp-header-text, var(--brand-text, #172033));
    cursor: pointer;
    font-family: inherit;
    font-size: var(--header-text-size, 14px);
    transition: border-color .2s ease, background .2s ease;
}
.sp-dropdown-trigger:hover {
    border-color: var(--brand-primary, #0F4C81);
    background: var(--brand-primary-light, #EAF4FB);
}
.sp-user-name {
    color: var(--sp-header-text, var(--brand-text, #172033));
    font-weight: 600;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sp-arrow {
    font-size: 11px;
    color: var(--brand-text-muted, #64748B);
}
.sp-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 250px;
    background: #FFFFFF;
    border: 1px solid var(--brand-border, #E2E8F0);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.10);
    padding: 8px;
    z-index: 1001;
    display: none;
}
.sp-dropdown:hover .sp-dropdown-menu {
    display: block;
}
.sp-dropdown-user {
    padding: 12px;
    border-bottom: 1px solid var(--brand-border, #E2E8F0);
}
.sp-dropdown-user-name {
    font-weight: 700;
    color: var(--brand-text, #172033);
    display: flex;
    align-items: center;
    gap: 6px;
}
.sp-dropdown-user-mobile {
    font-size: 12px;
    color: var(--brand-text-muted, #64748B);
    direction: ltr;
    text-align: right;
    margin-top: 4px;
}
.sp-badge-sm {
    font-size: 10px;
    font-weight: 700;
    color: var(--brand-success, #16A34A);
    background: rgba(22, 163, 74, 0.10);
    border-radius: 999px;
    padding: 2px 8px;
}
.sp-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--brand-text, #172033);
    text-decoration: none;
    font-size: 13.5px;
    transition: background .15s ease, color .15s ease;
}
.sp-dropdown-item i {
    width: 18px;
    text-align: center;
    color: var(--brand-text-muted, #64748B);
}
.sp-dropdown-item:hover {
    background: var(--brand-primary-light, #EAF4FB);
    color: var(--brand-primary, #0F4C81);
}
.sp-dropdown-item:hover i {
    color: var(--brand-primary, #0F4C81);
}
.sp-divider {
    height: 1px;
    background: var(--brand-border, #E2E8F0);
    margin: 6px 8px;
}

.sp-login-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--brand-border, #E2E8F0);
    color: var(--brand-primary, #0F4C81);
    background: #FFFFFF;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
}
.sp-login-link:hover {
    background: var(--brand-primary-light, #EAF4FB);
    border-color: var(--brand-primary, #0F4C81);
}
.sp-login-text {
    display: none;
}
.sp-cart {
    display: flex;
    align-items: center;
}
.sp-cart-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--brand-border, #E2E8F0);
    background: #FFFFFF;
    color: var(--brand-primary, #0F4C81);
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
}
.sp-cart-link:hover {
    background: var(--brand-primary-light, #EAF4FB);
    border-color: var(--brand-primary, #0F4C81);
}
.sp-cart-icon {
    font-size: var(--header-icon-size, 18px);
}
.sp-cart-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: var(--header-badge-size, 20px);
    height: var(--header-badge-size, 20px);
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--brand-accent, #F59E0B);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 800;
    border: 2px solid #FFFFFF;
}
.sp-cart-animate {
    animation: cartBounce 0.6s ease;
}
@keyframes cartBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* ── Desktop layout ──────────────────────────────────────── */
@media (min-width: 769px) {
    .sp-logo-area { margin-inline-end: 8px; }
    .sp-actions { margin-inline-start: 8px; }
}

/* ── Tablet ──────────────────────────────────────────────── */
@media (max-width: 1320px) {
    .sp-header-main {
        flex-wrap: wrap;
        padding: 10px 0;
        gap: 10px;
    }
    .sp-search-area {
        order: 3;
        flex: 1 1 100%;
        max-width: 100%;
        margin: 0;
    }
    .sp-main-nav {
        order: 2;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .sp-main-nav::-webkit-scrollbar { display: none; }
    .sp-main-nav a { padding: 8px 10px; font-size: 13px; }
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .sp-top-bar__inner {
        justify-content: center;
        gap: 12px;
        padding: 6px 12px;
    }
    .sp-top-bar__item { font-size: 11px; }
    .sp-top-bar__item:nth-child(2),
    .sp-top-bar__item:nth-child(3) { display: none; }

    .sp-header-inner {
        padding: 0 14px;
    }
    .sp-header-main {
        min-height: var(--sp-header-height-mobile, 60px);
        flex-wrap: nowrap;
    }
    .sp-main-nav { display: none !important; }
    .sp-search-area { display: none; }
    .sp-location { display: none !important; }
    .sp-actions { display: none; }

    .sp-logo-area {
        flex: 1;
        justify-content: center;
    }
    .sp-logo-img {
        width: auto;
        max-width: 150px;
        height: 48px;
    }
    .sp-logo-text {
        font-size: calc(var(--header-logo-size, 24px) + 0px);
    }
}

@media (max-width: 480px) {
    .sp-header-inner { padding: 0 12px; }
    .sp-logo-img {
        max-width: 130px;
        height: 44px;
    }
    .sp-logo-text { font-size: 20px; }
}

/* ── Accessibility ───────────────────────────────────────── */
.sp-header,
.sp-header * {
    -webkit-tap-highlight-color: transparent;
}
.sp-header a:focus-visible,
.sp-header button:focus-visible {
    outline: 2px solid var(--brand-primary, #0F4C81);
    outline-offset: 2px;
    border-radius: 8px;
}