/* wc-native.css — bridges WooCommerce's own native markup (ordering dropdown,
   pagination, gateway list) that has no equivalent in the static build, using
   the same design tokens. Never touches any of the copied static CSS files. */

/* Standard accessible-hiding utility — visible to screen readers, not
   visually. Used for the cart's hidden update_cart submit button (the
   design has no visible "Update cart" button; the qty stepper triggers it
   via JS instead — see quantity-stepper.js) and coupon-field labels. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Checkout ------------------------------------------------------------- */

/* review-order.php is untouched (not one of the six overrides — its outer
   <table class="woocommerce-checkout-review-order-table"> class is what
   checkout.js's AJAX fragment replacement targets by exact selector after
   every shipping-method change, so copying the template would mean either
   keeping that exact class anyway or re-implementing the fragment wiring
   ourselves). Restyled as flex rows instead of a table. */
.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
}
.woocommerce-checkout-review-order-table thead {
  display: none;
}
.woocommerce-checkout-review-order-table tbody,
.woocommerce-checkout-review-order-table tfoot {
  display: block;
}
.woocommerce-checkout-review-order-table tr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding-block: var(--space-8);
  font-size: var(--fs-base);
  color: var(--color-text);
}
.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table th {
  display: block;
  border: none;
  padding: 0;
  font-weight: var(--fw-regular);
  text-align: start;
}
.woocommerce-checkout-review-order-table tr.order-total {
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-16);
  border-block-start: var(--border-width) solid var(--color-border);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}
.woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout-review-order-table tr.order-total td {
  font-weight: inherit;
  color: inherit;
}

/* "تُحدَّد عند اختيار طريقة الشحن" — the shipping row before the customer has
   reached step 2 (woocommerce/cart/cart-shipping.php). Deliberately quieter
   and smaller than a real amount: it is a note about a number that does not
   exist yet, not a number. */
.woocommerce-checkout-review-order-table .shipping-pending {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* مثلها: "توصيل: يحدد حسب المدينة" في ملخّص الطلب وفي جدول مجاميع
   الطلب بعد إتمامه — نص بديل عن المبلغ، لذلك يأخذ وزن النص الثانوي. */
.shipping-quoted {
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
}

/* Payment gateway list — checkout/payment.php + payment-method.php are
   untouched (the live gateway list is the entire point — see
   MIGRATION_PLAN.md §3 #10); only restyled to match .payment-option.
   Each <li> is a selectable card: the gateway name/logos sit at the RIGHT
   (RTL start, grid column 1) and the radio at the LEFT (column 2), with the
   .payment_box description spanning both columns underneath. */
.wc_payment_methods {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.wc_payment_method {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: var(--space-12);
  padding: var(--space-16);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease,
    box-shadow 0.18s ease;
}
/* Any gateway-injected direct child (Tabby/Tamara promo blocks) spans the
   full row rather than landing in the radio column. */
.wc_payment_method > * {
  grid-column: 1 / -1;
}

/* Unselected: lift on hover so the row reads as clickable. */
.wc_payment_method:hover {
  border-color: var(--color-border-strong);
  background-color: var(--color-bg-alt);
  box-shadow: var(--shadow-control);
}
/* Selected: primary border (doubled with an inset ring so the card does not
   shift by 1px) + a faint primary wash. WooCommerce puts no "selected" class
   on the row, hence :has() — where it isn't supported the card simply stays
   neutral and the radio dot alone carries the state, which is still correct. */
.wc_payment_method:has(> input.input-radio:checked),
.wc_payment_method:has(> input.input-radio:checked):hover {
  border-color: var(--color-primary);
  background-color: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
  box-shadow: inset 0 0 0 var(--border-width) var(--color-primary);
}

/* Radio — left column (RTL end). WooCommerce's payment.js sets an inline
   display:none when only one gateway is enabled; no !important here so that
   still wins and the card alone carries the state. */
.wc_payment_method > input.input-radio {
  grid-column: 2;
  grid-row: 1;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  position: relative;
  width: var(--space-20);
  height: var(--space-20);
  border: var(--border-width-active) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  cursor: pointer;
  transition: border-color 0.18s ease;
}
.wc_payment_method:hover > input.input-radio {
  border-color: var(--color-primary);
}
.wc_payment_method > input.input-radio:checked {
  border-color: var(--color-primary);
}
.wc_payment_method > input.input-radio:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
}
/* Ring on the radio rather than the card, so focusing a field inside an
   expanded gateway's .payment_box doesn't outline the whole row. */
.wc_payment_method > input.input-radio:focus-visible {
  outline: var(--border-width-active) solid var(--color-primary);
  outline-offset: 2px;
}

.wc_payment_method > label {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  cursor: pointer;
}
/* Stretches the label's hit area over the whole card (its padding included)
   so anywhere on the row selects the gateway, not just the text. */
.wc_payment_method > label::before {
  content: "";
  position: absolute;
  inset: 0;
}
.wc_payment_method:has(> input.input-radio:checked) > label {
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}
.wc_payment_method > label img {
  height: var(--space-20);
  width: auto;
  margin-inline-start: var(--space-4);
}

/* Description — separated from the row by a hairline instead of its own
   grey block, and raised above the label overlay so links inside the
   Tabby/Tamara widgets stay clickable. */
.payment_box {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  margin-top: var(--space-12);
  padding-top: var(--space-12);
  border-top: var(--border-width) solid var(--color-border);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.payment_box p:last-child {
  margin-bottom: 0;
}
.place-order {
  margin-top: var(--space-16);
}
.place-order #place_order {
  display: flex;
  width: 100%;
  height: var(--space-58);
  align-items: center;
  justify-content: center;
  background-color: var(--color-gradient-end);
  color: var(--color-text-invert);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
}
.place-order #place_order:hover {
  background-color: var(--color-primary-darkest);
}

