/*
 * assets/css/cart.css
 * Custom styles for the cart page template (template-cart.php)
 */

body {
    /* Ensure Inter font is applied if not globally set */
    font-family: 'Inter', sans-serif;
    /* Background color set for the body */
    background-color: #f8f9fa; /* slightly off-white */
}

/* --- Color Variables & Base Styles (from checkout) --- */
:root {
    --checkout-primary: #2D3748; /* Dark Gray */
    --checkout-secondary: #4A5568; /* Medium Gray */
    --checkout-accent: #049634;    /* Green */
    --checkout-light: #F7FAFC;     /* Very Light Gray/Blue */
    --checkout-border: #E2E8F0;    /* Light Gray Border */
}

.checkout-accent-bg { background-color: var(--checkout-accent); }
.checkout-accent-text { color: var(--checkout-accent); }
.checkout-primary-text { color: var(--checkout-primary); }
.checkout-secondary-text { color: var(--checkout-secondary); }

/* --- Form Control Styles (Shared with checkout) --- */
.form-control-modern {
    transition: all 0.3s ease;
}

.form-control-modern:focus {
    border-color: var(--checkout-accent);
    outline: none;
    box-shadow: 0 0 0 4px rgba(4, 150, 52, 0.1); /* Green focus ring */
}

/* --- Button Styles (Shared with checkout) --- */
.btn-checkout-modern {
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(4, 150, 52, 0.3);
}

.btn-checkout-modern:hover:not(:disabled) {
    background-color: #037a2a; /* Darker green on hover */
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(4, 150, 52, 0.4);
}

.btn-checkout-modern:disabled {
    background-color: #a0aec0; /* gray-400 */
    cursor: not-allowed;
    opacity: 0.7;
    box-shadow: none;
    transform: none;
}


/* --- Cart Specific Styles --- */

/* Cart Item Transitions & Effects */
.cart-item {
    transition: all 0.3s ease; /* Smooth transition for removal */
}

.cart-item .overflow-hidden img {
    transition: transform 0.4s ease-out; /* Image zoom effect */
}
.cart-item:hover .overflow-hidden img {
    transform: scale(1.1);
}

.cart-item.removing {
    transform: scale(0.9);
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out; /* Fade out effect */
}

/* Quantity Input (Ensure no spinner arrows) */
.quantity-input {
    /* Hide default number input spinners */
    -moz-appearance: textfield;
}
.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* --- Toast Notification Styles (Shared with checkout) --- */
/* (Basic positioning - detailed styles are applied inline via JS) */
#toast-notification {
    position: fixed;
    top: 20px; /* Adjust as needed */
    right: 20px;
    z-index: 1001; /* Ensure it's above other elements */
}


/* --- Modal Styles --- */
#quantity-limit-modal {
    /* Transition for the background overlay */
    transition: opacity 0.3s ease;
}
#quantity-limit-modal #modal-content {
    /* Transition for the modal content itself */
    transition: opacity 0.3s ease, transform 0.3s ease;
}
/* State when modal is shown (triggered by JS adding/removing 'hidden' and 'opacity-0' etc.) */
/* JS will handle adding classes like 'opacity-100', 'scale-100' */


/* --- Animated Background Styles --- */
.background-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Behind everything else */
    overflow: hidden;
    pointer-events: none; /* Make sure it doesn't interfere with clicks */
}

.circle {
    position: absolute;
    bottom: -150px; /* Start below the screen */
    border-radius: 50%;
    opacity: 0.1; /* Slightly more subtle */
    animation: floatUp 25s infinite linear;
}

.circle.green { background-color: #049634; } /* Use accent color */
.circle.yellow { background-color: #facc15; } /* Tailwind yellow-400 */

@keyframes floatUp {
    0% {
        transform: translateY(0);
        opacity: 0.1;
    }
    50% {
        opacity: 0.15; /* Slightly increase opacity mid-way */
    }
    100% {
        transform: translateY(-120vh); /* Move well above the viewport */
        opacity: 0;
    }
}

/* --- Minor Adjustments from HTML --- */
/* Adjust font size if needed for specific elements */
h2.text-xl.font-bold.flex.items-center {
    font-size: 1.1rem; /* Slightly smaller than default text-xl if needed */
}
button#clear-cart-btn {
    /* Ensure padding is sufficient */
    /* padding: 8px 16px; */ /* Example if needed */
}

/* Ensure color swatches in attributes are vertically aligned */
.w-3.h-3.rounded-full.inline-block {
    vertical-align: middle;
}
.w-4.h-4.rounded-full.inline-block {
    vertical-align: middle;
}
/* إخفاء إشعارات الخطأ القياسية من WooCommerce في صفحة السلة المخصصة */
.cl-toast.bg-red-600.text-white.p-4.rounded-lg.shadow-lg.fixed.bottom-5.right-5.z-50 {
    display: none !important; 
}
.flex.items-center.border-2.border-gray-200.rounded-lg {
    width: 120px;
}
/* =======================================
   CSS يدوي لإصلاح تصميم عنصر السلة (Cart Item)
   (بناءً على الطلب)
   ======================================= */

/* استخدام .woocommerce لزيادة التحديد (Specificity)
   للتأكد من أنه يتفوق على BeTheme
*/
.woocommerce .cart-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important; /* gap-4 */
    background-color: #ffffff !important; /* bg-white */
    padding: 1rem !important; /* p-4 */
    border-radius: 1rem !important; /* rounded-2xl */
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important; /* shadow-lg */
}

