/* ==========================================================================
   فایل جامع استایل‌های سبد خرید و تسویه حساب (کلینیک علوم شناختی)
   نسخه نهایی - گلس‌مورفیسم + گرید جادویی + ریسپانسیو کامل
   ========================================================================== */


/* =========================================
   ۱. نابود کردن عناصر مزاحم پیش‌فرض ووکامرس
   ========================================= */
/* حذف دکمه آپدیت سبد خرید (چون اتوماتیک با جاوااسکریپت آپدیت میشه) */
.woocommerce-cart table.cart button[name="update_cart"] { display: none !important; }

/* حذف دکمه مزاحم "مشاهده سبد خرید" بعد از افزودن محصول به سبد */
a.added_to_cart.wc-forward { display: none !important; }

/* حذف هدرهای اضافی و فرم کوپن دیفالت در صفحه پرداخت */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout h3#ship-to-different-address,
.woocommerce-checkout .shipping_address { 
    display: none !important; 
}


/* =========================================
   ۲. پیام‌های سیستمی ووکامرس (الرت‌ها و سبد خالی)
   ========================================= */
/* باکس پیام سیستم (مثلاً "محصول پاک شد") */
.woocommerce-message {
    background: rgba(16, 185, 129, 0.1) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    border-radius: 16px !important;
    color: #0f172a !important;
    padding: 16px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-family: "MyClinicFont", tahoma, sans-serif !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 25px !important;
}
.woocommerce-message::before { display: none !important; } /* حذف آیکون تیک دیفالت */

/* دکمه "بازگردانی" داخل پیام */
.woocommerce-message .restore-item {
    background: #10b981 !important;
    color: #ffffff !important;
    padding: 8px 20px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
    margin-right: 15px !important;
    white-space: nowrap !important;
}
.woocommerce-message .restore-item:hover {
    background: #059669 !important;
    box-shadow: 0 5px 12px rgba(16, 185, 129, 0.3) !important;
    transform: translateY(-2px) !important;
}

/* پیام "سبد خرید خالی است" */
.cart-empty.woocommerce-info {
    background: rgba(2, 132, 199, 0.05) !important;
    border: 1px dashed rgba(2, 132, 199, 0.3) !important;
    border-radius: 20px !important;
    color: #1e293b !important;
    padding: 40px 20px !important;
    text-align: center !important;
    font-family: "MyClinicFont", tahoma, sans-serif !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02) !important;
    margin: 40px auto 20px !important;
    max-width: 600px !important;
    font-size: 1.1rem !important;
    line-height: 1.9 !important;
    display: block !important;
}
.cart-empty.woocommerce-info::before { display: none !important; }

/* استایل دکمه گلوبال "بازگشت به فروشگاه" */
.woocommerce a.button.wc-backward,
.woocommerce-page a.button.wc-backward,
a.button.wc-backward,
p.return-to-shop .button.wc-backward {
    background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
    color: #ffffff !important;
    padding: 14px 35px !important;
    border-radius: 14px !important;
    font-family: "MyClinicFont", tahoma, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    margin-top: 10px !important;
}
.woocommerce a.button.wc-backward:hover,
.woocommerce-page a.button.wc-backward:hover,
a.button.wc-backward:hover,
p.return-to-shop .button.wc-backward:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.4) !important;
    color: #ffffff !important;
}
p.return-to-shop { text-align: center !important; margin-bottom: 50px !important; }


/* =========================================
   ۳. صفحه سبد خرید (Cart Page)
   ========================================= */
.woocommerce-cart .woocommerce {
    display: flex;
    flex-wrap: wrap !important;
    flex-direction: column;
    gap: 30px;
    font-family: 'MyClinicFont', tahoma, sans-serif !important;
    background-color: transparent !important;
    padding: 20px 0;
}

@media (min-width: 992px) {
    .woocommerce-cart .woocommerce { flex-direction: row; align-items: flex-start; padding: 40px 20px; }
    .woocommerce-cart .woocommerce-cart-form { flex: 1 1 65%; }
    .woocommerce-cart .cart-collaterals { flex: 1 1 32%; position: sticky; top: 40px; }
}

