/* ============================================================
   RACEPARTS.PL — CHECKOUT & CART
   One-page checkout, express wallets, order summary
   ============================================================ */

/* ── WC Blocks heading reset ─────────────────────────────────
   WC Blocks renders product names/descriptions inside order
   summary as plain <h1>/<h2>/<h3> — our global heading styles
   (56px uppercase) hit them. Reset to readable sizes here.     */
.wc-block-components-order-summary-item h1,
.wc-block-components-order-summary-item h2,
.wc-block-components-order-summary-item h3,
.wc-block-components-order-summary-item h4,
.wc-block-components-product-metadata h1,
.wc-block-components-product-metadata h2,
.wc-block-components-product-metadata h3,
.wc-block-components-product-name h1,
.wc-block-components-product-name h2 {
  font-size: var(--rp-text-sm) !important;
  text-transform: none !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  color: var(--rp-text-secondary) !important;
  font-style: normal !important;
}

/* ── Checkout page layout ─────────────────────────────────── */
.woocommerce-checkout .site-main,
.wp-block-woocommerce-checkout {
  max-width: var(--rp-max-width);
  margin-inline: auto;
  padding-inline: var(--rp-gutter);
  padding-block: var(--rp-space-12);
}

/* WC Blocks checkout: 2-col on desktop */
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout__main {
  display: grid !important;
  grid-template-columns: 1fr 420px !important;
  gap: var(--rp-space-8) !important;
  align-items: start;
}

@media (max-width: 900px) {
  .wp-block-woocommerce-checkout .wp-block-woocommerce-checkout__main {
    grid-template-columns: 1fr !important;
  }
}

/* ── Section headings ─────────────────────────────────────── */
.woocommerce-checkout h3,
.wc-block-components-title {
  font-family: var(--rp-font-display) !important;
  font-size: var(--rp-text-xl) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--rp-text-primary) !important;
  margin-bottom: var(--rp-space-4) !important;
}

/* ── Express checkout (wallets) banner ────────────────────── */
.rp-express-checkout {
  background: var(--rp-bg-surface);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius-lg);
  padding: var(--rp-space-6);
  margin-bottom: var(--rp-space-8);
}

.rp-express-checkout__label {
  font-size: var(--rp-text-xs);
  color: var(--rp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  text-align: center;
  margin-bottom: var(--rp-space-4);
}

.rp-express-checkout__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rp-space-3);
}

/* Apple Pay / Google Pay / BLIK wrapper */
.rp-express-checkout__buttons .wc-block-components-express-payment,
.rp-express-checkout__buttons #payment .payment_method_stripe .stripe-express-checkout-element {
  border-radius: var(--rp-radius) !important;
  overflow: hidden;
}

.rp-express-divider {
  display: flex;
  align-items: center;
  gap: var(--rp-space-4);
  margin-block: var(--rp-space-6);
  color: var(--rp-text-muted);
  font-size: var(--rp-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rp-express-divider::before,
.rp-express-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rp-border);
}

/* ── Form sections ────────────────────────────────────────── */
.rp-checkout-section {
  background: var(--rp-bg-surface);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius-lg);
  padding: var(--rp-space-6);
  margin-bottom: var(--rp-space-4);
}

.rp-checkout-section__header {
  display: flex;
  align-items: center;
  gap: var(--rp-space-3);
  margin-bottom: var(--rp-space-6);
  padding-bottom: var(--rp-space-4);
  border-bottom: 1px solid var(--rp-border-subtle);
}

.rp-checkout-section__step {
  width: 28px;
  height: 28px;
  background: var(--rp-red);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rp-font-display);
  font-size: var(--rp-text-sm);
  font-weight: 800;
  color: var(--rp-white);
  flex-shrink: 0;
}

