/*
 * EcomPL — WooCommerce Page Skin
 *
 * Applied to: /checkout/, /cart/, /product/*
 *
 * Strategy: layer SaaS design tokens on top of the Sierra theme
 * without removing the theme entirely. We override typography,
 * colors, spacing, form fields, and buttons so the pages feel
 * like the rest of the SaaS product rather than a marketing site.
 *
 * Scope: body.woocommerce-checkout, body.woocommerce-cart, body.single-product
 */

/* ── Base page scaffold ────────────────────────────────────────────────────── */

body.woocommerce-checkout,
body.woocommerce-cart,
body.single-product {
  background-color: var(--gray-100);
  font-family: var(--font-sans);
  color: var(--fg);
}

/* ── Main content wrapper ──────────────────────────────────────────────────── */

body.woocommerce-checkout .site-main,
body.woocommerce-cart .site-main,
body.single-product .site-main {
  padding-top: 40px;
  padding-bottom: 60px;
}

/* Center the content column and constrain width */
body.woocommerce-checkout #primary,
body.woocommerce-cart #primary,
body.single-product #primary {
  max-width: 900px;
  margin: 0 auto;
  float: none;
  padding: 0 24px;
}

/* Hide WC's default sidebar on product pages (we never use it) */
body.single-product #secondary {
  display: none;
}

/* ── Page titles ───────────────────────────────────────────────────────────── */

body.woocommerce-checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout .woocommerce-additional-fields h3,
body.woocommerce-checkout h2,
body.woocommerce-cart h2 {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}

/* ── Cards / sections ──────────────────────────────────────────────────────── */

/* Checkout form sections */
body.woocommerce-checkout .woocommerce-checkout-review-order,
body.woocommerce-checkout #customer_details,
body.woocommerce-checkout .woocommerce-checkout-payment {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}

/* Cart table wrapper */
body.woocommerce-cart .woocommerce {
  background: transparent;
}

body.woocommerce-cart .cart-collaterals,
body.woocommerce-cart form.woocommerce-cart-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}

/* ── Form fields ───────────────────────────────────────────────────────────── */

body.woocommerce-checkout .woocommerce input[type="text"],
body.woocommerce-checkout .woocommerce input[type="email"],
body.woocommerce-checkout .woocommerce input[type="tel"],
body.woocommerce-checkout .woocommerce input[type="password"],
body.woocommerce-checkout .woocommerce select,
body.woocommerce-checkout .woocommerce textarea,
body.woocommerce-checkout .woocommerce-checkout input[type="text"],
body.woocommerce-checkout .woocommerce-checkout input[type="email"],
body.woocommerce-checkout .woocommerce-checkout input[type="tel"],
body.woocommerce-checkout .woocommerce-checkout select,
body.woocommerce-checkout input.input-text {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 150ms, box-shadow 150ms;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

body.woocommerce-checkout input.input-text:focus,
body.woocommerce-checkout select:focus {
  border-color: var(--brand-green);
  box-shadow: 0 0 0 3px rgba(37, 185, 125, 0.15);
}

body.woocommerce-checkout .woocommerce-checkout p label,
body.woocommerce-checkout .form-row label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 6px;
}

body.woocommerce-checkout .form-row {
  margin-bottom: 16px;
}

/* ── Order review table ────────────────────────────────────────────────────── */

body.woocommerce-checkout table.shop_table,
body.woocommerce-cart table.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 14px;
  border: none;
}

body.woocommerce-checkout table.shop_table th,
body.woocommerce-cart table.shop_table th {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: transparent;
  text-align: left;
}

body.woocommerce-checkout table.shop_table td,
body.woocommerce-cart table.shop_table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  vertical-align: middle;
}

body.woocommerce-checkout table.shop_table tr:last-child td,
body.woocommerce-cart table.shop_table tr:last-child td {
  border-bottom: none;
}

