@font-face {
    font-display: block;
    font-family: Inter;
    src: url(../fonts/Inter/Inter-VariableFont_slntwght.ttf) format("truetype");
}

@font-face {
    font-display: block;
    font-family: Cairo;
    src: url(../fonts/Cairo/Cairo-VariableFont_slntwght.ttf) format("truetype");
}

@font-face {
    font-display: swap;
    font-family: Almarai;
    src: url(../fonts/Almarai/Almarai-Bold.ttf) format("truetype");
}

@font-face {
    font-display: swap;
    font-family: Somar-Sans;
    src: url(../fonts/SomarSans/SomarSans-Regular.ttf) format("truetype");
}

@font-face {
    font-display: swap;
    font-family: Nunito;
    src: url(../fonts/Nunito/Nunito-Bold.ttf) format("truetype");
}

@font-face {
    font-display: swap;
    font-family: Saudi-Riyal;
    src: url(../fonts/Saudi-Riyal/saudi_riyal.ttf) format("truetype");
}

@font-face {
    font-family: UAE-Dirham;
    src: url(../fonts/UAE-Dirham/AED-Regular.otf) format("truetype");
}

.slogan {
    font-family: "Almarai", Courier, monospace;
}

body {
    font-family: "Almarai", Courier, monospace !important;
}

a {
    text-decoration: none !important;
}

.search-suggestions {
    position: absolute;
    top: 102%;
    z-index: 98;
    background: #fff;
    width: 93%;
    max-height: 300px;
    overflow-y: auto;
}

.search-suggestions ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.search-suggestions ul li {
    padding: 8px 12px;
    border-bottom: 1px solid #f1f1f1;
}

.search-suggestions ul li a {
    text-decoration: none;
    color: #333;
}

.search-suggestions ul li:hover {
    background-color: #f0f0f0;
}

.search-suggestions p {
    padding: 8px 12px;
    color: #999;
}

.promo-banner {
    width: 100%;
    display: block;
}

.promo-banner img {
    width: 100%;
    height: auto;
    display: block;
}

:root,
[data-bs-theme="dark"] {
    --cz-dark: #2D2D2D;
    --cz-dark-rgb: 45, 45, 45;
}

/* ===== Electron Brand Palette (from logo) ===== */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --brand-blue: #1E7BD8;
    --brand-blue-dark: #155FA8;
    --brand-orange: #F26B1D;
    --brand-orange-dark: #D9570C;

    /* Primary = orange (CTA), Info/links = blue */
    --cz-primary: var(--brand-orange);
    --cz-primary-rgb: 242, 107, 29;
    --cz-primary-text-emphasis: var(--brand-orange-dark);
    --cz-primary-bg-subtle: #FEEDE3;
    --cz-primary-border-subtle: #FBC7A6;

    --cz-info: var(--brand-blue);
    --cz-info-rgb: 30, 123, 216;

    --cz-link-color: var(--brand-blue);
    --cz-link-color-rgb: 30, 123, 216;
    --cz-link-hover-color: var(--brand-orange);
    --cz-link-hover-color-rgb: 242, 107, 29;

    --cz-dark: #0F3D6E;
    --cz-dark-rgb: 15, 61, 110;
}

.btn-primary {
    --cz-btn-bg: var(--brand-orange);
    --cz-btn-border-color: var(--brand-orange);
    --cz-btn-hover-bg: var(--brand-orange-dark);
    --cz-btn-hover-border-color: var(--brand-orange-dark);
    --cz-btn-active-bg: var(--brand-orange-dark);
    --cz-btn-active-border-color: var(--brand-orange-dark);
    --cz-btn-disabled-bg: var(--brand-orange);
    --cz-btn-disabled-border-color: var(--brand-orange);
}

.btn-outline-primary {
    --cz-btn-color: var(--brand-orange);
    --cz-btn-border-color: var(--brand-orange);
    --cz-btn-hover-bg: var(--brand-orange);
    --cz-btn-hover-border-color: var(--brand-orange);
    --cz-btn-active-bg: var(--brand-orange-dark);
    --cz-btn-active-border-color: var(--brand-orange-dark);
}

.btn-info {
    --cz-btn-bg: var(--brand-blue);
    --cz-btn-border-color: var(--brand-blue);
    --cz-btn-hover-bg: var(--brand-blue-dark);
    --cz-btn-hover-border-color: var(--brand-blue-dark);
}

.bg-dark,
.navbar.bg-dark,
header .bg-dark {
    background-color: var(--brand-blue-dark) !important;
}

.text-primary {
    color: var(--brand-orange) !important;
}

/* Header categories dropdown (inline #323d4b) */
header [style*="#323d4b"] {
    background-color: var(--brand-blue-dark) !important;
}

/* =========================================================
   Header polish (brand colors)
   ========================================================= */

/* --- "كل الأقسام" button --- */
header .navbar-nav .dropdown .btn-secondary.dropdown-toggle {
    background: transparent !important;
    border: 0 !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: none !important;
    transition: color .2s ease;
}

