@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/Poppins-400.woff2") format("woff2");
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/Poppins-500.woff2") format("woff2");
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/Poppins-600.woff2") format("woff2");
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/Poppins-700.woff2") format("woff2");
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/Poppins-800.woff2") format("woff2");
}

@font-face {
    font-family: "Noto Sans Arabic";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/NotoSansArabic-Variable.woff2") format("woff2");
}

:root {
    --brand-primary: #0057ff;
    --brand-primary-hover: #0046cc;
    --brand-primary-soft: #e8f0ff;
    --brand-secondary: #f8f7f4;
    --brand-surface: #ffffff;
    --brand-ink: #111827;
    --brand-muted: #667085;
    --brand-border: #dfe3e8;
    --brand-shadow: 0 8px 24px rgba(17, 24, 39, .08);
    --brand-font: "Market Sans", "Poppins", Arial, sans-serif;
    --brand-font-arabic: "Noto Sans Arabic", Arial, sans-serif;

    --navy: var(--brand-primary);
    --navy-soft: var(--brand-primary-hover);
    --gold: var(--brand-primary);
    --grey-50: var(--brand-secondary);
    --grey-200: var(--brand-border);
    --grey-600: var(--brand-muted);

    --admin-navy: var(--brand-primary);
    --admin-navy-deep: var(--brand-primary-hover);
    --admin-gold: var(--brand-primary);
    --admin-bg: var(--brand-secondary);
    --admin-border: var(--brand-border);
    --admin-muted: var(--brand-muted);
    --admin-text: var(--brand-ink);

    --seller-navy: var(--brand-primary);
    --seller-navy-2: var(--brand-primary-hover);
    --seller-gold: var(--brand-primary);
    --seller-bg: var(--brand-secondary);
    --seller-border: var(--brand-border);
    --seller-text: var(--brand-ink);
    --seller-muted: var(--brand-muted);
    --seller-shadow: var(--brand-shadow);

    --mp-navy: var(--brand-primary);
    --mp-navy-2: var(--brand-primary-hover);
    --mp-gold: var(--brand-primary);
    --mp-gold-2: #4c86ff;
    --mp-bg: var(--brand-secondary);
    --mp-ink: var(--brand-ink);
    --mp-muted: var(--brand-muted);
    --mp-line: var(--brand-border);
    --mp-shadow: var(--brand-shadow);

    font-family: var(--brand-font);
}

html,
body,
button,
input,
select,
textarea {
    font-family: var(--brand-font);
    letter-spacing: 0;
}

:lang(ar),
[lang="ar"],
[dir="rtl"],
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea,
input[dir="rtl"],
textarea[dir="rtl"] {
    font-family: var(--brand-font-arabic);
}

body,
body.admin-body,
body.marketplace-body,
body.seller-body {
    background: var(--brand-secondary);
    color: var(--brand-ink);
    font-family: var(--brand-font);
}

a {
    color: var(--brand-primary);
}

:focus-visible {
    outline: 3px solid rgba(0, 87, 255, .28);
    outline-offset: 2px;
}

::selection {
    background: var(--brand-primary);
    color: #fff;
}

.nav-action,
.primary-link,
.primary-button,
.category-add-button,
.category-save-button,
.catalogue-submit-button,
.manufacturer-add-button,
.admin-primary-button {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #fff;
}

.nav-action:hover,
.primary-link:hover,
.primary-button:hover,
.category-add-button:hover,
.category-save-button:hover,
.catalogue-submit-button:hover,
.manufacturer-add-button:hover,
.admin-primary-button:hover {
    border-color: var(--brand-primary-hover);
    background: var(--brand-primary-hover);
    color: #fff;
}

.site-header,
.admin-topbar,
.marketplace-header,
.seller-topbar,
.form-page,
.card,
.panel,
.admin-panel,
.seller-panel {
    border-color: var(--brand-border);
}

.admin-sidebar,
.seller-sidebar {
    background: linear-gradient(180deg, var(--brand-primary), var(--brand-primary-hover));
}

.admin-nav-item.is-active,
.seller-sidebar nav > a.is-active {
    background: rgba(255, 255, 255, .16);
    box-shadow: inset 3px 0 #fff;
    color: #fff;
}

.admin-brand-mark,
.admin-kpi-icon,
.seller-kpis > div > span:first-child,
.category-chip-grid a > span,
.marketplace-empty > span,
.seller-empty > span,
.seller-health > div > span {
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
}

.admin-search button,
.admin-panel a,
.seller-panel > header a,
.seller-next-step a,
.marketplace-section-heading > a {
    color: var(--brand-primary);
}

