/**
 * Tonic Sites Shop — Cart Page Styles
 *
 * Custom cart page with two-column layout.
 * Design language matches Affiliate Hub (tss-affiliate-hub.css).
 */

/* ==========================================================================
   0. DESIGN TOKENS
   ========================================================================== */

.tonic-cart {
  --tc-bg: #FAF8F5;
  --tc-card-bg: #FFFFFF;
  --tc-primary: #1A1A1A;
  --tc-primary-hover: #2D2D2D;
  --tc-accent: #8B6F4E;
  --tc-accent-hover: #7A6043;
  --tc-text: #1A1A1A;
  --tc-text-muted: #666666;
  --tc-text-light: #999999;
  --tc-border: #E8E8E8;
  --tc-border-light: #F0F0F0;
  --tc-input-bg: #FFFFFF;
  --tc-input-bg-alt: #FAF8F5;
  --tc-success: #22C55E;
  --tc-error: #EF4444;
  --tc-radius: 8px;
  --tc-radius-lg: 12px;
  --tc-font-display: "Ivyora Display", Georgia, serif;
  --tc-font-text: "IvyOra Text Regular", Georgia, serif;
  --tc-font-sans: "HK Grotesk Regular Legacy", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tc-font-label: "HK Grotesk Medium Legacy", -apple-system, BlinkMacSystemFont, sans-serif;
  --tc-transition: 0.2s ease;
}

/* ==========================================================================
   1. BASE — Override Showit theme defaults
   ========================================================================== */

.tonic-cart,
.tonic-cart * {
  font-family: var(--tc-font-sans) !important;
  font-weight: normal !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.tonic-cart {
  color: var(--tc-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.tonic-cart *,
.tonic-cart *::before,
.tonic-cart *::after {
  box-sizing: border-box;
}

/* ==========================================================================
   2. LAYOUT — Two-Column Grid
   ========================================================================== */

.tonic-cart-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 48px;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px;
}

.tonic-cart-main {
  min-width: 0;
}

.tonic-cart-sidebar {
  position: sticky;
  top: 80px;
}

/* ==========================================================================
   3. CART COUNT
   ========================================================================== */

.tonic-cart-count {
  font-size: 14px;
  color: var(--tc-text-muted);
  margin: 0 0 32px;
}

/* ==========================================================================
   4. CART ITEMS
   ========================================================================== */

.tonic-cart-items {
  display: flex;
  flex-direction: column;
}

.tonic-cart-item {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--tc-border-light);
}

.tonic-cart-item:first-child {
  border-top: 1px solid var(--tc-border-light);
}

/* --- Item Image --- */

.tonic-cart-item-img {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  border-radius: var(--tc-radius);
  overflow: hidden;
  background: var(--tc-input-bg-alt);
}

.tonic-cart-item-img a {
  display: block;
  width: 100%;
  height: 100%;
}

.tonic-cart-item-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- Item Details --- */

.tonic-cart-item-details {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.tonic-cart-item-info {
  flex: 1;
  min-width: 0;
}

.tonic-cart-item-category {
  display: inline-block;
  font-size: 12px;
  color: var(--tc-accent);
  background: rgba(139, 111, 78, 0.08);
  padding: 2px 8px;
  border-radius: 3px;
  margin-bottom: 8px;
}

.tonic-cart .tonic-cart-item-title {
  font-family: var(--tc-font-text) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: var(--tc-text) !important;
  margin: 0 0 6px !important;
  line-height: 1.3 !important;
}

.tonic-cart .tonic-cart-item-title a {
  font-family: var(--tc-font-text) !important;
  color: inherit !important;
  text-decoration: none !important;
}

.tonic-cart-item-title a:hover {
  color: var(--tc-accent);
}

/* Hide payment plan meta on each cart item — shown in sidebar */
.tonic-cart-item dl.variation,
.tonic-cart-item .product-payment-plan-meta {
  display: none;
}

/* --- Remove Link --- */

.tonic-cart-item-remove {
  margin-top: 8px;
}

.tonic-remove-link {
  font-size: 13px;
  color: var(--tc-text-light);
  text-decoration: underline;
  transition: color var(--tc-transition);
}

.tonic-remove-link:hover {
  color: var(--tc-error);
}

/* --- Item Price --- */

.tonic-cart-item-price {
  font-size: 16px;
  color: var(--tc-text);
  text-align: right !important;
  white-space: nowrap;
  flex-shrink: 0;
}

.tonic-cart-item-price small {
  font-size: 10px;
}

/* ==========================================================================
   5. COUPON FORM
   ========================================================================== */

.tonic-cart-coupon {
  display: flex;
  gap: 8px;
  margin-top: 24px;
}

.tonic-coupon-input {
  flex: 1;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  font-size: 14px !important;
  color: var(--tc-text);
  background: var(--tc-input-bg);
  transition: border-color var(--tc-transition);
}

.tonic-coupon-input:focus {
  outline: none;
  border-color: var(--tc-accent);
}

.tonic-coupon-input::placeholder {
  color: var(--tc-text-light);
  font-size: 14px !important;
}

.tonic-coupon-btn {
  height: 48px;
  padding: 0 28px;
  background: var(--tc-primary);
  color: #fff;
  border: none;
  border-radius: var(--tc-radius);
  font-family: var(--tc-font-label) !important;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--tc-transition);
  white-space: nowrap;
  text-align: center !important;
}

.tonic-coupon-btn:hover {
  background: var(--tc-primary-hover);
}

/* ==========================================================================
   6. CART ACTIONS
   ========================================================================== */

.tonic-cart-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding-top: 16px;
}

