/* ============================================================
   SaharPart — Global Neomorphism skin (all pages)
   Loaded only on the home page (body).
   Soft-UI: monochrome surface + dual shadows, no hard borders.
   ============================================================ */

body {
    --neu-bg: #e8edf4;
    --neu-bg-2: #eef2f8;
    --neu-dark: #c4cdda;
    --neu-light: #ffffff;
    --neu-text: #26314a;
    --neu-muted: #6b7689;
    --neu-primary: #0f4c81;
    --neu-primary-2: #16497d;
    --neu-accent: #f59e0b;
    --neu-accent-2: #d97706;
    --neu-radius: 20px;
    --neu-radius-sm: 14px;
    --neu-radius-lg: 26px;
    --neu-out: 8px 8px 16px var(--neu-dark), -8px -8px 16px var(--neu-light);
    --neu-out-sm: 5px 5px 10px var(--neu-dark), -5px -5px 10px var(--neu-light);
    --neu-out-lg: 12px 12px 24px var(--neu-dark), -12px -12px 24px var(--neu-light);
    --neu-in: inset 5px 5px 10px var(--neu-dark), inset -5px -5px 10px var(--neu-light);
    --neu-in-sm: inset 3px 3px 6px var(--neu-dark), inset -3px -3px 6px var(--neu-light);

    background: var(--neu-bg);
    color: var(--neu-text);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

/* keep the page surface consistent behind everything */
body main,
body .sp-section,
body .sp-section--tight {
    background: transparent;
}

body .sp-section--videos {
    background: transparent;
    border-block: none;
}

/* ---------- shared building blocks ---------- */

body .sp-container {
    position: relative;
}

body .sp-section__title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--neu-text);
    font-weight: 800;
    letter-spacing: -0.2px;
}

body .sp-section__title i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--neu-bg);
    color: var(--neu-primary);
    box-shadow: var(--neu-out-sm);
    font-size: 0.95rem;
}

body .sp-section__desc {
    color: var(--neu-muted);
}

body .sp-section__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 14px;
    background: var(--neu-bg);
    color: var(--neu-primary);
    font-weight: 700;
    box-shadow: var(--neu-out-sm);
    transition: box-shadow .2s ease, transform .15s ease, color .2s ease;
}

body .sp-section__more:hover {
    transform: translateY(-1px);
    box-shadow: 6px 6px 14px var(--neu-dark), -6px -6px 14px var(--neu-light);
}

body .sp-section__more:active {
    box-shadow: var(--neu-in-sm);
    transform: translateY(0);
}

/* ---------- buttons ---------- */

body .sp-btn {
    border: none;
    border-radius: 14px;
    background: var(--neu-bg);
    color: var(--neu-text);
    font-weight: 700;
    box-shadow: var(--neu-out-sm);
    transition: box-shadow .2s ease, transform .15s ease, background .2s ease, color .2s ease;
}

body .sp-btn:hover {
    transform: translateY(-1px);
    box-shadow: 6px 6px 14px var(--neu-dark), -6px -6px 14px var(--neu-light);
}

body .sp-btn:active {
    transform: translateY(0);
    box-shadow: var(--neu-in-sm);
}

body .sp-btn--primary {
    background: linear-gradient(135deg, var(--neu-primary), var(--neu-primary-2));
    color: #fff;
    box-shadow: var(--neu-out-sm);
}

body .sp-btn--primary:hover {
    box-shadow: 6px 6px 16px var(--neu-dark), -6px -6px 16px var(--neu-light);
}

body .sp-btn--accent {
    background: linear-gradient(135deg, var(--neu-accent), var(--neu-accent-2));
    color: #fff;
}

body .sp-btn--ghost {
    background: var(--neu-bg);
    color: var(--neu-primary);
    box-shadow: var(--neu-out-sm);
}

/* ---------- hero ---------- */

body .sp-hero {
    padding-top: 22px;
}