/* حاوية الصورة */
.woocommerce .cart-item > div:first-child {
    width: 100% !important; /* w-full */
    border-radius: 0.5rem !important; /* rounded-lg */
    overflow: hidden !important; /* overflow-hidden */
    flex-shrink: 0 !important; /* flex-shrink-0 */
    order: 9999 !important; /* order-last */
    margin-top: 1rem !important; /* mt-4 */
}

/* الصورة نفسها */
.woocommerce .cart-item > div:first-child img {
    width: 100% !important; /* w-full */
    height: auto !important; /* h-auto */
}

/* حاوية المعلومات (النص والأزرار) */
.woocommerce .cart-item > div:last-child {
    flex-grow: 1 !important; /* flex-grow */
    display: flex !important; /* flex */
    flex-direction: column !important; /* flex-col */
    justify-content: space-between !important; /* justify-between */
    align-self: stretch !important; /* self-stretch */
    width: 100% !important; /* w-full */
}

/* القسم العلوي (الاسم والسعر) */
.woocommerce .cart-item > div:last-child > div:first-child .flex {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
}

.woocommerce .cart-item > div:last-child > div:first-child h3 {
    font-weight: 600 !important; /* font-semibold */
    padding-right: 0.5rem !important; /* pr-2 */
    width: 100% !important; /* w-full */
}

.woocommerce .cart-item > div:last-child > div:first-child h3 span {
    background-color: #f3f4f6 !important; /* bg-gray-100 */
    color: #374151 !important; /* text-gray-700 */
    font-size: 0.875rem !important; /* text-sm */
    font-weight: 600 !important; /* font-semibold */
    padding: 0.375rem 0.75rem !important; /* px-3 py-1.5 */
    border-radius: 9999px !important; /* rounded-full */
    display: block !important; /* block */
}

