/* Uniclima Checkout Stylesheet — consolidated 2026-04-29
   Scope: body.woocommerce-checkout
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. DESIGN TOKENS
   ---------------------------------------------------------------------------- */
body.woocommerce-checkout,
body.woocommerce-cart {
  --ucn-checkout-brand: #C8102E;
  --ucn-checkout-brand-dark: #a60d25;
  --ucn-checkout-brand-soft: #fef1f2;
  --ucn-checkout-ink: #0a0a0a;
  --ucn-checkout-ink-2: #1e293b;
  --ucn-checkout-muted: #64748b;
  --ucn-checkout-muted-2: #94a3b8;
  --ucn-checkout-line: #eef0f3;
  --ucn-checkout-line-2: #e2e6ec;
  --ucn-checkout-bg: #fafbfc;
  --ucn-checkout-card: #ffffff;
  --ucn-checkout-ring: rgba(200, 16, 46, 0.12);
  --ucn-checkout-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.03);
  --ucn-checkout-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
  --ucn-checkout-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.03);
  --ucn-checkout-radius: 14px;
  --ucn-checkout-radius-lg: 20px;
  --ucn-checkout-radius-sm: 10px;
  --ast-container-max-width: 1440px !important;
}

/* ----------------------------------------------------------------------------
   2. DARK MODE / DARK READER DEFENSE — checkout always light
   ---------------------------------------------------------------------------- */
body.woocommerce-checkout,
body.woocommerce-checkout html,
body.woocommerce-checkout #page,
body.woocommerce-checkout .site,
body.woocommerce-checkout .site-content,
body.woocommerce-checkout #content,
body.woocommerce-checkout #primary,
body.woocommerce-checkout main#main,
body.woocommerce-checkout .ast-container,
body.woocommerce-checkout .entry-content,
body.woocommerce-checkout form.checkout {
  color-scheme: light only !important;
  forced-color-adjust: none !important;
}

body.woocommerce-checkout {
  background-color: var(--ucn-checkout-bg) !important;
  background-attachment: initial !important;
  color: var(--ucn-checkout-ink) !important;
}

@media (prefers-color-scheme: dark) {
  body.woocommerce-checkout,
  body.woocommerce-checkout html,
  body.woocommerce-checkout #page,
  body.woocommerce-checkout .site,
  body.woocommerce-checkout .site-content,
  body.woocommerce-checkout #content,
  body.woocommerce-checkout #primary,
  body.woocommerce-checkout main#main,
  body.woocommerce-checkout .ast-container,
  body.woocommerce-checkout .entry-content,
  body.woocommerce-checkout form.checkout {
    background-color: var(--ucn-checkout-bg) !important;
    color: var(--ucn-checkout-ink) !important;
  }
}