body .sp-hero__slider {
    border-radius: var(--neu-radius-lg);
    background: var(--neu-bg);
    box-shadow: var(--neu-out-lg);
    padding: 12px;
}

body .sp-hero__slide,
body .sp-hero__fallback {
    border-radius: var(--neu-radius);
    overflow: hidden;
}

body .sp-hero__fallback {
    background: linear-gradient(135deg, var(--neu-primary), var(--neu-primary-2));
    box-shadow: var(--neu-in-sm);
}

body .sp-hero__dots button {
    background: var(--neu-bg);
    box-shadow: var(--neu-out-sm);
    border: none;
    transition: box-shadow .2s ease, background .2s ease, transform .2s ease;
}

body .sp-hero__dots button.is-active {
    background: var(--neu-primary);
    box-shadow: var(--neu-in-sm);
    transform: scale(1.05);
}

body .sp-hero__banner {
    border-radius: var(--neu-radius);
    box-shadow: var(--neu-out);
    border: none;
    transition: box-shadow .2s ease, transform .2s ease;
}

body .sp-hero__banner:hover {
    transform: translateY(-2px);
    box-shadow: var(--neu-out-lg);
}

/* ---------- vehicle finder (hero side) ---------- */

body .sp-vehicle-finder {
    background: var(--neu-bg);
    border: none;
    border-radius: var(--neu-radius-lg);
    box-shadow: var(--neu-out-lg);
    padding: 20px;
}

body .sp-vehicle-finder__head {
    color: var(--neu-primary);
    font-weight: 800;
}

body .sp-vehicle-finder select {
    background: var(--neu-bg);
    border: none;
    border-radius: 14px;
    box-shadow: var(--neu-in-sm);
    color: var(--neu-text);
    padding: 11px 14px;
}

body .sp-vehicle-finder select:focus {
    outline: none;
    box-shadow: var(--neu-in);
}

/* ---------- trust strip ---------- */

body .sp-trust {
    background: var(--neu-bg);
    border: none;
    border-radius: var(--neu-radius-lg);
    box-shadow: var(--neu-out-lg);
    padding: 18px;
    gap: 14px;
}

body .sp-trust__item {
    border: none;
    background: transparent;
    border-radius: var(--neu-radius);
    padding: 14px;
}

body .sp-trust__item i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--neu-bg);
    color: var(--neu-primary);
    box-shadow: var(--neu-out-sm);
    font-size: 1.15rem;
}

body .sp-trust__item h3 {
    color: var(--neu-text);
}

body .sp-trust__item p {
    color: var(--neu-muted);
}

/* ---------- categories ---------- */

body .sp-cat {
    background: var(--neu-bg);
    border: none;
    border-radius: var(--neu-radius);
    box-shadow: var(--neu-out);
    transition: box-shadow .2s ease, transform .2s ease;
}

body .sp-cat:hover {
    transform: translateY(-3px);
    box-shadow: var(--neu-out-lg);
}

body .sp-cat__media {
    background: var(--neu-bg);
    border-radius: 16px;
    box-shadow: var(--neu-in-sm);
    padding: 6px;
}

body .sp-cat__media img {
    border-radius: 12px;
}

body .sp-cat__media i {
    color: var(--neu-primary);
}

body .sp-cat__name {
    color: var(--neu-text);
    font-weight: 700;
}

/* ---------- amazing offers ---------- */

body .sp-offers {
    background: var(--neu-bg);
    border: none;
    border-radius: var(--neu-radius-lg);
    box-shadow: var(--neu-out-lg);
    padding: 22px;
}

body .sp-offers__title {
    color: var(--neu-accent-2);
    font-weight: 800;
}

body .sp-countdown__label {
    color: var(--neu-muted);
}

body .sp-countdown__box {
    background: var(--neu-bg);
    color: var(--neu-primary);
    border: none;
    border-radius: 12px;
    box-shadow: var(--neu-in-sm);
    font-weight: 800;
}

/* ---------- product cards ---------- */

