/* checkout.css — v5: الحل النهائي (CSS فقط + إصلاح السهم)
   - يدمج كلاسات Tailwind المفقودة (مثل p-3.5, bg-gray-50) مع !important
   - يُبقي على كلاسات التصميم (مثل .form-control-modern)
   - يضيف 'position: relative' لإصلاح مكان السهم
*/

/* =========== ✨✨✨ إصلاح مكان السهم ✨✨✨ =========== */
.cl-checkout-override {
    position: relative !important;
}
/* ================================================= */

.cl-checkout-override body { 
    font-family: 'Inter', sans-serif !important; 
    background-color: #fcfcfc !important; 
}

:root {
    --checkout-primary: #2D3748;
    --checkout-secondary: #4A5668;
    --checkout-accent: #049634;
    --checkout-light: #F7FAFC;
    --checkout-border: #E2E8F0;
}

.cl-checkout-override .checkout-accent-bg { background-color: var(--checkout-accent) !important; }
.cl-checkout-override .checkout-accent-text { color: var(--checkout-accent) !important; }
.cl-checkout-override .checkout-accent-border { border-color: var(--checkout-accent) !important; }
.cl-checkout-override .checkout-primary-text { color: var(--checkout-primary) !important; }
.cl-checkout-override .checkout-secondary-text { color: var(--checkout-secondary) !important; }
.cl-checkout-override .checkout-light-bg { background-color: var(--checkout-light) !important; }

/* =========== القسم الأهم: إصلاح الحقول والأزرار ===========
  هذا الكود يضيف كلاسات Tailwind المفقودة بالقوة
*/

/* 1. إصلاح جميع حقول الإدخال وزر المدينة */
.cl-checkout-override .form-control-modern { 
    /* كلاسات Tailwind المضافة يدوياً */
    width: 100% !important;
    padding: 0.875rem !important; /* (p-3.5) */
    border-width: 2px !important;
    border-color: #E2E8F0 !important; /* (border-gray-200) */
    border-radius: 0.75rem !important; /* (rounded-xl) */
    background-color: #F9FAFB !important; /* (bg-gray-50) */
    
    /* كلاساتك الخاصة */
    transition: all 0.3s ease !important; 
    color: var(--checkout-primary) !important;
}

/* 2. إصلاح حالة الـ Focus (عند الضغط) */
.cl-checkout-override .form-control-modern:focus { 
    border-color: var(--checkout-accent) !important; 
    outline: none !important; 
    box-shadow: 0 0 0 4px rgba(4,150,52,0.1) !important; 
    background-color: #ffffff !important; /* (focus:bg-white) */
}

/* 3. إصلاح حالة التعطيل (Disabled) */
.cl-checkout-override .form-control-modern:disabled { 
    background-color: #f1f5f9 !important; 
    cursor: not-allowed !important; 
}

/* 4. إصلاح حقل كود الخصم (لإزالة البوردر الأيمن) */
.cl-checkout-override #promo-code {
    border-right-width: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    /* التأكد من البوردر الأيسر */
    border-top-left-radius: 0.75rem !important;
    border-bottom-left-radius: 0.75rem !important;
}

/* 5. إصلاح زر "تطبيق" كود الخصم */
.cl-checkout-override #apply-promo-btn {
    background-color: var(--checkout-accent) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    padding-left: 1.25rem !important; /* (px-5) */
    padding-right: 1.25rem !important; /* (px-5) */
    /* إزالة البوردر الأيسر */
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    /* التأكد من البوردر الأيمن */
    border-top-right-radius: 0.75rem !important;
    border-bottom-right-radius: 0.75rem !important;
}
.cl-checkout-override #apply-promo-btn:disabled { 
    background-color: #cbd5e0 !important; 
    cursor: not-allowed !important; 
}

/* 6. إصلاح زر "تأكيد الطلب" */
.cl-checkout-override .btn-checkout-modern { 
    width: 100% !important;
    padding-top: 1rem !important; /* (py-4) */
    padding-bottom: 1rem !important; /* (py-4) */
    border-radius: 0.75rem !important; /* (rounded-xl) */
    margin-top: 2rem !important; /* (mt-8) */
    font-weight: 700 !important;
    color: #FFFFFF !important;
    background-color: var(--checkout-accent) !important;
    
    /* كلاساتك الخاصة */
    transition: all 0.3s ease !important; 
    box-shadow: 0 4px 15px rgba(4,150,52,0.3) !important; 
}
.cl-checkout-override .btn-checkout-modern:hover:not(:disabled) { 
    background-color: #037a2a !important; 
    transform: translateY(-3px) !important; 
    box-shadow: 0 8px 20px rgba(4,150,52,0.4) !important; 
}
.cl-checkout-override .btn-checkout-modern:disabled { 
    background-color: #a0aec0 !important; 
    cursor: not-allowed !important; 
    opacity: 0.7 !important; 
    box-shadow: none !important; 
    transform: none !important; 
}

