/* =============================================================
   InfoHub Store — cart and checkout
   Styles WooCommerce's native cart/checkout markup, so coupons,
   quantity updates, order review fragments and every payment
   gateway keep their own behaviour. Depends on base.css.
   ============================================================= */

/* ---- Cart ---------------------------------------------------- */

/* Two columns: items on the left, totals on the right. */
.woocommerce-cart .ih-page--purchase > .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 0 24px;
  align-items: start;
}

.woocommerce-cart .ih-page--purchase > .woocommerce > * { grid-column: 1 / -1; }
.woocommerce-cart .ih-page--purchase > .woocommerce > .woocommerce-cart-form { grid-column: 1; }
.woocommerce-cart .ih-page--purchase > .woocommerce > .cart-collaterals { grid-column: 2; }

.ih-store table.cart { margin-bottom: 0; }

.ih-store table.cart .product-remove { width: 48px; padding-right: 0; }
.ih-store table.cart .product-thumbnail { width: 88px; padding-right: 0; }

.ih-store table.cart .product-thumbnail img {
  display: block;
  width: 64px;
  height: 64px;
  border: 1px solid hsl(var(--ih-border));
  border-radius: var(--ih-radius);
  object-fit: cover;
}

.ih-store table.cart .product-name a {
  color: hsl(var(--ih-foreground));
  font-weight: 500;
}

.ih-store table.cart .product-name dl.variation {
  margin: 4px 0 0;
  color: hsl(var(--ih-muted-foreground));
  font-size: 12px;
}

.ih-store table.cart .product-name dl.variation dt { float: left; margin-right: 4px; }
.ih-store table.cart .product-name dl.variation dd { margin: 0; }
.ih-store table.cart .product-name dl.variation p { margin: 0; }

.ih-store table.cart .product-subtotal { font-weight: 600; }

.ih-store table.cart a.remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: hsl(var(--ih-muted-foreground));
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
}

.ih-store table.cart a.remove:hover {
  background-color: hsl(var(--ih-destructive) / 0.1);
  color: hsl(var(--ih-destructive));
}

.ih-store table.cart td.actions {
  padding: 16px;
  background-color: hsl(var(--ih-muted) / 0.3);
}

.ih-store table.cart td.actions::after { content: ''; display: table; clear: both; }

.ih-store table.cart .coupon {
  display: flex;
  gap: 8px;
  float: left;
}

.ih-store table.cart .coupon .input-text { width: 200px; }
.ih-store table.cart td.actions > .button { float: right; }

/* Totals card. */
.ih-store .cart_totals {
  padding: 20px;
  border: 1px solid hsl(var(--ih-border));
  border-radius: var(--ih-radius-lg);
  background-color: hsl(var(--ih-card));
}

.ih-store .cart_totals > h2 { margin-bottom: 12px; font-size: 16px; }

.ih-store .cart_totals table.shop_table {
  margin-bottom: 16px;
  border: 0;
  border-radius: 0;
}

.ih-store .cart_totals table.shop_table th,
.ih-store .cart_totals table.shop_table td { padding: 12px 0; }

.ih-store .cart_totals table.shop_table th {
  color: hsl(var(--ih-muted-foreground));
  font-weight: 500;
}

.ih-store .cart_totals table.shop_table td { text-align: right; }

.ih-store .cart_totals .order-total th,
.ih-store .cart_totals .order-total td {
  color: hsl(var(--ih-foreground));
  font-size: 16px;
  font-weight: 700;
}

.ih-store .woocommerce-shipping-methods {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ih-store .woocommerce-shipping-methods label { display: inline; font-weight: 400; }

.ih-store .wc-proceed-to-checkout .checkout-button {
  width: 100%;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
}

.ih-store .cross-sells { margin-bottom: 24px; }

/* ---- Checkout ------------------------------------------------ */
/* Modelled on the checkout prototype: centred logo, 960px body, numbered
   sections on the left and a sticky order summary on the right. */

.ih-layout-checkout .ih-shell { background-color: hsl(var(--ih-background)); }

.ih-checkout-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 992px;
  margin: 0 auto;
  padding: 20px 16px 0;
}

.ih-checkout-bar .ih-brand { justify-self: center; }
.ih-store .ih-checkout-bar .ih-brand__logo { height: 40px; max-width: 220px; object-position: center; }
.ih-checkout-bar .ih-brand__name { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; color: hsl(var(--ih-primary)); }
.ih-checkout-bar .ih-secure { justify-self: end; }

.ih-checkout-bar__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  color: hsl(var(--ih-muted-foreground)) !important;
  font-size: 13px;
  font-weight: 500;
}

.ih-checkout-bar__back:hover { color: hsl(var(--ih-foreground)) !important; text-decoration: none !important; }