body.woocommerce-checkout h1:not(#colophon *):not(#wpadminbar *):not(#colophon):not(#wpadminbar),
body.woocommerce-checkout h2:not(#colophon *):not(#wpadminbar *):not(#colophon):not(#wpadminbar),
body.woocommerce-checkout h3:not(#colophon *):not(#wpadminbar *):not(#colophon):not(#wpadminbar),
body.woocommerce-checkout h4:not(#colophon *):not(#wpadminbar *):not(#colophon):not(#wpadminbar),
body.woocommerce-checkout p:not(#colophon *):not(#wpadminbar *):not(#colophon):not(#wpadminbar),
body.woocommerce-checkout span:not(#colophon *):not(#wpadminbar *):not(#colophon):not(#wpadminbar),
body.woocommerce-checkout label:not(#colophon *):not(#wpadminbar *):not(#colophon):not(#wpadminbar),
body.woocommerce-checkout li:not(#colophon *):not(#wpadminbar *):not(#colophon):not(#wpadminbar),
body.woocommerce-checkout td:not(#colophon *):not(#wpadminbar *):not(#colophon):not(#wpadminbar),
body.woocommerce-checkout th:not(#colophon *):not(#wpadminbar *):not(#colophon):not(#wpadminbar),
body.woocommerce-checkout strong:not(#colophon *):not(#wpadminbar *):not(#colophon):not(#wpadminbar),
body.woocommerce-checkout em:not(#colophon *):not(#wpadminbar *):not(#colophon):not(#wpadminbar),
body.woocommerce-checkout dt:not(#colophon *):not(#wpadminbar *):not(#colophon):not(#wpadminbar),
body.woocommerce-checkout dd:not(#colophon *):not(#wpadminbar *):not(#colophon):not(#wpadminbar) { color: var(--ucn-checkout-ink-2) !important; }

body.woocommerce-checkout main#main a,
body.woocommerce-checkout form.checkout a { color: var(--ucn-checkout-brand) !important; }

body.woocommerce-checkout input,
body.woocommerce-checkout textarea,
body.woocommerce-checkout select,
body.woocommerce-checkout .select2-selection,
body.woocommerce-checkout .select2-dropdown,
body.woocommerce-checkout .select2-results__options,
body.woocommerce-checkout .select2-results__option {
  background-color: #ffffff !important;
  color: var(--ucn-checkout-ink) !important;
  color-scheme: light only !important;
}
body.woocommerce-checkout input::placeholder,
body.woocommerce-checkout textarea::placeholder { color: var(--ucn-checkout-muted-2) !important; }
body.woocommerce-checkout .select2-results__option--highlighted {
  background-color: var(--ucn-checkout-brand-soft) !important;
  color: var(--ucn-checkout-ink) !important;
}

/* ----------------------------------------------------------------------------
   3. HIDE / CLEANUP — XOO login, redundant titles, Stripe Payment Request iframe
   ---------------------------------------------------------------------------- */
body.woocommerce-checkout .xoo-el-inline-cnt,
body.woocommerce-checkout .xoo-aff-before-checkout,
body.woocommerce-checkout .xoo-aff,
body.woocommerce-checkout .xoo-aff-modal-container { display: none !important; }

body.woocommerce-checkout h1.entry-title,
body.woocommerce-checkout .page-title,
body.woocommerce-checkout .entry-header h1,
body.woocommerce-checkout header.entry-header,
body.woocommerce-checkout .post-title,
body.woocommerce-checkout-pay h1.entry-title { display: none !important; }

body.woocommerce-checkout .wc-stripe-payment-request-wrapper,
body.woocommerce-checkout .wc-stripe-payment-request-button,
body.woocommerce-checkout [id^="wc-stripe-payment-request-"],
body.woocommerce-checkout .wc-stripe-paymentRequest,
body.woocommerce-checkout .wc-stripe-payment-request-button-separator,
body.woocommerce-checkout #wc-stripe-payment-request-button-separator,
body.woocommerce-checkout .wcpay-payment-request-wrapper,
body.woocommerce-checkout .stripe-paymentRequest-wrapper,


/* Attribution inputs should not take layout space */
body.woocommerce-checkout #wc-stripe-express-checkout__order-attribution-inputs,
body.woocommerce-checkout wc-order-attribution-inputs { display: none !important; }

/* ----------------------------------------------------------------------------
   4. PAGE CONTAINER — base
   ---------------------------------------------------------------------------- */
body.woocommerce-checkout .site-content,
body.woocommerce-checkout #content,
body.woocommerce-checkout .ast-container,
body.woocommerce-checkout main#main,
body.woocommerce-checkout .entry-content { background: transparent !important; }

html body.woocommerce-checkout div.ast-container {
  max-width: 1440px !important;
  width: 100% !important;
}

body.woocommerce-checkout main#main,
body.woocommerce-checkout .entry-content {
  max-width: 1240px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
/* Outer wrapper carries horizontal padding; vertical padding kept tight to avoid
   stacking gap between header and the checkout columns (fix-6). */
body.woocommerce-checkout main#main {
  padding: clamp(8px, 1.5vw, 16px) clamp(16px, 3vw, 40px) !important;
}
body.woocommerce-checkout .entry-content {
  padding: 0 clamp(0px, 0vw, 0px) !important;
}

/* Footer/header anchors keep inherited color (avoid red bleed) */
body.woocommerce-checkout #ucn-header a,
body.woocommerce-checkout .ucn-topbar a,
body.woocommerce-checkout #colophon a,
body.woocommerce-checkout .site-footer a,
body.woocommerce-checkout footer a { color: inherit !important; }

/* ----------------------------------------------------------------------------
   5. FORM LAYOUT — mobile-first stacked, grid on desktop (≥1200)
   Media queries grouped by viewport in section 13.
   ---------------------------------------------------------------------------- */
body.woocommerce-checkout form.checkout.woocommerce-checkout {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: none !important;
}

/* Form children — full width, neutralize Astra floats */
body.woocommerce-checkout #customer_details,
body.woocommerce-checkout #order_review,
body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout form.checkout > #customer_details,
body.woocommerce-checkout form.checkout > .ucn-main-col,
body.woocommerce-checkout form.checkout > .ucn-review-wrap,
body.woocommerce-checkout form.checkout > #order_review,
body.woocommerce-checkout form.checkout > #order_review_heading {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  grid-column: auto !important;
  position: static !important;
  float: none !important;
  clear: both !important;
}

body.woocommerce-checkout #customer_details.col2-set { display: block !important; }

body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2 {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Review wrapper — collapse stacked card top/bottom radii */
body.woocommerce-checkout .ucn-review-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: var(--ucn-checkout-shadow-md) !important;
  border-radius: var(--ucn-checkout-radius-lg) !important;
  overflow: hidden !important;
  padding: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* ----------------------------------------------------------------------------
   6. CARDS (billing details + review)
   ---------------------------------------------------------------------------- */
body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2,
body.woocommerce-checkout #order_review {
  background: var(--ucn-checkout-card) !important;
  border: 1px solid var(--ucn-checkout-line) !important;
  border-radius: var(--ucn-checkout-radius-lg) !important;
  box-shadow: var(--ucn-checkout-shadow-sm) !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
  transition: box-shadow .2s ease !important;
}
body.woocommerce-checkout #customer_details .col-1:hover,
body.woocommerce-checkout #customer_details .col-2:hover,
body.woocommerce-checkout .ucn-review-wrap:hover { box-shadow: var(--ucn-checkout-shadow-md) !important; }

body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout .woocommerce-additional-fields {
  padding: clamp(20px, 2.5vw, 32px) !important;
}

/* Review heading — dark gradient pill */
body.woocommerce-checkout .ucn-review-wrap > h3#order_review_heading {
  background: linear-gradient(135deg, #0a0a0a 0%, #1e293b 100%) !important;
  color: #fff !important;
  padding: 20px 24px !important;
  border: none !important;
  border-radius: var(--ucn-checkout-radius-lg) var(--ucn-checkout-radius-lg) 0 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
body.woocommerce-checkout .ucn-review-wrap > h3#order_review_heading::before { background: var(--ucn-checkout-brand) !important; }
body.woocommerce-checkout .ucn-review-wrap > #order_review {
  background: var(--ucn-checkout-card) !important;
  border: none !important;
  border-radius: 0 0 var(--ucn-checkout-radius-lg) var(--ucn-checkout-radius-lg) !important;
  box-shadow: none !important;
  padding: 20px !important;
  margin: 0 !important;
}

/* Section titles inside cards */
body.woocommerce-checkout h3:not(#colophon *):not(#wpadminbar *),
body.woocommerce-checkout .woocommerce-billing-fields h3:not(#colophon *):not(#wpadminbar *),
body.woocommerce-checkout .woocommerce-shipping-fields h3:not(#colophon *):not(#wpadminbar *),
body.woocommerce-checkout .woocommerce-additional-fields h3:not(#colophon *):not(#wpadminbar *) {
  font-family: 'Syne', system-ui, sans-serif !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  margin: 0 0 20px 0 !important;
  padding: 0 0 14px 0 !important;
  border-bottom: 1px solid var(--ucn-checkout-line) !important;
  color: var(--ucn-checkout-ink) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
body.woocommerce-checkout h3::before {
  content: "" !important;
  width: 3px !important;
  height: 18px !important;
  background: var(--ucn-checkout-brand) !important;
  border-radius: 2px !important;
  display: inline-block !important;
}

/* ----------------------------------------------------------------------------
   7. FORM FIELDS
   ---------------------------------------------------------------------------- */
body.woocommerce-checkout .form-row {
  display: block !important;
  margin-bottom: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  float: none !important;
}
body.woocommerce-checkout .form-row label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ucn-checkout-ink-2) !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.005em !important;
}
body.woocommerce-checkout .form-row input.input-text,
body.woocommerce-checkout .form-row textarea,
body.woocommerce-checkout .form-row select,
body.woocommerce-checkout .select2-selection {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 48px !important;
  padding: 12px 16px !important;
  background: #fff !important;
  border: 1.5px solid var(--ucn-checkout-line-2) !important;
  border-radius: var(--ucn-checkout-radius-sm) !important;
  font-size: 15px !important;
  font-family: inherit !important;
  color: var(--ucn-checkout-ink) !important;
  transition: all .18s ease !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
}
body.woocommerce-checkout .form-row textarea {
  height: auto !important;
  min-height: 110px !important;
  padding: 14px 16px !important;
  line-height: 1.5 !important;
  resize: vertical !important;
}
body.woocommerce-checkout .form-row input.input-text:hover,
body.woocommerce-checkout .form-row textarea:hover,
body.woocommerce-checkout .form-row select:hover,
body.woocommerce-checkout .select2-selection:hover { border-color: #cbd5e1 !important; }
body.woocommerce-checkout .form-row input.input-text:focus,
body.woocommerce-checkout .form-row textarea:focus,
body.woocommerce-checkout .form-row select:focus,
body.woocommerce-checkout .select2-container--focus .select2-selection,
body.woocommerce-checkout .select2-container--open .select2-selection {
  border-color: var(--ucn-checkout-brand) !important;
  box-shadow: 0 0 0 4px var(--ucn-checkout-ring) !important;
  outline: 0 !important;
}

body.woocommerce-checkout .select2-container { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }
body.woocommerce-checkout .select2-selection__rendered {
  line-height: 46px !important;
  padding-left: 0 !important;
  color: var(--ucn-checkout-ink) !important;
  font-size: 15px !important;
}
body.woocommerce-checkout .select2-selection__arrow { height: 48px !important; }
body.woocommerce-checkout .select2-dropdown {
  border: 1.5px solid var(--ucn-checkout-line-2) !important;
  border-radius: var(--ucn-checkout-radius-sm) !important;
  box-shadow: var(--ucn-checkout-shadow-md) !important;
  overflow: hidden !important;
}
body.woocommerce-checkout .select2-results__option { padding: 10px 16px !important; font-size: 14px !important; }

body.woocommerce-checkout .required {
  color: var(--ucn-checkout-brand) !important;
  text-decoration: none !important;
  margin-left: 2px !important;
  font-weight: 700 !important;
}

/* Checkboxes / radios */
body.woocommerce-checkout input[type="checkbox"],
body.woocommerce-checkout input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--ucn-checkout-brand) !important;
  cursor: pointer !important;
}
body.woocommerce-checkout .woocommerce-form__label-for-checkbox,
body.woocommerce-checkout .form-row label.checkbox {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ucn-checkout-ink-2) !important;
  margin: 0 !important;
  cursor: pointer !important;
}

/* Validation states */
body.woocommerce-checkout .woocommerce-invalid input.input-text,
body.woocommerce-checkout .woocommerce-invalid textarea,
body.woocommerce-checkout .woocommerce-invalid select,
body.woocommerce-checkout .woocommerce-invalid .select2-selection {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12) !important;
}
body.woocommerce-checkout .woocommerce-validated input.input-text,
body.woocommerce-checkout .woocommerce-validated textarea,
body.woocommerce-checkout .woocommerce-validated select,
body.woocommerce-checkout .woocommerce-validated .select2-selection {
  border-color: #059669 !important;
}

/* ----------------------------------------------------------------------------
   8. ORDER REVIEW TABLE
   ---------------------------------------------------------------------------- */
body.woocommerce-checkout .shop_table {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-collapse: collapse !important;
  margin: 0 !important;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table { width: 100% !important; table-layout: auto !important; }
body.woocommerce-checkout .shop_table thead th { display: none !important; }
body.woocommerce-checkout .shop_table tbody tr.cart_item {
  border-bottom: 1px solid var(--ucn-checkout-line) !important;
  position: relative !important;
}
body.woocommerce-checkout .shop_table tbody tr.cart_item:last-child { border-bottom: 0 !important; }
body.woocommerce-checkout .shop_table td {
  padding: 14px 0 !important;
  border: none !important;
  background: transparent !important;
  font-size: 14px !important;
  vertical-align: top !important;
}
body.woocommerce-checkout .shop_table td.product-name {
  color: var(--ucn-checkout-ink) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  padding-left: 76px !important;   /* room for thumbnail */
  padding-right: 28px !important;  /* room for remove btn */
  position: relative !important;
}
body.woocommerce-checkout .shop_table td.product-name .product-quantity { display: none !important; }
body.woocommerce-checkout .shop_table tr.cart_item td.product-total {
  text-align: right !important;
  white-space: nowrap !important;
  font-weight: 600 !important;
  color: var(--ucn-checkout-ink) !important;
  padding-top: 14px !important;
  vertical-align: top !important;
}

body.woocommerce-checkout .shop_table tfoot tr { border: none !important; }
body.woocommerce-checkout .shop_table tfoot th {
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--ucn-checkout-muted) !important;
  font-weight: 600 !important;
  padding: 12px 0 !important;
  border: none !important;
  background: transparent !important;
  vertical-align: top !important;
}
body.woocommerce-checkout .shop_table tfoot td {
  text-align: right !important;
  padding: 12px 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ucn-checkout-ink) !important;
}
body.woocommerce-checkout .shop_table tfoot tr.cart-subtotal th,
body.woocommerce-checkout .shop_table tfoot tr.cart-subtotal td {
  border-top: 1px solid var(--ucn-checkout-line) !important;
}
body.woocommerce-checkout .shop_table tfoot tr.order-total th,
body.woocommerce-checkout .shop_table tfoot tr.order-total td {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--ucn-checkout-ink) !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  padding-top: 18px !important;
  padding-bottom: 6px !important;
  border-top: 2px solid var(--ucn-checkout-line-2) !important;
}
body.woocommerce-checkout .shop_table tfoot tr.order-total .includes_tax {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--ucn-checkout-muted) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  display: block !important;
}
body.woocommerce-checkout .includes_tax {
  font-size: 11px !important;
  color: var(--ucn-checkout-muted) !important;
  font-weight: 500 !important;
}

/* Cart item visual extras (thumb, qty, remove) — JS injected */
body.woocommerce-checkout .ucn-item-thumb {
  position: absolute !important;
  left: 0 !important;
  top: 14px !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: 12px !important;
  background: #fafbfc center center / contain no-repeat !important;
  border: 1px solid var(--ucn-checkout-line) !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
body.woocommerce-checkout .ucn-item-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 6px !important;
  display: block !important;
}
body.woocommerce-checkout .ucn-item-thumb--empty {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--ucn-checkout-muted) !important;
  font-size: 20px !important;
}
body.woocommerce-checkout .ucn-item-name {
  display: block !important;
  font-weight: 600 !important;
  color: var(--ucn-checkout-ink) !important;
  font-size: 13.5px !important;
  line-height: 1.35 !important;
  margin-bottom: 8px !important;
}
body.woocommerce-checkout .ucn-qty {
  display: inline-flex !important;
  align-items: center !important;
  background: #fff !important;
  border: 1.5px solid var(--ucn-checkout-line-2) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  height: 32px !important;
}
body.woocommerce-checkout .ucn-qty button {
  width: 30px !important;
  height: 32px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  color: var(--ucn-checkout-ink) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .12s ease, color .12s ease !important;
}
body.woocommerce-checkout .ucn-qty button:hover:not(:disabled) {
  background: var(--ucn-checkout-brand-soft) !important;
  color: var(--ucn-checkout-brand) !important;
}
body.woocommerce-checkout .ucn-qty button:disabled { opacity: 0.4 !important; cursor: not-allowed !important; }
body.woocommerce-checkout .ucn-qty .ucn-qty-val {
  min-width: 28px !important;
  text-align: center !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--ucn-checkout-ink) !important;
  padding: 0 4px !important;
}
body.woocommerce-checkout .ucn-remove {
  position: absolute !important;
  right: 0 !important;
  top: 14px !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 999px !important;
  color: var(--ucn-checkout-muted-2) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .12s ease, color .12s ease !important;
}
body.woocommerce-checkout .ucn-remove:hover {
  background: var(--ucn-checkout-brand-soft) !important;
  color: var(--ucn-checkout-brand) !important;
}
body.woocommerce-checkout .ucn-remove svg { width: 16px !important; height: 16px !important; }

/* ----------------------------------------------------------------------------
   9. SHIPPING METHODS
   ---------------------------------------------------------------------------- */
body.woocommerce-checkout ul#shipping_method,
body.woocommerce-checkout .woocommerce-shipping-methods {
  margin: 4px 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
body.woocommerce-checkout ul#shipping_method li,
body.woocommerce-checkout .woocommerce-shipping-methods li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  border-radius: var(--ucn-checkout-radius-sm) !important;
  border: 1.5px solid var(--ucn-checkout-line) !important;
  background: #fff !important;
  font-size: 13px !important;
  transition: all .15s ease !important;
  cursor: pointer !important;
}
body.woocommerce-checkout ul#shipping_method li:hover {
  border-color: #cbd5e1 !important;
  background: var(--ucn-checkout-bg) !important;
}
body.woocommerce-checkout ul#shipping_method li:has(input:checked),
body.woocommerce-checkout .woocommerce-shipping-methods li:has(input:checked) {
  border-color: var(--ucn-checkout-brand) !important;
  background: var(--ucn-checkout-brand-soft) !important;
  box-shadow: 0 0 0 3px var(--ucn-checkout-ring) !important;
}
body.woocommerce-checkout ul#shipping_method input[type="radio"],
body.woocommerce-checkout .woocommerce-shipping-methods input[type="radio"] {
  accent-color: var(--ucn-checkout-brand) !important;
  width: 16px !important;
  height: 16px !important;
}
body.woocommerce-checkout ul#shipping_method label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin: 0 !important;
  cursor: pointer !important;
  font-weight: 500 !important;
  color: var(--ucn-checkout-ink) !important;
}
body.woocommerce-checkout .woocommerce-shipping-destination {
  font-size: 12px !important;
  color: var(--ucn-checkout-muted) !important;
  line-height: 1.5 !important;
  padding: 10px 0 !important;
}
body.woocommerce-checkout .woocommerce-shipping-destination a,
body.woocommerce-checkout .woocommerce-shipping-calculator a {
  color: var(--ucn-checkout-brand) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
}

/* ----------------------------------------------------------------------------
   10. PAYMENT METHODS — radio cards + SVG logos
   ---------------------------------------------------------------------------- */
body.woocommerce-checkout #payment {
  background: transparent !important;
  margin: 16px 0 0 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
body.woocommerce-checkout #payment ul.payment_methods {
  list-style: none !important;
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
body.woocommerce-checkout #payment li.wc_payment_method {
  background: #fff !important;
  border: 1.5px solid var(--ucn-checkout-line-2) !important;
  border-radius: var(--ucn-checkout-radius) !important;
  padding: 0 !important;
  overflow: hidden !important;
  transition: all .18s ease !important;
  list-style: none !important;
  position: relative !important;
}
body.woocommerce-checkout #payment li.wc_payment_method:hover {
  border-color: #cbd5e1 !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--ucn-checkout-shadow-sm) !important;
}
body.woocommerce-checkout #payment li.wc_payment_method.ucn-expanded,
body.woocommerce-checkout #payment li.wc_payment_method:has(> input:checked) {
  border-color: var(--ucn-checkout-brand) !important;
  box-shadow: 0 0 0 3px var(--ucn-checkout-ring), var(--ucn-checkout-shadow-sm) !important;
  transform: none !important;
}
body.woocommerce-checkout #payment li.wc_payment_method > input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body.woocommerce-checkout #payment li.wc_payment_method > label {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 18px 16px 52px !important;
  cursor: pointer !important;
  min-height: 60px !important;
  position: relative !important;
  color: transparent !important;
  user-select: none !important;
  margin: 0 !important;
  line-height: 1 !important;
  font-size: 0 !important;
}
body.woocommerce-checkout #payment li.wc_payment_method > label > * {
  color: var(--ucn-checkout-ink) !important;
  font-size: 14px !important;
}
body.woocommerce-checkout #payment li.wc_payment_method > label img { display: none !important; }

