/* ==========================================================================
   TGK v2: check-out.php
   Inline script + main.js own: #checkout-form #checkout-grid-container .form-panel
   .input-field(.field-error) #err-* #payment-element #express-checkout-* #payment-errors
   #billing-same #billing-form-wrapper #sticky-promo(-apply/-msg) .promo-success/.promo-error
   #checkout-items-container #subtotal-val #shipping-val #tax-val #discount-val #total-val
   #form-submit-btn #form-submit-text #order-success-screen #recap-* #page-hero #cart-hero-*
   #open-cart-btn #cart-count-bubble. Only visuals change here.
   ========================================================================== */

.tgk-checkout #cart-hero-breadcrumb, .tgk-checkout #cart-hero-eyebrow, .tgk-checkout #cart-hero-headline,
.tgk-checkout #cart-hero-subtext, .tgk-checkout #cart-hero-ctas { animation: none; }
.tgk-checkout #cart-hero-headline .accent { color: var(--tgk-accent-text) !important; }
html:has(body.tgk-checkout) { scroll-padding-top: calc(var(--tgk-header-h) + 1rem); }
.tgk-checkout { --co-thumb-bg: #1a212d; --co-faint: rgba(255, 255, 255, 0.4); --co-fainter: rgba(255, 255, 255, 0.3); }   /* used by the page script's order summary rows and new account note */

/* Trust strip */
.tgk-checkout .co-trust { background: var(--tgk-color-ink); border-top: 1px solid var(--tgk-color-line); border-bottom: 1px solid var(--tgk-color-line); padding-block: 1.75rem; }
.tgk-checkout .co-trust__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1.25rem 2rem; align-items: center; }
.tgk-checkout .co-trust__icon { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--tgk-radius-md); color: var(--tgk-accent-text); background: var(--tgk-color-orange-soft); border: 1px solid rgba(255, 103, 0, 0.25); }
.tgk-checkout .co-trust__title { font: 500 0.6875rem/1.3 var(--tgk-font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tgk-color-text); }
.tgk-checkout .co-trust__sub { font-size: 0.8125rem; color: var(--tgk-color-text-subtle); margin-top: 2px; }

/* Main */
.tgk-checkout .co-main { background: radial-gradient(80% 50% at 100% 0%, rgba(0, 51, 102, 0.3), transparent 60%), var(--tgk-color-ink); padding-block: clamp(3rem, 2rem + 4vw, 6rem); }

/* Panels */
.tgk-checkout .form-panel {
  background: linear-gradient(180deg, rgba(var(--tgk-ink-3-rgb), 0.72), rgba(var(--tgk-ink-2-rgb), 0.94)) !important;
  border: 1px solid var(--tgk-color-line) !important; border-radius: var(--tgk-radius-lg) !important;
  box-shadow: var(--tgk-shadow-md); -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: clamp(1.25rem, 0.9rem + 1.4vw, 1.9rem) !important;
}
.tgk-checkout .form-panel:hover { border-color: var(--tgk-color-line-strong) !important; }
.tgk-checkout .form-panel:focus-within { border-color: var(--tgk-color-orange-line) !important; }
.tgk-checkout .form-panel h2, .tgk-checkout .form-panel h3 {
  font-family: var(--tgk-font-display) !important; font-weight: 700 !important; font-size: 1.5rem !important;
  letter-spacing: 0.02em !important; line-height: 1.05; color: var(--tgk-color-text) !important;
}
.tgk-checkout .form-panel h2 + p { font-size: 0.8125rem !important; color: var(--tgk-color-text-subtle) !important; margin-top: 0.2rem; }
.tgk-checkout .form-panel .w-8.h-8 { width: 44px; height: 44px; border-radius: var(--tgk-radius-md); flex: none; background: var(--tgk-color-orange-soft) !important; border-color: rgba(255, 103, 0, 0.25) !important; font-size: 0.9rem !important; }
.tgk-checkout #panel-contact a[href="sign-in"] { min-height: 44px; font-size: 0.8125rem !important; }
.tgk-checkout #panel-contact .text-\[\#22c55e\] { color: var(--tgk-color-success) !important; font-size: 0.8125rem !important; }
.tgk-checkout .input-field { padding: 0.85rem 1rem !important; }
.tgk-checkout .form-panel [id^="err-"] { font-size: 0.8125rem !important; color: var(--cx-bad) !important; margin-top: 0.4rem; }
.tgk-checkout .form-panel .text-red-400 { color: var(--tgk-accent-text) !important; }