body .sp-product-card {
    background: var(--neu-bg);
    border: none;
    border-radius: var(--neu-radius);
    box-shadow: var(--neu-out);
    transition: box-shadow .2s ease, transform .2s ease;
}

body .sp-product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--neu-out-lg);
}

body .sp-product-card__media {
    background: var(--neu-bg);
    border-radius: 16px;
    box-shadow: var(--neu-in-sm);
    margin: 12px;
    padding: 8px;
}

body .sp-product-card__media img {
    border-radius: 12px;
}

body .sp-product-card__fav {
    background: var(--neu-bg);
    border: none;
    box-shadow: var(--neu-out-sm);
    color: var(--neu-muted);
    border-radius: 50%;
    transition: box-shadow .2s ease, color .2s ease, transform .15s ease;
}

body .sp-product-card__fav:hover {
    color: #e0245e;
    transform: translateY(-1px);
}

body .sp-product-card__fav:active,
body .sp-product-card__fav.is-active {
    box-shadow: var(--neu-in-sm);
}

body .sp-product-card__brand {
    color: var(--neu-muted);
}

body .sp-product-card__title,
body .sp-product-card__title a {
    color: var(--neu-text);
}

body .sp-product-card__code {
    color: var(--neu-muted);
}

body .sp-product-card__price strong {
    color: var(--neu-primary);
}

body .sp-product-card__actions {
    border-top: none;
}

body .sp-badge {
    border-radius: 10px;
    box-shadow: var(--neu-out-sm);
    border: none;
}

body .sp-badge--off {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
}

body .sp-badge--new {
    background: linear-gradient(135deg, var(--neu-primary), var(--neu-primary-2));
    color: #fff;
}

body .sp-badge--hot {
    background: linear-gradient(135deg, var(--neu-accent), var(--neu-accent-2));
    color: #fff;
}

body .sp-product-card__oos,
body .sp-product-card__oos-text {
    color: #b91c1c;
}

/* ---------- vehicles ---------- */

body .sp-chip {
    background: var(--neu-bg);
    border: none;
    border-radius: 14px;
    color: var(--neu-primary);
    box-shadow: var(--neu-out-sm);
    transition: box-shadow .2s ease, transform .15s ease;
}

body .sp-chip:hover {
    transform: translateY(-1px);
    box-shadow: 6px 6px 14px var(--neu-dark), -6px -6px 14px var(--neu-light);
}

body .sp-chip:active {
    box-shadow: var(--neu-in-sm);
}

body .sp-vehicle-card {
    background: var(--neu-bg);
    border: none;
    border-radius: var(--neu-radius);
    box-shadow: var(--neu-out);
    transition: box-shadow .2s ease, transform .2s ease;
}

body .sp-vehicle-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--neu-out-lg);
}

body .sp-vehicle-card__media {
    background: var(--neu-bg);
    border-radius: 16px;
    box-shadow: var(--neu-in-sm);
    padding: 8px;
}

body .sp-vehicle-card__media img {
    border-radius: 12px;
}

body .sp-vehicle-card__media i {
    color: var(--neu-primary);
}

body .sp-vehicle-card__name {
    color: var(--neu-text);
    font-weight: 700;
}

body .sp-vehicle-card__cta {
    color: var(--neu-primary);
}

/* ---------- requests ---------- */

body .sp-requests {
    background: linear-gradient(135deg, var(--neu-primary), var(--neu-primary-2));
    border: none;
    border-radius: var(--neu-radius-lg);
    box-shadow: var(--neu-out-lg);
}

body .sp-requests__step {
    background: rgba(255, 255, 255, .12);
    border: none;
    border-radius: 12px;
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, .25), inset -2px -2px 5px rgba(255, 255, 255, .12);
    color: #fff;
}

body .sp-request-card {
    background: var(--neu-bg);
    border: none;
    border-radius: var(--neu-radius);
    box-shadow: var(--neu-out);
}

body .sp-request-card__ph {
    background: var(--neu-bg);
    border-radius: 12px;
    box-shadow: var(--neu-in-sm);
    color: var(--neu-primary);
}