/* Custom radio indicator */
body.woocommerce-checkout #payment li.wc_payment_method > label::before {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid #cbd5e1 !important;
  border-radius: 999px !important;
  background: #fff !important;
  transition: all .15s ease !important;
}
body.woocommerce-checkout #payment li.wc_payment_method.ucn-expanded > label::before,
body.woocommerce-checkout #payment li.wc_payment_method:has(> input:checked) > label::before {
  border-color: var(--ucn-checkout-brand) !important;
  box-shadow: inset 0 0 0 5px var(--ucn-checkout-brand) !important;
}

/* SVG logo on the right of label */
body.woocommerce-checkout #payment li.wc_payment_method > label::after {
  content: "";
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 28px !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: contain !important;
  pointer-events: none !important;
}

/* STRIPE — card + LINK logos */
body.woocommerce-checkout #payment li.payment_method_stripe > label::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 40'><rect x='0' y='0' width='60' height='40' rx='6' fill='%23635BFF'/><text x='30' y='26' text-anchor='middle' fill='white' font-family='Arial,sans-serif' font-size='16' font-weight='700'>stripe</text><rect x='72' y='4' width='44' height='32' rx='4' fill='%231A1F71'/><text x='94' y='25' text-anchor='middle' fill='white' font-family='Arial,sans-serif' font-size='11' font-weight='700'>VISA</text><circle cx='138' cy='20' r='10' fill='%23EB001B'/><circle cx='154' cy='20' r='10' fill='%23F79E1B' fill-opacity='.9'/><rect x='176' y='6' width='40' height='28' rx='4' fill='%231DDA7F'/><text x='196' y='25' text-anchor='middle' fill='white' font-family='Arial,sans-serif' font-size='11' font-weight='700'>link</text></svg>");
  width: 220px !important;
}
/* PAYPAL */
body.woocommerce-checkout #payment li.payment_method_ppcp > label::after,
body.woocommerce-checkout #payment li.payment_method_ppcp-gateway > label::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 28'><text x='0' y='22' font-family='Arial,sans-serif' font-size='24' font-weight='700' fill='%23003087'>Pay</text><text x='48' y='22' font-family='Arial,sans-serif' font-size='24' font-weight='700' fill='%23009CDE'>Pal</text></svg>");
  width: 100px !important;
}
/* BIZUM */
body.woocommerce-checkout #payment li.payment_method_redsys_bizum > label::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 30'><text x='0' y='23' font-family='Arial,sans-serif' font-size='22' font-weight='800' fill='%2300C3E8'>bizum</text></svg>");
  width: 110px !important;
}
/* REDSYS */
body.woocommerce-checkout #payment li.payment_method_redsys > label::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 30'><rect x='0' y='4' width='44' height='22' rx='3' fill='%231A1F71'/><text x='22' y='20' text-anchor='middle' fill='white' font-family='Arial,sans-serif' font-size='10' font-weight='700'>VISA</text><circle cx='70' cy='15' r='9' fill='%23EB001B'/><circle cx='84' cy='15' r='9' fill='%23F79E1B' fill-opacity='.85'/><rect x='102' y='4' width='36' height='22' rx='3' fill='%23ed1c2e'/><text x='120' y='20' text-anchor='middle' fill='white' font-family='Arial,sans-serif' font-size='8' font-weight='700'>Redsys</text></svg>");
  width: 140px !important;
}

