/* ============================================================
   Ovacars — Cart Pricing Breakdown
   Per-item "Pricing Breakdown" table shown on the Cart page
   (assets/js side: none — this is pure CSS for markup rendered
   by display_pricing_breakdown_in_cart() in inc/functions.php)
   and the VAT row injected into the Cart Totals / Order Review
   sidebar via dsrent_display_cart_vat_row().
   Loaded only on the cart & checkout pages — see add_js_css.php.
   ============================================================ */

:root{
  --dsr-ink:#18121e;
  --dsr-ink-soft:#6b6572;
  --dsr-border:#ece7ef;
  --dsr-purple-700:#6d1fb0;
  --dsr-purple-600:#8a2ec8;
  --dsr-magenta:#c026d3;
  --dsr-tint:#f5ecfb;
  --dsr-radius:12px;
  /* NEW: dedicated palette for the redesigned "Total (Incl. VAT)" row
     only — kept separate from the vars every other rule in this file
     already uses, so this redesign can't accidentally change anything
     else in the Order Summary (VAT row color, the Proceed to Checkout
     button, etc. all keep reading from the original vars above). */
  --dsr-total-bg:#F7F1FB;
  --dsr-total-border:#E8DDF0;
  --dsr-total-navy:#102A56;
  --dsr-total-magenta:#B000C8;
}

.dsr-cart-breakdown{
  background:#fff;
  border:1px solid var(--dsr-border);
  border-radius:var(--dsr-radius);
  margin-top:12px;
  overflow:hidden;
  font-family:inherit;
  color:var(--dsr-ink);
}

.dsr-cart-breakdown__title{
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--dsr-purple-700);
  background:var(--dsr-tint);
  padding:10px 16px;
  margin:0;
  border-bottom:1px solid var(--dsr-border);
}

.dsr-cart-breakdown__table{
  width:100%;
  border-collapse:collapse;
}

.dsr-cart-breakdown__table td{
  padding:9px 16px;
  font-size:13.5px;
  vertical-align:top;
  border-bottom:1px solid var(--dsr-border);
}

.dsr-cart-breakdown__table tr:last-of-type td{
  border-bottom:none;
}

.dsr-cart-breakdown__label{
  color:var(--dsr-ink-soft);
  font-weight:600;
  white-space:nowrap;
}

.dsr-cart-breakdown__value{
  text-align:right;
  font-weight:600;
  color:var(--dsr-ink);
}

/* Subtotal (Excl. VAT) row — light divider above it */
.dsr-cart-breakdown__row--subtotal td{
  border-top:1px dashed var(--dsr-border);
  padding-top:11px;
}

/* VAT row */
.dsr-cart-breakdown__row--vat .dsr-cart-breakdown__label,
.dsr-cart-breakdown__row--vat .dsr-cart-breakdown__value{
  color:var(--dsr-purple-700);
}

/* ---------------------------------------------------------------
   NEW: Total (Incl. VAT) — premium light redesign. Previously a
   solid purple/magenta gradient banner with white text on both the
   label and the amount, which read as oversaturated and like a
   clickable button. Now: a very light lavender card with a 1px
   border, a small coin icon in a soft magenta-tinted circle, the
   label in deep navy, and the amount — the strongest visual element
   on the row — in large bold navy. No purple fill anywhere on this
   row, no pill shape, nothing resembling a button. Every other row
   and rule in this file is untouched.
   --------------------------------------------------------------- */
.dsr-cart-breakdown__row--total,
.dsr-cart-breakdown__row--total.dsr-cart-breakdown__row--total{
  display:table-row !important;
  background:none !important;
  background-color:transparent !important;
  background-image:none !important;
}
.dsr-cart-breakdown__row--total td,
.dsr-cart-breakdown__row--total > td,
tr.dsr-cart-breakdown__row--total td{
  background-color:#F7F1FB !important;
  background-image:none !important;
  background:#F7F1FB !important;
  border-top:1px solid var(--dsr-total-border);
  border-bottom:1px solid var(--dsr-total-border);
  padding:20px 22px;
  box-shadow:0 1px 4px rgba(16,42,86,.05);
  display:table-cell !important;
  width:auto !important;
}
.dsr-cart-breakdown__row--total td:first-child{
  border-left:1px solid var(--dsr-total-border);
  border-right:none;
  border-radius:12px 0 0 12px;
}
.dsr-cart-breakdown__row--total td:last-child{
  border-right:1px solid var(--dsr-total-border);
  border-left:1px solid var(--dsr-total-border);
  border-radius:0 12px 12px 0;
  padding-left:22px;
}