.tonic-continue-shopping {
  font-size: 14px;
  color: var(--tc-text-muted);
  text-decoration: none;
  transition: color var(--tc-transition);
}

.tonic-continue-shopping:hover {
  color: var(--tc-text);
}

.tonic-update-cart {
  display: none;
  height: 40px;
  padding: 0 20px;
  background: transparent;
  color: var(--tc-text-muted);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  font-family: var(--tc-font-label) !important;
  font-size: 13px;
  cursor: pointer;
  transition: all var(--tc-transition);
}

.tonic-update-cart:hover {
  border-color: var(--tc-text);
  color: var(--tc-text);
}

.tonic-update-cart[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ==========================================================================
   7. SUMMARY SIDEBAR
   ========================================================================== */

.tonic-cart-summary {
  background: var(--tc-card-bg);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  padding: 28px;
  overflow: hidden;
}

/* --- Reset WooCommerce defaults --- */

.tonic-cart-summary .cart_totals {
  float: none !important;
  width: 100% !important;
  clear: both !important;
}

/* --- Payment Plan Toggle (ASP UPP) ---
   Overrides frontend.css from Ultimate Payment Plans plugin.
   Plugin sets: li { border: 2px solid lightgrey; margin: 10px 10px 0 0; padding: 5px 10px }
   Plugin sets: li.asp-upp-active { background: #0069d9 }
   Plugin sets: label { margin: 0 0 0 6px }
   ----------------------------------------------------------- */

.tonic-cart-summary .asp-upp-cart-handler-payment-plans-wrapper {
  margin-bottom: 24px;
}

.tonic-cart-summary .asp-upp-pay-options {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 20px !important;
  display: flex !important;
  gap: 8px;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  width: 100% !important;
}

/* Reset ALL li states — kill plugin border/bg/margin/padding */
.tonic-cart-summary .asp-upp-pay-options li {
  flex: 1;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  outline: none !important;
  border-radius: 0 !important;
}

.tonic-cart-summary .asp-upp-pay-options li.asp-upp-active,
.tonic-cart-summary .asp-upp-pay-options li input:focus {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.tonic-cart-summary .asp-upp-pay-option-plan {
  min-width: 200px;
}

/* Style lives on the label, not the li */
.tonic-cart-summary .asp-upp-pay-options li label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 12px 8px !important;
  font-family: var(--tc-font-label) !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  color: var(--tc-text-muted) !important;
  cursor: pointer;
  transition: all var(--tc-transition);
  background: var(--tc-input-bg-alt) !important;
  border: 1px solid var(--tc-border) !important;
  border-radius: var(--tc-radius) !important;
  min-height: 48px;
}

.tonic-cart-summary .asp-upp-pay-options li label:hover {
  border-color: var(--tc-text-light) !important;
}

.tonic-cart-summary .asp-upp-pay-options li.asp-upp-active label {
  background: var(--tc-primary) !important;
  color: #fff !important;
  border-color: var(--tc-primary) !important;
}

.tonic-cart-summary .asp-upp-pay-options input {
  display: none !important;
}

/* --- Payment Plan Details --- */

.tonic-cart-summary .asp-upp-payment-plans {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.tonic-cart-summary .asp-upp-payment-plan-details {
  font-size: 14px;
  color: var(--tc-text-muted);
  line-height: 1.6;
}

/* Each detail row (Total Payable, Initial Payable, Schedule) */
.tonic-cart-summary .asp-upp-payment-plan-details > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--tc-border-light);
}