/* WC Blocks form overrides */
.wc-block-components-form .wc-block-components-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rp-space-3);
  margin-bottom: var(--rp-space-3) !important;
}
.wc-block-components-form .wc-block-components-form-row--full-width {
  grid-template-columns: 1fr;
}

.wc-block-components-text-input input,
.wc-block-components-select select {
  background: var(--rp-bg-elevated) !important;
  color: var(--rp-text-primary) !important;
  border-color: var(--rp-border) !important;
}

/* ── FIX: WC Blocks floating label — global padding override cuts off label
   design-system.css sets padding:12px 16px!important on all inputs.
   WC Blocks needs padding-top space for the label to float above the text. */
.wc-block-components-text-input input {
  padding-top: 1.625em !important;
  padding-bottom: 0.5em !important;
}
/* Label floats above text when focused/has value */
.wc-block-components-text-input label {
  position: absolute !important;
  pointer-events: none;
  transition: transform 0.2s ease, font-size 0.2s ease;
}
/* When input has value or is focused, label should be at top */
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:not(:placeholder-shown) + label,
.wc-block-components-text-input input:focus + label {
  transform: translateY(-0.75em) scale(0.75);
  transform-origin: left top;
}

/* ── Order summary sidebar ────────────────────────────────── */
.rp-order-summary {
  background: var(--rp-bg-surface);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius-lg);
  padding: var(--rp-space-6);
  position: sticky;
  top: calc(70px + var(--rp-space-4));
}

.rp-order-summary__title {
  font-family: var(--rp-font-display);
  font-size: var(--rp-text-xl);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--rp-space-6);
  padding-bottom: var(--rp-space-4);
  border-bottom: 1px solid var(--rp-border);
}

.rp-order-summary__item {
  display: flex;
  gap: var(--rp-space-3);
  padding-block: var(--rp-space-4);
  border-bottom: 1px solid var(--rp-border-subtle);
}

.rp-order-summary__item-img {
  width: 56px;
  height: 56px;
  background: var(--rp-bg);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius);
  object-fit: contain;
  padding: 4px;
  flex-shrink: 0;
  position: relative;
}

/* Quantity badge */
.rp-order-summary__qty {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  background: var(--rp-red);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rp-white);
}

.rp-order-summary__item-info { flex: 1; min-width: 0; }
.rp-order-summary__item-name {
  font-size: var(--rp-text-sm);
  font-weight: 600;
  color: var(--rp-text-primary);
  line-height: 1.3;
}
.rp-order-summary__item-meta {
  font-size: var(--rp-text-xs);
  color: var(--rp-text-muted);
  margin-top: var(--rp-space-1);
}
.rp-order-summary__item-price {
  font-family: var(--rp-font-display);
  font-size: var(--rp-text-lg);
  font-weight: 700;
  white-space: nowrap;
}

/* Totals */
.rp-order-totals { margin-top: var(--rp-space-4); }
.rp-order-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--rp-space-2);
  font-size: var(--rp-text-sm);
  color: var(--rp-text-secondary);
}
.rp-order-total-row--grand {
  font-family: var(--rp-font-display);
  font-size: var(--rp-text-2xl);
  font-weight: 800;
  color: var(--rp-text-primary);
  border-top: 1px solid var(--rp-border);
  padding-top: var(--rp-space-4);
  margin-top: var(--rp-space-2);
}

/* Coupon field */
.rp-coupon-toggle {
  background: none;
  border: none;
  color: var(--rp-text-muted);
  font-size: var(--rp-text-xs);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  margin-block: var(--rp-space-3);
  display: block;
  transition: color var(--rp-transition);
}
.rp-coupon-toggle:hover { color: var(--rp-red); }

/* ── Strona "Zamówienie otrzymane" (order-received / thank-you) ──
   Storefront renderuje overview (nr/data/email/kwota/metoda) jako
   biały "podarty paragon" (ul.order_details z zigzag :before/:after).
   Na naszym dark theme tekst jest jasny → niewidoczny na białym tle.
   Zamieniamy na czystą ciemną kartę zgodną z design systemem.        */