.dsr-cart-breakdown__row--total .dsr-cart-breakdown__label{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
  font-size:18px;
}
/* NEW: "Total" and "(Incl. VAT)" are now two separate spans (see
   functions.php, display_pricing_breakdown_in_cart()) so they can be
   styled at the two distinct weights the mockup calls for — bold dark
   "Total", lighter muted "(Incl. VAT)" right next to it. */
.dsr-cart-breakdown__row--total .dsr-total-main{
  color:var(--dsr-total-navy) !important;
  font-weight:700;
}
.dsr-cart-breakdown__row--total .dsr-total-sub{
  color:var(--dsr-ink-soft) !important;
  font-weight:500;
  font-size:14.5px;
}
/* Small coin icon in a soft magenta-tinted circle. */
.dsr-cart-breakdown__row--total .dsr-cart-breakdown__label::before{
  content:'';
  flex:0 0 auto;
  width:32px;
  height:32px;
  border-radius:50%;
  background-color:rgba(176,0,200,.10);
  background-repeat:no-repeat;
  background-position:center;
  background-size:17px 17px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cellipse cx='12' cy='7' rx='7' ry='3' stroke='%23B000C8' stroke-width='1.8'/%3E%3Cpath d='M5 7v4c0 1.66 3.13 3 7 3s7-1.34 7-3V7' stroke='%23B000C8' stroke-width='1.8'/%3E%3Cpath d='M5 11v4c0 1.66 3.13 3 7 3s7-1.34 7-3v-4' stroke='%23B000C8' stroke-width='1.8'/%3E%3C/svg%3E");
}

.dsr-cart-breakdown__row--total .dsr-cart-breakdown__value{
  color:var(--dsr-total-navy) !important;
  font-size:25px;
  font-weight:800;
  letter-spacing:-0.01em;
  background:none !important;
  background-image:none !important;
  display:block;
  padding:0;
  border-radius:0;
  white-space:nowrap;
}

/* NEW: the row always stays on one line/one unified card at every screen
   size — it no longer splits the label and amount into two stacked
   boxes on narrow screens. Instead, padding and font size simply scale
   down at smaller breakpoints so everything keeps fitting on one row. */
@media (max-width:767px){
  .dsr-cart-breakdown__row--total td{
    padding:16px 18px;
  }
  .dsr-cart-breakdown__row--total .dsr-cart-breakdown__value{
    font-size:22px;
  }
}
@media (max-width:480px){
  .dsr-cart-breakdown__row--total td{
    padding:12px 14px;
  }
  .dsr-cart-breakdown__row--total td:last-child{
    padding-left:14px;
  }
  .dsr-cart-breakdown__row--total .dsr-cart-breakdown__label{
    font-size:14.5px;
    gap:7px;
  }
  .dsr-cart-breakdown__row--total .dsr-total-sub{
    font-size:12px;
  }
  .dsr-cart-breakdown__row--total .dsr-cart-breakdown__label::before{
    width:26px;
    height:26px;
    background-size:14px 14px;
  }
  .dsr-cart-breakdown__row--total .dsr-cart-breakdown__value{
    font-size:17px;
  }
}

/* -------------------------------------------------------------
   VAT row injected into WooCommerce's own Cart Totals / Order
   Review table (sidebar, two-column layout). No wrapper class is
   available on WooCommerce's <tr>, so target our own row class.
   ------------------------------------------------------------- */
.dsrent-vat-total th,
.dsrent-vat-total td{
  color:var(--dsr-purple-700);
  font-weight:600;
}

.cart_totals .order-total th,
.cart_totals .order-total td,
#order_review .order-total th,
#order_review .order-total td{
  font-size:16px;
}

/* "Proceed to Checkout" — reinforce the purple primary CTA if the
   theme's own button styling doesn't already cover this class. */
.wc-proceed-to-checkout .checkout-button{
  background:linear-gradient(135deg, var(--dsr-purple-600), var(--dsr-magenta)) !important;
  border-color:transparent !important;
  color:#fff !important;
  font-weight:700 !important;
  box-shadow:0 10px 20px rgba(138,46,200,.26);
}