/* Cosmetic styling only. WooCommerce/Stripe toggle .payment_box visibility
   via inline style.display — DO NOT add display:none/block here, that breaks
   Stripe Elements mounting (see PROJECT.md memory: Apr 17 CSS surgery). */
body.woocommerce-checkout #payment li.wc_payment_method .payment_box {
  padding: 0 18px 16px !important;
  margin: 0 !important;
  background: #fafbfc !important;
  border-radius: 0 !important;
  color: #334155 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}
body.woocommerce-checkout #payment li.wc_payment_method .payment_box::before { display: none !important; }
body.woocommerce-checkout #payment li.wc_payment_method.ucn-expanded .payment_box {
  border-top: 1px solid var(--ucn-checkout-line) !important;
  padding-top: 14px !important;
}

/* ----------------------------------------------------------------------------
   11. PLACE ORDER + COUPON + NOTICES
   ---------------------------------------------------------------------------- */
body.woocommerce-checkout #place_order {
  width: 100% !important;
  background: linear-gradient(135deg, var(--ucn-checkout-brand) 0%, var(--ucn-checkout-brand-dark) 100%) !important;
  color: #fff !important;
  border: none !important;
  height: 56px !important;
  border-radius: var(--ucn-checkout-radius) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.005em !important;
  cursor: pointer !important;
  margin-top: 18px !important;
  transition: all .2s ease !important;
  font-family: inherit !important;
  box-shadow: 0 4px 14px rgba(200, 16, 46, 0.3), 0 1px 2px rgba(200, 16, 46, 0.15) !important;
  position: relative !important;
  overflow: hidden !important;
  text-transform: none !important;
}
body.woocommerce-checkout #place_order::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent 50%) !important;
  pointer-events: none !important;
}
body.woocommerce-checkout #place_order:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(200, 16, 46, 0.4), 0 2px 4px rgba(200, 16, 46, 0.2) !important;
}
body.woocommerce-checkout #place_order:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(200, 16, 46, 0.3) !important;
}