body .sp-request-card__name {
    color: var(--neu-text);
    font-weight: 700;
}

body .sp-request-card__meta {
    color: var(--neu-muted);
}

body .sp-request-card__tag {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #fff;
    border: none;
    border-radius: 10px;
    box-shadow: var(--neu-out-sm);
}

/* ---------- videos ---------- */

body .sp-video {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transition: transform .2s ease;
}

body .sp-video:hover {
    transform: translateY(-3px);
    box-shadow: none;
}

body .sp-video__media {
    border-radius: 16px;
    box-shadow: none;
    margin: 0;
    overflow: hidden;
}

body .sp-video__play {
    background: var(--neu-bg);
    color: var(--neu-primary);
    box-shadow: var(--neu-out-sm);
    border: none;
}

/* ---------- blog / magazine ---------- */

body .sp-blog__featured,
body .sp-blog__mini {
    background: var(--neu-bg);
    border: none;
    border-radius: var(--neu-radius);
    box-shadow: var(--neu-out);
    transition: box-shadow .2s ease, transform .2s ease;
}

body .sp-blog__featured:hover,
body .sp-blog__mini:hover {
    transform: translateY(-3px);
    box-shadow: var(--neu-out-lg);
}

body .sp-blog__featured-media,
body .sp-blog__mini-media {
    border-radius: 16px;
    box-shadow: var(--neu-in-sm);
    overflow: hidden;
}

body .sp-blog__featured-media {
    margin: 12px;
}

body .sp-blog__featured-body h3,
body .sp-blog__mini-body h3 {
    color: var(--neu-text);
}

body .sp-blog__date {
    color: var(--neu-muted);
}

/* ---------- brands ---------- */

body .sp-brand {
    background: var(--neu-bg);
    border: none;
    border-radius: var(--neu-radius);
    box-shadow: var(--neu-out);
    transition: box-shadow .2s ease, transform .2s ease;
}

body .sp-brand:hover {
    transform: translateY(-3px);
    box-shadow: var(--neu-out-lg);
}

body .sp-brand__logo {
    background: var(--neu-bg);
    border-radius: 16px;
    box-shadow: var(--neu-in-sm);
    color: var(--neu-primary);
}

body .sp-brand__name {
    color: var(--neu-text);
    font-weight: 700;
}

/* ---------- trust badges ---------- */

body .sp-badges a,
body .sp-badges img {
    background: var(--neu-bg);
    border: none;
    border-radius: 18px;
    box-shadow: var(--neu-out);
    padding: 10px;
}

/* ---------- modal (video) ---------- */

body .sp-modal__dialog {
    background: var(--neu-bg);
    border: none;
    border-radius: var(--neu-radius-lg);
    box-shadow: var(--neu-out-lg);
}

body .sp-modal__head {
    border-bottom: none;
    color: var(--neu-text);
}

body .sp-modal__close {
    background: var(--neu-bg);
    border: none;
    border-radius: 12px;
    box-shadow: var(--neu-out-sm);
    color: var(--neu-text);
}

/* ============================================================
   HEADER — colored neomorphism (brand navy surface)
   ============================================================ */

body {
    --neu-head: #0f4c81;
    --neu-head-light: #1d6bb5;
    --neu-head-dark: #082a48;
    --neu-head-out: 6px 6px 12px var(--neu-head-dark), -6px -6px 12px var(--neu-head-light);
    --neu-head-out-sm: 4px 4px 8px var(--neu-head-dark), -4px -4px 8px var(--neu-head-light);
    --neu-head-in: inset 4px 4px 8px var(--neu-head-dark), inset -4px -4px 8px var(--neu-head-light);
    --neu-head-text: #dbe8f6;
    --neu-head-muted: #9db8d6;
}

body .sp-header {
    background: var(--neu-head);
    box-shadow: 0 12px 24px -14px var(--neu-head-dark);
}

body .sp-topbar {
    display: none;
}

body .sp-header-main {
    background: var(--neu-head);
    color: #fff;
}