.tonic-cart-summary .asp-upp-payment-plan-details > div:last-child {
  border-bottom: none;
}

.tonic-cart-summary .asp-upp-payment-plan-details label {
  font-size: 14px;
  color: var(--tc-text-muted);
}

.tonic-cart-summary .asp-upp-payment-plan-details span {
  font-size: 14px;
  color: var(--tc-text);
  text-align: right !important;
}

.tonic-cart-summary .asp-upp-payment-plan-details strong {
  font-family: var(--tc-font-label) !important;
  font-size: 14px;
  font-weight: normal;
  color: var(--tc-text);
}

.tonic-cart-summary .asp-upp-payment-plan-name {
  display: none;
}

.tonic-cart-summary .asp-upp-payment-plan-selection {
  display: none;
}

.tonic-cart-summary .asp-upp-payment-plan-description {
  display: none;
}

/* Payments schedule container — hide the "Payments" label, show table full width */
.tonic-cart-summary .asp-upp-payment-plan-payments-schedule {
  display: block !important;
  width: 100%;
}

.tonic-cart-summary .asp-upp-payment-plan-payments-schedule > label,
.asp-upp-payment-plan-payments-schedule > label {
  display: none !important;
}

/* --- Payment Schedule Table — matches .tah-table style ---
   Plugin sets: thead tr td { color: #fff; background-color: #3c434a }
   Plugin sets: tr td { border: 1px solid #ddd; padding: 8px; text-align: center }
   ----------------------------------------------------------- */

.tonic-cart-summary .asp-upp-payment-plan-payments-schedule table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-top: 16px !important;
  border: 1px solid var(--tc-border) !important;
  border-radius: var(--tc-radius) !important;
  overflow: hidden;
  box-shadow: none !important;
}

/* Override the dark grey header */
.tonic-cart-summary .asp-upp-payment-plan-payments-schedule table thead tr td {
  background: var(--tc-input-bg-alt) !important;
  color: var(--tc-text-muted) !important;
  font-family: var(--tc-font-label) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-weight: 500 !important;
  padding: 12px 16px !important;
  border: none !important;
  border-bottom: 1px solid var(--tc-border) !important;
}

.tonic-cart-summary .asp-upp-payment-plan-payments-schedule table tr td {
  padding: 12px 16px !important;
  border: none !important;
  border-bottom: 1px solid var(--tc-border-light) !important;
  font-size: 14px !important;
  color: var(--tc-text) !important;
  text-align: left !important;
  background: transparent !important;
}

.tonic-cart-summary .asp-upp-payment-plan-payments-schedule table tbody tr:last-child td {
  border-bottom: none !important;
}

.tonic-cart-summary .asp-upp-payment-plan-payments-schedule table tbody tr:hover {
  background: var(--tc-input-bg-alt) !important;
}