/* Coupon */
body.woocommerce-checkout .woocommerce-form-coupon-toggle,
body.woocommerce-checkout .woocommerce-info {
  background: linear-gradient(135deg, #fff 0%, #fafbfc 100%) !important;
  border: 1.5px dashed var(--ucn-checkout-brand) !important;
  border-style: solid !important;
  border-width: 1.5px !important;
  border-radius: var(--ucn-checkout-radius) !important;
  padding: 14px 18px !important;
  color: var(--ucn-checkout-ink) !important;
  font-size: 14px !important;
  margin: 0 0 20px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
body.woocommerce-checkout .woocommerce-info::before {
  display: inline-block !important;
  content: "🎟" !important;
  font-size: 18px !important;
  position: static !important;
  color: var(--ucn-checkout-brand) !important;
  background: none !important;
  top: auto !important;
  left: auto !important;
}
body.woocommerce-checkout .showcoupon {
  color: var(--ucn-checkout-brand) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
}

/* Privacy + notices */
body.woocommerce-checkout .woocommerce-privacy-policy-text {
  font-size: 12.5px !important;
  color: var(--ucn-checkout-muted) !important;
  line-height: 1.55 !important;
  margin: 16px 0 !important;
  padding: 12px 14px !important;
  background: var(--ucn-checkout-bg) !important;
  border-radius: var(--ucn-checkout-radius-sm) !important;
}
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-checkout .woocommerce-message {
  border-radius: var(--ucn-checkout-radius) !important;
  border: none !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  box-shadow: var(--ucn-checkout-shadow-sm) !important;
}

/* Loader overlay */
body.woocommerce-checkout .blockUI.blockOverlay {
  background-color: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  border-radius: var(--ucn-checkout-radius-lg) !important;
}

/* ----------------------------------------------------------------------------
   12. EXPRESS CHECKOUT (Stripe Payment Element)
   ---------------------------------------------------------------------------- */
body.woocommerce-checkout #wc-stripe-express-checkout-element {
  background: linear-gradient(135deg, #fff 0%, #fafbfc 100%) !important;
  border: 1px solid var(--ucn-checkout-line) !important;
  border-radius: var(--ucn-checkout-radius-lg) !important;
  padding: 18px 20px !important;
  margin: 0 0 14px 0 !important;
  box-shadow: var(--ucn-checkout-shadow-sm) !important;
}
body.woocommerce-checkout #wc-stripe-express-checkout-button-separator {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--ucn-checkout-muted) !important;
  margin: 8px 0 18px 0 !important;
}
body.woocommerce-checkout #wc-stripe-express-checkout-button-separator::before,
body.woocommerce-checkout #wc-stripe-express-checkout-button-separator::after {
  content: "" !important;
  flex: 1 1 auto !important;
  height: 1px !important;
  background: linear-gradient(to right, transparent, var(--ucn-checkout-line-2), transparent) !important;
}

