/* تعريف المتغيرات لتسهيل التعديل لاحقاً */
:root {
    --emc-bg-dark: #050505;       /* خلفية الموقع الرئيسية */
    --emc-card-dark: #151515;     /* خلفية المربعات والقوائم */
    --emc-orange: #ff9f1c;        /* اللون البرتقالي المميز */
    --emc-text-main: #ffffff;     /* النص الأبيض */
    --emc-text-sec: #cccccc;      /* النص الفرعي */
}

/* 1. تعتيم الخلفية بالكامل */
body, html {
    background-color: var(--emc-bg-dark) !important;
    color: var(--emc-text-main) !important;
}

/* 2. تعديل الكروت والمربعات البيضاء لتصبح سوداء */
.card, .box, .well, .panel {
    background-color: var(--emc-card-dark) !important;
    border: 1px solid #333 !important; /* حدود خفيفة */
    color: var(--emc-text-main) !important;
}

/* 3. تعديل القوائم الجانبية والعلوية */
.sidebar, .navbar, .top-nav {
    background-color: #000000 !important;
    border-bottom: 1px solid var(--emc-orange) !important; /* خط برتقالي شيك تحت القائمة */
}

/* 4. تلوين الأزرار باللون البرتقالي */
.btn-primary, .button-primary, .btn-success {
    background-color: var(--emc-orange) !important;
    border-color: var(--emc-orange) !important;
    color: #000000 !important; /* الكتابة تكون أسود عشان تظهر على البرتقالي */
    font-weight: bold;
}

.btn-primary:hover {
    background-color: #e68a00 !important; /* تغميق اللون عند الوقوف عليه */
}

/* 5. تعديل الروابط */
a {
    color: var(--emc-orange) !important;
}
a:hover {
    color: #ffffff !important;
    text-decoration: none;
}

/* 6. المدخلات (Inputs) عشان متكونش بيضاء فاقعة */
input, textarea, select, .form-control {
    background-color: #222 !important;
    border: 1px solid #444 !important;
    color: #fff !important;
}



/* =========================================
   إصلاح واجهة الطلب (Hostinger Style Dark)
   ========================================= */

/* 1. إزالة الصندوق الأبيض الكبير الخلفي */
#wrapper .well, 
.content-block, 
.box {
    background-color: transparent !important; /* خلفية شفافة عشان يبان الأسود اللي ورا */
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 2. تحويل خطوات الطلب (Select Product..) لكروت سوداء منفصلة */
.list-group-item {
    background-color: #111111 !important; /* لون الكارت أسود رمادي */
    border: 1px solid #333 !important;     /* برواز رمادي خفيف */
    border-radius: 10px !important;        /* حواف دائرية */
    margin-bottom: 10px !important;        /* مسافة بين كل كارت والتاني */
    color: #ffffff !important;
    transition: all 0.3s ease !important;
}

/* 3. شكل الكارت لما تقف عليه بالماوس */
.list-group-item:hover {
    background-color: #1a1a1a !important;
    transform: translateY(-2px);           /* يترفع لفوق سنة بسيطة */
    border-color: var(--emc-orange, #ff9f1c) !important; /* البرواز ينور برتقالي */
}

/* 4. شكل الكارت النشط (اللي أنت فاتحه حالياً) */
.list-group-item.active, 
.list-group-item.active:hover {
    background-color: var(--emc-orange, #ff9f1c) !important;
    border-color: var(--emc-orange, #ff9f1c) !important;
    color: #000000 !important; /* الكتابة تكون أسود عشان تبان على البرتقالي */
    font-weight: bold !important;
    z-index: 2 !important;
}

/* 5. تلوين العدادات (Badges) زي "2 items" */
.badge {
    background-color: #333 !important;
    color: #fff !important;
}
.list-group-item.active .badge {
    background-color: #000 !important;
    color: #fff !important;
}

/* 6. تحويل المنتجات بالداخل لشبكة (Grid) - ستايل هوستنجر */
/* ده هيشتغل لما تضغط على "Select Product" وتشوف المنتجات */
.accordion-inner {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important; /* كروت جنب بعض */
    gap: 15px !important;
    padding: 10px 0 !important;
    background: transparent !important;
    border: none !important;
}

/* كارت المنتج الداخلي */
.accordion-inner label {
    display: flex !important;
    flex-direction: column !important;
    background: #151515 !important;
    border: 1px solid #333 !important;
    border-radius: 8px !important;
    padding: 15px !important;
    color: #fff !important;
    text-align: center !important;
    height: 100% !important;
    cursor: pointer !important;
}

.accordion-inner label:hover {
    border-color: var(--emc-orange, #ff9f1c) !important;
    background: #1f1f1f !important;
}

/* إخفاء النقاط والراديو القديم */
.accordion-inner input[type="radio"] {
    accent-color: var(--emc-orange, #ff9f1c) !important;
    margin-bottom: 10px !important;
}