/* ============================================
   CART & CHECKOUT STYLES - KAFFETO
   Premium visual improvements
   ============================================ */

/* ============================================
   GLOBAL CART & CHECKOUT
   ============================================ */

.woocommerce-cart,
.woocommerce-checkout {
  font-family: "Montserrat", sans-serif !important;
}

/* ============================================
   CART PAGE (Carrito)
   ============================================ */

/* Cart table improvements */
.woocommerce-cart-form {
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 30px;
}

.woocommerce-cart table.cart {
  border: none !important;
}

.woocommerce-cart table.cart thead {
  background: linear-gradient(135deg, #2d1f1a 0%, #4a3933 100%);
  color: white;
}

.woocommerce-cart table.cart thead th {
  padding: 15px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.5px;
  border: none !important;
}

.woocommerce-cart table.cart tbody td {
  padding: 20px 15px !important;
  border-bottom: 1px solid #e0e0e0 !important;
  vertical-align: middle !important;
}

/* Product thumbnails in cart */
.woocommerce-cart table.cart img {
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Product name styling */
.woocommerce-cart table.cart .product-name a {
  color: #2d1f1a !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color 0.3s ease;
}

.woocommerce-cart table.cart .product-name a:hover {
  color: #c8991e !important;
}

/* Quantity inputs */
.woocommerce-cart table.cart .quantity input {
  border: 2px solid #e0e0e0 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  text-align: center !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 600 !important;
}

.woocommerce-cart table.cart .quantity input:focus {
  border-color: #c8991e !important;
  outline: none !important;
}

/* Remove product button */
.woocommerce-cart table.cart .remove {
  background: #dc3545 !important;
  color: white !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  text-decoration: none !important;
  transition: background 0.3s ease !important;
}

.woocommerce-cart table.cart .remove:hover {
  background: #a71d2a !important;
}

/* Update cart button */
.woo commerce-cart .actions button[name="update_cart"] {
  background: #6c757d !important;
  color: white !important;
  border: none !important;
  padding: 12px 30px !important;
  border-radius: 50px !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background 0.3s ease !important;
}

.woocommerce-cart .actions button[name="update_cart"]:hover {
  background: #545b62 !important;
}

/* Cart totals (Totales del carrito) */
.cart-collaterals .cart_totals {
  background: white !important;
  padding: 30px !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
}

.cart-collaterals .cart_totals h2 {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700 !important;
  color: #c8991e !important;
  font-size: 24px !important;
  margin-bottom: 20px !important;
  text-transform: uppercase !important;
}

.cart-collaterals .cart_totals table {
  border: none !important;
}

.cart-collaterals .cart_totals th,
.cart-collaterals .cart_totals td {
  padding: 12px 15px !important;
  border-top: 1px solid #e0e0e0 !important;
  font-family: "Montserrat", sans-serif !important;
}

.cart-collaterals .cart_totals .order-total th,
.cart-collaterals .cart_totals .order-total td {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #c8991e !important;
  padding: 20px 15px !important;
  border-top: 2px solid #c8991e !important;
}

/* Proceed to checkout button */
.wc-proceed-to-checkout .checkout-button {
  background: linear-gradient(135deg, #c8991e 0%, #e5b03b 100%) !important;
  color: white !important;
  border: none !important;
  padding: 16px 40px !important;
  border-radius: 50px !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(200, 153, 30, 0.3) !important;
  text-decoration: none !important;
  display: inline-block !important;
  text-align: center !important;
}

.wc-proceed-to-checkout .checkout-button:hover {
  background: linear-gradient(135deg, #e5b03b 0%, #c8991e 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(200, 153, 30, 0.4) !important;
}

/* ============================================
   CART COUPON SECTION - PREMIUM STYLING
   ============================================ */

/* Cart coupon form - Premium gold styling */
.coupon.e-cart-section.shop_table,
.woocommerce-cart .coupon {
    background: linear-gradient(135deg, #fff9e6 0%, #fff3d4 100%) !important;
    border: 3px solid #C8991E !important;
    border-radius: 12px !important;
    padding: 25px 30px !important;
    margin-bottom: 25px !important;
    box-shadow: 0 4px 20px rgba(200, 153, 30, 0.3) !important;
}

/* Cart coupon heading */
.coupon.e-cart-section.shop_table h3,
.woocommerce-cart .coupon h3,
.coupon.e-cart-section.shop_table label,
.woocommerce-cart .coupon label {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    color: #C8991E !important;
    margin-bottom: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Cart coupon input */
.coupon.e-cart-section.shop_table input[type="text"],
.woocommerce-cart .coupon input[type="text"],
.coupon.e-cart-section.shop_table .input-text,
.woocommerce-cart .coupon .input-text {
    border: 2px solid #C8991E !important;
    border-radius: 50px !important;
    padding: 12px 20px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    width: 100% !important;
    max-width: 250px !important;
    margin-right: 15px !important;
    transition: all 0.3s ease !important;
}

.coupon.e-cart-section.shop_table input[type="text"]:focus,
.woocommerce-cart .coupon input[type="text"]:focus {
    border-color: #E5B03B !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(200, 153, 30, 0.15) !important;
}

/* Cart coupon button */
.coupon.e-cart-section.shop_table button,
.woocommerce-cart .coupon button,
.coupon.e-cart-section.shop_table .button,
.woocommerce-cart .coupon .button {
    background: linear-gradient(135deg, #C8991E 0%, #E5B03B 100%) !important;
    color: white !important;
    border: none !important;
    padding: 12px 30px !important;
    border-radius: 50px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(200, 153, 30, 0.3) !important;
}

.coupon.e-cart-section.shop_table button:hover,
.woocommerce-cart .coupon button:hover,
.coupon.e-cart-section.shop_table .button:hover,
.woocommerce-cart .coupon .button:hover {
    background: linear-gradient(135deg, #E5B03B 0%, #C8991E 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(200, 153, 30, 0.4) !important;
}

/* Cart coupon form layout */
.coupon.e-cart-section.shop_table form,
.woocommerce-cart .coupon form {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
}

/* Mobile responsive for cart coupon */
@media (max-width: 768px) {
    .coupon.e-cart-section.shop_table,
    .woocommerce-cart .coupon {
        padding: 20px !important;
    }
    
    .coupon.e-cart-section.shop_table input[type="text"],
    .woocommerce-cart .coupon input[type="text"] {
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 10px !important;
    }
    
    .coupon.e-cart-section.shop_table form,
    .woocommerce-cart .coupon form {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .coupon.e-cart-section.shop_table button,
    .woocommerce-cart .coupon button,
    .coupon.e-cart-section.shop_table .button,
    .woocommerce-cart .coupon .button {
        width: 100% !important;
    }
}

/* ============================================
   CHECKOUT PAGE (Finalizar compra)
   ============================================ */

/* Main checkout container */
.woocommerce-checkout {
  padding: 20px 0;
}

/* Checkout form sections */
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700 !important;
  color: #c8991e !important;
  font-size: 20px !important;
  margin-bottom: 20px !important;
  text-transform: uppercase !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid #c8991e !important;
}

/* Form fields */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  border: 2px solid #e0e0e0 !important;
  border-radius: 8px !important;
  padding: 12px 15px !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 14px !important;
  transition: border-color 0.3s ease !important;
  width: 100% !important;
}

.woocommerce-checkout input[type="text"]:focus,
.woocommerce-checkout input[type="email"]:focus,
.woocommerce-checkout input[type="tel"]:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  border-color: #c8991e !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(200, 153, 30, 0.1) !important;
}

/* Form labels */
.woocommerce-checkout label {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 600 !important;
  color: #2d1f1a !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* Required asterisk */
.woocommerce-checkout .required {
  color: #dc3545 !important;
  font-weight: bold !important;
}

/* Order review section (Tu pedido) */
#order_review,
#order_review_heading {
  background: white !important;
  padding: 30px !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
  margin-bottom: 20px !important;
}

#order_review_heading {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700 !important;
  color: #c8991e !important;
  font-size: 24px !important;
  text-transform: uppercase !important;
  padding-bottom: 20px !important;
  border-bottom: 2px solid #c8991e !important;
}

/* Order review table */
.woocommerce-checkout-review-order-table {
  border: none !important;
}

.woocommerce-checkout-review-order-table thead th {
  background: #f8f9fa !important;
  padding: 15px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  letter-spacing: 0.5px !important;
  border-bottom: 2px solid #e0e0e0 !important;
}

.woocommerce-checkout-review-order-table tbody td,
.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td {
  padding: 15px !important;
  border-bottom: 1px solid #e0e0e0 !important;
}

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #c8991e !important;
  padding: 20px 15px !important;
  border-top: 2px solid #c8991e !important;
  border-bottom: none !important;
}

/* Payment methods */
.woocommerce-checkout #payment {
  background: white !important;
  padding: 25px !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
}

.woocommerce-checkout #payment ul.payment_methods {
  border: none !important;
  padding: 0 !important;
}

.woocommerce-checkout #payment ul.payment_methods li {
  background: #f8f9fa !important;
  padding: 15px !important;
  border-radius: 8px !important;
  margin-bottom: 10px !important;
  border: 2px solid transparent !important;
  transition: all 0.3s ease !important;
}

.woocommerce-checkout #payment ul.payment_methods li.payment_method_selected {
  border-color: #c8991e !important;
  background: rgba(200, 153, 30, 0.05) !important;
}