/* Payment panel */
.tgk-checkout #panel-payment { position: relative; }
.tgk-checkout #panel-payment::before { content: ''; position: absolute; left: 24px; right: 24px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 103, 0, 0.7), transparent); }
.tgk-checkout #payment-element { background: rgba(0, 0, 0, 0.35) !important; border: 1px solid var(--tgk-color-line-strong) !important; border-radius: var(--tgk-radius-md) !important; padding: 14px !important; }
.tgk-checkout #payment-errors { font-size: 0.875rem !important; color: var(--cx-bad) !important; background: rgba(255, 90, 95, 0.08) !important; border-color: rgba(255, 90, 95, 0.3) !important; border-radius: var(--tgk-radius-sm) !important; }
.tgk-checkout #billing-same { width: 20px !important; height: 20px !important; accent-color: var(--tgk-color-orange); }
.tgk-checkout label:has(#billing-same) { min-height: 44px; }
.tgk-checkout label:has(#billing-same) span { font-size: 0.875rem !important; color: color-mix(in srgb, var(--tgk-color-text) 85%, transparent) !important; }
.tgk-checkout #form-submit-btn {
  min-height: 60px; border-radius: var(--tgk-radius-sm) !important; background: var(--tgk-color-orange) !important;
  color: var(--tgk-color-text-ink) !important; box-shadow: none !important; font: 600 0.875rem/1.2 var(--tgk-font-body) !important; letter-spacing: 0.12em !important;
}
.tgk-checkout #form-submit-btn:hover:not(:disabled) { background: #ff7a1f !important; box-shadow: var(--tgk-shadow-glow) !important; filter: none; }
.tgk-checkout #form-submit-btn i { color: inherit !important; }
.tgk-checkout #panel-payment .text-\[10px\], .tgk-checkout #panel-payment .text-\[11px\] { font-size: 0.75rem !important; }

/* Order summary */
.tgk-checkout #order-summary-sticky { background: var(--tgk-color-ink-2) !important; }
.tgk-checkout #order-summary-sticky a[href="shop"] { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.8125rem !important; color: var(--tgk-color-text-muted) !important; }
.tgk-checkout #order-summary-sticky a[href="shop"]:hover { color: var(--tgk-accent-text) !important; }
.tgk-checkout #checkout-items-container { max-height: 340px !important; }
.tgk-checkout #order-summary-sticky .space-y-3 { font-size: 0.875rem !important; font-family: var(--tgk-font-body) !important; }
.tgk-checkout #order-summary-sticky .space-y-3 > div { color: var(--tgk-color-text-muted) !important; }
.tgk-checkout #subtotal-val, .tgk-checkout #tax-val { color: var(--tgk-color-text) !important; font-variant-numeric: tabular-nums; }
.tgk-checkout #shipping-val, .tgk-checkout #discount-val { color: var(--tgk-color-success) !important; }
.tgk-checkout #order-summary-sticky .text-sm.uppercase { font-family: var(--tgk-font-mono) !important; font-weight: 500 !important; font-size: 0.75rem !important; letter-spacing: 0.14em; color: var(--tgk-color-text) !important; align-items: baseline; }
.tgk-checkout #total-val { font-family: var(--tgk-font-display) !important; font-size: 2rem !important; line-height: 1; color: var(--tgk-accent-text) !important; }
.tgk-checkout .promo-input { flex: 1; border-radius: var(--tgk-radius-sm) !important; padding: 0 1rem !important; }
.tgk-checkout #sticky-promo-apply { min-height: 52px; padding: 0 1.25rem !important; border-radius: var(--tgk-radius-sm) !important; background: rgba(var(--tgk-fg-rgb), 0.06) !important; border: 1px solid var(--tgk-color-line-strong); color: var(--tgk-color-text) !important; font: 600 0.75rem/1 var(--tgk-font-body) !important; letter-spacing: 0.14em !important; }
.tgk-checkout #sticky-promo-apply:hover { border-color: var(--tgk-color-orange); color: var(--tgk-accent-text) !important; }
.tgk-checkout .promo-success { color: var(--tgk-color-success); font-size: 0.8125rem; }
.tgk-checkout .promo-error { color: var(--cx-bad); font-size: 0.8125rem; }
.tgk-checkout #order-summary-sticky .text-center.text-white\/40 { font-size: 0.8125rem !important; color: var(--tgk-color-text-subtle) !important; border-radius: var(--tgk-radius-md) !important; }
.tgk-checkout #order-summary-sticky .text-center.text-white\/40 a { color: var(--tgk-accent-text) !important; }
@media (min-width: 1024px) { .tgk-checkout .lg\:top-28 { top: calc(var(--tgk-header-h) + 1.25rem) !important; } }

/* Floating cart button (mobile) */
.tgk-checkout #open-cart-btn { background: var(--tgk-color-orange) !important; color: var(--tgk-color-text-ink) !important; }

/* Success screen */
.tgk-checkout .co-success { max-width: 620px; margin: 2.5rem auto; padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); text-align: center; border-radius: var(--tgk-radius-lg); border: 1px solid rgba(61, 214, 140, 0.3); background: linear-gradient(180deg, rgba(61, 214, 140, 0.07), rgba(var(--tgk-ink-2-rgb), 0.95)); }
.tgk-checkout .co-success__icon { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; margin-bottom: 1rem; font-size: 2rem; color: var(--tgk-color-success); background: rgba(61, 214, 140, 0.1); border: 1px solid rgba(61, 214, 140, 0.35); }
.tgk-checkout .co-success__title { margin: 0 0 0.6rem; font-size: 2rem !important; line-height: 1; font-weight: 700; text-transform: uppercase; color: var(--tgk-color-text); }
.tgk-checkout .co-success__text { color: var(--tgk-color-text-muted); margin-bottom: 1.75rem !important; }
.tgk-checkout .co-success__recap { display: grid; gap: 0.6rem; text-align: left; padding: 1.25rem; border-radius: var(--tgk-radius-md); background: rgba(0, 0, 0, 0.3); border: 1px solid var(--tgk-color-line); color: var(--tgk-color-text); font-size: 0.9375rem; overflow-wrap: anywhere; }
.tgk-checkout .co-success__recap strong { color: var(--tgk-color-text-subtle); font: 500 0.6875rem/1.3 var(--tgk-font-mono); letter-spacing: 0.14em; text-transform: uppercase; margin-right: 0.35rem; }
.tgk-checkout .co-success__amount { color: var(--tgk-color-success); font-weight: 700; }
.tgk-checkout .co-success__actions { margin-top: 1.75rem; }
.tgk-checkout #order-summary-sticky h3.text-sm { font-family: var(--tgk-font-display) !important; font-size: 1.5rem !important; letter-spacing: 0.02em !important; }
.tgk-checkout #panel-contact > .flex { flex-wrap: wrap; gap: 0.75rem; }
.tgk-checkout #panel-contact a[href="sign-in"] span { white-space: nowrap; }