header .navbar-nav .dropdown:hover .btn-secondary.dropdown-toggle,
header .navbar-nav .dropdown .btn-secondary.dropdown-toggle.show {
    color: var(--brand-orange) !important;
}

header .navbar-nav .dropdown .btn-secondary.dropdown-toggle::after,
header .navbar-nav .dropdown .btn-secondary.dropdown-toggle .ci-grid {
    color: #fff !important;
}

/* Categories mega menu: items hover */
header .dropdown-menu .dropdown-item {
    border-radius: 10px;
    transition: background-color .2s ease, padding .2s ease;
}

header .dropdown-menu .dropdown-item:hover,
header .dropdown-menu .dropend:hover>div>.dropdown-item {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}

/* --- Main nav links (الرئيسية / عن الشركة) --- */
header .navbar-nav .nav-link {
    position: relative;
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 700;
    padding-bottom: .5rem;
    transition: color .2s ease;
}

header .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    inset-inline: 0.75rem;
    bottom: 0.15rem;
    height: 3px;
    border-radius: 3px;
    background: var(--brand-orange);
    transform: scaleX(0);
    transition: transform .25s ease;
}

header .navbar-nav .nav-link:hover,
header .navbar-nav .nav-link.active,
header .navbar-nav .nav-link[aria-current="page"] {
    color: #fff !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
}

header .navbar-nav .nav-link:hover::after,
header .navbar-nav .nav-link.active::after,
header .navbar-nav .nav-link[aria-current="page"]::after {
    transform: scaleX(1);
}

/* --- Search box --- */
.search_form .form-control {
    background-color: #fff !important;
    color: #1f2937 !important;
    border: 2px solid transparent !important;
    padding-inline-start: 3rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.search_form .form-control::placeholder {
    color: #8a94a6 !important;
}

.search_form .form-control:focus {
    border-color: var(--brand-orange) !important;
    box-shadow: 0 0 0 4px rgba(242, 107, 29, 0.25) !important;
}

.search_form .ci-search {
    color: var(--brand-orange) !important;
    z-index: 2;
}

.search-suggestions {
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(15, 61, 110, 0.18);
    border: 1px solid #e6ecf5;
}

.search-suggestions ul li:hover {
    background-color: #FEEDE3 !important;
}

.search-suggestions ul li:hover a {
    color: var(--brand-orange-dark) !important;
}

/* Mobile collapsible search panel */
@media (max-width: 991.98px) {
    #globalSearch {
        background-color: var(--brand-blue-dark) !important;
    }
}

/* --- Unified header icon buttons (cart / account / lang / menu) --- */
header .header-action-btn.btn-outline-secondary,
header .header-action-btn.btn-secondary,
header .navbar-toggler {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50% !important;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: none !important;
    transition: background-color .2s ease, transform .2s ease, border-color .2s ease;
}

header .header-action-btn.btn-outline-secondary:hover,
header .header-action-btn.btn-secondary:hover,
header .navbar-toggler:hover {
    background: var(--brand-orange) !important;
    border-color: var(--brand-orange) !important;
    transform: translateY(-2px);
}

header .navbar-toggler:focus {
    box-shadow: none !important;
}

header .navbar-toggler {
    position: relative;
    padding: 0 !important;
}

header .navbar-toggler .navbar-toggler-icon {
    top: 50% !important;
    left: calc(50% - 0.6875rem) !important;
    right: auto !important;
    margin: -0.0625rem 0 0 0 !important;
}

header .navbar-toggler .navbar-toggler-icon::before,
header .navbar-toggler .navbar-toggler-icon::after {
    left: 0 !important;
    right: auto !important;
}

/* Cart count badge */
header .header-cart-badge {
    background-color: var(--brand-orange) !important;
    color: #fff !important;
    border-color: var(--brand-blue-dark) !important;
    font-weight: 800;
}

/* Logo backdrop: keep blue/orange logo readable on blue backgrounds */
.header-logo-img,
.footer img[src*="uploads/settings"] {
    background-color: #fff;
    padding: 4px 12px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    box-sizing: content-box;
}

.product-card-button:hover,
.btn-secondary.product-card-button:hover {
    background-color: var(--brand-orange) !important;
    border-color: var(--brand-orange) !important;
    color: #fff !important;
}

/* Add-to-cart buttons: logo orange in all states */
.add-to-cart-btn,
.product-card .product-card-button,
.product-card:hover .product-card-button,
.add-to-cart-btn:focus,
.add-to-cart-btn:active {
    background-color: var(--brand-orange) !important;
    border-color: var(--brand-orange) !important;
    color: #fff !important;
}

.add-to-cart-btn:hover,
.product-card:hover .product-card-button:hover {
    background-color: var(--brand-orange-dark) !important;
    border-color: var(--brand-orange-dark) !important;
    color: #fff !important;
}