body .sp-logo,
body .sp-logo__name {
    color: #fff;
}

body .sp-logo:hover,
body .sp-logo:hover .sp-logo__name {
    color: #fff;
}

body .sp-logo__tag {
    color: #f6b23a;
}

body .sp-logo__img {
    background: transparent;
    box-shadow: none;
}

body .sp-burger {
    background: var(--neu-head);
    color: #fff;
    border: none;
    border-radius: 14px;
    box-shadow: var(--neu-head-out-sm);
}

body .sp-burger:active {
    box-shadow: var(--neu-head-in);
}

/* search: inset navy slot + raised amber button */
body .sp-search {
    background: var(--neu-head);
    border-radius: 16px;
    box-shadow: var(--neu-head-in);
}

body .sp-search__input {
    background: transparent;
    color: #fff;
}

body .sp-search__input::placeholder {
    color: var(--neu-head-muted);
}

body .sp-search__btn {
    background: linear-gradient(135deg, #f6b23a, #d97706);
    color: #3a2400;
    border-radius: 12px;
    box-shadow: var(--neu-head-out-sm);
    transition: box-shadow .2s ease, transform .15s ease, filter .2s ease;
}

body .sp-search__btn:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

body .sp-search__btn:active {
    box-shadow: var(--neu-head-in);
    transform: translateY(0);
}

/* header actions: raised navy buttons */
body .sp-action {
    background: var(--neu-head);
    color: var(--neu-head-text);
    border-radius: 14px;
    box-shadow: var(--neu-head-out-sm);
    transition: box-shadow .2s ease, transform .15s ease, color .2s ease;
}

body .sp-action:hover {
    background: var(--neu-head);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--neu-head-out);
}

body .sp-action:active {
    box-shadow: var(--neu-head-in);
    transform: translateY(0);
}

/* dropdowns: navy panels with white text (as before) */
body .sp-suggest,
body .sp-user__menu,
body .sp-mega {
    background: var(--neu-head);
    border: none;
    border-radius: var(--neu-radius);
    box-shadow: var(--neu-head-out);
}

body .sp-user__menu a,
body .sp-user__menu button,
body .sp-mega__list a,
body .sp-mega__col h4,
body .sp-mega__col h4 a,
body .sp-user__head {
    color: #fff !important;
}

body .sp-user__menu a:hover,
body .sp-user__menu button:hover,
body .sp-mega__list a:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .12);
    box-shadow: var(--neu-head-in);
}

/* search suggestions (autocomplete) on navy panel: white text */
body .sp-suggest__name,
body .sp-suggest__price,
body .sp-suggest__head,
body .sp-suggest__empty {
    color: #fff;
}

body .sp-suggest__meta {
    color: rgba(255, 255, 255, .72);
}

body .sp-suggest__item:hover {
    background: rgba(255, 255, 255, .12);
}

body .sp-suggest__item:hover .sp-suggest__name,
body .sp-suggest__item:hover .sp-suggest__price {
    color: #fff;
}

/* nav: same as page background + inset hover */
body .sp-nav {
    background: var(--neu-bg);
    border-bottom: none;
    box-shadow: var(--neu-out-sm);
}

body .sp-nav__all {
    background: var(--neu-head);
    color: #fff;
    border-radius: 12px;
    box-shadow: var(--neu-head-out-sm);
}

body .sp-nav__all:active {
    box-shadow: var(--neu-head-in);
}

body .sp-nav__links > li > a,
body .sp-nav__links > li > button {
    color: var(--neu-text);
    border-radius: 12px;
    transition: box-shadow .2s ease, color .2s ease, background .2s ease;
}

body .sp-nav__links > li > a:hover,
body .sp-nav__links > li > button:hover,
body .sp-nav__links > li:hover > a,
body .sp-nav__links > li:hover > button {
    color: var(--neu-primary);
    background: var(--neu-bg);
    box-shadow: var(--neu-in-sm);
}