.woocommerce ul.order_details,
ul.woocommerce-order-overview {
  background: var(--rp-bg-surface) !important;
  border: 1px solid var(--rp-border) !important;
  border-radius: var(--rp-radius-lg) !important;
  color: var(--rp-text-primary) !important;
  padding: var(--rp-space-6) !important;
  margin-bottom: var(--rp-space-8) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--rp-space-4) var(--rp-space-8) !important;
  list-style: none !important;
}
/* Usuń zigzag "torn paper" Storefront */
.woocommerce ul.order_details::before,
.woocommerce ul.order_details::after {
  content: none !important;
  display: none !important;
}
.woocommerce ul.order_details li,
ul.woocommerce-order-overview li {
  color: var(--rp-text-muted) !important;
  border: none !important;
  border-right: 1px solid var(--rp-border) !important;
  padding: 0 var(--rp-space-6) 0 0 !important;
  margin: 0 !important;
  font-size: var(--rp-text-xs) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  line-height: 1.4 !important;
}
.woocommerce ul.order_details li:last-child,
ul.woocommerce-order-overview li:last-child {
  border-right: none !important;
}
.woocommerce ul.order_details li strong,
ul.woocommerce-order-overview li strong {
  display: block !important;
  color: var(--rp-text-primary) !important;
  font-family: var(--rp-font-mono) !important;
  font-size: var(--rp-text-sm) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-top: var(--rp-space-1) !important;
}

/* ── Place order button ────────────────────────────────────── */
#place_order,
.wc-block-components-checkout-place-order-button {
  width: 100% !important;
  padding: 1.1em 2em !important;
  font-size: var(--rp-text-xl) !important;
  letter-spacing: 0.1em !important;
  border-radius: var(--rp-radius) !important;
  margin-top: var(--rp-space-4) !important;
}

/* ── Payment method list ──────────────────────────────────── */
.wc_payment_methods { display: flex; flex-direction: column; gap: var(--rp-space-2); }

.wc_payment_method {
  background: var(--rp-bg-elevated);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius);
  padding: var(--rp-space-4);
  transition: border-color var(--rp-transition);
}
.wc_payment_method:has(input:checked) { border-color: var(--rp-red); }

.wc_payment_method label {
  display: flex;
  align-items: center;
  gap: var(--rp-space-3);
  cursor: pointer;
  font-weight: 500;
  color: var(--rp-text-primary);
  font-size: var(--rp-text-base);
}
.wc_payment_method label img { height: 24px; width: auto; }

/* ── Cart page ────────────────────────────────────────────── */
.woocommerce-cart .site-main {
  max-width: var(--rp-max-width);
  margin-inline: auto;
  padding-inline: var(--rp-gutter);
  padding-block: var(--rp-space-12);
}

.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--rp-text-sm);
}
.shop_table th {
  padding: var(--rp-space-3) var(--rp-space-4);
  text-align: left;
  color: var(--rp-text-muted);
  font-size: var(--rp-text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid var(--rp-border);
}
.shop_table td {
  padding: var(--rp-space-4);
  border-bottom: 1px solid var(--rp-border-subtle);
  color: var(--rp-text-primary);
  vertical-align: middle;
}
.shop_table .product-thumbnail img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: var(--rp-bg-surface);
  border-radius: var(--rp-radius);
  padding: 4px;
}
.cart-collaterals {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--rp-space-8);
}
.cart_totals {
  background: var(--rp-bg-surface);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius-lg);
  padding: var(--rp-space-6);
  min-width: 360px;
}

/* ── FIX: WC Blocks cart ─────────────────────────────────── */

/* Cart page wrapper */
.wp-block-woocommerce-cart {
  max-width: var(--rp-max-width);
  margin-inline: auto;
  padding-inline: var(--rp-gutter);
  padding-block: var(--rp-space-10);
}