/* --- Cart Totals heading — matches .tah-section-title --- */

.tonic-cart-summary .cart_totals h2 {
  font-family: var(--tc-font-text) !important;
  font-size: 20px !important;
  font-weight: normal !important;
  font-style: normal !important;
  color: var(--tc-text) !important;
  margin: 0 0 16px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* --- Cart Totals Table --- */

.tonic-cart-summary .shop_table {
  border: none !important;
  width: 100% !important;
  border-collapse: collapse;
}

.woocommerce table.shop_table th {
  padding: 9px 0 !important;
}

.tonic-cart-summary .shop_table th,
.tonic-cart-summary .shop_table td {
  padding: 12px 0;
  border: none !important;
  border-bottom: 1px solid var(--tc-border-light) !important;
  vertical-align: top;
}

.tonic-cart-summary .shop_table th {
  font-size: 14px;
  color: var(--tc-text-muted);
  font-weight: 400;
  width: 50% !important;
}

.tonic-cart-summary .shop_table td {
  font-size: 14px;
  color: var(--tc-text);
  text-align: right !important;
}

/* Pay Now / Order total row */
.tonic-cart-summary .shop_table tr.order-total th,
.tonic-cart-summary .shop_table tr.order-total td {
  font-family: var(--tc-font-sans) !important;
  font-size: 18px;
  color: var(--tc-text);
  font-weight: 500;
  padding-top: 16px !important;
  border-bottom: none !important;
}

.tonic-cart-summary .shop_table tr.divider {
  display: none !important;
}

/* --- Future Payments (ASP UPP) --- */

.tonic-cart-summary .shop_table tr.asp-upp-cart-future-payments th {
  font-family: var(--tc-font-label) !important;
  font-size: 14px;
  color: var(--tc-text);
  padding-top: 16px;
}

/* Plan order item row — JS removes the th and sets colspan=2 on the td
   so it spans the full table width as a normal table-cell. */
.tonic-cart-summary .shop_table tr.asp-upp-cart-plan-order-item th {
  display: none !important;
}

.tonic-cart-summary .shop_table tr.asp-upp-cart-plan-order-item td {
  text-align: left !important;
  padding: 16px 0 !important;
  font-size: 14px !important;
  color: var(--tc-text-muted) !important;
  border: none !important;
}

/* Override plugin's meta padding */
.tonic-cart-summary .asp-upp-cart-plan-order-item-meta {
  padding: 0 !important;
  font-size: 14px !important;
}

/* Future payments detail list */
.tonic-cart-summary ul.asp-upp-cart-plan-order-item-future-payments {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tonic-cart-summary ul.asp-upp-cart-plan-order-item-future-payments li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--tc-border-light);
  font-size: 14px;
}

.tonic-cart-summary ul.asp-upp-cart-plan-order-item-future-payments li:last-child {
  border-bottom: none;
}

.tonic-cart-summary ul.asp-upp-cart-plan-order-item-future-payments li::before {
  display: none;
}

.tonic-cart-summary ul.asp-upp-cart-plan-order-item-future-payments label {
  font-size: 14px;
  color: var(--tc-text-muted);
  flex-shrink: 0;
  margin-right: 12px;
}

.tonic-cart-summary ul.asp-upp-cart-plan-order-item-future-payments p {
  margin: 0;
  font-size: 14px;
  color: var(--tc-text);
  text-align: right !important;
}

.tonic-cart-summary ul.asp-upp-cart-plan-order-item-future-payments small.tax_label {
  display: none;
}

li.asp-upp-cart-plan-order-item--payment-schedule {
  display: none !important;
}

.tonic-cart-summary .asp-upp-cart-plan-order-item--view-schedule a {
  font-size: 13px;
  color: var(--tc-accent);
  text-decoration: underline;
}

/* --- Proceed to Checkout Button --- */