/* woocommerce_product_loop_start()/_end() always wrap the product loop in
   <ul class="products">, which none of the copied CSS styles (dequeued in
   Phase 2). Left alone that <ul> is a plain block box sitting between
   .grid-products (the CSS Grid container) and the .product-card <article>s,
   so grid-template-columns never reaches the cards — invisible with one
   product per category (Phase 3's test data), real with more than one.
   display:contents removes the <ul>'s own box while keeping the DOM node,
   so the cards become direct grid items again. Scoped to `ul.products`
   (not bare `.products`) because WC core's related.php also puts the
   literal class "products" on its outer <section class="related products">
   — a bare `.products` selector matched that too, silently zeroing out
   its own margin-top/padding-block (display:contents has no box, so no
   margin/padding/background renders on the element carrying it). */
ul.products {
  display: contents;
}

.woocommerce-ordering {
  margin-inline-start: auto;
  min-width: 0;
  flex: 1 1 auto;
  max-width: 200px;
}

.woocommerce-ordering .orderby {
  width: 100%;
  max-width: 100%;
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-12);
  font-size: var(--fs-xs);
  color: var(--color-text);
}

.woocommerce-pagination {
  display: flex;
  justify-content: center;
  margin-block: var(--space-40);
}

.woocommerce-pagination .page-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  list-style: none;
}

.woocommerce-pagination .page-numbers li a.page-numbers,
.woocommerce-pagination .page-numbers li span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-32);
  height: var(--space-32);
  padding-inline: var(--space-12);
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--color-border);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}

.woocommerce-pagination .page-numbers li span.page-numbers.current {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-invert);
}

/* Single product page ------------------------------------------------- */

/* the_content() output inside .product-description__text — the design's
   product-description.css only styles the specific classes .product-
   description__features/__feature, which nothing injects into editor HTML.
   Bridging the generic tags it actually produces to the same tokens keeps
   product-meta.php from having to mutate trusted admin content. */
.product-description__text p {
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
  text-align: start;
}
.product-description__text ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-top: var(--space-20);
  list-style: none;
}
.product-description__text li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-8);
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  text-align: start;
}
.product-description__text li::before {
  content: "\f058";
  font-family: "Font Awesome 6 Pro";
  font-weight: 400;
  font-size: var(--fs-lg);
  color: var(--color-success);
  flex-shrink: 0;
  line-height: 1;
}

/* Related products (single-product page) — core related.php is untouched;
   only the heading text and the loop <ul> class are filterable (see
   inc/single-product.php), so the wrapper <section>/<h2> are bridged here. */
.related.products {
  padding-block: var(--section-y);
  margin-top: var(--space-48);
}
.related.products > h2 {
  text-align: center;
  color: var(--color-heading-alt);
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-32);
}
@media (min-width: 768px) {
  .related.products > h2 {
    font-size: var(--fs-title-md);
    margin-bottom: var(--space-40);
  }
}