.marketplace-nav a:hover,
.marketplace-nav a.is-active,
.seller-global-nav a.is-active,
.seller-listing-tabs button.is-active {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.marketplace-account,
.marketplace-cart,
.marketplace-footer,
.seller-cta,
.seller-hero,
.parts-hero,
.marketplace-hero {
    background: var(--brand-primary);
    color: #fff;
}

.marketplace-cart small {
    background: var(--brand-ink);
}

.marketplace-kicker,
.marketplace-hero h1 em,
.parts-hero h1 em,
.seller-cta span,
.seller-hero p {
    color: #fff;
}

.marketplace-section-heading span,
.seller-next-step > span,
.marketplace-auth .form-heading .eyebrow {
    color: var(--brand-primary);
}

.marketplace-kicker {
    border-color: rgba(255, 255, 255, .72);
}

.marketplace-search-row button,
.marketplace-primary,
.seller-cta > a,
.seller-primary,
.parts-filters button,
.marketplace-auth .primary-button,
.support-drawer-actions button {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #fff;
}

.marketplace-search-row button:hover,
.marketplace-primary:hover,
.seller-cta > a:hover,
.seller-primary:hover,
.parts-filters button:hover,
.marketplace-auth .primary-button:hover,
.support-drawer-actions button:hover {
    background: var(--brand-primary-hover);
    color: #fff;
}

.marketplace-search {
    border-color: rgba(255, 255, 255, .48);
    background: rgba(0, 70, 204, .82);
}

.marketplace-search-tabs button.is-active {
    border-color: #fff;
}

.seller-hero .seller-primary,
.seller-cta > a {
    border-color: #fff;
    background: #fff;
    color: var(--brand-primary);
}

.seller-hero .seller-primary:hover,
.seller-cta > a:hover {
    border-color: var(--brand-secondary);
    background: var(--brand-secondary);
    color: var(--brand-primary-hover);
}

.marketplace-footer {
    border-top-color: var(--brand-primary-hover);
}

.marketplace-auth {
    background: linear-gradient(130deg, var(--brand-primary) 0 40%, var(--brand-secondary) 40%);
}

.vehicle-card:hover,
.seller-listing-actions a:hover,
.seller-listing-actions button:hover {
    border-color: var(--brand-primary);
}

.seller-listing-pagination button.is-active {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
}

.support-launcher > a,
.support-launcher > button,
.support-drawer > header {
    background: var(--brand-primary);
}

.support-launcher > a:last-child,
.support-launcher > button:last-child {
    background: #16a85b;
}

.support-drawer,
.support-drawer input,
.support-drawer textarea {
    color: var(--brand-ink);
    font-family: var(--brand-font);
}

.support-drawer > header span {
    color: #fff;
}

.support-drawer-actions button.is-secondary {
    border-color: var(--brand-border);
    background: #fff;
    color: var(--brand-primary);
}

.marketplace-brand-mark,
.seller-brand > span {
    border-color: currentColor;
    font-family: var(--brand-font);
    font-style: normal;
}

code,
kbd,
pre,
.category-table code,
.catalogue-table code,
.canonical-generation-code,
.canonical-alias-layout small strong,
.canonical-primary-number-card strong,
.canonical-alias-table td small,
.canonical-primary-alias strong,
.canonical-alias-add-row small strong,
.canonical-alias-chip strong,
.canonical-alias-record > header strong {
    font-family: Arial, sans-serif;
}

/* Shared icon and rating primitives */
:where(button, a) > i[class^="ri-"],
:where(button, a) > i[class*=" ri-"] {
    flex: 0 0 auto;
    font-size: 1.05em;
    line-height: 1;
}

.app-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--brand-primary);
}

.app-rating-stars {
    display: inline-flex;
    gap: 0.12rem;
    color: var(--brand-primary);
}

.app-rating.is-empty {
    color: var(--brand-muted);
}

[dir="rtl"] .app-rating,
[dir="rtl"] .app-rating-stars {
    direction: rtl;
}

.marketplace-menu-toggle > i {
    color: var(--brand-ink);
    font-size: 1.45rem;
}

.marketplace-account > i,
.marketplace-cart > i {
    display: grid;
    place-items: center;
    font-size: 1.15rem;
}

/* Storefront utility controls use quiet surfaces and line icons. */
.marketplace-account,
.marketplace-cart {
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    color: var(--brand-primary);
}

.marketplace-account:hover,
.marketplace-account:focus-visible,
.marketplace-cart:hover,
.marketplace-cart:focus-visible {
    background: var(--brand-primary-soft);
    border-color: #9dbbff;
    color: var(--brand-primary);
}

.marketplace-account span {
    display: block;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    color: inherit;
}

.marketplace-cart small {
    background: var(--brand-primary);
}

.support-launcher > a,
.support-launcher > button,
.support-launcher > a:last-child,
.support-launcher > button:last-child {
    background: #fff;
    color: var(--brand-ink);
}

.support-launcher > a.is-whatsapp,
.support-launcher > button.is-whatsapp {
    background: #f0faf4;
    color: #17894c;
}

.support-launcher > a.is-disabled,
.support-launcher > button.is-disabled {
    background: #f8f9fb;
    color: #7b8999;
}

@media (max-width: 760px) {
    .marketplace-account span {
        display: none;
    }
}

.seller-sidebar nav > a > i,
.seller-sidebar nav > span > i {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid #8799ad;
    border-radius: 5px;
    font-size: 1rem;
}

.seller-hero-icon > i {
    font-size: 1.65rem;
}

.seller-kpi-icon > i,
.seller-empty > span > i,
.seller-next-icon > i,
.seller-listing-cell > span > i {
    font-size: 1.35rem;
}

.seller-section-nav > a > span > i,
.seller-section-nav > span > i {
    font-size: 1rem;
}

.seller-section-nav > span.is-disabled > i {
    grid-row: 1 / 3;
    align-self: center;
    justify-self: center;
}

.support-launcher i,
.support-drawer i {
    font-size: 1.15rem;
    line-height: 1;
}

.admin-action-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    font-size: 1.05rem;
    line-height: 1;
}

/* Keep the public marketplace footer light after global brand overrides. */
.marketplace-footer {
    background: var(--brand-secondary);
    border-top: 1px solid var(--brand-border);
    color: #334155;
}

.marketplace-footer h2 {
    color: var(--brand-ink);
}

.marketplace-footer section > a,
.marketplace-footer section > span {
    color: #334155;
}

.marketplace-footer section > a:hover,
.marketplace-footer section > a:focus-visible,
.marketplace-footer-brand {
    color: var(--brand-primary);
}

.marketplace-footer section > p,
.marketplace-footer-bottom {
    color: var(--brand-muted);
}

.marketplace-footer-brand .marketplace-brand-mark {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.marketplace-footer-bottom {
    border-top-color: var(--brand-border);
}