/* Hide product description/metadata in cart items (keeps cart clean) */
.wc-block-components-product-metadata,
.wc-block-components-product-metadata__description { display: none !important; }

/* Cart item quantity row: stepper + remove with proper gap */
.wc-block-cart-item__quantity {
  display: flex !important;
  align-items: center !important;
  gap: var(--rp-space-4) !important;
  flex-wrap: nowrap;
}

/* ── Qty stepper: contained unit, NOT red ───────────────────
   Global button{background:rp-red} hits these — override here. */
.wc-block-components-quantity-selector {
  display: flex !important;
  align-items: stretch !important;
  border: 1px solid var(--rp-border) !important;
  border-radius: var(--rp-radius-md) !important;
  overflow: hidden;
  background: var(--rp-bg-elevated) !important;
  height: 40px;
}
.wc-block-components-quantity-selector__button {
  background: var(--rp-bg-elevated) !important;
  color: var(--rp-text-secondary) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 var(--rp-space-3) !important;
  font-size: var(--rp-text-lg) !important;
  font-family: var(--rp-font-mono) !important;
  font-weight: var(--rp-w-regular) !important;
  cursor: pointer;
  min-width: 32px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background var(--rp-transition), color var(--rp-transition) !important;
  transform: none !important;
}
.wc-block-components-quantity-selector__button:hover {
  background: var(--rp-bg-surface) !important;
  color: var(--rp-red-500) !important;
  transform: none !important;
}
.wc-block-components-quantity-selector__input {
  background: var(--rp-bg-elevated) !important;
  color: var(--rp-text-primary) !important;
  border: none !important;
  border-inline: 1px solid var(--rp-border) !important;
  border-radius: 0 !important;
  text-align: center !important;
  font-family: var(--rp-font-mono) !important;
  font-size: var(--rp-text-sm) !important;
  font-weight: var(--rp-w-bold) !important;
  width: 40px !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* ── Remove/trash button: icon only, outside stepper ────────── */
.wc-block-cart-item__remove-link {
  background: transparent !important;
  border: none !important;
  padding: var(--rp-space-2) !important;
  border-radius: var(--rp-radius-sm) !important;
  color: var(--rp-text-muted) !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: color var(--rp-transition), background var(--rp-transition) !important;
  transform: none !important;
}
.wc-block-cart-item__remove-link:hover {
  color: var(--rp-red-500) !important;
  background: var(--rp-red-dim, rgba(209,46,39,0.1)) !important;
  transform: none !important;
}
.wc-block-cart-item__remove-link svg {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
  display: block;
}

/* Cart item product name */
.wc-block-cart-item__product-name a {
  font-family: var(--rp-font-sans);
  font-weight: var(--rp-w-semibold);
  font-size: var(--rp-text-sm);
  color: var(--rp-text-primary) !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Cart item price */
.wc-block-cart-item__total .wc-block-formatted-money-amount,
.wc-block-cart-item__prices .wc-block-formatted-money-amount {
  font-family: var(--rp-font-mono) !important;
  font-weight: var(--rp-w-bold) !important;
  font-size: var(--rp-text-base) !important;
}

/* Cart totals sidebar */
.wc-block-cart__submit-container {
  margin-top: var(--rp-space-4);
}
.wc-block-components-totals-wrapper,
.wc-block-cart__totals-title {
  font-family: var(--rp-font-sans);
}

/* Page title "KOSZYK" styling */
.woocommerce-cart .entry-title,
.woocommerce-cart h1.page-title {
  font-family: var(--rp-font-sans);
  font-weight: var(--rp-w-black);
  font-style: italic;
  font-size: clamp(var(--rp-text-3xl), 5vw, var(--rp-text-4xl));
  text-transform: uppercase;
  letter-spacing: var(--rp-track-tight);
  padding-block: var(--rp-space-8);
}