/*
Theme Name: Flatsome Child
Theme URI: https://example.com
Description: Custom styling for WooCommerce cart, checkout and product UI.
Author: Developer
Template: flatsome
Version: 1.0
Text Domain: flatsome-child

NOTE FOR FUTURE DEVELOPMENT
-------------------------------------------------------
This file contains UI customizations for:

- Cart page
- Checkout page
- WooCommerce discounts
- Product cards
- Variable products

All sections are separated using searchable markers.

Quick search keywords:

=== CART ===
=== CHECKOUT ===
=== DISCOUNT ===
=== PRODUCT CARD ===
=== ADD TO CART BUTTON ===
=== VARIABLE PRODUCT ===

This helps navigating large CSS files quickly.
-------------------------------------------------------
*/


/* =====================================================
   TABLE OF CONTENTS
-------------------------------------------------------
01. CART PAGE BASE
02. CART PROGRESS BAR
03. CART PRODUCT CARD
04. CART QUANTITY BUTTONS
05. CART SIDEBAR TOTALS
06. CHECKOUT BUTTON
07. COUPON INPUT
08. PLACE ORDER BUTTON
09. CHECKOUT SIDEBAR BOX
10. BILLING FIELDS BOX
11. CHECKOUT INPUT STYLE
12. SHIPPING ADDRESS BOX
13. ORDER NOTES
14. HIDE CART COUPON
15. SALE BADGE & PRICES
16. DISCOUNT ROWS
17. SUBTOTAL DISPLAY
18. ADD TO CART SMALL BUTTON
19. PRODUCT CARD BOTTOM
20. VARIABLE PRODUCT STYLE
===================================================== */



/* =====================================================
   === CART ===
   01. CART PAGE BASE
===================================================== */

/* ====================== سبد خرید مدرن - Flatsome ====================== */
/* تخفیف با رنگ قرمز */


/* ==================== سبد خرید مدرن داروخانه دانا ==================== */

body.woocommerce-cart {
    background: #f8fafc;
}



/* =====================================================
   === CART ===
   02. CART PROGRESS BAR
===================================================== */

.cart-progress, .woocommerce-checkout .steps, .page-header {
    display: flex !important;
    justify-content: center;
    gap: 20px;
    margin: 40px 0 50px !important;
    font-size: 16px;
}

.step {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #666;
    font-weight: 500;
}

.step.active {
    color: #15803d;
    font-weight: 700;
}

.step:after {
    content: "→";
    margin-right: 10px;
    color: #ddd;
}



/* =====================================================
   === CART ===
   03. CART PRODUCT CARD
===================================================== */

.woocommerce-cart-form .cart_item {
    background: #fff;
    border-radius: 20px;
    padding: 24px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    margin-bottom: 20px;
    transition: all 0.4s ease;
}

.woocommerce-cart-form .cart_item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(21, 128, 61, 0.18) !important;
}

/* تصویر محصول */

.woocommerce-cart-form .product-thumbnail img {
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}



/* =====================================================
   === CART ===
   04. QUANTITY BUTTONS
===================================================== */

.quantity {
    background: #f1f5f9;
    border-radius: 9999px;
    padding: 4px !important;
}

.quantity input, .quantity button {
    border-radius: 9999px !important;
    font-weight: 600;
}



/* =====================================================
   === CART ===
   05. CART SIDEBAR TOTALS
===================================================== */

.cart-collaterals .cart_totals {
    background: #fff;
    border-radius: 24px;
    padding: 24px !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
    position: sticky;
    top: 30px;
}