/* Floating cart button (mobile): the original never positioned it, so it sat
   in page flow at the top-left under the header. Pin it bottom-right. */
@media (max-width: 1023px) {
  .tgk-checkout #open-cart-btn {
    position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 60;
    width: 52px; height: 52px; border-radius: 50%; border: 0;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  }
  /* Item count: a dark pill with a white number, ringed in the page color so it stands off the orange button in
     both modes. Hidden while the cart is empty (the button is dimmed then). */
  .tgk-checkout #open-cart-btn #cart-count-bubble {
    position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
    display: grid; place-items: center; background: var(--tgk-color-text-ink); color: #fff;
    font: 700 0.6875rem/1 var(--tgk-font-body); box-shadow: 0 0 0 2px var(--tgk-color-ink); pointer-events: none;
  }
  .tgk-checkout #open-cart-btn.cart-disabled #cart-count-bubble { display: none; }
}

/* Light mode (everything above follows the design tokens; these give light values to the few colors made for a dark page) */
html[data-theme="light"] .tgk-checkout { --co-thumb-bg: var(--tgk-color-ink-3); --co-faint: var(--tgk-color-text-subtle); --co-fainter: var(--tgk-color-text-subtle); }
html[data-theme="light"] .tgk-checkout .co-main { background: radial-gradient(80% 50% at 100% 0%, rgba(0, 51, 102, 0.06), transparent 60%), var(--tgk-color-ink); }
html[data-theme="light"] .tgk-checkout .form-panel { box-shadow: 0 18px 44px -30px rgba(17, 22, 28, 0.3); }
html[data-theme="light"] .tgk-checkout #payment-element { background: var(--tgk-color-ink-2) !important; }
html[data-theme="light"] .tgk-checkout .co-success__recap { background: rgba(var(--tgk-fg-rgb), 0.04); }
html[data-theme="light"] .tgk-checkout #open-cart-btn { box-shadow: 0 10px 24px -8px rgba(17, 22, 28, 0.35); }