.ih-page--checkout {
  width: 100%;
  max-width: 992px;
  margin: 0 auto;
  padding: 28px 16px 48px;
}

/* "Have a coupon?" / "Returning customer?" toggles above the form. */
.ih-store .woocommerce-form-coupon-toggle .woocommerce-info,
.ih-store .woocommerce-form-login-toggle .woocommerce-info {
  margin-bottom: 16px;
  padding: 11px 16px;
  border: 1px solid hsl(var(--ih-border));
  border-radius: 12px;
  background-color: hsl(var(--ih-card));
  color: hsl(var(--ih-muted-foreground));
  font-size: 13px;
}

.ih-store .woocommerce-form-coupon-toggle .woocommerce-info a,
.ih-store .woocommerce-form-login-toggle .woocommerce-info a { font-weight: 600; }

.ih-store form.checkout_coupon,
.ih-store form.woocommerce-form-login {
  margin: 0 0 16px;
  padding: 20px;
  border: 1px solid hsl(var(--ih-border));
  border-radius: var(--ih-radius-lg);
  background-color: hsl(var(--ih-card));
}

.ih-store form.checkout_coupon { display: flex; flex-wrap: wrap; gap: 8px; }
.ih-store form.checkout_coupon::after { content: none; }
.ih-store form.checkout_coupon > p:not(.form-row) { flex: 1 1 100%; margin: 0; color: hsl(var(--ih-muted-foreground)); }
.ih-store form.checkout_coupon .form-row { float: none; width: auto; margin: 0; }
.ih-store form.checkout_coupon .form-row-first { flex: 1; min-width: 180px; }

/* Two columns. */
.ih-store form.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 16px;
  align-items: start;
  margin-top: 0;
}

.ih-store form.checkout::after { content: none; }
.ih-store form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }

.ih-checkout__main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* Each step is a card. */
.ih-checkout-section {
  padding: 24px;
  border: 1px solid hsl(var(--ih-border));
  border-radius: 16px;
  background-color: hsl(var(--ih-card));
}

.ih-checkout__summary {
  position: sticky;
  top: 16px;
}

.admin-bar .ih-checkout__summary { top: 48px; }

/* Numbered section label. */
.ih-step-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.ih-step-label__number {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: hsl(var(--ih-primary));
  color: hsl(var(--ih-primary-foreground));
  font-size: 12px;
  font-weight: 700;
}

.ih-store .ih-step-label__title { margin: 0; font-size: 17px; font-weight: 700; }

/* Section 1 — customer details. The step label replaces the native title. */
.ih-store #customer_details .col-1,
.ih-store #customer_details .col-2 { width: auto; float: none; }

.ih-store .woocommerce-billing-fields > h3 { display: none; }
.ih-store .ih-checkout-section .form-row { margin-bottom: 12px; }

/* A single, familiar name field is split back into WooCommerce's native
   first/last-name values on submit. The second native field stays in the DOM
   for compatibility, but is never exposed to the customer. */
.ih-store .ih-checkout-last-name { display: none !important; }

/* ViaCEP fills the address fields without locking them: a customer can always
   review or adjust the returned street, district, city and state. */
.ih-store .ih-cep-status {
  display: block;
  min-height: 18px;
  margin-top: 5px;
  color: hsl(var(--ih-muted-foreground));
  font-size: 12px;
  line-height: 1.35;
}

.ih-store .ih-cep-status.is-error { color: hsl(var(--ih-destructive)); }

.ih-store .woocommerce-account-fields,
.ih-store .woocommerce-shipping-fields,
.ih-store .woocommerce-additional-fields { margin-top: 12px; }

.ih-store .woocommerce-additional-fields > h3,
.ih-store #ship-to-different-address { margin: 8px 0 12px; font-size: 14px; }
.ih-store #ship-to-different-address label { font-weight: 600; }

/* WooCommerce prints these wrappers even when they hold no fields
   (e.g. virtual products need no shipping address). */
.ih-store .woocommerce-shipping-fields:not(:has(*)),
.ih-store .woocommerce-account-fields:not(:has(*)) { display: none; }

/* Section 2 — payment. WooCommerce's method list (radio + label + box per
   gateway) is laid out as the prototype's tab strip: labels in one row,
   the selected gateway's own fields underneath. */
.ih-store #payment ul.payment_methods {
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.ih-store #payment ul.payment_methods > li { display: contents; }

.ih-store #payment ul.payment_methods > li > input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.ih-store #payment ul.payment_methods > li > label {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  order: 1;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 120px;
  min-height: 78px;
  margin: 0;
  padding: 14px 8px;
  border: 1px solid hsl(var(--ih-border));
  border-radius: 12px;
  background-color: hsl(var(--ih-card));
  color: hsl(var(--ih-muted-foreground));
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.ih-store #payment ul.payment_methods > li > label .ih-icon { width: 24px; height: 24px; }