/* =====================================================
   === CHECKOUT ===
   06. CHECKOUT BUTTON
===================================================== */

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
button[name="proceed"] {
    background: linear-gradient(135deg, #15803d, #10b981) !important;
    color: white !important;
    padding: 20px 0 !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    border-radius: 9999px !important;
    box-shadow: 0 10px 30px rgba(21, 128, 61, 0.35) !important;
    transition: all 0.3s;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(21, 128, 61, 0.45);
}



/* =====================================================
   === CHECKOUT ===
   07. COUPON INPUT
===================================================== */

.coupon-section input {
    border-radius: 9999px 0 0 9999px !important;
    height: 55px;
}

.coupon-section button {
    border-radius: 0 9999px 9999px 0 !important;
    height: 55px;
}



/* =====================================================
   === CHECKOUT ===
   08. PLACE ORDER BUTTON
===================================================== */

button#place_order {
    background: linear-gradient(135deg, #15803d, #10b981);
    padding: 20px 0 !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    border-radius: 9999px !important;
    box-shadow: 0 10px 30px rgba(21, 128, 61, 0.35) !important;
    transition: all 0.3s;
}



/* =====================================================
   === CHECKOUT ===
   09. CHECKOUT SIDEBAR BOX
===================================================== */

.woocommerce-checkout .large-5.col .col-inner.is-well {
    background-color: #f6f6f6 !important;
    border-radius: 40px !important;
    padding: 8px !important;
    max-width: 92%;
    margin: 0 auto;
    border: none !important;
}

.checkout-sidebar {
    
    background: #fff;
    border-radius: 24px;
    padding: 24px !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
    top: 30px;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 20px !important;
    z-index: 99;
}



/* =====================================================
   === CHECKOUT ===
   10. BILLING FIELDS BOX
===================================================== */

.woocommerce-billing-fields{
	background: #fff;
    border-radius: 24px !important;
    padding: 24px !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
    position: sticky;
    top: 30px;
}



/* =====================================================
   === CHECKOUT ===
   11. CHECKOUT INPUT STYLE
===================================================== */

/* گرد کردن همه فیلدهای فرم تسویه حساب ووکامرس */
/* گرد کردن همه فیلدها (متن، شماره، ایمیل، textarea و ...) */

.woocommerce-checkout .woocommerce-billing-fields input.input-text,
.woocommerce-checkout .woocommerce-billing-fields textarea,
.woocommerce-checkout .form-row .input-text {
    border-radius: 12px !important;
    -webkit-border-radius: 12px !important;
    -moz-border-radius: 12px !important;
    overflow: hidden;
}

.woocommerce-checkout .woocommerce-billing-fields select,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single {
    border-radius: 12px !important;
    -webkit-border-radius: 12px !important;
    -moz-border-radius: 12px !important;
    overflow: hidden;
}

.woocommerce-checkout .select2-container .select2-selection--single {
    border: 1px solid #ddd !important;
    height: 45px !important;
    display: flex;
    align-items: center;
}

.woocommerce-checkout .select2-container .select2-selection__rendered {
    line-height: 45px !important;
}

.woocommerce-checkout .select2-container .select2-selection__arrow {
    height: 45px !important;
}



/* =====================================================
   === DISCOUNT ===
   15. SALE BADGE & PRICES
===================================================== */

.on-sale-badge {
    background: #dcfce7;
    color: #15803d;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
}

.cart-regular-price,
.cart-regular-price .amount{
    color:#dc2626 !important;
    text-decoration: line-through;
    text-decoration-color:#dc2626;
}

.cart-sale-price{
    font-weight:700;
    color:#111;
    display:flex;
    align-items:center;
    gap:6px;
}

.cart-discount-badge{
    background:#dcfce7;
    color:#15803d;
    font-size:11px;
    padding:2px 8px;
    border-radius:999px;
    font-weight:700;
}



/* =====================================================
   === ADD TO CART BUTTON ===
   18. SMALL ADD TO CART
===================================================== */

.custom-add-to-cart-circle {
    width: 25px !important;
    height: 25px !important;

    padding: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    background-color: #8a2be2;
    color: #fff !important;

    font-size: 18px !important;
    font-weight: bold;

    border-radius: 4px;

    position: absolute;
    bottom: 10px;
    left: 10px;

    transition: 0.2s ease;
}

.custom-add-to-cart-circle:hover {
    background-color: #741ec7;
    transform: scale(1.1);
}

.box-text {
    position: relative;
}



/* =====================================================
   === PRODUCT CARD ===
   19. PRODUCT CARD BOTTOM
===================================================== */

.product-small .box-text {
    border-radius: 12px !important;
    overflow: hidden !important;
}



/* =====================================================
   === VARIABLE PRODUCT ===
   20. VARIABLE PRODUCT STYLE
===================================================== */

.single-product .summary {
    background: #f4f8f4 !important;
    border-radius: 16px !important;
    padding: 25px !important;
    border: 1px solid #e0e6e0 !important;
}

.variations_form .variable-item {
    border: 1px solid #ddd !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    transition: 0.2s ease;
}

.variations_form .variable-item.selected {
    background: #8a2be2 !important;
    color: white !important;
    border-color: #8a2be2 !important;
}




/* حذف کل باکس قیمت پایین */
.single-product .single_variation {
    display: none !important;
}
/* 💠 حالت عادی دکمه‌های انتخاب وارییشن */
.vi-wpvs-option-wrap {
  background: #fff !important;
  border: 1px solid #ccc !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  margin: 3px !important;
  color: #333 !important;
  font-size: 14px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
  transition: all 0.25s ease-in-out !important;
  cursor: pointer !important;
}

/* 💜 حالت هاور */
.vi-wpvs-option-wrap:hover {
  border-color: #8a2be2 !important;
  box-shadow: 0 4px 8px rgba(138, 43, 226, 0.15) !important;
}

/* 💜 حالت انتخاب‌شده */
.vi-wpvs-option-wrap.vi-wpvs-option-wrap-selected {
  background: #8a2be2 !important;
  color: #fff !important;
  border-color: #8a2be2 !important;
  box-shadow: 0 4px 10px rgba(138, 43, 226, 0.25) !important;
}

/* 💅🏻 عدد داخل دکمه (مثل 70ml یا 160ml) */
.vi-wpvs-option-wrap span {
  font-weight: 500 !important;
  color: inherit !important;
}

/* 📱 واکنش‌گرا: اندازه در موبایل کمی کوچکتر */
@media (max-width: 480px) {
  .vi-wpvs-option-wrap {
    padding: 6px 10px !important;
    font-size: 13px !important;
  }
}