/* ============================================================================
   13. RESPONSIVE — single source of truth
     - Mobile        ≤768px
     - Mid-mobile    ≤899px (review-on-top, collapse padding)
     - Tablet        900–1199px
     - Desktop       ≥1200px (true 2-col grid)
     - Wide desktop  ≥1440px
   ============================================================================ */

/* ----- Mobile ≤768px ----- */
@media (max-width: 768px) {
  body.woocommerce-checkout div.ast-container { padding: 0 12px !important; max-width: 100% !important; }
  body.woocommerce-checkout main#main { padding: 16px 0 !important; max-width: 100% !important; }
  body.woocommerce-checkout .entry-content { padding: 0 !important; max-width: 100% !important; margin: 0 !important; }

  body.woocommerce-checkout form.checkout.woocommerce-checkout {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  body.woocommerce-checkout #customer_details,
  body.woocommerce-checkout .ucn-review-wrap,
  body.woocommerce-checkout #order_review {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  body.woocommerce-checkout #customer_details .col-1,
  body.woocommerce-checkout #customer_details .col-2,
  body.woocommerce-checkout .woocommerce-billing-fields,
  body.woocommerce-checkout .woocommerce-shipping-fields,
  body.woocommerce-checkout .woocommerce-additional-fields {
    padding: 16px !important;
    box-sizing: border-box !important;
  }
  body.woocommerce-checkout .ucn-review-wrap > h3#order_review_heading { padding: 14px 16px !important; font-size: 1rem !important; }
  body.woocommerce-checkout .ucn-review-wrap > #order_review { padding: 14px 16px !important; }
  body.woocommerce-checkout .checkout_coupon,
  body.woocommerce-checkout .woocommerce-form-coupon-toggle { padding: 12px 16px !important; }

  body.woocommerce-checkout .form-row,
  body.woocommerce-checkout .form-row input.input-text,
  body.woocommerce-checkout .form-row textarea,
  body.woocommerce-checkout .form-row select,
  body.woocommerce-checkout .select2-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }
  body.woocommerce-checkout .form-row input.input-text,
  body.woocommerce-checkout .form-row textarea,
  body.woocommerce-checkout .form-row select,
  body.woocommerce-checkout .select2-selection { height: 46px !important; font-size: 15px !important; }

  body.woocommerce-checkout #place_order { height: 54px !important; font-size: 15px !important; }

  body.woocommerce-checkout #payment li.wc_payment_method > label { padding: 14px 16px 14px 48px !important; min-height: 56px !important; }
  body.woocommerce-checkout #payment li.wc_payment_method > label::before { left: 16px !important; }
  body.woocommerce-checkout #payment li.wc_payment_method > label::after { right: 14px !important; height: 24px !important; }

  body.woocommerce-checkout .shop_table tr.cart_item td.product-name { padding-left: 64px !important; padding-right: 12px !important; }
  body.woocommerce-checkout .ucn-item-thumb { width: 52px !important; height: 52px !important; }
}

