/* ============================================
   WooCommerce Cart Page
   ============================================ */

/* ── Cart Layout ── */
.woocommerce-cart .woocommerce {
   padding: 2rem 0;
}

/* ── Cart Form Card ── */
.woocommerce-cart-form {
   background: #fff;
   padding: 24px;
   border-radius: var(--radius-default);
   box-shadow: var(--shadow-soft);
   margin-bottom: 24px;
}

/* ── Cart Table ── */
.woocommerce-cart-form__contents {
   width: 100%;
   border-collapse: collapse;
   border: none;
   margin: 0;
}

.woocommerce-cart-form__contents thead {
   display: none;
   /* Hide default headers, use data-titles on mobile */
}

.woocommerce-cart-form__contents thead tr {
   border-bottom: 1px solid #eee;
}

.woocommerce-cart-form__contents th {
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: .06em;
   color: #888;
   font-weight: 500;
   padding: .75rem 1rem;
   text-align: left;
   border: none;
}

.woocommerce-cart-form__contents th.product-subtotal,
.woocommerce-cart-form__contents th.product-price {
   text-align: right;
}

.woocommerce-cart-form__contents th.product-quantity {
   text-align: center;
}

/* ── Cart Items ── */
.woocommerce-cart-form__cart-item {
   border-bottom: 0.5px solid rgba(0, 0, 0, .06);
   transition: var(--transition-default);
}

.woocommerce-cart-form__cart-item:hover {
   background: #f9fafb;
}

.woocommerce-cart-form__cart-item td {
   padding: 1.25rem 1rem;
   vertical-align: middle;
   border: none;
}

/* ── Product Remove ── */
.product-remove a.remove {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: #fee2e2;
   color: #dc2626 !important;
   font-size: 18px;
   font-weight: 700;
   text-decoration: none;
   transition: var(--transition-default);
   line-height: 1;
}

.product-remove a.remove:hover {
   background: #dc2626;
   color: #fff !important;
}

/* ── Product Thumbnail ── */
.product-thumbnail img {
   width: 80px;
   height: 80px;
   object-fit: cover;
   border-radius: var(--radius-default);
   border: 0.5px solid rgba(0, 0, 0, .08);
   transition: var(--transition-default);
}

.product-thumbnail a:hover img {
   box-shadow: 0 4px 12px rgba(34, 31, 112, 0.15);
}

/* ── Product Name ── */
.product-name a {
   font-size: 15px;
   font-weight: 600;
   color: var(--color-primary);
   text-decoration: none;
   transition: var(--transition-default);
   line-height: 1.4;
}

.product-name a:hover {
   color: var(--color-accent);
}

/* ── Product Price ── */
.product-price,
.product-subtotal {
   font-size: 15px;
   font-weight: 600;
   color: #111;
   text-align: right;
}

.product-price .woocommerce-Price-amount,
.product-subtotal .woocommerce-Price-amount {
   display: inline-block;
}

/* ── Quantity Input ── */
.product-quantity {
   text-align: center;
}

.product-quantity .quantity {
   display: inline-flex;
   align-items: center;
   border: 1px solid #e5e7eb;
   border-radius: var(--radius-default);
   background: #f9fafb;
   overflow: hidden;
}

.product-quantity .qty {
   width: 60px;
   height: 44px;
   border: none;
   background: transparent;
   text-align: center;
   font-size: 15px;
   font-weight: 600;
   color: var(--color-primary);
   -moz-appearance: textfield;
   padding: 0;
}

.product-quantity .qty::-webkit-outer-spin-button,
.product-quantity .qty::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

.product-quantity .qty:focus {
   outline: none;
   background: #fff;
}

/* ── Actions Row ── */
.woocommerce-cart-form .actions {
   padding: 1.5rem 0 0;
   border-top: 1px solid #eee;
}

.woocommerce-cart-form .actions .coupon {
   display: flex;
   gap: 10px;
   float: left;
   flex-wrap: wrap;
   align-items: center;
}

#coupon-error-notice {
   margin: 0;
   color: brown;
}

.woocommerce-cart-form .actions .coupon input.input-text {
   border: 1px solid #e5e7eb;
   border-radius: var(--radius-default);
   padding: 12px 16px;
   font-size: 14px;
   background: #f9fafb;
   min-width: 200px;
   transition: var(--transition-default);
}

.woocommerce-cart-form .actions .coupon input.input-text:focus {
   border-color: var(--color-accent);
   background: #fff;
   box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.1);
   outline: none;
}

/* ── Buttons ── */
.woocommerce-cart-form .actions .button,
.woocommerce-cart-form .actions .coupon .button {
   background: var(--color-primary);
   color: #fff;
   padding: 12px 24px;
   border-radius: var(--radius-default);
   font-size: 14px;
   font-weight: 600;
   border: none;
   cursor: pointer;
   transition: var(--transition-default);
   text-transform: none;
   letter-spacing: 0;
   line-height: 1.5;
}

.woocommerce-cart-form .actions .button:hover,
.woocommerce-cart-form .actions .coupon .button:hover {
   background: var(--color-secondary);
   color: #000;
}