/* افکت گلس‌مورفیسم برای باکس‌های سبد خرید */
.woocommerce-cart .woocommerce-cart-form, 
.woocommerce-cart .cart-collaterals {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(16, 44, 87, 0.08);
    border-radius: 24px !important;
    padding: 35px !important;
    box-shadow: 0 10px 30px rgba(16, 44, 87, 0.03) !important;
}

/* جدول محصولات سبد خرید */
.woocommerce-cart table.shop_table { width: 100%; border: none !important; margin: 0 !important; border-collapse: collapse; }
.woocommerce-cart table.shop_table th { background: transparent !important; color: #102c57 !important; border-bottom: 2px solid rgba(16, 44, 87, 0.1) !important; padding: 0 10px 15px 10px !important; font-size: 14px; font-weight: 800; text-align: right; }
.woocommerce-cart table.shop_table td { background: transparent !important; border-top: none !important; border-bottom: 1px solid rgba(16, 44, 87, 0.05) !important; padding: 20px 10px !important; vertical-align: middle; color: #334155; }

/* عکس و نام محصول در سبد */
.woocommerce-cart table.cart .product-thumbnail img { border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); width: 80px !important; height: auto; }
.woocommerce-cart table.cart .product-name a { color: #102c57 !important; font-weight: 800; font-size: 16px; text-decoration: none; transition: 0.3s; }
.woocommerce-cart table.cart .product-name a:hover { color: #f8571e !important; }

/* دکمه حذف محصول از سبد (ضربدر قرمز) */
.woocommerce-cart table.cart .product-remove a.remove { color: #ffffff !important; background: #ef4444 !important; border-radius: 50%; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; font-size: 18px; font-weight: bold; text-decoration: none; transition: 0.3s; box-shadow: 0 3px 8px rgba(239, 68, 68, 0.2); }
.woocommerce-cart table.cart .product-remove a.remove:hover { background: #102c57 !important; transform: scale(1.1); }

/* تعداد (Quantity) */
.woocommerce-cart .quantity input.qty { width: 70px !important; padding: 10px !important; border: 1px solid rgba(16, 44, 87, 0.15) !important; border-radius: 10px !important; background: #ffffff; color: #102c57; font-weight: 800; text-align: center; font-size: 15px; }
.woocommerce-cart .quantity input.qty:focus { border-color: #f8571e !important; outline: none; }

/* باکس جمع کل (Totals) */
.woocommerce-cart .cart_totals{width:100% !important;}
.woocommerce-cart .cart_totals h2 { color: #102c57; font-size: 20px; font-weight: 900; border-bottom: 2px solid rgba(16, 44, 87, 0.1); padding-bottom: 15px; margin-bottom: 20px; }
.woocommerce-cart .cart_totals table th { color: #64748b; font-weight: bold; background: transparent !important; }
.woocommerce-cart .cart_totals table td { text-align: left; color: #102c57; font-weight: 400; font-size: 18px; background: transparent !important; }

/* دکمه نارنجی ادامه جهت تسویه حساب */
.woocommerce-cart .checkout-button { background: linear-gradient(135deg, #f8571e 0%, #d94814 100%) !important; color: #ffffff !important; border-radius: 14px !important; padding: 16px !important; font-size: 17px !important; font-weight: 900 !important; text-align: center !important; display: block; width: 100%; transition: 0.3s !important; box-shadow: 0 8px 20px rgba(248, 87, 30, 0.25) !important; margin-top: 15px; }
.woocommerce-cart .checkout-button:hover { transform: translateY(-2px) !important; box-shadow: 0 10px 25px rgba(248, 87, 30, 0.35) !important; }


/* =========================================
   ۴. استایل فیلد کشویی کد تخفیف در سبد خرید
   ========================================= */
.clinic-coupon-wrapper { margin-top: 20px; padding-top: 15px; border-top: 1px dashed rgba(16, 44, 87, 0.15); width: 100%; }
.clinic-coupon-toggle { cursor: pointer; color: #102c57; font-weight: 800; font-size: 14px; display: flex; align-items: center; gap: 10px; transition: 0.3s; }
.clinic-coupon-toggle span { background: rgba(168, 85, 247, 0.1); color: #a855f7; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 16px; }
.clinic-coupon-toggle b { margin-right: auto; font-size: 11px; color: #64748b; background: #f1f5f9; padding: 4px 10px; border-radius: 20px; font-weight: normal; }
.clinic-coupon-toggle:hover { color: #f8571e; }
.woocommerce-cart .coupon { display: flex !important; flex-direction: row !important; gap: 0 !important; width: 100%; margin-top: 15px !important; padding: 0 !important; border: none !important; }
.woocommerce-cart .coupon input.input-text { flex: 1; border: 1px solid rgba(16, 44, 87, 0.15) !important; border-left: none !important; border-radius: 0 12px 12px 0 !important; padding: 12px 15px !important; margin: 0 !important; height: 48px !important; font-family: inherit; }
.woocommerce-cart .coupon button.button { width: auto !important; border-radius: 12px 0 0 12px !important; padding: 0 25px !important; margin: 0 !important; height: 48px !important; background: #102c57 !important; color: #fff !important; font-weight: bold !important; border: none !important; transition: 0.3s; }
.woocommerce-cart .coupon button.button:hover { background: #f8571e !important; }


/* =========================================
   ۵. هدر اختصاصی و استایل محصولات پیشنهادی
   ========================================= */
.clinic-cart-header-box, .woocommerce-notices-wrapper { width: 100% !important; flex: 0 0 100% !important; }
.clinic-cart-header-box { display: flex; align-items: center; background: #ffffff; border: 1px solid rgba(16, 44, 87, 0.05); border-radius: 20px; padding: 25px 35px; margin-bottom: 25px; box-shadow: 0 8px 25px rgba(16, 44, 87, 0.03); position: relative; overflow: hidden; }
.clinic-cart-header-box::before { content: ""; position: absolute; top: -30px; right: -30px; width: 100px; height: 100px; background: #a855f7; filter: blur(50px); opacity: 0.1; z-index: 0; }
.clinic-cart-header-box .cart-header-icon { background: rgba(168, 85, 247, 0.08); padding: 15px; border-radius: 16px; margin-left: 20px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.clinic-cart-header-box .cart-header-text { position: relative; z-index: 1; }
.clinic-cart-header-box .cart-header-text h2 { color: #102c57; font-size: 22px; font-weight: 900; margin-bottom: 5px; padding: 0; border: none; }
.clinic-cart-header-box .cart-header-text p { color: #64748b; font-size: 14px; font-weight: 500; margin: 0; }
.clinic-empty-cart-products ul.products li.product { background: #ffffff !important; border-radius: 16px !important; border: 1px solid rgba(16, 44, 87, 0.08) !important; }


/* =========================================
   ۶. ریسپانسیو و گرید جادویی صفحه تسویه حساب (Checkout)
   ========================================= */

/* کانتینر اصلی فرم تسویه حساب - تبدیل به یک کارت یکپارچه */
.woocommerce-checkout form.checkout {
    background: #ffffff;
    border: 1px solid rgba(16, 44, 87, 0.08);
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(16, 44, 87, 0.04);
    margin-top: 30px;
    font-family: 'MyClinicFont', tahoma, sans-serif !important;
    
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* دو ستون مساوی */
    grid-template-areas:
        "details review_heading"
        "details review_table"
        "payment review_table"
        "payment .";
    gap: 20px 50px;
    align-items: start;
}

/* باکس اطلاعات کاربر (سمت راست فرم پرداخت) */
.woocommerce-checkout #customer_details {
    grid-area: details;
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.woocommerce-checkout #customer_details h3 {
    text-align: center;
    font-size: 20px;
    font-weight: 900;
    color: #102c57;
    margin-bottom: 30px;
    border: none !important;
    padding: 0 !important;
}

/* جادوی مخفی کردن کانتینر والد فاکتور جهت اجرای دقیق گرید */
.woocommerce-checkout #order_review {
    display: contents !important;
}

/* هدر خلاصه سفارش (سمت چپ فرم پرداخت) */
.woocommerce-checkout #order_review_heading {
    grid-area: review_heading;
    background: #102c57;
    color: #ffffff !important;
    padding: 18px 25px !important;
    border-radius: 16px 16px 0 0 !important;
    font-size: 18px !important;
    font-weight: 800;
    text-align: right;
    margin: 0 !important;
    border: none !important;
}

/* جدول فاکتور (سمت چپ زیر هدر) */
.woocommerce-checkout table.shop_table {
    grid-area: review_table;
    border: 1px solid #e2e8f0 !important;
    border-top: none !important;
    border-radius: 0 0 16px 16px !important;
    margin: 0 !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
.woocommerce-checkout table.shop_table th, 
.woocommerce-checkout table.shop_table td {
    border-bottom: 1px dashed #e2e8f0 !important;
    padding: 18px 20px !important;
    background: transparent !important;
    color: #102c57;
}
.woocommerce-checkout table.shop_table tfoot tr:last-child th,
.woocommerce-checkout table.shop_table tfoot tr:last-child td {
    border-bottom: none !important;
    font-size: 18px;
    font-weight: 900;
}

/* بخش انتخاب درگاه پرداخت (زیر اطلاعات گیرنده - سمت راست) */
.woocommerce-checkout #payment {
    grid-area: payment;
    background: transparent !important;
    padding: 0 !important;
    margin-top: 10px;
}
.woocommerce-checkout #payment ul.payment_methods {
    padding: 0 !important;
    border: none !important;
}
.woocommerce-checkout #payment ul.payment_methods li {
    background: #f1f5f9 !important; /* پس زمینه طوسی */
    border-radius: 16px !important;
    padding: 20px !important;
    margin-bottom: 15px !important;
    border: 1px solid #e2e8f0 !important;
}
.woocommerce-checkout #payment div.payment_box {
    background: transparent !important;
    padding: 10px 0 0 0 !important;
    margin: 0 !important;
    color: #64748b !important;
    font-size: 13px !important;
}
.woocommerce-checkout #payment div.payment_box::before { display: none !important; }

/* دکمه نهایی "پرداخت با زرین پال" */
.woocommerce-checkout #place_order {
    background: linear-gradient(135deg, #f8571e 0%, #d94814 100%) !important;
    color: #ffffff !important;
    border-radius: 14px !important;
    padding: 20px !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    text-align: center !important;
    display: block;
    width: 100%;
    margin-top: 25px !important;
    border: none;
    transition: all 0.3s ease !important;
    box-shadow: 0 8px 25px rgba(248, 87, 30, 0.25) !important;
    letter-spacing: 0 !important;
    font-family: inherit;
}
.woocommerce-checkout #place_order:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 30px rgba(248, 87, 30, 0.35) !important;
}

/* زیباسازی فیلدهای ورودی (نام، موبایل) در تسویه حساب */
.woocommerce-checkout .form-row { padding: 0 !important; margin-bottom: 25px !important; }
.woocommerce-checkout .form-row label {
    font-weight: 800 !important;
    color: #334155 !important;
    margin-bottom: 10px !important;
    display: block;
    font-size: 14px;
}
.woocommerce-checkout .form-row.validate-required label abbr { color: #ef4444 !important; text-decoration: none; margin-right: 4px; }
.woocommerce-checkout .form-row input.input-text {
    width: 100% !important;
    padding: 16px 20px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: #102c57 !important;
    font-size: 15px !important;
    font-family: inherit !important;
    transition: 0.3s;
    box-shadow: none !important;
}
.woocommerce-checkout .form-row input.input-text:focus {
    border-color: #a855f7 !important;
    box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.1) !important;
    outline: none;
}
.woocommerce-checkout .form-row-first { width: 100% !important; float: right !important; }
.woocommerce-checkout .form-row-last { width: 100% !important; float: left !important; clear: none !important; }


/* =========================================
   ۷. ریسپانسیو فوق حرفه‌ای موبایل (سبد خرید + پرداخت)
   ========================================= */
@media (max-width: 992px) {
    /* سبد خرید در موبایل */
    .woocommerce-cart .woocommerce { gap: 15px !important; padding: 10px 0 !important; }
    .woocommerce-cart .woocommerce-cart-form, .woocommerce-cart .cart-collaterals { padding: 15px !important; border-radius: 16px !important; }
    .clinic-cart-header-box { padding: 20px 15px; text-align: center; flex-direction: column; }
    .clinic-cart-header-box .cart-header-icon { margin-left: 0; margin-bottom: 12px; padding: 12px; }
    .clinic-cart-header-box .cart-header-icon svg { width: 30px; height: 30px; }
    .clinic-cart-header-box .cart-header-text h2 { font-size: 18px; }
    .clinic-cart-header-box .cart-header-text p { font-size: 13px; }
    .woocommerce-cart .cart_totals h2 { font-size: 18px; margin-bottom: 15px; padding-bottom: 10px; }

    /* تغییر شکل جدول سبد خرید در موبایل (بلاک بندی) */
    .woocommerce-cart table.shop_table thead { display: none !important; }
    .woocommerce-cart table.shop_table tbody tr { display: flex; flex-direction: column; background: #ffffff; border-radius: 12px; padding: 15px; margin-bottom: 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.03); position: relative; border: 1px solid rgba(16, 44, 87, 0.05); }
    .woocommerce-cart table.shop_table tbody td { display: flex !important; justify-content: space-between !important; align-items: center !important; border: none !important; padding: 8px 0 !important; border-bottom: 1px solid rgba(16, 44, 87, 0.03) !important; text-align: left; font-size: 14px !important; }
    .woocommerce-cart table.shop_table tbody td:last-child { border-bottom: none !important; }
    .woocommerce-cart table.shop_table tbody td::before { content: attr(data-title); font-weight: 800; color: #64748b; font-size: 13px; }
    
    .woocommerce-cart table.shop_table tbody td.product-thumbnail { position: relative; justify-content: center !important; padding-top: 15px !important; margin-bottom: 10px; }
    .woocommerce-cart table.shop_table tbody td.product-thumbnail::before { display: none; }
    .woocommerce-cart table.cart .product-thumbnail img { width: 80px !important; margin: 0 auto; display: block; }
    .woocommerce-cart table.shop_table tbody td.product-remove { position: absolute; top: 5px; right: calc(50% - 48px); padding: 0 !important; border: none !important; z-index: 10; width: auto !important; }
    .woocommerce-cart table.cart .product-remove a.remove { width: 22px !important; height: 22px !important; line-height: 20px !important; font-size: 14px !important; background: #ffffff !important; color: #ef4444 !important; box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important; border: 1px solid #fef2f2 !important; }
    .woocommerce-cart .quantity input.qty { width: 80px !important; padding: 12px !important; font-size: 16px !important; }
    .woocommerce-cart .coupon button.button { padding: 0 15px !important; font-size: 13px !important; }

    /* تسویه حساب در موبایل (تبدیل به تک ستون و تغییر ترتیب) */
    .woocommerce-checkout form.checkout {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "details"
            "payment"
            "review_heading"
            "review_table";
        padding: 25px;
        gap: 0;
    }
    
    .woocommerce-checkout .form-row-first, 
    .woocommerce-checkout .form-row-last {
        width: 100% !important;
        float: none !important;
    }

    .woocommerce-checkout #payment {
        margin-bottom: 40px !important;
    }

    .woocommerce-checkout #order_review_heading {
        margin-top: 30px !important;
    }
}
@media (max-width: 480px) {
    .woocommerce-message { flex-direction: column !important; text-align: center !important; gap: 15px !important; }
    .woocommerce-message .restore-item { margin-right: 0 !important; width: 100% !important; text-align: center !important; }
}