.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
  margin-right: 10px !important;
}

.woocommerce-checkout #payment ul.payment_methods li label {
  font-weight: 600 !important;
  cursor: pointer !important;
}

/* Place order button */
.woocommerce-checkout #place_order {
  background: linear-gradient(135deg, #c8991e 0%, #e5b03b 100%) !important;
  color: white !important;
  border: none !important;
  padding: 18px 40px !important;
  border-radius: 50px !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(200, 153, 30, 0.3) !important;
}

.woocommerce-checkout #place_order:hover {
  background: linear-gradient(135deg, #e5b03b 0%, #c8991e 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(200, 153, 30, 0.4) !important;
}

/* Terms and conditions */
.woocommerce-terms-and-conditions-wrapper {
  background: #f8f9fa !important;
  padding: 15px !important;
  border-radius: 8px !important;
  margin: 20px 0 !important;
}

/* Privacy policy */
.woocommerce-privacy-policy-text {
  font-size: 13px !important;
  color: #6c757d !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .woocommerce-cart-form,
  .cart-collaterals .cart_totals,
  #order_review,
  .woocommerce-checkout #payment {
    padding: 20px !important;
  }

  .cart-collaterals .cart_totals h2,
  #order_review_heading {
    font-size: 20px !important;
  }

  .woocommerce-cart table.cart thead {
    display: none !important;
  }

  .woocommerce-cart table.cart tbody td {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: 10px !important;
  }

  .woocommerce-cart table.cart tbody td::before {
    content: attr(data-title) ": " !important;
    font-weight: 600 !important;
    display: inline-block !important;
    margin-right: 10px !important;
  }
}