/* ----- Mid-mobile ≤899px — review on top, then form ----- */
@media (max-width: 899px) {
  body.woocommerce-checkout form.checkout.woocommerce-checkout {
    display: flex !important;
    flex-direction: column !important;
  }
  body.woocommerce-checkout form.checkout > .ucn-review-wrap,
  body.woocommerce-checkout form.checkout > #order_review_heading,
  body.woocommerce-checkout form.checkout > #order_review { order: 2 !important; }
  body.woocommerce-checkout form.checkout > #customer_details,
  body.woocommerce-checkout form.checkout > .ucn-main-col { order: 3 !important; }
  body.woocommerce-checkout form.checkout > #wc-stripe-express-checkout-element,
  body.woocommerce-checkout form.checkout > #wc-stripe-express-checkout-button-separator { order: 1 !important; }

  /* No 2-col billing on mobile */
  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
    display: block !important;
    grid-template-columns: none !important;
  }
}

/* ----- Tablet 900–1199px — stacked, roomier, 2-col billing inside card ----- */
@media (min-width: 900px) and (max-width: 1199px) {
  body.woocommerce-checkout form.checkout.woocommerce-checkout {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
  body.woocommerce-checkout main#main {
    padding: 12px 24px !important;
    max-width: 100% !important;
  }
  body.woocommerce-checkout .entry-content {
    padding: 0 !important;
    max-width: 100% !important;
  }
  body.woocommerce-checkout #customer_details .col-1,
  body.woocommerce-checkout #customer_details .col-2,
  body.woocommerce-checkout .woocommerce-billing-fields,
  body.woocommerce-checkout .woocommerce-shipping-fields,
  body.woocommerce-checkout .woocommerce-additional-fields { padding: 24px !important; box-sizing: border-box !important; }

  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 16px !important;
  }
  body.woocommerce-checkout #billing_first_name_field,
  body.woocommerce-checkout #billing_last_name_field,
  body.woocommerce-checkout #billing_city_field,
  body.woocommerce-checkout #billing_postcode_field { grid-column: span 1 !important; }
  body.woocommerce-checkout #billing_email_field,
  body.woocommerce-checkout #billing_company_field,
  body.woocommerce-checkout #billing_country_field,
  body.woocommerce-checkout #billing_address_1_field,
  body.woocommerce-checkout #billing_address_2_field,
  body.woocommerce-checkout #billing_state_field,
  body.woocommerce-checkout #billing_phone_field,
  body.woocommerce-checkout .form-row-wide { grid-column: 1 / -1 !important; }
}

