/**
 * WooCommerce theme-compatibility styles.
 *
 * Makes the default WooCommerce UI (My Account, Cart — classic + block,
 * Checkout, forms, buttons, notices) match the WordPress Direct theme:
 * Inter/Roboto typography, the brand blue (#145AFF), soft #E5E7EB borders,
 * rounded controls and pill buttons. Loaded only on WooCommerce pages
 * (see wp_direct_theme_css() in functions.php).
 *
 * Design tokens (kept in sync with assets/css/input.css @theme):
 *   --wpd-blue        #145AFF   brand / primary
 *   --wpd-blue-dark   #0C3699   primary hover
 *   --wpd-ink         #111827   headings / active
 *   --wpd-text        #374151   body text
 *   --wpd-muted       #6B7280   secondary text
 *   --wpd-border      #E5E7EB   borders
 *   --wpd-surface     #F9FAFB   subtle fills
 */

.woocommerce,
.woocommerce-page,
.wc-block-cart,
.wc-block-checkout,
.woocommerce-account .woocommerce {
  --wpd-blue: #145aff;
  --wpd-blue-dark: #0c3699;
  --wpd-ink: #111827;
  --wpd-text: #374151;
  --wpd-muted: #6b7280;
  --wpd-border: #e5e7eb;
  --wpd-surface: #f9fafb;
  color: var(--wpd-text);
}

/* --------------------------------------------------------------------------
   Headings
   -------------------------------------------------------------------------- */