.woocommerce-cart-form .actions .button:disabled {
   opacity: 0.5;
   cursor: not-allowed;
}

.woocommerce-cart-form .actions .button[name="update_cart"] {
   float: right;
   background: transparent;
   color: var(--color-primary);
   border: 1px solid var(--color-primary);
}

.woocommerce-cart-form .actions .button[name="update_cart"]:hover:not(:disabled) {
   background: var(--color-primary);
   color: #fff;
}

/* Clearfix for actions */
.woocommerce-cart-form .actions::after {
   content: "";
   display: table;
   clear: both;
}

/* ── Cart Collaterals ── */
/* .cart-collaterals {
   display: grid;
   grid-template-columns: 1fr 380px;
   gap: 24px;
   align-items: start;
} */

/* ── Cart Totals Card ── */
.cart_totals {
   background: #fff;
   padding: 24px;
   border-radius: var(--radius-default);
   box-shadow: var(--shadow-soft);
}

.cart_totals h2 {
   font-size: 18px;
   font-weight: 600;
   margin-bottom: 20px;
   color: var(--color-primary);
   border-bottom: 1px solid #eee;
   padding-bottom: 10px;
}

/* ── Cart Totals Table ── */
.cart_totals .shop_table {
   width: 100%;
   border-collapse: collapse;
   border: none;
   margin-bottom: 20px;
}

.cart_totals .shop_table tr {
   border-bottom: 0.5px solid rgba(0, 0, 0, .06);
}

.cart_totals .shop_table th,
.cart_totals .shop_table td {
   padding: 12px 0;
   font-size: 14px;
   border: none;
   vertical-align: top;
}

.cart_totals .shop_table th {
   text-align: left;
   font-weight: 500;
   color: #555;
   width: 40%;
}

.cart_totals .shop_table td {
   text-align: right;
   color: #111;
   font-weight: 500;
}

/* ── Shipping Methods ── */
.woocommerce-shipping-totals td {
   text-align: left !important;
}

.woocommerce-shipping-methods {
   list-style: none;
   padding: 0;
   margin: 0;
}

.woocommerce-shipping-methods li {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   margin-bottom: 10px;
   padding: 10px;
   background: #f9fafb;
   border-radius: var(--radius-default);
   border: 1px solid transparent;
   transition: var(--transition-default);
}

.woocommerce-shipping-methods li:hover {
   border-color: #e5e7eb;
}

.woocommerce-shipping-methods input[type="radio"] {
   accent-color: var(--color-primary);
   margin-top: 3px;
   width: 16px;
   height: 16px;
   cursor: pointer;
}

.woocommerce-shipping-methods label {
   font-size: 13px;
   color: #444;
   line-height: 1.5;
   cursor: pointer;
   flex: 1;
   text-align: left;
   margin: 0;
}

.woocommerce-shipping-destination {
   font-size: 13px;
   color: #666;
   margin: 10px 0 0;
   padding: 10px;
   background: #f1f5f9;
   border-radius: var(--radius-default);
   border-left: 3px solid var(--color-accent);
}

.woocommerce-shipping-destination strong {
   color: var(--color-primary);
}

/* ── Shipping Calculator ── */
.shipping-calculator-button {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 13px;
   font-weight: 600;
   color: var(--color-accent);
   text-decoration: none;
   margin-top: 10px;
   transition: var(--transition-default);
}

.shipping-calculator-button:hover {
   color: var(--color-primary);
}

.shipping-calculator-form {
   margin-top: 16px;
   padding: 16px;
   background: #f9fafb;
   border-radius: var(--radius-default);
   border: 1px solid #e5e7eb;
}

.shipping-calculator-form .form-row {
   margin-bottom: 12px;
}

.shipping-calculator-form label {
   display: block;
   font-size: 12px;
   font-weight: 500;
   color: #555;
   margin-bottom: 6px;
}

.shipping-calculator-form input.input-text,
.shipping-calculator-form select {
   width: 100%;
   border: 1px solid #e5e7eb;
   border-radius: var(--radius-default);
   padding: 10px 12px;
   font-size: 14px;
   background: #fff;
   transition: var(--transition-default);
}

.shipping-calculator-form input.input-text:focus,
.shipping-calculator-form select:focus {
   border-color: var(--color-accent);
   box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.1);
   outline: none;
}

.shipping-calculator-form .button {
   background: var(--color-accent);
   color: #fff;
   padding: 10px 20px;
   border-radius: var(--radius-default);
   font-size: 13px;
   font-weight: 600;
   border: none;
   cursor: pointer;
   transition: var(--transition-default);
   width: 100%;
   margin-top: 4px;
}

.shipping-calculator-form .button:hover {
   background: var(--color-primary);
}

/* ── Order Total ── */
.cart_totals .order-total {
   border-bottom: none;
}

.cart_totals .order-total th,
.cart_totals .order-total td {
   font-size: 18px;
   font-weight: 700;
   color: var(--color-primary);
   padding-top: 16px;
   padding-bottom: 4px;
}