.ih-store #payment ul.payment_methods > li > label:hover { color: hsl(var(--ih-foreground)); }

.ih-store #payment ul.payment_methods > li > input:checked + label {
  position: relative;
  border-color: hsl(var(--ih-primary));
  background-color: hsl(var(--ih-primary));
  color: hsl(var(--ih-primary-foreground));
}

.ih-store #payment ul.payment_methods > li > input:focus-visible + label {
  outline: 2px solid hsl(var(--ih-ring));
  outline-offset: 2px;
}

.ih-store #payment ul.payment_methods > li > label img {
  width: auto;
  max-height: 18px;
}

.ih-store #payment .payment_box {
  flex: 0 0 100%;
  order: 2;
  margin-top: 12px;
  padding: 16px;
  border: 1px dashed hsl(var(--ih-border));
  border-radius: 12px;
  background-color: hsl(var(--ih-muted) / 0.4);
  color: hsl(var(--ih-muted-foreground));
  font-size: 13px;
}

.ih-store #payment .payment_box p:last-child { margin-bottom: 0; }
.ih-store #payment .payment_box fieldset { margin: 0; padding: 0; border: 0; }

/* "No payment methods available" notice. */
.ih-store #payment ul.payment_methods > li > .woocommerce-info,
.ih-store #payment ul.payment_methods > li.woocommerce-info { flex: 1 1 100%; margin: 0; }

.ih-store .woocommerce-terms-and-conditions-wrapper {
  margin-bottom: 16px;
  color: hsl(var(--ih-muted-foreground));
  font-size: 13px;
}

.ih-store .woocommerce-privacy-policy-text p { margin-bottom: 12px; }

.ih-store #place_order {
  width: 100%;
  min-height: 56px;
  padding: 16px;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 700;
}

/* Summary by the buy button: hidden while the side summary is in view. */
.ih-checkout-recap {
  display: none;
  margin: 20px 0;
  padding: 16px;
  border-radius: 12px;
  background-color: hsl(var(--ih-muted) / 0.55);
}

.ih-store .ih-checkout-recap__title { margin: 0 0 6px; font-size: 14px; font-weight: 700; }
.ih-store .ih-checkout-recap table.woocommerce-checkout-review-order-table { background: none; }

/* Product line: thumbnail, name, quantity. */
.ih-review-item { display: inline-flex; align-items: center; gap: 10px; vertical-align: middle; }
.ih-review-item__thumb { flex-shrink: 0; width: 44px; height: 44px; overflow: hidden; border: 1px solid hsl(var(--ih-border)); border-radius: 10px; background-color: hsl(var(--ih-muted)); }
.ih-store .ih-review-item__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ih-review-item__name { min-width: 0; line-height: 1.35; }

.ih-checkout-security {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 10px 0 0 !important;
  color: hsl(var(--ih-muted-foreground));
  font-size: 12px;
}

/* Order summary card. */
.ih-checkout-summary { padding: 24px 20px; border-radius: 16px; }

.ih-store #order_review_heading { margin: 0 0 6px; font-size: 17px; font-weight: 700; }

.ih-store table.woocommerce-checkout-review-order-table {
  margin: 0;
  border: 0;
  border-radius: 0;
}

.ih-store table.woocommerce-checkout-review-order-table thead { display: none; }

.ih-store table.woocommerce-checkout-review-order-table th,
.ih-store table.woocommerce-checkout-review-order-table td { padding: 10px 0; font-size: 13px; }

.ih-store table.woocommerce-checkout-review-order-table tbody tr:first-child td { border-top: 0; }

.ih-store table.woocommerce-checkout-review-order-table .product-name { font-weight: 500; }

.ih-store table.woocommerce-checkout-review-order-table .product-total,
.ih-store table.woocommerce-checkout-review-order-table tfoot td { text-align: right; }

.ih-store table.woocommerce-checkout-review-order-table .product-total {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.ih-store table.woocommerce-checkout-review-order-table .product-quantity {
  color: hsl(var(--ih-muted-foreground));
  font-weight: 400;
}

.ih-store table.woocommerce-checkout-review-order-table .order-total th,
.ih-store table.woocommerce-checkout-review-order-table .order-total td { font-size: 18px; font-weight: 800; }

/* Order-pay page keeps the single-column WooCommerce form. */
.woocommerce-order-pay .ih-page--checkout #order_review {
  padding: 20px;
  border: 1px solid hsl(var(--ih-border));
  border-radius: var(--ih-radius-lg);
  background-color: hsl(var(--ih-card));
}

/* Compact footer, as in the prototype. */
.ih-footer--compact { background-color: hsl(var(--ih-muted) / 0.5); }
.ih-footer--compact .ih-footer__inner { justify-content: center; gap: 8px 20px; text-align: center; }