.tonic-cart-summary .wc-proceed-to-checkout {
  margin-top: 15px;
  padding: 0 !important;
}

.tonic-cart-summary .wc-proceed-to-checkout a.checkout-button,
.tonic-cart-summary .wc-proceed-to-checkout a.checkout-button:visited {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center !important;
  width: 100%;
  background: var(--tc-primary) !important;
  color: #fff !important;
  border: none;
  border-radius: 99px !important;
  font-family: 'IvyOra Display Light' !important;
  font-size: 23px !important;
  font-weight: 600 !important;
  letter-spacing: 0.025em !important;
  text-decoration: none !important;
  transition: opacity var(--tc-transition);
  margin-bottom: 0 !important;
  padding: 15px !important;
}

.tonic-cart-summary .wc-proceed-to-checkout a.checkout-button:hover {
  opacity: 0.7;
  background: var(--tc-primary) !important;
  color: #fff !important;
}

/* --- Gift card / store credit (ACFW plugin) --- */

.tonic-cart-summary #pwgc-redeem-gift-card-container {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--tc-border-light);
}

.tonic-cart-summary #pwgc-redeem-gift-card-container label {
  font-size: 13px;
  color: var(--tc-text-muted);
}

.tonic-cart-summary #pwgc-redeem-gift-card-number {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  font-size: 14px !important;
  width: 100%;
  margin-top: 6px;
}

.tonic-cart-summary #pwgc-redeem-button {
  margin-top: 8px;
  height: 40px;
  padding: 0 16px;
  background: var(--tc-primary);
  color: #fff;
  border: none;
  border-radius: var(--tc-radius);
  font-family: var(--tc-font-label) !important;
  font-size: 13px;
  cursor: pointer;
}

/* ==========================================================================
   8. CLEAR CART BUTTON
   ========================================================================== */

.tonic-cart-actions button[name="clear_cart"] {
  height: 40px;
  padding: 0 20px;
  background: transparent;
  color: var(--tc-text-light);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  font-family: var(--tc-font-label) !important;
  font-size: 13px;
  cursor: pointer;
  transition: all var(--tc-transition);
  display: inline-flex;
  align-items: center;
}

.tonic-cart-actions button[name="clear_cart"]:hover {
  color: var(--tc-error);
  border-color: var(--tc-error);
}

/* ==========================================================================
   9. WOOCOMMERCE RESETS
   ========================================================================== */

.tonic-cart a {
  text-transform: none;
}

.tonic-cart .woocommerce a.button,
.tonic-cart .woocommerce button.button,
.tonic-cart .woocommerce input.button {
  font-family: var(--tc-font-label) !important;
  border-radius: var(--tc-radius);
}

/* ==========================================================================
   10. WOOCOMMERCE MESSAGES
   ========================================================================== */

.tonic-cart .woocommerce-message,
.tonic-cart .woocommerce-info,
.tonic-cart .woocommerce-error {
  border-radius: var(--tc-radius);
  font-size: 14px;
  margin-bottom: 16px;
}

/* ==========================================================================
   11. CROSS-SELLS
   ========================================================================== */

.tonic-cart .cross-sells {
  margin-top: 48px;
}

.tonic-cart .cross-sells h2 {
  font-family: var(--tc-font-text) !important;
  font-size: 20px;
  font-weight: normal;
  margin-bottom: 24px;
}

/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
  .tonic-cart-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 24px 16px;
  }

  .tonic-cart-sidebar {
    position: static;
  }

}

@media (max-width: 600px) {
  .tonic-cart-item {
    gap: 14px;
    padding: 18px 0;
  }

  .tonic-cart-item-img {
    width: 80px;
    height: 80px;
  }

  .tonic-cart-item-title {
    font-size: 16px;
  }

  .tonic-cart-item-price {
    font-size: 14px;
  }

  .tonic-cart-summary {
    padding: 20px;
  }

  .tonic-cart-coupon {
    flex-direction: column;
  }

  .tonic-coupon-btn {
    width: 100%;
  }
}