/* Swiper Carousel Navigation Arrow Directions in RTL */
[dir="rtl"] [class*="-prev"] .ci-chevron-left::before,
[dir="rtl"] .btn-prev .ci-chevron-left::before,
[dir="rtl"] [aria-label="Prev"] .ci-chevron-left::before,
[dir="rtl"] .start-0 .ci-chevron-left::before,
[dir="rtl"] button.start-0 .ci-chevron-left::before {
    content: "\f13f" !important;
    /* points right */
}

[dir="rtl"] [class*="-next"] .ci-chevron-right::before,
[dir="rtl"] .btn-next .ci-chevron-right::before,
[dir="rtl"] [aria-label="Next"] .ci-chevron-right::before,
[dir="rtl"] .end-0 .ci-chevron-right::before,
[dir="rtl"] button.end-0 .ci-chevron-right::before {
    content: "\f13e" !important;
    /* points left */
}

/* Remove theme white underline under nav text (keep orange ::after only) */
header .navbar-nav .nav-link .animate-target,
header .navbar-nav .nav-link span {
    text-decoration: none !important;
    background-image: none !important;
    border-bottom: 0 !important;
}

/* Swiper Carousel Navigation Arrow Buttons (Orange Outline) */
.btn-icon.rounded-circle[class*="-prev"],
.btn-icon.rounded-circle[class*="-next"],
.btn-icon.rounded-circle.btn-prev,
.btn-icon.rounded-circle.btn-next,
button[aria-label="Prev"].btn-icon,
button[aria-label="Next"].btn-icon {
    color: var(--brand-orange) !important;
    border-color: var(--brand-orange) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all .2s ease;
}

.btn-icon.rounded-circle[class*="-prev"] i,
.btn-icon.rounded-circle[class*="-next"] i,
.btn-icon.rounded-circle.btn-prev i,
.btn-icon.rounded-circle.btn-next i,
button[aria-label="Prev"].btn-icon i,
button[aria-label="Next"].btn-icon i {
    color: var(--brand-orange) !important;
    transition: color .2s ease;
}

.btn-icon.rounded-circle[class*="-prev"]:hover:not(:disabled):not(.swiper-button-disabled),
.btn-icon.rounded-circle[class*="-next"]:hover:not(:disabled):not(.swiper-button-disabled),
.btn-icon.rounded-circle.btn-prev:hover:not(:disabled):not(.swiper-button-disabled),
.btn-icon.rounded-circle.btn-next:hover:not(:disabled):not(.swiper-button-disabled),
button[aria-label="Prev"].btn-icon:hover:not(:disabled):not(.swiper-button-disabled),
button[aria-label="Next"].btn-icon:hover:not(:disabled):not(.swiper-button-disabled) {
    background-color: var(--brand-orange) !important;
    border-color: var(--brand-orange) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(242, 107, 29, 0.35);
}

.btn-icon.rounded-circle[class*="-prev"]:hover:not(:disabled):not(.swiper-button-disabled) i,
.btn-icon.rounded-circle[class*="-next"]:hover:not(:disabled):not(.swiper-button-disabled) i,
.btn-icon.rounded-circle.btn-prev:hover:not(:disabled):not(.swiper-button-disabled) i,
.btn-icon.rounded-circle.btn-next:hover:not(:disabled):not(.swiper-button-disabled) i,
button[aria-label="Prev"].btn-icon:hover:not(:disabled):not(.swiper-button-disabled) i,
button[aria-label="Next"].btn-icon:hover:not(:disabled):not(.swiper-button-disabled) i {
    color: #fff !important;
}

.btn-icon.rounded-circle[class*="-prev"]:disabled,
.btn-icon.rounded-circle[class*="-next"]:disabled,
.btn-icon.rounded-circle[class*="-prev"].swiper-button-disabled,
.btn-icon.rounded-circle[class*="-next"].swiper-button-disabled {
    opacity: 0.35 !important;
    cursor: default !important;
    pointer-events: none !important;
}

/* Floating Back to Top Button (Orange Brand Styling) */
.btn-scroll-top {
    color: var(--brand-orange) !important;
    font-weight: 700;
    letter-spacing: .5px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.25s ease-in-out, opacity 0.25s, visibility 0.25s, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

.btn-scroll-top i {
    color: var(--brand-orange) !important;
    transition: color 0.2s ease;
}

.btn-scroll-top span.border {
    border-color: rgba(242, 107, 29, 0.35) !important;
    transition: border-color 0.2s ease;
}

.btn-scroll-top svg rect {
    stroke: var(--brand-orange) !important;
    transition: stroke 0.2s ease;
}

.btn-scroll-top:hover {
    background-color: var(--brand-orange) !important;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(242, 107, 29, 0.45) !important;
}

.btn-scroll-top:hover i {
    color: #fff !important;
}

.btn-scroll-top:hover span.border {
    border-color: var(--brand-orange) !important;
}

.btn-scroll-top:hover svg rect {
    stroke: #fff !important;
}