/* ============================================
   LOADING STATES & ANIMATIONS
   ============================================ */

.woocommerce-cart .woocommerce-cart-form.processing,
.woocommerce-checkout.processing {
  opacity: 0.6 !important;
  pointer-events: none !important;
}

/* Smooth transitions */
.woocommerce-cart table.cart tbody td,
.woocommerce-checkout input,
.woocommerce-checkout select,
button {
  transition: all 0.3s ease !important;
}

/* ============================================
   COUPON SECTION - ALWAYS VISIBLE & HIGHLIGHTED
   ============================================ */

/* Coupon form wrapper - Always expanded */
.woocommerce-form-coupon-toggle {
  display: none !important; /* Hide the toggle link */
}

.checkout_coupon {
  display: block !important; /* Always show the form */
  opacity: 1 !important;
  visibility: visible !important;
  max-height: none !important;
  overflow: visible !important;
  background: linear-gradient(135deg, #fff9e6 0%, #fff3d4 100%) !important;
  border: 3px solid #c8991e !important;
  border-radius: 12px !important;
  padding: 30px !important;
  margin-bottom: 30px !important;
  box-shadow: 0 4px 20px rgba(200, 153, 30, 0.2) !important;
  position: relative !important;
}

/* Coupon title/heading */
.checkout_coupon h3,
.checkout_coupon .woocommerce-info {
  display: none !important; /* Hide default messages */
}

/* Add custom prominent heading */
.checkout_coupon::before {
  content: "🎁 ¿Tienes un cupón de descuento?";
  display: block;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  color: #c8991e !important;
  margin-bottom: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Coupon input field */
.checkout_coupon input[type="text"] {
  border: 2px solid #c8991e !important;
  border-radius: 50px !important;
  padding: 14px 20px !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  width: 100% !important;
  max-width: 300px !important;
  margin-right: 15px !important;
  transition: all 0.3s ease !important;
}

.checkout_coupon input[type="text"]:focus {
  border-color: #e5b03b !important;
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(200, 153, 30, 0.15) !important;
}

.checkout_coupon input[type="text"]::placeholder {
  color: #999 !important;
  font-style: italic;
}

/* Apply coupon button */
.checkout_coupon button[type="submit"],
.checkout_coupon .button {
  background: linear-gradient(135deg, #c8991e 0%, #e5b03b 100%) !important;
  color: white !important;
  border: none !important;
  padding: 14px 35px !important;
  border-radius: 50px !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(200, 153, 30, 0.3) !important;
}

.checkout_coupon button[type="submit"]:hover,
.checkout_coupon .button:hover {
  background: linear-gradient(135deg, #e5b03b 0%, #c8991e 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(200, 153, 30, 0.4) !important;
}

/* Coupon form paragraph */
.checkout_coupon p {
  margin: 0 !important;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

/* Icon/badge style for extra visibility */
.checkout_coupon::after {
  content: "💰 Ahorra dinero";
  position: absolute;
  top: 25px;
  right: 25px;
  background: #c8991e;
  color: white;
  padding: 6px 15px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .checkout_coupon {
    padding: 20px !important;
  }

  .checkout_coupon::before {
    font-size: 16px !important;
  }

  .checkout_coupon::after {
    position: static;
    display: inline-block;
    margin-bottom: 15px;
  }

  .checkout_coupon input[type="text"] {
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 10px !important;
  }

  .checkout_coupon p {
    flex-direction: column;
    align-items: stretch;
  }

  .checkout_coupon button[type="submit"],
  .checkout_coupon .button {
    width: 100% !important;
  }
}

/* ============================================
   ELEMENTOR PRO CHECKOUT - COUPON BOX
   ============================================ */

/* Elementor coupon box - Premium styling when visible */
.e-coupon-box {
  /* Don't force display, let Elementor handle toggle */
  background: linear-gradient(135deg, #fff9e6 0%, #fff3d4 100%) !important;
  border: 3px solid #c8991e !important;
  border-radius: 12px !important;
  padding: 30px !important;
  margin-bottom: 30px !important;
  box-shadow: 0 4px 20px rgba(200, 153, 30, 0.3) !important;
  position: relative !important;
}

/* Style the toggle/anchor link - Make it more prominent */
.e-coupon-anchor,
.e-coupon-anchor a {
  background: linear-gradient(135deg, #fff9e6 0%, #fff3d4 100%) !important;
  border: 2px solid #c8991e !important;
  border-radius: 8px !important;
  padding: 15px 25px !important;
  margin-bottom: 20px !important;
  display: inline-block !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  color: #c8991e !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.e-coupon-anchor:hover,
.e-coupon-anchor a:hover {
  background: linear-gradient(135deg, #c8991e 0%, #e5b03b 100%) !important;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(200, 153, 30, 0.3);
}

/* Elementor coupon box title */
.e-coupon-box .e-coupon-box-heading,
.e-coupon-box h3,
.e-coupon-box .woocommerce-info {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  color: #c8991e !important;
  margin-bottom: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Elementor coupon input */
.e-coupon-box input[type="text"],
.e-coupon-box .input-text {
  border: 2px solid #c8991e !important;
  border-radius: 50px !important;
  padding: 14px 20px !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  width: 100% !important;
  max-width: 300px !important;
  margin-right: 15px !important;
  transition: all 0.3s ease !important;
}

.e-coupon-box input[type="text"]:focus,
.e-coupon-box .input-text:focus {
  border-color: #e5b03b !important;
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(200, 153, 30, 0.15) !important;
}

/* Elementor coupon button */
.e-coupon-box button,
.e-coupon-box .button,
.e-coupon-box input[type="submit"] {
  background: linear-gradient(135deg, #c8991e 0%, #e5b03b 100%) !important;
  color: white !important;
  border: none !important;
  padding: 14px 35px !important;
  border-radius: 50px !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(200, 153, 30, 0.3) !important;
}

.e-coupon-box button:hover,
.e-coupon-box .button:hover,
.e-coupon-box input[type="submit"]:hover {
  background: linear-gradient(135deg, #e5b03b 0%, #c8991e 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(200, 153, 30, 0.4) !important;
}

/* Elementor form wrapper */
.e-coupon-box form,
.e-coupon-box .woocommerce-form-coupon {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  flex-wrap: wrap !important;
}

/* Mobile responsive for Elementor */
@media (max-width: 768px) {
  .e-coupon-box {
    padding: 20px !important;
  }

  .e-coupon-box::before {
    font-size: 16px !important;
  }

  .e-coupon-box::after {
    position: static;
    display: inline-block;
    margin-bottom: 15px;
  }

  .e-coupon-box input[type="text"],
  .e-coupon-box .input-text {
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 10px !important;
  }

  .e-coupon-box form,
  .e-coupon-box .woocommerce-form-coupon {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .e-coupon-box button,
  .e-coupon-box .button,
  .e-coupon-box input[type="submit"] {
    width: 100% !important;
  }
}