/* =========== باقي الأقسام (للاحتياط) ===========
*/

/* خيار الدفع */
.cl-checkout-override .payment-option-modern { 
    transition: all 0.3s ease !important; 
    border: 2px solid var(--checkout-border) !important; 
    background-color: #ffffff !important; 
}
.cl-checkout-override .payment-option-modern:hover { 
    transform: translateY(-2px) !important; 
    border-color: var(--checkout-accent) !important; 
    box-shadow: 0 7px 20px rgba(0,0,0,0.06) !important; 
}
.cl-checkout-override .payment-option-modern.selected { 
    border-color: var(--checkout-accent) !important; 
    background-color: rgba(4,150,52,0.03) !important; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important; 
}

.cl-checkout-override .payment-option-modern.selected .custom-radio { border-color: var(--checkout-accent) !important; }
.cl-checkout-override .payment-option-modern.selected .inner-circle { transform: scale(1) !important; background-color: var(--checkout-accent) !important; }
.cl-checkout-override .inner-circle { transition: all 0.2s ease-in-out !important; transform: scale(0) !important; }

/* Custom Dropdown Styles */
.cl-checkout-override #city-select-button.open .fa-chevron-down { transform: rotate(180deg) !important; }
.cl-checkout-override #city-list li { padding: 10px 16px !important; text-align: left !important; cursor: pointer !important; transition: background-color 0.2s ease !important; }
.cl-checkout-override #city-list li:hover { background-color: #f1f5f9 !important; }
.cl-checkout-override #city-list li.selected { background-color: rgba(4,150,52,0.1) !important; font-weight: 600 !important; }

/* Custom Toast Notification */
#toast-notification { position: fixed; top: 20px; right: 20px; z-index: 1000; transition: opacity 0.5s, transform 0.5s; opacity: 0; transform: translateY(-20px); }
#toast-notification.show { opacity: 1; transform: translateY(0); }

/* Flash Arrow Styles */
.cl-checkout-override .flash-arrow { position: absolute; width: 32px; height: 32px; color: var(--checkout-accent); opacity: 0; pointer-events: none; transition: opacity 0.3s ease, top 0.4s cubic-bezier(0.25,1,0.5,1); z-index: 50; transform: translateY(-50%); }
.cl-checkout-override .flash-arrow.show { opacity: 1; animation: flash 1.5s infinite ease-in-out; }

@keyframes flash { 0%,100%{ transform: translateY(-50%) translateX(0);} 50%{ transform: translateY(-50%) translateX(-8px);} }

/* small responsive helpers */
@media (min-width: 1024px) {
    .cl-checkout-override .container { max-width: 1100px !important; margin: 0 auto !important; }
}
/* =======================================
   إخفاء السهم الأخضر المتحرك بناءً على الطلب
   ======================================= */
.cl-checkout-override .flash-arrow,
#flash-arrow {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
button#apply-promo-btn {
    height: 55px;
}

@media only screen and (max-width: 767px) {
    .content_wrapper .section_wrapper, .container, .four.columns .widget-area {
        max-width: 550px !important;
         padding-left: 5px !important;
         padding-right: 5px !important;
    }
}

/* =======================================
   إضافة لإصلاح صندوق الشحن (Méthode d'Expédition)
   ======================================= */

/* إصلاح الألوان ( لاستخدام اللون الأخضر المخصص لديك) */
.cl-checkout-override .border-green-500 {

}
.cl-checkout-override .bg-green-100 {
    /* (هذا لون أخضر فاتح متوافق مع لونك) */
    background-color: #f0fdf4 !important; 
	
}
.cl-checkout-override .text-green-600 {
    color: var(--checkout-accent) !important;
	
}

/* إصلاح باقي كلاسات Tailwind 
  (التي ألغاها قالب BeTheme)
*/
/* =======================================
   إضافة لإصلاح صندوق الشحن (Méthode d'Expédition)
   - استخدام اللون الأخضر المحدد #069635
   ======================================= */

/* إصلاح الألوان ( لاستخدام اللون الأخضر المحدد) */
.cl-checkout-override .border-green-500 {
    border-color: #069635 !important;
	    background-color: #f1f5f9;
}
.cl-checkout-override .bg-green-100 {
    /* (هذا لون أخضر فاتح متوافق مع لونك) */
    background-color: #f0fdf4 !important; 
}
.cl-checkout-override .text-green-600 {
    color: #069635 !important;
}

/* إصلاح باقي كلاسات Tailwind 
  (التي ألغاها قالب BeTheme)
*/