/* Add custom CSS styles below */ 

/* =============================
   إزالة الطبقات الرمادية (Overlays)
============================= */

.overlay,
.hero-overlay,
.banner-overlay,
[data-overlay],
[data-backdrop] {
    background: transparent !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* =============================
   توحيد الخطوط والألوان الأساسية
============================= */

body {
    font-family: "Cairo", sans-serif !important;
    color: #333333;
    line-height: 1.6;
    font-size: 16px;
}

/* عناوين الموقع */
h1, h2, h3, h4, h5, h6,
.hero-heading,
.hero-title,
.section-title,
.banner-title {
    color: #ff9428 !important;
    font-weight: 700;
    line-height: 1.3;
}

/* نصوص الوصف المهمة */
.hero-text,
.banner-text,
.feature-title,
.feature-text,
.category-card__title,
.category-card__text {
    color: #ff9428 !important;
    font-weight: 600;
}

/* الروابط الأساسية */
a {
    color: #ff9428;
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: #e67f1f;
}

/* =============================
   الأزرار - شفافة افتراضياً
============================= */

button,
input[type="submit"],
.btn,
a.button,
a.btn,
.product-actions__button,
.product-actions__button--buy-now,
.product-actions__button--add-to-cart,
.btn-outline-primary {
    background-color: transparent !important;
    border: 2px solid #ff9428 !important;
    color: #ff9428 !important;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 20px;
    font-size: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
}

button:hover,
input[type="submit"]:hover,
.btn:hover,
a.button:hover,
a.btn:hover,
.product-actions__button:hover,
.product-actions__button--buy-now:hover,
.product-actions__button--add-to-cart:hover,
.btn-outline-primary:hover,
button:focus,
input[type="submit"]:focus,
.btn:focus,
a.button:focus,
a.btn:focus,
.product-actions__button:focus,
.product-actions__button--buy-now:focus,
.product-actions__button--add-to-cart:focus,
.btn-outline-primary:focus {
    background-color: #ff9428 !important;
    color: #ffffff !important;
    border-color: #ff9428 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* أيقونات داخل الأزرار */
button i,
button svg,
input[type="submit"] i,
input[type="submit"] svg,
.btn i,
.btn svg,
a.button i,
a.button svg,
a.btn i,
a.btn svg {
    color: #ff9428 !important;
    fill: #ff9428 !important;
    transition: all 0.3s ease;
}

button:hover i,
button:hover svg,
input[type="submit"]:hover i,
input[type="submit"]:hover svg,
.btn:hover i,
.btn:hover svg,
a.button:hover i,
a.button:hover svg,
a.btn:hover i,
a.btn:hover svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* =============================
   أزرار الكمية (+ و -)
============================= */

.quantity-btn,
.quantity-btn svg,
.quantity-btn i {
    background-color: transparent !important;
    border: 2px solid #ff9428 !important;
    color: #ff9428 !important;
    fill: #ff9428 !important;
    border-radius: 50% !important;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.quantity-btn:hover,
.quantity-btn:focus,
.quantity-btn:active {
    background-color: #ff9428 !important;
    color: #ffffff !important;
    fill: #ffffff !important;
    border-color: #ff9428 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* =============================
   الأيقونات (SVG و Font Icons)
============================= */

i,
svg,
.icon,
[class*="icon-"] {
    color: #ff9428 !important;
    fill: #ff9428 !important;
    stroke: #ff9428 !important;
    transition: all 0.3s ease;
}

i:hover,
svg:hover,
.icon:hover,
[class*="icon-"]:hover {
    color: #e67f1f !important;
    fill: #e67f1f !important;
    stroke: #e67f1f !important;
}

/* أيقونات داخل صناديق التصنيفات */
.category-card__icon svg,
.category-card__icon path,
.category-card__icon *,
.category-card svg,
.category-card path,
.category-card *,
.icon svg,
.icon path,
.icon * {
    fill: #ff9428 !important;
    color: #ff9428 !important;
    stroke: #ff9428 !important;
}

.category-card__icon svg:hover,
.category-card__icon path:hover,
.category-card__icon *:hover,
.category-card svg:hover,
.category-card path:hover,
.category-card *:hover,
.icon svg:hover,
.icon path:hover,
.icon *:hover {
    fill: #e67f1f !important;
    color: #e67f1f !important;
    stroke: #e67f1f !important;
}

/* =============================
   تحسين الخطوط على الموبايل
============================= */

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    h1, h2, h3 {
        font-size: 18px;
    }
    .btn,
    a.button,
    a.btn {
        font-size: 14px;
        padding: 10px 16px;
    }
}