/* =====================================
   استيراد خط Tajawal
   ===================================== */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;600;700&display=swap');


/* =====================================
   ألوان وهوية المتجر
   ===================================== */

:root {
    --store-white: #ffffff;
    --store-black: #111111;
    --store-border: #111111;
    --store-light-border: #dedede;
    --store-font: "Tajawal", sans-serif;
}


/* =====================================
   تطبيق الخط على الموقع كاملًا
   ===================================== */

html,
body,
body *,
button,
input,
select,
textarea,
option {
    font-family: var(--store-font) !important;
}


/* وزن النصوص العادية */

body,
p,
span,
a,
button,
input,
select,
textarea,
label,
li {
    font-weight: 400;
}


/* العناوين */

h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.product-title,
.product-name,
[class*="product-title"],
[class*="product-name"] {
    font-family: var(--store-font) !important;
    font-weight: 500 !important;
}


/* =====================================
   الأزرار الأساسية
   ===================================== */

.btn-primary,
.button-primary,
.btn.btn-primary,
a.btn-primary,
button[type="submit"],
input[type="submit"],
.product-card .btn,
.product-card button,
.product-card a[class*="btn"],
.product-item .btn,
.product-item button,
.product-item a[class*="btn"],
[class*="product"] button[class*="btn"],
[class*="product"] a[class*="btn"] {
    background-color: var(--store-white) !important;
    color: var(--store-black) !important;
    border: 1px solid var(--store-border) !important;
    box-shadow: none !important;
    font-family: var(--store-font) !important;
    font-weight: 500 !important;
}


/* حالة تمرير المؤشر والضغط */

.btn-primary:hover,
.button-primary:hover,
.btn.btn-primary:hover,
a.btn-primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.product-card .btn:hover,
.product-card button:hover,
.product-card a[class*="btn"]:hover,
.product-item .btn:hover,
.product-item button:hover,
.product-item a[class*="btn"]:hover,
[class*="product"] button[class*="btn"]:hover,
[class*="product"] a[class*="btn"]:hover,
.btn-primary:active,
.button-primary:active {
    background-color: var(--store-black) !important;
    color: var(--store-white) !important;
    border-color: var(--store-black) !important;
}


/* =====================================
   مربعات الدفع والتوصيل
   ===================================== */

.payment-method,
.shipping-method,
.delivery-method,
.checkout-option,
.payment-option,
.shipping-option,
[class*="payment-method"],
[class*="shipping-method"],
[class*="delivery-method"],
[class*="payment-option"],
[class*="shipping-option"] {
    background-color: var(--store-white) !important;
    color: var(--store-black) !important;
    border: 1px solid var(--store-light-border) !important;
    font-family: var(--store-font) !important;
}


/* الخيار المحدد */

.payment-method.active,
.shipping-method.active,
.delivery-method.active,
.checkout-option.active,
.payment-option.active,
.shipping-option.active,
.payment-method.selected,
.shipping-method.selected,
.delivery-method.selected,
.checkout-option.selected,
.payment-option.selected,
.shipping-option.selected,
input:checked + label {
    background-color: var(--store-white) !important;
    color: var(--store-black) !important;
    border-color: var(--store-black) !important;
    box-shadow: none !important;
}


/* النصوص داخل خيارات الدفع والتوصيل */

.payment-method *,
.shipping-method *,
.delivery-method *,
.checkout-option *,
.payment-option *,
.shipping-option *,
[class*="payment-method"] *,
[class*="shipping-method"] *,
[class*="delivery-method"] * {
    color: var(--store-black) !important;
    font-family: var(--store-font) !important;
}


/* =====================================
   الراديو والـ Checkbox
   ===================================== */

input[type="radio"],
input[type="checkbox"] {
    accent-color: var(--store-black) !important;
}

input[type="radio"]:checked,
input[type="checkbox"]:checked {
    accent-color: var(--store-black) !important;
}


/* عناصر الاختيار المصممة يدويًا */

input[type="radio"]:checked + label::before,
input[type="checkbox"]:checked + label::before,
.radio input:checked + span,
.checkbox input:checked + span,
[class*="radio"] input:checked + *,
[class*="checkbox"] input:checked + * {
    background-color: var(--store-black) !important;
    border-color: var(--store-black) !important;
}


/* =====================================
   الأيقونات والشارات
   ===================================== */

.cart-count,
.badge-primary,
[class*="cart-count"],
[class*="badge-primary"] {
    background-color: var(--store-black) !important;
    color: var(--store-white) !important;
}


/* =====================================
   النصوص والروابط الملونة
   ===================================== */

.text-primary,
.text-brand,
[class*="text-primary"],
[class*="text-brand"] {
    color: var(--store-black) !important;
}

a:hover,
a:focus {
    color: var(--store-black) !important;
}


/* =====================================
   الخلفيات والحدود
   ===================================== */

.bg-primary,
.bg-brand,
[class*="bg-primary"],
[class*="bg-brand"] {
    background-color: var(--store-white) !important;
    color: var(--store-black) !important;
    border-color: var(--store-black) !important;
}

.border-primary,
.border-brand,
[class*="border-primary"],
[class*="border-brand"] {
    border-color: var(--store-black) !important;
}


/* =====================================
   الأسعار
   ===================================== */

.price,
.product-price,
[class*="product-price"] {
    color: var(--store-black) !important;
    font-family: var(--store-font) !important;
    font-weight: 500 !important;
}


/* =====================================
   حقول الكتابة والاختيار
   ===================================== */

input,
select,
textarea {
    font-family: var(--store-font) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--store-black) !important;
    outline: none !important;
    box-shadow: 0 0 0 1px var(--store-black) !important;
}


/* =====================================
   أيقونات الأزرار
   ===================================== */

.btn-primary svg,
.button-primary svg,
.product-card .btn svg,
.product-card button svg,
.product-item .btn svg,
.product-item button svg {
    color: var(--store-black) !important;
    fill: currentColor !important;
}

.btn-primary:hover svg,
.button-primary:hover svg,
.product-card .btn:hover svg,
.product-card button:hover svg,
.product-item .btn:hover svg,
.product-item button:hover svg {
    color: var(--store-white) !important;
}


/* =====================================
   أسماء المنتجات بشكل ناعم
   ===================================== */

.product-title,
.product-name,
.product-card .title,
.product-card h2,
.product-card h3,
.product-item .title,
.product-item h2,
.product-item h3,
[class*="product-title"],
[class*="product-name"] {
    font-family: var(--store-font) !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1.6 !important;
}