/* السعر (للسطح المكتب) */
.woocommerce .cart-item [data-item-total] {
    font-size: 1rem !important; /* text-base */
    font-weight: 700 !important; /* font-bold */
    color: #ffffff !important; /* text-white */
    /* استخدام لونك الأخضر من ملف checkout.css */
    background-color: var(--checkout-accent, #049634) !important; 
    padding: 0.25rem 1rem !important;
    border-radius: 9999px !important; /* rounded-full */
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important; /* shadow-sm */
    white-space: nowrap !important; /* whitespace-nowrap */
    display: none !important; /* hidden */
}

/* السمات (الحجم واللون) */
.woocommerce .cart-item .flex.items-center.flex-wrap {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important; /* flex-wrap */
    gap: 0.5rem !important; /* gap-2 */
    margin-top: 0.5rem !important; /* mt-2 */
}
.woocommerce .cart-item .flex.items-center.flex-wrap span {
    display: flex !important;
    align-items: center !important;
    gap: 0.25rem !important; /* gap-1 */
    background-color: #f3f4f6 !important; /* bg-gray-100 */
    color: #4b5563 !important; /* text-gray-600 */
    font-size: 0.75rem !important; /* text-xs */
    font-weight: 600 !important; /* font-semibold */
    padding: 0.25rem 0.75rem !important; /* px-3 py-1 */
    border-radius: 9999px !important; /* rounded-full */
}
.woocommerce .cart-item .flex.items-center.flex-wrap span i {
    color: #9ca3af !important; /* text-gray-400 */
}
.woocommerce .cart-item .flex.items-center.flex-wrap span .pl-3 {
    padding-left: 0.75rem !important;
}
.woocommerce .cart-item .flex.items-center.flex-wrap span .pr-2 {
    padding-right: 0.5rem !important;
}


/* القسم السفلي (الأزرار والسعر للموبايل) */
.woocommerce .cart-item > div:last-child > div:last-child {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important; /* gap-2 */
    margin-top: auto !important; /* mt-auto */
    padding-top: 1rem !important; /* pt-4 */
    /* استخدام لون البوردر من ملف checkout.css */
    border-top: 1px solid var(--checkout-border, #E2E8F0) !important;
    margin-top: 1rem !important; /* mt-4 */
}

/* حاوية أزرار الكمية */
.woocommerce .cart-item .flex.items-center.border-2 {
    display: flex !important;
    align-items: center !important;
    border-width: 2px !important;
    border-color: #e5e7eb !important; /* border-gray-200 */
    border-radius: 0.5rem !important; /* rounded-lg */
}
.woocommerce .cart-item .quantity-btn {
    padding: 0.25rem 0.5rem !important; /* px-2 py-1 */
    color: #6b7280 !important; /* text-gray-500 */
    background: none !important;
    border: none !important;
}
.woocommerce .cart-item .quantity-btn:hover {
    color: #000000 !important; /* hover:text-black */
}
.woocommerce .cart-item .quantity-input {
    width: 2rem !important; /* w-8 */
    text-align: center !important; /* text-center */
    border: none !important; /* border-none */
    box-shadow: none !important; /* focus:ring-0 */
    background-color: transparent !important; /* bg-transparent */
    padding: 0 !important;
}

/* زر الحذف */
.woocommerce .cart-item .remove-item-btn {
    background-color: #fee2e2 !important; /* bg-red-100 */
    color: #dc2626 !important; /* text-red-600 */
    width: 2.25rem !important; /* w-9 */
    height: 2.25rem !important; /* h-9 */
    border-radius: 0.5rem !important; /* rounded-lg */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition-property: all !important; /* transition-colors */
    transition-duration: 0.3s !important;
    border: none !important;
}
.woocommerce .cart-item .remove-item-btn:hover {
    background-color: #fecaca !important; /* hover:bg-red-200 */
}
.woocommerce .cart-item .remove-item-btn i {
    font-size: 0.875rem !important; /* text-sm */
}

/* السعر (للموبايل) */
.woocommerce .cart-item [data-item-total-mobile] {
    display: block !important; /* block */
    font-size: 1rem !important; /* text-base */
    font-weight: 700 !important; /* font-bold */
    color: #ffffff !important; /* text-white */
    background-color: var(--checkout-accent, #049634) !important;
    padding: 0.375rem 1rem !important; /* px-4 py-1.5 */
    border-radius: 9999px !important; /* rounded-full */
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important; /* shadow-sm */
}

/* =======================================
   CSS RESPONSIVE (sm:)
   ======================================= */
@media (min-width: 640px) {
    .woocommerce .cart-item {
        flex-direction: row !important; /* sm:flex-row */
    }

    /* حاوية الصورة */
    .woocommerce .cart-item > div:first-child {
        width: 8rem !important; /* sm:w-32 */
        height: 8rem !important; /* sm:h-32 */
        order: 1 !important; /* sm:order-first */
        margin-top: 0 !important; /* sm:mt-0 */
    }
    
    /* الصورة نفسها */
    .woocommerce .cart-item > div:first-child img {
        height: 100% !important; /* sm:h-full */
        object-fit: cover !important; /* sm:object-cover */
    }

    /* حاوية المعلومات */
    .woocommerce .cart-item > div:last-child {
        width: auto !important; /* sm:w-auto */
    }
    
    /* اسم المنتج */
    .woocommerce .cart-item > div:last-child > div:first-child h3 {
         width: auto !important; /* sm:w-auto */
    }
    .woocommerce .cart-item > div:last-child > div:first-child h3 span {
        font-size: 1rem !important; /* sm:text-base */
        padding: 0.5rem 1rem !important; /* sm:px-4 sm:py-2 */
        display: inline-block !important; /* sm:inline-block */
    }

    /* السعر (للسطح المكتب) */
    .woocommerce .cart-item [data-item-total] {
        display: block !important; /* sm:block */
        font-size: 1.125rem !important; /* sm:text-lg */
        padding: 0.25rem 1rem !important; /* sm:px-4 */
    }

    /* القسم السفلي */
    .woocommerce .cart-item > div:last-child > div:last-child {
        padding-top: 0.5rem !important; /* sm:pt-2 */
        border-top-width: 0 !important; /* sm:border-t-0 */
        margin-top: 0 !important; /* sm:mt-0 */
    }
    
    /* أزرار الكمية */
    .woocommerce .cart-item .quantity-btn {
         padding: 0.5rem !important; /* sm:p-2 */
    }
    .woocommerce .cart-item .quantity-input {
        width: 2.5rem !important; /* sm:w-10 */
    }
    
    /* زر الحذف */
    .woocommerce .cart-item .remove-item-btn {
        width: 2.5rem !important; /* sm:w-10 */
        height: 2.5rem !important; /* sm:h-10 */
    }
    
    /* السعر (للموبايل) */
    .woocommerce .cart-item [data-item-total-mobile] {
        display: none !important; /* sm:hidden */
    }
}




    .sm\:p-2 {
        padding: 0.7rem !important;
        background-color: #eee;
        border: 10px #000000 !important;
		    height: 50px;
    width: 60px !important;
    }

input.quantity-input.w-8.sm\:w-10.text-center.border-none.focus\:ring-0.bg-transparent {
	background-color: #f7f7f7 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    height: 50px;
    width: 57px !important;
}


button.remove-item-btn.bg-red-100.text-red-600.hover\:bg-red-200.w-9.h-9.sm\:w-10.sm\:h-10.rounded-lg.flex.items-center.justify-center.transition-colors {
        width: 48px !important;
        background-color: #ff000059 !important;
	height: 3.1rem !important;
    }
i.fas.fa-trash-alt.text-sm {
    color: #ef4444;
}

i.fas.fa-trash-alt.fa-fw {
    color: #fff;
}
button#apply-promo-btn {
    height: 51px !important;
}
h2.text-xl.font-bold.flex.items-center {
    color: #fff;
}