body.woocommerce-checkout table.shop_table .cart-subtotal th,
body.woocommerce-checkout table.shop_table .order-total th,
body.woocommerce-cart table.shop_table tfoot th {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
  text-transform: none;
  letter-spacing: 0;
  padding: 12px;
}

body.woocommerce-checkout table.shop_table .order-total .amount,
body.woocommerce-checkout table.shop_table .order-total td {
  font-size: 18px;
  font-weight: 800;
  color: var(--fg);
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */

body.woocommerce-checkout .woocommerce #place_order,
body.woocommerce-checkout button[name="woocommerce_checkout_place_order"],
body.woocommerce-cart .woocommerce-cart .checkout-button,
body.woocommerce-cart a.checkout-button {
  display: block;
  width: 100%;
  height: 46px;
  padding: 0 24px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  background: var(--brand-green);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: center;
  line-height: 46px;
  text-decoration: none;
  transition: background 150ms, transform 80ms;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 2px rgba(37, 185, 125, 0.3);
}

body.woocommerce-checkout .woocommerce #place_order:hover,
body.woocommerce-cart a.checkout-button:hover {
  background: var(--brand-green-600);
  text-decoration: none;
}

body.woocommerce-checkout .woocommerce #place_order:active,
body.woocommerce-cart a.checkout-button:active {
  transform: scale(0.99);
}

/* Secondary / outline buttons */
body.woocommerce-cart .woocommerce button[name="update_cart"],
body.woocommerce-cart .woocommerce a.button:not(.checkout-button),
body.woocommerce-cart .woocommerce button.button:not(.checkout-button) {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 8px 16px;
  cursor: pointer;
  transition: background 120ms;
}

body.woocommerce-cart .woocommerce button[name="update_cart"]:hover,
body.woocommerce-cart .woocommerce a.button:not(.checkout-button):hover {
  background: var(--gray-100);
  text-decoration: none;
}

/* ── Payment methods ───────────────────────────────────────────────────────── */

body.woocommerce-checkout #payment {
  background: transparent;
  border-radius: 0;
  padding: 0;
}

body.woocommerce-checkout #payment ul.payment_methods {
  padding: 0;
  margin: 0 0 20px;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}

body.woocommerce-checkout #payment ul.payment_methods li {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: 14px;
}

body.woocommerce-checkout #payment ul.payment_methods li:last-child {
  border-bottom: none;
}

body.woocommerce-checkout #payment ul.payment_methods li label {
  font-weight: 600;
  color: var(--fg);
  cursor: pointer;
}

body.woocommerce-checkout .woocommerce-checkout-payment .payment_box {
  background: var(--gray-100);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-top: 12px;
}

/* ── Stripe iframe / card element ──────────────────────────────────────────── */

body.woocommerce-checkout .wc-stripe-elements-field,
body.woocommerce-checkout .stripe-card-group,
body.woocommerce-checkout #stripe-card-element,
body.woocommerce-checkout #stripe-payment-element {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  min-height: 40px;
  transition: border-color 150ms, box-shadow 150ms;
}

body.woocommerce-checkout .wc-stripe-elements-field--focus,
body.woocommerce-checkout #stripe-card-element.StripeElement--focus {
  border-color: var(--brand-green);
  box-shadow: 0 0 0 3px rgba(37, 185, 125, 0.15);
}

/* ── Order totals / cart totals sidebar ────────────────────────────────────── */

body.woocommerce-cart .cart_totals {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

body.woocommerce-cart .cart_totals h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 16px;
}

body.woocommerce-cart .cart_totals table {
  border: none;
}

body.woocommerce-cart .cart_totals .order-total th,
body.woocommerce-cart .cart_totals .order-total td {
  font-size: 16px;
  font-weight: 800;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ── WC Subscriptions billing details block on checkout ────────────────────── */

body.woocommerce-checkout .woocommerce-checkout-review-order .subscription-details,
body.woocommerce-checkout .woocommerce-checkout-review-order .recurring_totals {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg-muted);
}