/* ----- Desktop ≥1200px — 2-col grid (fluid left + 380px sticky sidebar) ----- */
@media (min-width: 1200px) {
  body.woocommerce-checkout main#main { padding: 16px 32px !important; }
  body.woocommerce-checkout .entry-content { padding: 0 !important; }

  body.woocommerce-checkout form.checkout.woocommerce-checkout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 380px !important;
    gap: 32px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.woocommerce-checkout form.checkout > #wc-stripe-express-checkout-element,
  body.woocommerce-checkout form.checkout > #wc-stripe-express-checkout-button-separator,
  body.woocommerce-checkout form.checkout > .woocommerce-form-coupon-toggle,
  body.woocommerce-checkout form.checkout > .checkout_coupon { grid-column: 1 / -1 !important; }

  body.woocommerce-checkout form.checkout > #customer_details,
  body.woocommerce-checkout form.checkout > .ucn-main-col { grid-column: 1 !important; min-width: 0 !important; }

  body.woocommerce-checkout form.checkout > .ucn-review-wrap,
  body.woocommerce-checkout form.checkout > #order_review_heading,
  body.woocommerce-checkout form.checkout > #order_review {
    grid-column: 2 !important;
    position: sticky !important;
    top: 96px !important;
    align-self: start !important;
    min-width: 0 !important;
  }

  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 16px !important;
  }
  body.woocommerce-checkout #billing_first_name_field,
  body.woocommerce-checkout #billing_last_name_field,
  body.woocommerce-checkout #billing_city_field,
  body.woocommerce-checkout #billing_postcode_field { grid-column: span 1 !important; }
  body.woocommerce-checkout #billing_email_field,
  body.woocommerce-checkout #billing_company_field,
  body.woocommerce-checkout #billing_country_field,
  body.woocommerce-checkout #billing_address_1_field,
  body.woocommerce-checkout #billing_address_2_field,
  body.woocommerce-checkout #billing_state_field,
  body.woocommerce-checkout #billing_phone_field,
  body.woocommerce-checkout .form-row-wide { grid-column: 1 / -1 !important; }
}

/* ----- Wide desktop ≥1440px — bigger sidebar ----- */
@media (min-width: 1440px) {
  body.woocommerce-checkout form.checkout.woocommerce-checkout {
    grid-template-columns: minmax(0, 1fr) 420px !important;
    gap: 40px !important;
  }
}

/* === fase-fix-9 (2026-04-30) — replaced overly-broad iframe[src*=stripe.com] rules ===
   The original 3 rules killed the main Stripe Elements iframe (form de tarjeta). 
   Now scoped to ONLY hide Stripe metrics + Express Checkout banner iframes,
   never the payment element iframe. */
body.woocommerce-checkout iframe[name*="StripeMetricsController"],
body.woocommerce-checkout iframe[name="hcaptcha-invisible"],
body.woocommerce-checkout #wc-stripe-express-checkout-element iframe {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}