body .sp-nav__links a.is-active {
    color: var(--neu-primary);
    box-shadow: var(--neu-in-sm);
}

body .sp-nav__promo {
    color: var(--neu-muted);
}

/* mobile drawer: navy neomorphic */
body .sp-drawer__sheet {
    background: var(--neu-head);
    box-shadow: -10px 0 30px rgba(0, 0, 0, .5);
}

body .sp-drawer__head,
body .sp-drawer__nav a {
    color: #fff;
}

body .sp-drawer__search {
    background: var(--neu-head);
    box-shadow: var(--neu-head-in);
}

body .sp-drawer__search input {
    background: transparent;
    color: #fff;
}

/* header layout: give elements room to breathe */
body .sp-topbar {
    padding-block: 4px;
}

body .sp-topbar__links,
body .sp-topbar__meta {
    gap: 24px;
}

body .sp-header-main {
    padding-block: 18px;
}

body .sp-header-main__inner {
    gap: 30px;
}

body .sp-logo {
    gap: 12px;
}

body .sp-search-block {
    max-width: 760px;
    margin-inline: auto;
}

body .sp-search {
    max-width: none;
    margin: 0;
}

body .sp-actions {
    gap: 12px;
}

body .sp-action {
    padding: 10px 15px;
}

body .sp-nav__inner {
    gap: 10px;
    min-height: 56px;
}

body .sp-nav__all {
    margin-inline-end: 10px;
    padding: 10px 18px;
}

body .sp-nav__links {
    gap: 8px;
}

body .sp-nav__links > li > a,
body .sp-nav__links > li > button {
    padding: 10px 16px;
}

/* ============================================================
   FOOTER - colored neomorphism + embossed (3D) text
   ============================================================ */

body .sp-footer {
    background: var(--neu-head);
    color: var(--neu-head-text);
    border-top: none;
    box-shadow: inset 0 16px 22px -20px var(--neu-head-dark);
}

body .sp-footer__brand-name {
    color: #fff;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .25), 0 -1px 1px rgba(0, 0, 0, .5), 0 2px 4px rgba(0, 0, 0, .55);
}

body .sp-footer__about,
body .sp-footer__contact li,
body .sp-footer__contact a {
    color: var(--neu-head-text);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}

body .sp-footer__contact a:hover {
    color: #fff;
}

body .sp-footer__col h4 {
    color: #fff;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .2), 0 -1px 1px rgba(0, 0, 0, .55), 0 2px 4px rgba(0, 0, 0, .5);
}

body .sp-footer__col h4::after {
    background: linear-gradient(90deg, #f6b23a, transparent);
}

body .sp-footer__list a {
    color: var(--neu-head-text);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .38);
}

body .sp-footer__list a:hover {
    color: #fff;
}

body .sp-socials a {
    background: var(--neu-head);
    color: #dbe8f6;
    border: none;
    border-radius: 12px;
    box-shadow: var(--neu-head-out-sm);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
    transition: box-shadow .2s ease, transform .15s ease, background .2s ease, color .2s ease;
}

body .sp-socials a:hover {
    background: linear-gradient(135deg, #f6b23a, #d97706);
    color: #3a2400;
    transform: translateY(-2px);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
    box-shadow: var(--neu-head-out);
}

body .sp-footer__bottom {
    border-top: none;
    box-shadow: inset 0 12px 16px -14px var(--neu-head-dark);
    color: var(--neu-head-muted);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}

body .sp-footer__bottom a {
    color: var(--neu-head-muted);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}

body .sp-footer__bottom a:hover {
    color: #fff;
}

body .sp-footer__badges img {
    background: var(--neu-head);
    border-radius: 14px;
    box-shadow: var(--neu-head-out-sm);
}

/* ---------- motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
    body .sp-btn,
    body .sp-cat,
    body .sp-product-card,
    body .sp-vehicle-card,
    body .sp-video,
    body .sp-brand,
    body .sp-blog__featured,
    body .sp-blog__mini {
        transition: none;
    }
}