/* ---- Confirmation ------------------------------------------- */

.ih-store .woocommerce-thankyou-order-received,
.ih-store .woocommerce-thankyou-order-failed {
  margin-bottom: 24px;
  padding: 16px 20px;
  border: 1px solid hsl(var(--ih-success) / 0.25);
  border-radius: var(--ih-radius-lg);
  background-color: hsl(var(--ih-success) / 0.08);
  color: hsl(142 72% 25%);
  font-weight: 500;
}

.ih-store .woocommerce-thankyou-order-failed {
  border-color: hsl(var(--ih-destructive) / 0.25);
  background-color: hsl(var(--ih-destructive) / 0.08);
  color: hsl(0 72% 40%);
}

/* ---- Responsive --------------------------------------------- */

@media (max-width: 960px) {
  .woocommerce-cart .ih-page--purchase > .woocommerce { grid-template-columns: minmax(0, 1fr); }

  .woocommerce-cart .ih-page--purchase > .woocommerce > .woocommerce-cart-form,
  .woocommerce-cart .ih-page--purchase > .woocommerce > .cart-collaterals { grid-column: 1; }

  .woocommerce-cart .ih-page--purchase > .woocommerce > .cart-collaterals { margin-top: 16px; }
}

@media (max-width: 720px) {
  /* Checkout: one column. The top card only says what is being bought; the
     amounts move next to the buy button. */
  .ih-store form.checkout { grid-template-columns: minmax(0, 1fr); gap: 16px; }

  .ih-checkout__summary { position: static; order: -1; }
  .ih-checkout__summary table.woocommerce-checkout-review-order-table tfoot,
  .ih-checkout__summary .ih-checkout-security { display: none; }
  .ih-checkout-summary { padding: 16px 18px 8px; }

  .ih-checkout-recap { display: block; }
  .ih-checkout-section { padding: 18px; }

  .ih-checkout-bar__back span,
  .ih-checkout-bar .ih-secure span { display: none; }

  .ih-footer--compact .ih-footer__inner { flex-direction: column; align-items: center; }
}

/* Address number and complement intentionally share the row on desktop;
   base.css returns both standard WooCommerce field classes to full width on
   small screens, so they remain easy to fill on a phone. */
@media (min-width: 561px) {
  .ih-store #billing_number_field { clear: both; }
}

@media (max-width: 768px) {
  /* Cart rows become compact cards: thumbnail left, details right. */
  .ih-store table.cart tbody tr.cart_item {
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 4px 12px;
    padding: 16px;
  }

  .ih-store table.cart tbody tr.cart_item td {
    display: flex;
    padding: 0;
  }

  .ih-store table.cart tbody tr.cart_item td.product-thumbnail {
    grid-row: 1 / span 4;
    width: auto;
  }

  .ih-store table.cart tbody tr.cart_item td.product-thumbnail::before,
  .ih-store table.cart tbody tr.cart_item td.product-name::before,
  .ih-store table.cart tbody tr.cart_item td.product-remove::before { content: none; }

  .ih-store table.cart tbody tr.cart_item td.product-name {
    justify-content: flex-start;
    padding-right: 32px;
    text-align: left;
  }

  .ih-store table.cart tbody tr.cart_item td.product-remove {
    position: absolute;
    top: 12px;
    right: 12px;
    width: auto;
  }

  .ih-store table.cart td.actions { display: block; }

  .ih-store table.cart .coupon {
    float: none;
    margin-bottom: 8px;
  }

  .ih-store table.cart .coupon .input-text { flex: 1; width: auto; min-width: 0; }
  .ih-store table.cart td.actions > .button { float: none; width: 100%; }
}

/* Method tab whose gateway is not configured yet (InfoHub panel routing). */
.ih-store #payment .payment_box.ih-payment-unavailable {
  border-color: hsl(var(--ih-warning) / 0.35);
  background-color: hsl(var(--ih-warning) / 0.08);
  color: hsl(32 81% 29%);
}

.ih-store #payment ul.payment_methods > li > label .ih-icon { flex-shrink: 0; }

/* Quantity switched off in the panel: one unit per product, so the cart's
   update row (coupons live in the checkout) has no purpose. */
.ih-quantity-locked table.cart tr:has(> td.actions) { display: none; }
.ih-store .ih-qty-fixed { color: hsl(var(--ih-muted-foreground)); font-weight: 500; }

/* Keeps "× 1" on the product's line instead of dropping under the thumbnail. */
.ih-store table.woocommerce-checkout-review-order-table .product-name .ih-review-item { max-width: calc(100% - 34px); }
.ih-store table.woocommerce-checkout-review-order-table .product-quantity { white-space: nowrap; }