/* ── Proceed to Checkout ── */
.wc-proceed-to-checkout {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.wc-proceed-to-checkout .checkout-button {
   display: block;
   width: 100%;
   text-align: center;
   padding: 16px;
   border-radius: var(--radius-default);
   font-size: 15px;
   font-weight: 600;
   text-decoration: none;
   transition: var(--transition-default);
   border: none;
   cursor: pointer;
   line-height: 1.5;
}

.wc-proceed-to-checkout .checkout-button.alt {
   background: var(--color-primary);
   color: #fff;
}

.wc-proceed-to-checkout .checkout-button.alt:hover {
   background: var(--color-secondary);
   color: #000;
}

.wc-proceed-to-checkout .checkout-button:not(.alt) {
   background: transparent;
   color: var(--color-primary);
   border: 1px solid var(--color-primary);
}

.wc-proceed-to-checkout .checkout-button:not(.alt):hover {
   background: var(--color-primary);
   color: #fff;
}

/* ── Cross Sells (if present) ── */
.cross-sells {
   background: #fff;
   padding: 24px;
   border-radius: var(--radius-default);
   box-shadow: var(--shadow-soft);
}

.cross-sells h2 {
   font-size: 18px;
   font-weight: 600;
   margin-bottom: 20px;
   color: var(--color-primary);
   border-bottom: 1px solid #eee;
   padding-bottom: 10px;
}

/* ── Empty Cart ── */
.cart-empty {
   background: #fff;
   padding: 48px 24px;
   border-radius: var(--radius-default);
   box-shadow: var(--shadow-soft);
   text-align: center;
   font-size: 18px;
   color: #666;
   margin-bottom: 20px;
}

.return-to-shop .button {
   display: inline-block;
   background: var(--color-primary);
   color: #fff;
   padding: 14px 32px;
   border-radius: var(--radius-default);
   font-size: 15px;
   font-weight: 600;
   text-decoration: none;
   transition: var(--transition-default);
}

.return-to-shop .button:hover {
   background: var(--color-secondary);
   color: #000;
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 992px) {
   .cart-collaterals {
      grid-template-columns: 1fr;
   }

   .woocommerce-cart-form .actions .coupon {
      float: none;
      width: 100%;
      margin-bottom: 16px;
   }

   .woocommerce-cart-form .actions .coupon input.input-text {
      flex: 1;
      min-width: 0;
   }

   .woocommerce-cart-form .actions .button[name="update_cart"] {
      float: none;
      width: 100%;
   }

   .woocommerce-cart-form__contents thead {
      display: none;
   }

   .woocommerce-cart-form__cart-item {
      display: grid;
      grid-template-columns: auto 1fr auto;
      grid-template-areas:
         "thumb name remove"
         "thumb price price"
         "thumb qty subtotal";
      gap: 8px 16px;
      padding: 16px;
      border-bottom: 1px solid #eee;
      align-items: center;
   }

   .woocommerce-cart-form__cart-item td {
      padding: 0;
   }

   .woocommerce-cart-form__cart-item td.product-thumbnail {
      grid-area: thumb;
   }

   .woocommerce-cart-form__cart-item td.product-name {
      grid-area: name;
   }

   .woocommerce-cart-form__cart-item td.product-remove {
      grid-area: remove;
      justify-self: end;
   }

   .woocommerce-cart-form__cart-item td.product-price {
      grid-area: price;
      text-align: left;
      font-size: 14px;
      color: #666;
      font-weight: 400;
   }

   .woocommerce-cart-form__cart-item td.product-price::before {
      content: "Price: ";
   }

   .woocommerce-cart-form__cart-item td.product-quantity {
      grid-area: qty;
      text-align: left;
   }

   .woocommerce-cart-form__cart-item td.product-subtotal {
      grid-area: subtotal;
      text-align: right;
      font-size: 16px;
   }

   .woocommerce-cart-form__cart-item td.product-subtotal::before {
      content: "Subtotal: ";
      font-size: 13px;
      color: #666;
      font-weight: 400;
   }

   .product-thumbnail img {
      width: 64px;
      height: 64px;
   }

   .cart_totals {
      position: static;
   }
}

/* Mobile responsive table styling for WooCommerce */

@media (max-width: 576px) {

   .cart_totals .shop_table tbody {
      display: flex;
      flex-direction: column;
   }
   .woocommerce-cart-form {
      padding: 5px;
   }

   tr.woocommerce-shipping-totals,
   tr.shipping {
      display: block !important;
      width: 100% !important;
      box-sizing: border-box;
   }

   /* Make th and td full width */
   tr.woocommerce-shipping-totals th,
   tr.woocommerce-shipping-totals td,
   tr.shipping th,
   tr.shipping td {
      display: block !important;
      width: 100% !important;
      box-sizing: border-box;
      text-align: left;
   }

   tr.shipping td li {
      margin-bottom: 0.5rem;
   }

   tr.shipping td label {
      margin-left: 0.5rem;
   }
}