/* ============================================================
   Lisensio — cart & checkout page bridging rules (issue #10)
   Maps WooCommerce cart/checkout markup onto the design system.
   ============================================================ */

/* ---------- Accessibility helper (not in the design CSS) ---------- */
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Cart page: single column (scoped — .shop-shell is shared with checkout) ---------- */
body.woocommerce-cart .shop-shell{grid-template-columns:1fr}
body.woocommerce-cart .summary-card{position:static}

/* ---------- Cart items ---------- */
.cart-thumb img{width:100%;height:100%;object-fit:cover;border-radius:16px;display:block}
.cart-item h4 a{color:inherit}
/* Title + Remove on one row, meta wraps to its own row below */
.cart-item .product-name{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px}
.cart-item .product-name h4{order:1;margin:0}
.cart-item .product-name .c-remove{order:2;margin-left:auto}
.cart-item .product-name .c-meta,
.cart-item .product-name .backorder_notification{order:3;flex-basis:100%}
.cart-item .c-meta p{margin:0;font-size:13px;color:var(--muted)}
/* dt floats + clears so each "label: value" pair stays on one line (WC's standard dl.variation pattern) */
.cart-item .c-meta dl.variation{margin:0;overflow:hidden}
.cart-item .c-meta dl.variation dt{float:left;clear:both;margin:0 4px 2px 0;font-size:13px;font-weight:700;color:var(--muted)}
.cart-item .c-meta dl.variation dd{margin:0 0 2px;font-size:13px;color:var(--muted)}
.cart-item .c-meta dl.variation dd p{display:inline;margin:0}
.woocommerce-cart-form .quantity{display:inline-block}
.woocommerce-cart-form .quantity .screen-reader-text+input.qty{border:none;font-weight:700;font-size:14.5px;color:var(--ink);font-family:var(--font-head)}
.woocommerce-cart-form span.qty input.qty{width:42px;text-align:center;border:none;padding:0;-moz-appearance:textfield;appearance:textfield}
.woocommerce-cart-form span.qty input.qty::-webkit-outer-spin-button,.woocommerce-cart-form span.qty input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.woocommerce-cart-form .cart-actions{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.woocommerce-cart-form .coupon-row input.input-text{flex:1;min-width:200px}
.woocommerce-cart-form .cart-actions .btn{white-space:nowrap}

/* ---------- Cart totals amounts ---------- */
.cart_totals .sum-row .woocommerce-Price-amount{color:inherit}
.cart_totals .sum-row.total .grad-text .woocommerce-Price-amount{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Checkout layout ---------- */
.checkout-main{min-width:0}
.woocommerce-checkout .form-grid .form-row{margin-bottom:0}
.woocommerce-checkout .form-grid .form-row-wide{grid-column:1/-1}
.woocommerce-checkout .form-row .woocommerce-input-wrapper{display:block}
.woocommerce-account-fields .create-account .form-row{margin-bottom:18px}

/* ---------- Payment methods ---------- */
.wc_payment_methods{list-style:none;margin:0;padding:0}
.wc_payment_methods .wc_payment_method{margin:0}
.pay-opt input[type="radio"]{margin-top:4px;accent-color:var(--primary)}
/* Mirrors .pay-opt.sel (style.css) until wc-checkout.js re-renders the fragment */
.pay-opt:has(input:checked){border-color:var(--primary);background:var(--bg-soft);box-shadow:0 0 0 4px rgba(43,163,119,.1)}
.payment_box{margin:-4px 0 18px;padding:18px;background:var(--bg-soft);border-radius:14px;font-size:13.5px;color:var(--body)}
.payment_box p:last-child{margin-bottom:0}
/* WC's credit-card <fieldset> (Polar, and other gateways using the same core class) has a browser-default border */
.payment_box fieldset{border:none;margin:0;padding:0}
.woocommerce-terms-and-conditions-wrapper{margin-top:14px;font-size:13.5px}

/* ---------- Stripe card fields (SLSWC's classic Elements, not the theme's own markup) ----------
   The card number/expiry/CVC are Stripe-hosted iframes; only the mount-point <div>s
   (.slswc-card-element-field) are ours to style, matching the theme's .input-text look. */
.slswc-card-element-field{box-sizing:border-box;min-height:50px;padding:16px;border:1.5px solid var(--border);border-radius:12px;background:#fff;transition:.25s;margin-bottom:14px}
.slswc-card-element-field.focused{border-color:var(--primary);box-shadow:0 0 0 4px rgba(43,163,119,.12)}
.slswc-card-element-field.invalid{border-color:#dc2626}
.slswc-card-expiry-cvc{display:flex;gap:14px}
.slswc-card-expiry-cvc .slswc-card-element-field{flex:1;min-width:0}
.slswc-stripe-error{color:#dc2626;font-size:13px;margin:-6px 0 14px}

/* ---------- Order review table inside .summary-card (block/flex, not a real table — avoids table column-width constraints) ---------- */
.woocommerce-checkout-review-order-table{display:block;width:100%;font-size:14.5px}
.woocommerce-checkout-review-order-table thead{display:none}
.woocommerce-checkout-review-order-table tbody,
.woocommerce-checkout-review-order-table tfoot{display:block}

/* Item rows: name + meta on top, price below, both full width */
.woocommerce-checkout-review-order-table tbody tr.order-line{display:block;padding:14px 0;border-bottom:1px dashed var(--border)}
.woocommerce-checkout-review-order-table tbody tr.order-line:first-child{padding-top:0}
.woocommerce-checkout-review-order-table tbody tr.order-line td{display:block;padding:0}
.woocommerce-checkout-review-order-table tbody tr.order-line td.product-name{padding-bottom:8px}
.woocommerce-checkout-review-order-table tbody tr.order-line td.product-total{text-align:right;font-weight:500;color:var(--body)}

/* Item meta (dt/dd): same inline-label pattern as .cart-item .c-meta above */
.woocommerce-checkout-review-order-table dl.variation{margin:6px 0 0;overflow:hidden}
.woocommerce-checkout-review-order-table dl.variation dt{float:left;clear:both;margin:0 4px 2px 0;font-size:13px;font-weight:700;color:var(--muted)}
.woocommerce-checkout-review-order-table dl.variation dd{margin:0 0 2px;font-size:13px;color:var(--muted)}
.woocommerce-checkout-review-order-table dl.variation dd p{display:inline;margin:0}

/* Totals rows: label left, value right */
.woocommerce-checkout-review-order-table tfoot tr{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px dashed var(--border);font-weight:500;color:var(--body)}
.woocommerce-checkout-review-order-table tfoot th{font-weight:600}
.woocommerce-checkout-review-order-table tr.order-total{border-top:1.5px solid var(--border);border-bottom:none;padding-top:18px;font-family:var(--font-head);font-weight:800;color:var(--ink);font-size:19px}
.woocommerce-checkout-review-order-table tr.order-total .woocommerce-Price-amount{font-size:24px;background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.woocommerce-checkout-review-order-table .sum-save .woocommerce-Price-amount{color:var(--success);font-weight:700}

/* ---------- Payment-cancelled banner (inline styles in the design) ---------- */
.result-hero{text-align:center;padding:60px 0 40px}
.result-icon{width:96px;height:96px;border-radius:50%;background:var(--gradient);display:grid;place-items:center;font-size:44px;margin:0 auto 26px;box-shadow:var(--shadow-lg);animation:lisensio-pop .6s cubic-bezier(.2,.9,.3,1.4)}
.result-icon.muted{background:linear-gradient(120deg,#64748b,#94a3b8)}
@keyframes lisensio-pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

/* ---------- Order received / order failed (issue #11, inline styles in the design) ---------- */
.result-icon.fail{background:linear-gradient(120deg,#b45309,#dc2626)}
.order-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:40px 0}
.order-meta .panel-card{margin:0;padding:20px;text-align:center}
.order-meta small{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin-bottom:6px}
.order-meta strong{font-family:var(--font-head);color:var(--ink);font-size:16px}
.license-reveal{background:var(--ink);border-radius:20px;padding:40px;text-align:center;color:#fff;margin-bottom:26px}
.license-reveal .mono-key{font-family:"JetBrains Mono",monospace;font-size:clamp(16px,3.4vw,26px);letter-spacing:.06em;background:rgba(255,255,255,.08);border:1.5px dashed rgba(255,255,255,.3);border-radius:14px;padding:18px 22px;display:inline-block;margin:16px 0}
.tips{display:grid;gap:12px;text-align:left}
.tips li{list-style:none;display:flex;gap:12px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px 20px;font-size:15px;color:var(--ink)}
.tips li::before{content:"→";color:var(--primary);font-weight:800}
@media(max-width:900px){.order-meta{grid-template-columns:1fr 1fr}}