.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce-account h2,
.wc-block-cart__totals-title,
.wc-block-components-title {
  font-family: "Inter", sans-serif;
  color: var(--wpd-ink);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Buttons — theme pill style
   -------------------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button,
.woocommerce #respond input#submit,
.woocommerce-account button.button,
.wc-block-components-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  padding: 13px 30px;
  border: 1px solid transparent;
  border-radius: 9999px;
  background-color: var(--wpd-blue);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease,
    box-shadow 0.2s ease, transform 0.2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-account button.button:hover,
.wc-block-components-button:hover {
  background-color: var(--wpd-blue-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -10px rgba(20, 90, 255, 0.5);
}

/* Secondary / outline buttons (e.g. "Update cart", ghost actions). */
.woocommerce a.button.wc-backward,
.woocommerce button.button[name="update_cart"],
.woocommerce .button.alt--outline,
.wc-block-components-button.outlined {
  background-color: #fff;
  color: var(--wpd-ink);
  border-color: var(--wpd-border);
}

.woocommerce a.button.wc-backward:hover,
.woocommerce button.button[name="update_cart"]:hover,
.wc-block-components-button.outlined:hover {
  background-color: var(--wpd-ink);
  border-color: var(--wpd-ink);
  color: #fff;
}

.woocommerce button.button:disabled,
.woocommerce button.button.disabled,
.wc-block-components-button:disabled {
  opacity: 0.5;
  transform: none;
  box-shadow: none;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Form fields — rounded, soft border, brand focus ring
   -------------------------------------------------------------------------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .woocommerce-Input.input-text,
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select,
.wc-block-components-text-input input,
.select2-container--default .select2-selection--single {
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  color: var(--wpd-ink);
  background-color: #fff;
  border: 1px solid var(--wpd-border);
  border-radius: 8px;
  padding: 12px 16px;
  line-height: 1.4;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce input.input-text:focus,
.woocommerce textarea:focus,
.woocommerce select:focus,
.wc-block-components-text-input input:focus {
  outline: none;
  border-color: var(--wpd-blue);
  box-shadow: 0 0 0 3px rgba(20, 90, 255, 0.15);
}

.woocommerce form .form-row label,
.woocommerce-EditAccountForm label,
.wc-block-components-text-input label {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  color: var(--wpd-ink);
}

.woocommerce form .form-row .required,
.woocommerce .required {
  color: var(--wpd-blue);
  border: 0;
}

/* Block text-input floating labels & focus. */
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus + label {
  color: var(--wpd-blue);
}

/* --------------------------------------------------------------------------
   My Account — navigation + content
   -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce {
  gap: 28px;
  align-items: flex-start;
}

/* Reset WooCommerce's default list-item spacing/borders that push the items
   far apart, then lay the menu out as a tight vertical stack. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  list-style: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link a {
  display: block;
  padding: 10px 16px;
  border-radius: 10px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  color: var(--wpd-text);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link a:hover {
  background-color: var(--wpd-surface);
  color: var(--wpd-ink);
}

.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a {
  background-color: var(--wpd-ink);
  color: #fff;
}

.woocommerce-MyAccount-content {
  font-family: "Roboto", sans-serif;
  color: var(--wpd-text);
}

.woocommerce-MyAccount-content a:not(.button) {
  color: var(--wpd-blue);
}

/* --------------------------------------------------------------------------
   Tables (orders, classic cart, downloads)
   -------------------------------------------------------------------------- */
.woocommerce table.shop_table,
.woocommerce-MyAccount-content table {
  border: 1px solid var(--wpd-border);
  border-radius: 12px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

.woocommerce table.shop_table thead th,
.woocommerce table.shop_table th {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wpd-muted);
  background-color: var(--wpd-surface);
  padding: 16px 20px;
}

.woocommerce table.shop_table td {
  padding: 18px 20px;
  border-top: 1px solid var(--wpd-border);
  color: var(--wpd-text);
}

/* --------------------------------------------------------------------------
   Quantity fields
   -------------------------------------------------------------------------- */
/* Classic cart: a plain number input — needs real width/height, not a pill. */
.woocommerce .quantity .qty {
  width: 74px;
  height: 44px;
  padding: 8px 10px;
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--wpd-ink);
  background-color: #fff;
  border: 1px solid var(--wpd-border);
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.woocommerce .quantity .qty:focus {
  outline: none;
  border-color: var(--wpd-blue);
  box-shadow: 0 0 0 3px rgba(20, 90, 255, 0.15);
}

/* Block cart: the "− value +" stepper is wide enough to read as a pill. */
.wc-block-components-quantity-selector {
  border: 1px solid var(--wpd-border);
  border-radius: 9999px;
  overflow: hidden;
}

.wc-block-components-quantity-selector__input {
  color: var(--wpd-ink);
  font-weight: 500;
}

.wc-block-components-quantity-selector__button {
  color: var(--wpd-muted);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.wc-block-components-quantity-selector__button:hover {
  color: var(--wpd-blue);
  background-color: var(--wpd-surface);
}

/* --------------------------------------------------------------------------
   Remove control — theme the native icon; never add a second one.

   The WooCommerce cart block renders its own trash SVG inside
   .wc-block-cart-item__remove-link (fill: currentColor). We only recolour it
   and drop the default underline so it reads as one clean icon button —
   adding a ::before icon here would double it up.
   -------------------------------------------------------------------------- */
.wc-block-cart-item__remove-link {
  color: #dc2626 !important;
  text-decoration: none !important;
  opacity: 1;
  transition: color 0.15s ease;
}

.wc-block-cart-item__remove-link:hover {
  color: #b91c1c !important;
  text-decoration: none !important;
  cursor: pointer;
}

.wc-block-cart-item__remove-link svg {
  width: 20px;
  height: 20px;
}

/* Classic cart / mini-cart use a plain "×" anchor (no SVG) — make it a tidy
   round button. Red at rest so it reads as the destructive action. */
.woocommerce a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 9999px;
  font-size: 20px;
  line-height: 1;
  color: #dc2626 !important;
  background: transparent !important;
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.woocommerce a.remove:hover {
  color: #b91c1c !important;
  background: #fef2f2 !important;
}

/* --------------------------------------------------------------------------
   Classic cart — coupon row

   WooCommerce core's cart.css styles this field with
   `table.cart td.actions .coupon .input-text` (width: 100px, float, its own
   padding/border), which outranks the shared form-field rules above and leaves
   a cramped, square box next to the pill "Apply coupon" button. Restate it at
   matching specificity so the field is a pill of the same height as the button.
   -------------------------------------------------------------------------- */
.woocommerce table.cart td.actions .coupon,
.woocommerce-page table.cart td.actions .coupon {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.woocommerce table.cart td.actions .coupon .input-text,
.woocommerce-page table.cart td.actions .coupon .input-text {
  float: none;
  width: 240px;
  max-width: 100%;
  height: 46px;
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  line-height: 1.2;
  color: var(--wpd-ink);
  background-color: #fff;
  border: 1px solid var(--wpd-border);
  border-radius: 9999px;
  padding: 12px 20px;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.woocommerce table.cart td.actions .coupon .input-text::placeholder,
.woocommerce-page table.cart td.actions .coupon .input-text::placeholder {
  color: var(--wpd-muted);
}

.woocommerce table.cart td.actions .coupon .input-text:focus,
.woocommerce-page table.cart td.actions .coupon .input-text:focus {
  outline: none;
  border-color: var(--wpd-blue);
  box-shadow: 0 0 0 3px rgba(20, 90, 255, 0.15);
}

@media (max-width: 600px) {
  .woocommerce table.cart td.actions .coupon,
  .woocommerce-page table.cart td.actions .coupon {
    width: 100%;
  }

  .woocommerce table.cart td.actions .coupon .input-text,
  .woocommerce-page table.cart td.actions .coupon .input-text {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Cart block layout
   -------------------------------------------------------------------------- */
.wc-block-cart-items__header {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wpd-muted);
  border-bottom: 1px solid var(--wpd-border);
}

.wc-block-cart-items td,
.wc-block-cart-item__wrap {
  border-top-color: var(--wpd-border);
}

.wc-block-cart-item__product-name,
.wc-block-components-product-name {
  font-weight: 600;
  color: var(--wpd-ink);
}

.wc-block-components-product-name:hover {
  color: var(--wpd-blue);
}

/* Totals sidebar: the block already renders its own card, so we only refine
   the divider colour — never add borders to the repeating totals wrappers
   (that stacks nested boxes). */
.wc-block-cart__sidebar .wc-block-components-totals-wrapper {
  border-color: var(--wpd-border);
}

.wc-block-components-totals-item__value {
  font-family: "Inter", sans-serif;
  color: var(--wpd-ink);
  font-weight: 600;
}

.wc-block-components-panel__button,
.wc-block-components-totals-coupon__button {
  color: var(--wpd-blue);
}

/* Sale / savings badges */
.wc-block-components-sale-badge {
  background-color: #eff4ff;
  color: var(--wpd-blue);
  border-radius: 9999px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Checkout (classic + block)
   -------------------------------------------------------------------------- */
.woocommerce-checkout #payment {
  background-color: #fff;
  border: 1px solid var(--wpd-border);
  border-radius: 14px;
}

/* Checkout totals: refine dividers only, don't box each repeating wrapper. */
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper {
  border-color: var(--wpd-border);
}

.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--wpd-border);
}

.woocommerce-checkout #payment div.payment_box {
  background-color: var(--wpd-surface);
  border-radius: 8px;
}

.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--wpd-surface);
}

.woocommerce-checkout-review-order-table {
  border-radius: 12px;
}

#add_payment_method #payment div.form-row,
.woocommerce-checkout #payment div.form-row {
  padding: 16px;
}

/* Place-order button spans the column and reads as the primary action. */
.woocommerce #payment #place_order,
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
  width: 100%;
  font-size: 16px;
  padding: 15px 30px;
}

/* --------------------------------------------------------------------------
   Express checkout (Apple Pay / Google Pay) — pill shape for consistency.

   These buttons render inside gateway iframes / web components, so their own
   corners can't be styled directly. We round + clip the wrapper element that
   holds each button, and also set Apple Pay's dedicated radius variable.
   -------------------------------------------------------------------------- */
.wc-block-components-express-payment__event-buttons > li,
.wc-block-components-express-payment__event-buttons > li > *,
.wc-block-components-express-payment__event-buttons iframe,
.wc-stripe-express-checkout-element,
#wc-stripe-express-checkout-element,
.wc-stripe-payment-request-wrapper,
#wc-stripe-payment-request-button,
.wcpay-express-checkout-wrapper,
#wcpay-express-checkout-element {
  border-radius: 9999px !important;
  overflow: hidden !important;
}

/* Apple Pay web component exposes its radius as a custom property. */
apple-pay-button {
  --apple-pay-button-border-radius: 9999px;
}

/* --------------------------------------------------------------------------
   Notices — themed info / success / error
   -------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
  font-family: "Roboto", sans-serif;
  border-radius: 10px;
  border: 1px solid var(--wpd-border);
  border-left-width: 4px;
  background-color: var(--wpd-surface);
  color: var(--wpd-text);
}

.woocommerce-message,
.wc-block-components-notice-banner.is-success {
  border-left-color: #16a34a;
}

.woocommerce-info,
.wc-block-components-notice-banner.is-info {
  border-left-color: var(--wpd-blue);
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error {
  border-left-color: #dc2626;
}

.woocommerce-message .button,
.woocommerce-info .button {
  padding: 8px 20px;
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   Price emphasis
   -------------------------------------------------------------------------- */
.woocommerce .price,
.woocommerce-Price-amount {
  color: var(--wpd-ink);
  font-weight: 600;
}

.woocommerce del,
.woocommerce del .woocommerce-Price-amount {
  color: var(--wpd-muted);
  font-weight: 400;
}

.woocommerce ins {
  text-decoration: none;
}