/* ── Product page (grouped subscription — switch flow) ─────────────────────── */

body.single-product .product_title {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 800;
  color: var(--fg);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

body.single-product .product .price {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-green);
}

body.single-product .woocommerce-grouped-product-list-item td {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-sans);
}

body.single-product .grouped_form .woocommerce-grouped-product-list {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: 24px;
}

body.single-product .grouped_form table.woocommerce-grouped-product-list-item .product-name a {
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
  font-size: 15px;
}

body.single-product .grouped_form .add_to_cart_button,
body.single-product .grouped_form .wcs-switch-link {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-green);
  background: var(--brand-green-50);
  border: 1px solid rgba(37, 185, 125, 0.3);
  border-radius: var(--radius-md);
  padding: 8px 16px;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: background 120ms;
}

body.single-product .grouped_form .add_to_cart_button:hover,
body.single-product .grouped_form .wcs-switch-link:hover {
  background: var(--brand-green-100);
  text-decoration: none;
}

/* Loading spinner on switch button */
body.single-product .grouped_form .wcs-switch-link.loading::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(37, 185, 125, 0.3);
  border-top-color: var(--brand-green);
  border-radius: 50%;
  animation: epl-spin 0.6s linear infinite;
  margin-left: 8px;
  vertical-align: middle;
}

@keyframes epl-spin {
  to { transform: rotate(360deg); }
}

/* ── WooCommerce error notice: hide duplicates ─────────────────────────────── */

/* If the same error notice appears twice in sequence, hide the repeat. */
.woocommerce-error + .woocommerce-error:not(:last-child) {
  display: none !important;
}

/* ── Sierra header / nav overrides ────────────────────────────────────────── */

/* On WC pages, slim down the Sierra site header to just the logo area. */
body.woocommerce-checkout #header,
body.woocommerce-cart #header {
  box-shadow: 0 1px 0 var(--border);
  background: var(--surface);
}

/* Hide main nav / hamburger on checkout (distraction-free checkout pattern) */
body.woocommerce-checkout #header .header-nav-wrap,
body.woocommerce-checkout #header .kd-menu-panel,
body.woocommerce-checkout #header .header-extras {
  display: none !important;
}

body.woocommerce-cart #header .header-nav-wrap,
body.woocommerce-cart #header .kd-menu-panel {
  display: none !important;
}

/* Center logo on checkout */
body.woocommerce-checkout #header .logo-wrap {
  margin: 0 auto;
  text-align: center;
}

/* ── Sierra footer ──────────────────────────────────────────────────────────── */

/* Slim footer on checkout — just copyright, no nav columns */
body.woocommerce-checkout #footer .footer-top,
body.woocommerce-checkout #footer .footer-widgets {
  display: none !important;
}

/* ── WooCommerce Subscriptions switch page info notice ──────────────────────── */

/* The "Choose a new subscription." notice WCS shows on the product page */
.woocommerce-info {
  font-family: var(--font-sans);
}

/* ── Checkout breadcrumb / progress steps ──────────────────────────────────── */

/* WCS switch notice area on checkout */
body.woocommerce-checkout .woocommerce-order-details,
body.woocommerce-checkout .woocommerce-customer-details {
  margin-bottom: 24px;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  body.woocommerce-checkout #primary,
  body.woocommerce-cart #primary {
    padding: 0 16px;
  }

  body.woocommerce-checkout .col2-set,
  body.woocommerce-checkout .col2-set .col-1,
  body.woocommerce-checkout .col2-set .col-2 {
    float: none;
    width: 100%;
  }

  body.woocommerce-checkout .woocommerce-checkout-review-order,
  body.woocommerce-checkout #customer_details,
  body.woocommerce-checkout .woocommerce-checkout-payment {
    padding: 20px 16px;
    margin-bottom: 16px;
  }
}