/**
 * assets/css/woocommerce.css
 * WooCommerce-specific overrides for store-theme dark glassmorphism design.
 * Loaded only on WC pages (cart / checkout / shop / single product).
 *
 * @package store-theme
 */

/* ── Reset WooCommerce defaults ────────────────────────────────────────── */
.woocommerce,
.woocommerce-page {
  background: hsl(220 18% 7%);
  color: #fff;
}

/* Remove default WC tables / forms look */
.woocommerce table.shop_table,
.woocommerce-cart table.cart {
  border: none;
  background: transparent;
  border-collapse: collapse;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  border: none;
  padding: .75rem 0;
  color: #fff;
}

/* ── Notices ───────────────────────────────────────────────────────────── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: 1rem;
  border: 1px solid;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  font-weight: 700;
  font-size: .875rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.woocommerce-message { background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.2); color: #34d399; }
.woocommerce-info    { background: rgba(59,130,246,.08); border-color: rgba(59,130,246,.2); color: #60a5fa; }
.woocommerce-error   { background: rgba(239,68,68,.08);  border-color: rgba(239,68,68,.2);  color: #f87171; }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }

/* ── Form fields ───────────────────────────────────────────────────────── */
.woocommerce .form-row label,
.woocommerce-billing-fields label,
.woocommerce-shipping-fields label {
  display: block;
  font-size: .875rem;
  font-weight: 900;
  color: rgba(255,255,255,.5);
  margin-bottom: .5rem;
}
.woocommerce .form-row .input-text,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce select,
.woocommerce textarea {
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: .75rem;
  padding: 1rem 1.25rem;
  color: #fff;
  font-weight: 700;
  font-size: .875rem;
  outline: none;
  transition: border-color .2s;
  -webkit-appearance: none;
  appearance: none;
}
.woocommerce .form-row .input-text:focus,
.woocommerce input[type="text"]:focus,
.woocommerce input[type="tel"]:focus {
  border-color: rgba(245,158,11,.5);
}

/* Select options */
.woocommerce select option { background: #0F1115; }

/* ── Validation colors ─────────────────────────────────────────────────── */
.woocommerce .form-row.validate-required.woocommerce-invalid .input-text,
.woocommerce .form-row.validate-required.woocommerce-invalid select {
  border-color: rgba(239,68,68,.5);
}

/* ── Cart quantity input ───────────────────────────────────────────────── */
.woocommerce .quantity .qty {
  background: transparent;
  border: none;
  color: #fff;
  font-weight: 900;
  text-align: center;
  width: 2rem;
  outline: none;
}

/* ── Place order button ────────────────────────────────────────────────── */
#place_order {
  width: 100%;
  background: linear-gradient(135deg, #F59E0B, #D97706, #92400E);
  color: #fff;
  font-weight: 900;
  font-size: 1.125rem;
  padding: 1.25rem;
  border-radius: 1rem;
  border: none;
  cursor: pointer;
  transition: transform .15s;
  touch-action: manipulation;
}
#place_order:hover { transform: scale(1.01); }
#place_order:active { transform: scale(.98); }

/* ── Order-received page details ───────────────────────────────────────── */
.woocommerce-order-details,
.woocommerce-customer-details {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 1.5rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.woocommerce-order-details__title,
.woocommerce-column__title {
  font-weight: 900;
  color: rgba(255,255,255,.5);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* ── Shop breadcrumb ───────────────────────────────────────────────────── */
.woocommerce .woocommerce-breadcrumb {
  font-size: .75rem;
  font-weight: 700;
  color: rgba(255,255,255,.3);
  margin-bottom: 1.25rem;
}
.woocommerce .woocommerce-breadcrumb a {
  color: rgba(255,255,255,.4);
}
.woocommerce .woocommerce-breadcrumb a:hover { color: #fff; }

/* ── Pagination ────────────────────────────────────────────────────────── */
.woocommerce nav.woocommerce-pagination ul {
  display: flex;
  gap: .5rem;
  list-style: none;
  justify-content: center;
  margin-top: 2.5rem;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: flex;
  width: 2.5rem; height: 2.5rem;
  align-items: center; justify-content: center;
  border-radius: .75rem;
  font-weight: 900;
  font-size: .875rem;
  transition: all .15s;
  color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: linear-gradient(135deg, #F59E0B, #D97706, #92400E);
  color: #fff;
  border-color: transparent;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
  color: #fff;
  border-color: rgba(245,158,11,.3);
}

/* ── Remove default WC styles applied by WC itself ─────────────────────── */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: linear-gradient(135deg, #F59E0B, #D97706, #92400E);
  color: #fff;
  border-radius: .75rem;
  font-weight: 900;
  padding: .75rem 1.5rem;
  font-size: .875rem;
  border: none;
  cursor: pointer;
  transition: transform .15s;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { transform: scale(1.01); }

/* Apply coupon */
.woocommerce .coupon .button { margin-top: 0; }

/* ── RTL tweaks ────────────────────────────────────────────────────────── */
.rtl .woocommerce-breadcrumb { direction: rtl; }
.rtl .woocommerce table.shop_table td,
.rtl .woocommerce table.shop_table th { text-align: right; }

/* ── Loading overlay ───────────────────────────────────────────────────── */
.blockUI.blockOverlay {
  background: rgba(15,17,21,.8) !important;
  backdrop-filter: blur(8px);
}