/*
	Theme Name: Hello Elementor Child
	Theme URI: https://friendofthetrend.com/
	Description: Child theme with woocommerce functions
	Author: Lane Dotson
	Author URI: https://friendofthetrend.com/
	Template: hello-elementor
	Version: 2.5.0
	Stable tag: 2.5.0
	Requires at least: 4.7
	Tested up to: 5.9
	Requires PHP: 5.6
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: hello-elementor-child
	Tags: flexible-header, custom-colors, custom-menu, custom-logo, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* ========================================================================
   TREND FRIEND — CUSTOM CSS v7
   
   PASTE LOCATION: Your child theme's style.css
   Path: hello-elementor Child/style.css
   
   This file handles:
   1. Design token CSS variables (root)
   2. Base accessibility (focus, skip link, reduced motion)
   3. Button/badge/input component styles
   4. WooCommerce page overrides (cart, checkout, my-account)
   5. WooCommerce Subscriptions styling
   6. WooCommerce login/register forms
   7. WooCommerce notices (info, error, success)
   8. Affiliate For WooCommerce dashboard + campaigns
   9. Custom checkout fields (TradingView username, refund checkbox)
   10. Thank you page template override
   11. Responsive breakpoints (WooCommerce-specific)
   12. Print styles
   13. Blog/Tutorial page template (bt- prefix)
   ======================================================================== */


/* ========================================================================
   1. DESIGN TOKENS — CSS Custom Properties
   ======================================================================== */
:root {
  --bg-base: #0C0E14;
  --bg-surface: #13161E;
  --bg-card: #1A1E28;
  --bg-input: #242936;
  --bg-border: #2E3444;
  --text-primary: #FFFFFF;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --cta: #FF9800;
  --cta-hover: #E68A00;
  --cta-active: #CC7A00;
  --cta-subtle: rgba(255, 152, 0, 0.12);
  --accent: #00FFCB;
  --accent-hover: #00D4A8;
  --accent-active: #00A88A;
  --accent-subtle: rgba(0, 255, 203, 0.08);
  --green: #22C55E;
  --red: #EF4444;
  --amber: #FBBF24;
  --section-pad: clamp(60px, 8vw, 100px);
  --container-pad: clamp(16px, 4vw, 32px);
  --card-gap: clamp(12px, 2vw, 20px);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --font-main: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, monospace;
  --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent);
}


/* ========================================================================
   2. BASE ACCESSIBILITY
   ======================================================================== */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 100000;
  background: var(--cta);
  color: #000;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  transition: top 0.2s;
  text-decoration: none;
}
.skip-link:focus {
  top: 16px;
}

*:focus-visible {
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
  border-radius: 4px;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  box-shadow: none !important;
  border-color: var(--accent) !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

::selection {
  background: rgba(0, 255, 203, 0.2);
  color: var(--text-primary);
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* Prevent browser autofill from turning fields white */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px var(--bg-input) inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  transition: background-color 5000s ease-in-out 0s !important;
  caret-color: var(--text-primary) !important;
}


/* ========================================================================
   3. GLOBAL COMPONENT OVERRIDES
   ======================================================================== */
body {
  background-color: var(--bg-base) !important;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.elementor-section {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}

.elementor-section > .elementor-container {
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.elementor-button {
  min-height: 48px;
  touch-action: manipulation;
  transition: background 0.2s, border-color 0.2s;
}

.elementor-field-textual {
  background-color: var(--bg-input) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  font-size: 16px !important;
  min-height: 48px;
  padding: 14px 18px !important;
}
.elementor-field-textual:focus {
  border-color: var(--accent) !important;
}
.elementor-field-textual::placeholder {
  color: var(--text-muted) !important;
}

.elementor-field-label {
  color: var(--text-secondary) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.elementor-widget-container {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a:hover {
  transition: color 0.2s;
}


/* ========================================================================
   4. WOOCOMMERCE — CART PAGE
   ======================================================================== */

/* Single column layout, max 820px, centered */
.woocommerce-cart .woocommerce {
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.woocommerce .cart-collaterals {
  width: 100% !important;
  float: none !important;
}
.woocommerce .cart-collaterals .cart_totals {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Cart table */
.woocommerce table.shop_table {
  background: var(--bg-card) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: var(--radius-lg) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
  width: 100% !important;
}
.woocommerce table.shop_table thead {
  background: var(--bg-input) !important;
}
.woocommerce table.shop_table th {
  background: transparent !important;
  color: var(--text-secondary) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 14px 20px !important;
  border: none !important;
  border-bottom: 1px solid var(--bg-border) !important;
}
.woocommerce table.shop_table td {
  background: transparent !important;
  color: var(--text-primary) !important;
  padding: 20px !important;
  border: none !important;
  border-bottom: 1px solid var(--bg-border) !important;
  vertical-align: middle !important;
}

/* Strip last-row bottom border to prevent doubling against table outer border */
.woocommerce table.shop_table > tbody > tr:last-child > td,
.woocommerce table.shop_table > tbody > tr:last-child > th,
.woocommerce table.shop_table > tfoot > tr:last-child > td,
.woocommerce table.shop_table > tfoot > tr:last-child > th {
  border-bottom: none !important;
}

/* Cart product names */
.woocommerce table.shop_table td.product-name a {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  text-decoration: none !important;
}
.woocommerce table.shop_table td.product-name a:hover {
  color: var(--accent) !important;
}

/* Cart product prices */
.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal {
  font-family: var(--font-main) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--text-primary) !important;
}

/* Subscription interval text */
.woocommerce table.shop_table td .subscription-details,
.woocommerce table.shop_table td .amount + small,
.woocommerce table.shop_table .woocommerce-Price-currencySymbol + span {
  color: var(--text-muted) !important;
  font-size: 13px !important;
}

/* Cart thumbnail */
.woocommerce table.shop_table td.product-thumbnail img {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--bg-border) !important;
  width: 64px !important;
  height: 64px !important;
  object-fit: cover !important;
}

/* Cart remove button — no background, larger icon */
body.woocommerce-cart .woocommerce table.shop_table a.remove,
body .woocommerce a.remove {
  font-size: 0 !important;
  color: transparent !important;
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--radius-sm) !important;
  text-decoration: none !important;
  background: transparent !important;
  padding: 0 !important;
  transition: color 0.2s !important;
  vertical-align: middle !important;
  position: relative !important;
}
body.woocommerce-cart .woocommerce table.shop_table a.remove::after,
body .woocommerce a.remove::after {
  content: "\00D7" !important;
  font-size: 28px !important;
  color: #EF4444 !important;
  line-height: 1 !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}
body.woocommerce-cart .woocommerce table.shop_table a.remove:hover,
body .woocommerce a.remove:hover {
  background: transparent !important;
}
body.woocommerce-cart .woocommerce table.shop_table a.remove:hover::after,
body .woocommerce a.remove:hover::after {
  color: #FFFFFF !important;
}

/* Cart quantity input */
.woocommerce .quantity .qty {
  background: var(--bg-input) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-main) !important;
  font-weight: 600 !important;
  width: 60px !important;
  min-height: 44px !important;
  text-align: center !important;
}

/* Coupon row */
.woocommerce table.shop_table td.actions {
  padding: 20px !important;
}
.woocommerce .coupon {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Coupon input */
body.woocommerce-cart .woocommerce .coupon .input-text,
.woocommerce .coupon .input-text {
  background: var(--bg-input) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  min-height: 44px !important;
  padding: 10px 14px !important;
  min-width: 240px !important;
  width: auto !important;
  font-size: 14px !important;
}
.woocommerce .coupon .input-text::placeholder {
  color: var(--text-muted) !important;
}

/* Cart update/coupon buttons — no flicker */
body.woocommerce-cart .woocommerce .coupon .button,
body.woocommerce-cart .woocommerce button[name="update_cart"] {
  background: transparent !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  min-height: 44px !important;
  padding: 10px 24px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  backface-visibility: hidden !important;
  transition: border-color 0.2s, color 0.2s !important;
}
body.woocommerce-cart .woocommerce .coupon .button:hover,
body.woocommerce-cart .woocommerce button[name="update_cart"]:hover {
  border-color: var(--text-muted) !important;
  color: var(--text-primary) !important;
  background: transparent !important;
  font-weight: 600 !important;
}
body.woocommerce-cart .woocommerce button[name="update_cart"]:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* Cart Totals */
.woocommerce .cart_totals {
  background: var(--bg-card) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: var(--radius-xl) !important;
  padding: 32px !important;
  margin-top: 32px !important;
}
.woocommerce .cart_totals h2 {
  color: var(--text-primary) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin-bottom: 24px !important;
}

/* Cart totals inner table — consistent 1px borders all sides */
.woocommerce .cart_totals table {
  background: transparent !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: var(--radius-md) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
}
.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td {
  border: none !important;
  border-bottom: 1px solid var(--bg-border) !important;
}
.woocommerce .cart_totals table th {
  background: transparent !important;
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 14px 20px !important;
  border-right: 1px solid var(--bg-border) !important;
  width: 40% !important;
}
.woocommerce .cart_totals table td {
  background: transparent !important;
  font-family: var(--font-main) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--text-primary) !important;
  padding: 14px 20px !important;
}
.woocommerce .cart_totals table tr:last-child th,
.woocommerce .cart_totals table tr:last-child td {
  border-bottom: none !important;
}

/* Order total */
.woocommerce .cart_totals .order-total td {
  color: var(--accent) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
}

/* Recurring totals */
.woocommerce .cart_totals .recurring-totals th {
  color: var(--text-secondary) !important;
  font-size: 14px !important;
}
/* Recurring totals headline row background */
.woocommerce .cart_totals .recurring-totals th[colspan] {
  background: var(--bg-input) !important;
}
.woocommerce .cart_totals .recurring-totals .order-total td {
  color: var(--cta) !important;
  font-size: 18px !important;
}

/* First renewal date */
.woocommerce .cart_totals .first-payment-date,
.woocommerce .cart_totals .recurring-totals small,
.woocommerce .cart_totals td small {
  color: var(--text-muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  display: block !important;
  margin-top: 4px !important;
}

/* Proceed to checkout button */
.wc-proceed-to-checkout {
  padding: 0 !important;
  margin-top: 24px !important;
}
.woocommerce .cart_totals .checkout-button,
.wc-proceed-to-checkout a.checkout-button {
  background: var(--cta) !important;
  color: #000 !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  font-family: var(--font-main) !important;
  border-radius: var(--radius-sm) !important;
  min-height: 56px !important;
  padding: 16px 32px !important;
  width: 100% !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s !important;
  text-decoration: none !important;
}
.woocommerce .cart_totals .checkout-button:hover,
.wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--cta-hover) !important;
}

/* Empty cart */
.woocommerce .cart-empty {
  color: var(--text-secondary) !important;
  text-align: center !important;
  padding: 80px 0 !important;
  font-size: 16px !important;
}
.woocommerce .return-to-shop {
  text-align: center !important;
}
.woocommerce .return-to-shop a {
  background: var(--cta) !important;
  color: #000 !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 700 !important;
  padding: 14px 32px !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
}


/* ========================================================================
   5. WOOCOMMERCE — CHECKOUT PAGE
   ======================================================================== */

/* Single column, 680px max, centered */
body.woocommerce-checkout .woocommerce {
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Force single column layout */
body.woocommerce-checkout .col2-set {
  width: 100% !important;
}
body.woocommerce-checkout .col2-set .col-1,
body.woocommerce-checkout .col2-set .col-2 {
  width: 100% !important;
  float: none !important;
  max-width: 100% !important;
}

/* Checkout form card wrappers */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 20px;
}
.woocommerce-checkout h3 {
  color: var(--text-primary) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin-bottom: 24px !important;
}
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
  background: var(--bg-input) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  font-size: 16px !important;
  min-height: 48px !important;
  padding: 14px 18px !important;
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus {
  border-color: var(--accent) !important;
}
.woocommerce-checkout .form-row label {
  color: var(--text-secondary) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.woocommerce-checkout .required {
  color: var(--cta) !important;
}

/* Order review table */
.woocommerce-checkout-review-order-table {
  background: var(--bg-card) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  padding: 14px 24px !important;
  border: none !important;
  border-bottom: 1px solid var(--bg-border) !important;
}
/* Vertical divider — first cell in every row regardless of th or td */
.woocommerce-checkout-review-order-table tr > :first-child:not([colspan]) {
  border-right: 1px solid var(--bg-border) !important;
}
/* Last row in table — no bottom border */
.woocommerce-checkout-review-order-table tfoot tr:last-child th,
.woocommerce-checkout-review-order-table tfoot tr:last-child td,
.woocommerce-checkout-review-order-table tbody:last-of-type tr:last-child th,
.woocommerce-checkout-review-order-table tbody:last-of-type tr:last-child td {
  border-bottom: none !important;
}
/* Header row background */
.woocommerce-checkout-review-order-table thead th {
  background: var(--bg-input) !important;
  color: var(--text-secondary) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}
/* Recurring totals headline row background */
.woocommerce-checkout-review-order-table .recurring-totals th[colspan],
.woocommerce-checkout-review-order-table tr th[colspan] {
  background: var(--bg-input) !important;
  border-right: none !important;
}
.woocommerce-checkout-review-order-table .product-name {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}
.woocommerce-checkout-review-order-table .product-total,
.woocommerce-checkout-review-order-table .cart-subtotal td,
.woocommerce-checkout-review-order-table .tax-total td {
  font-family: var(--font-main) !important;
  font-weight: 600 !important;
}
.woocommerce-checkout-review-order-table .order-total td {
  font-family: var(--font-main) !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  color: var(--accent) !important;
}
/* Recurring total also teal */
.woocommerce-checkout-review-order-table .recurring-totals .order-total td,
.woocommerce-checkout-review-order-table tr.order-total.recurring-total td {
  color: var(--accent) !important;
  font-weight: 800 !important;
  font-size: 20px !important;
}

/* Checkout — subscription interval + first renewal date muted */
.woocommerce-checkout-review-order-table .subscription-details,
.woocommerce-checkout-review-order-table small,
.woocommerce-checkout-review-order-table .first-payment-date,
.woocommerce-checkout-review-order-table .amount + small,
.woocommerce-checkout-review-order-table td .wcs-recurring-total-description {
  color: var(--text-muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}
.woocommerce-checkout-review-order-table .first-payment-date {
  display: block !important;
  margin-top: 4px !important;
}

/* Payment methods */
.woocommerce-checkout #payment {
  background: var(--bg-card) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: var(--radius-lg) !important;
}
.woocommerce-checkout #payment ul.payment_methods {
  padding: 20px !important;
  border-bottom: 1px solid var(--bg-border) !important;
}
.woocommerce-checkout #payment ul.payment_methods li {
  padding: 14px 0 !important;
}
.woocommerce-checkout #payment ul.payment_methods li label {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
.woocommerce-checkout #payment .payment_box {
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-sm) !important;
  padding: 16px !important;
}

/* Stripe card element */
.woocommerce-checkout .wc-stripe-elements-field,
.woocommerce-checkout .stripe-card-group,
.woocommerce-checkout .wc-stripe-upe-element {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: var(--radius-sm) !important;
  padding: 0 !important;
  min-height: auto !important;
}

.woocommerce-checkout fieldset.wc-stripe-upe-form,
.woocommerce-checkout fieldset.wc-payment-form {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Place order button */
.woocommerce-checkout #place_order {
  background: var(--cta) !important;
  color: #000 !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  min-height: 56px !important;
  padding: 16px 40px !important;
  width: 100% !important;
  transition: background 0.2s !important;
  touch-action: manipulation;
}
.woocommerce-checkout #place_order:hover {
  background: var(--cta-hover) !important;
}

/* Checkout payment — privacy policy text + all checkbox labels */
.woocommerce-checkout #payment .place-order .woocommerce-privacy-policy-text p,
.woocommerce-checkout #payment .place-order p {
  color: var(--text-secondary) !important;
  font-family: var(--font-main) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}
.woocommerce-checkout #payment .place-order .woocommerce-privacy-policy-text a,
.woocommerce-checkout #payment .place-order p a {
  color: var(--accent) !important;
}
.woocommerce-checkout #payment .place-order .form-row label,
.woocommerce-checkout #payment .place-order .woocommerce-terms-and-conditions-checkbox-text,
.woocommerce-checkout #payment .place-order label.checkbox,
.woocommerce-checkout #payment .place-order .woocommerce-form__label {
  color: var(--text-secondary) !important;
  font-family: var(--font-main) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}
.woocommerce-checkout #payment .place-order .form-row label a,
.woocommerce-checkout #payment .place-order label a {
  color: var(--accent) !important;
}
.woocommerce-checkout #payment .place-order .required {
  color: var(--red) !important;
}
.woocommerce-checkout #payment .place-order input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  background: var(--bg-input) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: 4px !important;
  accent-color: var(--accent) !important;
  vertical-align: middle !important;
}

/* Checkout notice — fix icon overlapping text */
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-error {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 20px !important;
}
body.woocommerce-checkout .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-message::before,
body.woocommerce-checkout .woocommerce-error::before {
  position: static !important;
  float: none !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  top: auto !important;
  left: auto !important;
}

/* Order review heading */
body.woocommerce-checkout #order_review_heading {
  margin-top: 32px !important;
}

/* Force order review full width */
body.woocommerce-checkout #order_review {
  width: 100% !important;
  float: none !important;
}


/* ========================================================================
   6. WOOCOMMERCE — MY ACCOUNT PAGE
   ======================================================================== */

/* Two-column layout: 240px nav left, fill content right, max 1000px */
body.woocommerce-account .woocommerce {
  max-width: 1000px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

/* Force Elementor widget + container to stretch full width */
body.woocommerce-account .elementor-widget-woocommerce-my-account {
  width: 100% !important;
  max-width: 100% !important;
}
body.woocommerce-account .elementor-widget-woocommerce-my-account > .elementor-widget-container {
  width: 100% !important;
}

/* Notices span full width above the columns */
body.woocommerce-account .woocommerce > .woocommerce-notices-wrapper,
body.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation + .woocommerce-notices-wrapper {
  flex: 0 0 100% !important;
  width: 100% !important;
}

/* Account navigation — left column locked at 240px */
.woocommerce-MyAccount-navigation {
  background: var(--bg-card) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  flex: 0 0 240px !important;
  width: 240px !important;
  max-width: 240px !important;
  float: none !important;
  box-sizing: border-box !important;
}
.woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce-MyAccount-navigation ul li {
  border-bottom: 1px solid var(--bg-border) !important;
}
.woocommerce-MyAccount-navigation ul li:last-child {
  border-bottom: none !important;
}
.woocommerce-MyAccount-navigation ul li a {
  display: flex !important;
  align-items: center !important;
  padding: 14px 24px !important;
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  transition: all 0.2s !important;
  min-height: 48px !important;
}
.woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
}
.woocommerce-MyAccount-navigation ul li.is-active a {
  background: var(--accent-subtle) !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
  border-left: 3px solid var(--accent) !important;
}

/* Account content area — right column fills remaining space */
.woocommerce-MyAccount-content {
  color: var(--text-secondary) !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  float: none !important;
  width: auto !important;
  box-sizing: border-box !important;
}
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  color: var(--text-primary) !important;
}

/* Account tables */
.woocommerce-MyAccount-content table {
  background: var(--bg-card) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: var(--radius-lg) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
}
.woocommerce-MyAccount-content table th {
  background: var(--bg-input) !important;
  color: var(--text-secondary) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  padding: 12px 20px !important;
  border-bottom: 1px solid var(--bg-border) !important;
}
.woocommerce-MyAccount-content table td {
  padding: 14px 20px !important;
  color: var(--text-secondary) !important;
  border-bottom: 1px solid var(--bg-border) !important;
}
.woocommerce-MyAccount-content table tr:last-child td {
  border-bottom: none !important;
}
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-status {
  font-weight: 600 !important;
}

/* Account buttons */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content a.button {
  background: transparent !important;
  color: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 8px 18px !important;
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s !important;
}
.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content a.button:hover {
  background: var(--accent-subtle) !important;
}

/* Account edit forms */
.woocommerce-MyAccount-content .woocommerce-EditAccountForm input.input-text,
.woocommerce-MyAccount-content .woocommerce-address-fields input.input-text {
  background: var(--bg-input) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  font-size: 16px !important;
  min-height: 48px !important;
  padding: 14px 18px !important;
}

/* Save button on account forms */
.woocommerce-MyAccount-content button[type="submit"],
.woocommerce-MyAccount-content input[type="submit"] {
  background: var(--cta) !important;
  color: #000 !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  min-height: 48px !important;
  padding: 14px 32px !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}
.woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-MyAccount-content input[type="submit"]:hover {
  background: var(--cta-hover) !important;
}


/* ========================================================================
   7. WOOCOMMERCE — SUBSCRIPTION MANAGEMENT
   ======================================================================== */
.subscription-status {
  font-weight: 700 !important;
}
.shop_table.subscription_details {
  background: var(--bg-card) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: var(--radius-lg) !important;
}
.shop_table.subscription_details th {
  color: var(--text-muted) !important;
  font-weight: 500 !important;
}
.shop_table.subscription_details td {
  font-family: var(--font-mono) !important;
}
.woocommerce-MyAccount-content .subscription_details .button {
  background: transparent !important;
  color: var(--accent) !important;
  border: 1px solid var(--accent) !important;
}
a.button.cancel {
  color: var(--red) !important;
  border-color: var(--red) !important;
}
a.button.cancel:hover {
  background: rgba(239, 68, 68, 0.1) !important;
}


/* ========================================================================
   8. WOOCOMMERCE — LOGIN / REGISTER FORMS
   ======================================================================== */
.woocommerce-form-login,
.woocommerce-form-register {
  background: var(--bg-card) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: var(--radius-xl) !important;
  padding: 40px !important;
  max-width: 440px !important;
  margin: 0 auto !important;
}
.woocommerce-form-login label,
.woocommerce-form-register label {
  color: var(--text-secondary) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.woocommerce-form-login input.input-text,
.woocommerce-form-register input.input-text {
  background: var(--bg-input) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  font-size: 16px !important;
  min-height: 48px !important;
  padding: 14px 18px !important;
  width: 100% !important;
}
.woocommerce-form-login button.button,
.woocommerce-form-register button.button {
  background: var(--cta) !important;
  color: #000 !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  min-height: 48px !important;
  padding: 14px 32px !important;
  width: 100% !important;
  font-size: 15px !important;
  transition: background 0.2s !important;
}
.woocommerce-form-login button.button:hover,
.woocommerce-form-register button.button:hover {
  background: var(--cta-hover) !important;
}
.woocommerce-LostPassword a {
  color: var(--accent) !important;
  font-size: 13px !important;
}


/* ========================================================================
   8b. WOOCOMMERCE — LOGIN PAGE LAYOUT
   ======================================================================== */
#customer_login {
  display: flex !important;
  gap: 32px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}
#customer_login .u-column1,
#customer_login .u-column2 {
  flex: 1 1 0 !important;
  min-width: 280px !important;
  max-width: 440px !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
#customer_login h2 {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 24px !important;
  color: var(--text-primary) !important;
}
.woocommerce-form-login input.input-text:focus,
.woocommerce-form-register input.input-text:focus {
  border-color: var(--accent) !important;
  outline: none !important;
}
.woocommerce-form-login input.input-text::placeholder,
.woocommerce-form-register input.input-text::placeholder {
  color: var(--text-muted) !important;
}
.woocommerce-form-login .woocommerce-form-login__rememberme {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  margin-bottom: 16px !important;
}
.woocommerce-form-login input[type="checkbox"],
.woocommerce-form-register input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  background: var(--bg-input) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: 4px !important;
  accent-color: var(--accent) !important;
}
.woocommerce-form-register .woocommerce-privacy-policy-text p {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  line-height: 1.5 !important;
  margin-bottom: 16px !important;
}
.woocommerce-form-register .woocommerce-privacy-policy-text a {
  color: var(--accent) !important;
}
.woocommerce-form-register .woocommerce-form__label-for-checkbox {
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.woocommerce-form-login .required,
.woocommerce-form-register .required {
  color: var(--red) !important;
}

@media (max-width: 767px) {
  #customer_login {
    flex-direction: column !important;
    align-items: center !important;
  }
  #customer_login .u-column1,
  #customer_login .u-column2 {
    max-width: 100% !important;
    width: 100% !important;
  }
}


/* ========================================================================
   8c. WORDFENCE 2FA LOGIN OVERLAY
   ======================================================================== */
#wfls-prompt-overlay {
  background-color: var(--bg-card) !important;
  padding: 32px !important;
  border-radius: var(--radius-lg) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}
#wfls-prompt-overlay > div,
.wfls-prompt-container,
#wfls-prompt-overlay .wfls-2fa-wrapper,
#wfls-prompt-overlay [class*="wfls-"] {
  background: transparent !important;
  color: var(--text-secondary) !important;
  border: none !important;
  font-family: var(--font-main) !important;
}
#wfls-prompt-overlay h2,
#wfls-prompt-overlay h3,
#wfls-prompt-overlay label {
  color: var(--text-primary) !important;
  font-family: var(--font-main) !important;
}
#wfls-prompt-overlay p,
#wfls-prompt-overlay span {
  color: var(--text-secondary) !important;
}
#wfls-prompt-overlay input[type="text"],
#wfls-prompt-overlay input[type="number"],
#wfls-prompt-overlay input[type="password"] {
  background: var(--bg-input) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  font-size: 16px !important;
  min-height: 48px !important;
  padding: 14px 18px !important;
  font-family: var(--font-mono) !important;
}
#wfls-prompt-overlay input[type="text"]:focus,
#wfls-prompt-overlay input[type="number"]:focus,
#wfls-prompt-overlay input[type="password"]:focus {
  border-color: var(--accent) !important;
}
#wfls-prompt-overlay input[type="submit"],
#wfls-prompt-overlay button {
  background: var(--cta) !important;
  color: #000 !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  min-height: 48px !important;
  padding: 14px 32px !important;
  font-family: var(--font-main) !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}
#wfls-prompt-overlay input[type="submit"]:hover,
#wfls-prompt-overlay button:hover {
  background: var(--cta-hover) !important;
}
#wfls-prompt-overlay a {
  color: var(--accent) !important;
}


/* ========================================================================
   9. WOOCOMMERCE — GLOBAL NOTICE STYLES
   ======================================================================== */
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 20px !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
  color: var(--text-secondary) !important;
  background: var(--bg-card) !important;
}
.woocommerce .woocommerce-info {
  border-left: 4px solid var(--accent) !important;
}
.woocommerce .woocommerce-message {
  border-left: 4px solid var(--accent) !important;
}
.woocommerce .woocommerce-error {
  border-left: 4px solid var(--red) !important;
}
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-error::before {
  position: static !important;
  float: none !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  top: auto !important;
  left: auto !important;
}
.woocommerce .woocommerce-info::before {
  color: var(--accent) !important;
}
.woocommerce .woocommerce-error::before {
  color: var(--red) !important;
}
.woocommerce .woocommerce-message::before {
  color: var(--green) !important;
}
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button {
  margin-left: auto !important;
  white-space: nowrap !important;
}

/* Suppress focus ring on notices — they receive programmatic focus
   for screen readers but aren't interactive elements themselves */
.woocommerce .woocommerce-info:focus,
.woocommerce .woocommerce-info:focus-visible,
.woocommerce .woocommerce-message:focus,
.woocommerce .woocommerce-message:focus-visible,
.woocommerce .woocommerce-error:focus,
.woocommerce .woocommerce-error:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}


/* ========================================================================
   10. WOOCOMMERCE — BREADCRUMBS
   ======================================================================== */
.woocommerce .woocommerce-breadcrumb {
  color: var(--text-muted) !important;
  font-size: 13px !important;
}
.woocommerce .woocommerce-breadcrumb a {
  color: var(--text-muted) !important;
}
.woocommerce .woocommerce-breadcrumb a:hover {
  color: var(--accent) !important;
}


/* ========================================================================
   11. RESPONSIVE — WOOCOMMERCE SPECIFIC
   ======================================================================== */

/* Tablet */
@media (max-width: 1024px) {
  .woocommerce table.shop_table td.product-thumbnail {
    display: none !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .woocommerce table.shop_table thead {
    display: none !important;
  }
  .woocommerce table.shop_table tbody tr {
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 16px !important;
    border-bottom: 1px solid var(--bg-border) !important;
  }
  .woocommerce table.shop_table tbody td {
    border: none !important;
    padding: 4px 8px !important;
  }
  .woocommerce table.shop_table td.product-name {
    width: 100% !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
  }
  .woocommerce table.shop_table td.product-thumbnail {
    display: none !important;
  }
  .woocommerce table.shop_table td.product-price,
  .woocommerce table.shop_table td.product-subtotal,
  .woocommerce table.shop_table td.product-quantity {
    flex: 0 0 auto !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
  }
  .woocommerce .coupon {
    flex-wrap: wrap !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .woocommerce .coupon .input-text {
    width: 100% !important;
    min-width: auto !important;
  }
  .woocommerce .coupon .button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
  }
  .woocommerce table.shop_table td.actions {
    flex-direction: column !important;
    display: flex !important;
  }
  body.woocommerce-cart .woocommerce button[name="update_cart"] {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    margin-top: 8px !important;
  }
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    padding: 20px !important;
  }

  /* Stack my account to single column on mobile */
  body.woocommerce-account .woocommerce {
    flex-direction: column !important;
  }
  .woocommerce-MyAccount-navigation {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .woocommerce-MyAccount-content {
    flex: 0 0 auto !important;
    width: 100% !important;
  }
}
@media (max-width: 480px) {
  .woocommerce-form-login,
  .woocommerce-form-register {
    padding: 24px !important;
  }
}


/* ========================================================================
   11b. MY ACCOUNT — DASHBOARD STYLING FIXES
   ======================================================================== */
.woocommerce-MyAccount-content-wrapper {
  background-color: transparent !important;
}
.woocommerce-MyAccount-navigation ul li {
  background: transparent !important;
}
.woocommerce-MyAccount-navigation ul li a {
  background: transparent !important;
}

/* Fix notice icon overlap + button vertical centering */
.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-message {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.woocommerce-MyAccount-content .woocommerce-info::before,
.woocommerce-MyAccount-content .woocommerce-message::before {
  flex-shrink: 0 !important;
  position: static !important;
  float: none !important;
}
.woocommerce-MyAccount-content .woocommerce-info .button,
.woocommerce-MyAccount-content .woocommerce-message .button {
  margin-left: auto !important;
  background: transparent !important;
  color: #00FFCB !important;
  border: 1px solid #00FFCB !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}
.woocommerce-MyAccount-content .woocommerce-info .button:hover,
.woocommerce-MyAccount-content .woocommerce-message .button:hover {
  background: rgba(0,255,203,0.08) !important;
}

/* Address cards */
.woocommerce-Addresses .woocommerce-Address {
  background: #1A1E28 !important;
  border: 1px solid #2E3444 !important;
  border-radius: 10px !important;
  padding: 24px !important;
}
.woocommerce-Addresses .woocommerce-Address address,
.woocommerce-Addresses address,
.woocommerce-MyAccount-content address {
  background: transparent !important;
  background-color: transparent !important;
  color: #94A3B8 !important;
  font-style: normal !important;
  border: none !important;
}

/* Account edit form fieldset */
.woocommerce-EditAccountForm fieldset {
  border: 1px solid #2E3444 !important;
  border-radius: 10px !important;
  padding: 24px !important;
  margin-top: 24px !important;
  margin-bottom: 32px !important;
  background: transparent !important;
}
.woocommerce-EditAccountForm fieldset legend {
  color: #FFFFFF !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 0 12px !important;
}

/* Password strength meter */
.woocommerce-password-strength {
  background: #242936 !important;
  color: #94A3B8 !important;
  padding: 8px 12px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin-top: 8px !important;
}
.woocommerce-password-strength.strong {
  color: #22C55E !important;
  border-left: 3px solid #22C55E !important;
}
.woocommerce-password-strength.good {
  color: #00FFCB !important;
  border-left: 3px solid #00FFCB !important;
}
.woocommerce-password-strength.short {
  color: #EF4444 !important;
  border-left: 3px solid #EF4444 !important;
}
.woocommerce-password-strength.bad {
  color: #FBBF24 !important;
  border-left: 3px solid #FBBF24 !important;
}

/* Elementor form messages */
.elementor-message {
  background: #1A1E28 !important;
  padding: 14px 20px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
}
.elementor-message.elementor-message-success,
.elementor-message.form-message-success {
  color: #22C55E !important;
  border-left: 4px solid #22C55E !important;
}
.elementor-message.elementor-message-danger,
.elementor-message.form-message-danger {
  color: #EF4444 !important;
  border-left: 4px solid #EF4444 !important;
}

/* WooCommerce store notices */
.woocommerce-store-notice {
  background: #1A1E28 !important;
  color: #94A3B8 !important;
  border-bottom: 1px solid #2E3444 !important;
  padding: 14px 20px !important;
  font-size: 14px !important;
}
.woocommerce-store-notice a {
  color: #00FFCB !important;
  font-weight: 600 !important;
}


/* ========================================================================
   12. PRINT STYLES
   ======================================================================== */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }
  .site-header,
  .announcement-bar,
  .back-to-top,
  .cookie-banner,
  .woocommerce-MyAccount-navigation {
    display: none !important;
  }
  * {
    box-shadow: none !important;
  }
}


/* ========================================================================
   13. WOOCOMMERCE — PRODUCT PRICES & MISC
   ======================================================================== */
.woocommerce .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--accent) !important;
  font-family: var(--font-mono) !important;
  font-weight: 600 !important;
}

.wp-element-button {
  background-color: var(--cta) !important;
  color: #000 !important;
  font-family: var(--font-main) !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  padding: 14px 32px !important;
  min-height: 48px !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: background 0.2s !important;
}
.wp-element-button:hover {
  background-color: var(--cta-hover) !important;
}

.woocommerce .button,
.button {
  background: var(--cta) !important;
  color: #000 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 14px 32px !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 700 !important;
  font-family: var(--font-main) !important;
  min-height: 48px !important;
  transition: background 0.2s !important;
}
.woocommerce .button:hover,
.button:hover {
  background: var(--cta-hover) !important;
}

.woocommerce form .form-row label.checkbox,
.woocommerce-page form .form-row label.checkbox {
  color: var(--text-secondary) !important;
  font-family: var(--font-main) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}
.woocommerce form .form-row label.checkbox a {
  color: var(--accent) !important;
}


/* ========================================================================
   14. CUSTOM CHECKOUT FIELDS
   ======================================================================== */

/* TradingView Username section — card background */
#tradingview_username {
  background: var(--bg-card) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 32px !important;
  margin-bottom: 20px !important;
}
#tradingview_username h2 {
  color: var(--text-primary) !important;
  font-family: var(--font-main) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}
#tradingview_username p {
  color: var(--text-secondary) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  margin-bottom: 16px !important;
}
#tradingview_username input.input-text {
  background: var(--bg-input) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  font-size: 16px !important;
  min-height: 48px !important;
  padding: 14px 18px !important;
  font-family: var(--font-mono) !important;
}
#tradingview_username input.input-text:focus {
  border-color: var(--accent) !important;
}

/* Refund policy checkbox area */
#refund_policy_agree_field label {
  color: var(--text-secondary) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}
#refund_policy_agree_field label a {
  color: var(--accent) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}


/* ========================================================================
   15. AFFILIATE FOR WOOCOMMERCE
   ======================================================================== */
.elementor-widget-woocommerce-my-account {
  color: var(--text-secondary) !important;
  font-family: var(--font-main) !important;
}
div.afwc-affiliate-details-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: var(--radius-lg) !important;
}
.afwc-kpi-number {
  color: var(--text-primary) !important;
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
}
.afwc_reg_form_field,
.afwc_reg_form_field input,
.afwc_reg_form_field textarea,
.afwc_reg_form_field select {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-main) !important;
}
.afwc_reg_form_field input:focus,
.afwc_reg_form_field textarea:focus {
  border-color: var(--accent) !important;
}
label.afwc_,
label.afwc_required {
  color: var(--text-secondary) !important;
  font-family: var(--font-main) !important;
  font-weight: 500 !important;
}
.afwc_reg_message .success {
  color: var(--green) !important;
  font-family: var(--font-main) !important;
  font-weight: 500 !important;
}
#afwc_save_account_button,
#afwc_registration_form_submit {
  background: var(--cta) !important;
  color: #000 !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  padding: 14px 32px !important;
  font-weight: 700 !important;
  font-family: var(--font-main) !important;
  min-height: 48px !important;
  transition: background 0.2s !important;
}
#afwc_save_account_button:hover,
#afwc_registration_form_submit:hover {
  background: var(--cta-hover) !important;
}

/* Affiliate campaigns */
.afw-campaigns {
  color: var(--text-secondary) !important;
}
.afw-campaigns div {
  background: var(--bg-card) !important;
}
.afw-campaigns a {
  color: var(--accent) !important;
}
.afw-campaigns a:hover {
  color: var(--accent-hover) !important;
}
.afw-campaigns h1,
.afw-campaigns h2,
.afw-campaigns h3,
.afw-campaigns h4,
.afw-campaigns h5,
.afw-campaigns h6 {
  color: var(--text-primary) !important;
}
.afw-campaigns p {
  color: var(--text-secondary) !important;
}
.afw-campaigns div.text-gray-700.text-lg.pr-4.flex-1.leading-6 {
  color: var(--text-primary) !important;
}
.afw-campaigns h2.text-3xl.leading-8.text-gray-900 {
  color: var(--text-primary) !important;
}
.afw-campaigns aside section div.h-full.flex.flex-col.space-y-6.py-4.bg-white.shadow-xl.overflow-y-scroll {
  background-color: var(--bg-card) !important;
  box-shadow: none !important;
}
.afw-campaigns .bg-white,
.afw-campaigns [class*="bg-white"] {
  background-color: var(--bg-card) !important;
}
.afw-campaigns [class*="text-gray-"] {
  color: var(--text-secondary) !important;
}
.afw-campaigns [class*="text-gray-900"],
.afw-campaigns [class*="text-gray-800"] {
  color: var(--text-primary) !important;
}
.afw-campaigns [class*="border-gray-"] {
  border-color: var(--bg-border) !important;
}
.afw-campaigns [class*="shadow"] {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}


/* ========================================================================
   16. WOOCOMMERCE THANK YOU PAGE
   ======================================================================== */
.woocommerce-order .woocommerce-notice--success {
  background: var(--bg-card) !important;
  border-left: 4px solid var(--green) !important;
  color: var(--text-secondary) !important;
  padding: 16px 24px !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
  margin-bottom: 16px !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}
.woocommerce-order .woocommerce-order-overview {
  background: var(--bg-card) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 24px !important;
  list-style: none !important;
}
.woocommerce-order .woocommerce-order-overview li {
  border-bottom: 1px solid var(--bg-border) !important;
  padding: 12px 0 !important;
  color: var(--text-secondary) !important;
  font-size: 14px !important;
}
.woocommerce-order .woocommerce-order-overview li:last-child {
  border-bottom: none !important;
}
.woocommerce-order .woocommerce-order-overview li strong {
  color: var(--text-primary) !important;
  font-family: var(--font-mono) !important;
}
.woocommerce-order .woocommerce-notice--error {
  background: var(--bg-card) !important;
  border-left: 4px solid var(--red) !important;
  color: var(--text-secondary) !important;
  padding: 16px 24px !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}
.woocommerce-order .woocommerce-order-details h2 {
  color: var(--text-primary) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
}

/* Show login link in menu on mobile only */
@media (min-width: 768px) {
  .elementor-nav-menu li.mobile-only,
  .elementor-nav-menu--main li.mobile-only {
    display: none !important;
  }
}

/* Mini cart widget — product name color */
.woocommerce-mini-cart-item a:not(.remove),
.widget_shopping_cart .mini_cart_item a:not(.remove),
.elementor-menu-cart__product-name a,
.elementor-menu-cart__product-name {
  color: var(--text-primary) !important;
}

/* Fix cart icon font pulse change */
.elementor-button-icon-qty {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  transition: none !important;
}

/* Cart toggle button — reset global .button override */
.elementor-menu-cart__toggle .elementor-button {
  background: transparent !important;
  border: none !important;
  min-height: auto !important;
  padding: 0 !important;
}

/* Mini cart popup buttons */
.elementor-menu-cart__footer-buttons .elementor-button {
  min-height: 40px !important;
  padding: 10px 20px !important;
}
.elementor-menu-cart__footer-buttons .elementor-button--view-cart {
  background: transparent !important;
  border: 1px solid var(--accent) !important;
  color: var(--accent) !important;
}
.elementor-menu-cart__footer-buttons .elementor-button--view-cart:hover {
  background: var(--accent-subtle) !important;
  border-color: var(--accent) !important;
}
.elementor-menu-cart__footer-buttons .elementor-button--checkout {
  background: var(--cta) !important;
  color: #000 !important;
}
.elementor-menu-cart__footer-buttons .elementor-button--checkout:hover {
  background: var(--cta-hover) !important;
}

/* Testimonial author box */
.tc .tc-author {
  padding-bottom: 16px !important;
}

/* Trust bar stat dividers — hide on tablet/mobile */
@media (max-width: 1024px) {
  .elementor-counter {
    border-right: none !important;
    padding-right: 0 !important;
  }
}


/* ========================================================================
   17. BLOG / TUTORIAL PAGE TEMPLATE (bt- prefix)
   ======================================================================== */

/* Author avatar circle */
.bt-author-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #00FFCB;
  font-size: 10px;
  font-weight: 700;
  color: #000;
  flex-shrink: 0;
}

/* Breadcrumbs */
.bt-breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  margin: 0;
  font-size: 13px;
}
.bt-breadcrumb li {
  display: flex;
  align-items: center;
  color: #64748B;
}
.bt-breadcrumb li:not(:last-child)::after {
  content: '›';
  margin: 0 8px;
  color: #2E3444;
}
.bt-breadcrumb a {
  color: #64748B;
  text-decoration: none;
  transition: color 0.2s;
}
.bt-breadcrumb a:hover { color: #00FFCB; }
.bt-breadcrumb span[aria-current="page"] { color: #94A3B8; }

/* Category Pill */
.bt-cat-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 4px;
  color: #000;
}
.bt-cat-tradingview { background: #00FFCB; }
.bt-cat-daytrading { background: #FF9800; }
.bt-cat-orderflow { background: #FF9800; }
.bt-cat-strategy { background: #00FFCB; }
.bt-cat-indicator { background: #22C55E; }

/* Byline */
.bt-byline {
  font-size: 13px;
  color: #64748B;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bt-byline a {
  color: #94A3B8;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}
.bt-byline a:hover { color: #00FFCB; }

/* Table of Contents */
.bt-toc {
  background: #1A1E28;
  border: 1px solid #2E3444;
  border-radius: 10px;
  padding: 20px 24px;
}
.bt-toc-title {
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 12px;
}
.bt-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc;
}
.bt-toc li {
  counter-increment: toc;
  padding: 6px 0;
  border-bottom: 1px solid #2E3444;
}
.bt-toc li:last-child { border-bottom: none; }
.bt-toc a {
  font-size: 14px;
  color: #64748B;
  text-decoration: none;
  transition: color 0.2s;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.bt-toc a::before {
  content: counter(toc) '.';
  font-size: 12px;
  font-weight: 600;
  color: #64748B;
  font-family: 'Roboto Mono', monospace;
  min-width: 20px;
}
.bt-toc a:hover { color: #00FFCB; }

/* Figure + Figcaption */
.bt-figure { margin: 0 0 24px; }
.bt-figure img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid #2E3444;
  display: block;
}
.bt-figure figcaption {
  font-size: 12px;
  color: #64748B;
  margin-top: 8px;
  padding-bottom: 32px;
  text-align: center;
  font-style: italic;
}

/* Video Wrapper — responsive 16:9 */
.bt-video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid #2E3444;
}
.bt-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* FAQ Accordion */
.bt-faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.bt-faq-list,
.bt-faq-list .bt-faq-item {
  width: 100%;
  box-sizing: border-box;
}
.bt-faq-item {
  background: #1A1E28;
  border: 1px solid #2E3444;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.bt-faq-item[open] { border-color: #00FFCB; }
.bt-faq-item summary {
  padding: 16px 20px;
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
  cursor: pointer;
  list-style: none;
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 0.2s;
  background: none !important;
  background-color: transparent !important;
  min-height: auto !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border: none !important;
}
.bt-faq-item summary:hover { color: #00FFCB; }
.bt-faq-item summary::-webkit-details-marker { display: none; }
.bt-faq-item summary::marker { display: none; content: ''; }
.bt-faq-item summary::after {
  content: '+';
  font-size: 20px;
  font-weight: 400;
  color: #64748B;
  transition: transform 0.2s, color 0.2s;
  flex-shrink: 0;
  line-height: 1;
}
.bt-faq-item[open] summary::after {
  transform: rotate(45deg);
  color: #00FFCB;
}
.bt-faq-answer { padding: 0 20px 16px; }
.bt-faq-answer p {
  font-size: 14px;
  color: #94A3B8;
  line-height: 1.7;
  margin: 0;
}

/* CTA Affiliate Link */
.bt-cta-affiliate {
  font-size: 14px;
  color: #64748B;
  text-align: center;
  margin: 0;
}
.bt-cta-affiliate a {
  color: #00FFCB;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}
.bt-cta-affiliate a:hover { color: #00D4A8; }

/* Related Content Cards */
.bt-related-card {
  display: block;
  background: #1A1E28;
  border: 1px solid #2E3444;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.25s;
}
.bt-related-card:hover {
  transform: translateY(-4px);
  border-color: #00FFCB;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.bt-related-img {
  height: 140px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bt-related-cat {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
}
.bt-related-body { padding: 16px 20px 20px; }
.bt-related-title {
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.3;
  margin: 0 0 12px;
}
.bt-related-read {
  font-size: 13px;
  font-weight: 600;
  color: #00FFCB;
}

.related-grid {
  align-items: stretch !important;
}
.bt-related-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.bt-related-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}
.bt-related-read {
  margin-top: auto !important;
}

/* Blockquote inside Text Editor widgets */
.elementor-widget-text-editor blockquote {
  border-left: 3px solid #00FFCB;
  padding: 16px 24px;
  margin: 28px 0;
  background: #1A1E28;
  border-radius: 0 10px 10px 0;
  font-size: 15px;
  color: #94A3B8;
  font-style: italic;
  line-height: 1.7;
}

/* Blog/Tutorial responsive */
@media (max-width: 767px) {
  .bt-related-img { height: 100px; }
}

/* ========================================================================
   18. RESPONSIVE — SETTINGS TABLES, FAQ ACCORDIONS & SUITE PILLS
   
   Requires CSS classes on Elementor HTML widgets:
   - tf-settings-table  → on every HTML widget containing a settings table
   - tf-faq-section     → on every HTML widget containing a FAQ accordion
   ======================================================================== */

/* --- Settings Tables: horizontal scroll wrapper --- */
@media (max-width: 1024px) {
  .tf-settings-table .elementor-widget-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 767px) {
  .tf-settings-table table th,
  .tf-settings-table table td {
    padding: 10px 12px !important;
    font-size: 12px !important;
  }
  .tf-settings-table table td:first-child {
    min-width: 120px;
    font-size: 11px !important;
  }
  .tf-settings-table table td:nth-child(2) {
    min-width: 60px;
  }
  .tf-settings-table table td:nth-child(3) {
    min-width: 160px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .tf-settings-table table th,
  .tf-settings-table table td {
    padding: 12px 14px !important;
  }
}

/* --- FAQ Accordions: button-based (ofi-, vsr-, etc.) --- */
.tf-faq-section [class*="-faq-q"] {
  min-width: 0;
}
.tf-faq-section [class*="-faq-q"] > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 0%;
}

@media (max-width: 767px) {
  .tf-faq-section [class*="-faq-q"] {
    padding: 14px 16px !important;
    font-size: 13px !important;
    gap: 8px;
  }
  .tf-faq-section [class*="-faq-q"] > span:first-child {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .tf-faq-section [class*="-faq-toggle"] {
    font-size: 18px !important;
    margin-left: 10px !important;
  }
  .tf-faq-section [class*="-faq-a-inner"] {
    padding: 0 16px 16px !important;
    font-size: 13px !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .tf-faq-section [class*="-faq-q"] {
    padding: 16px 20px !important;
    font-size: 14px !important;
  }
  .tf-faq-section [class*="-faq-q"] > span:first-child {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .tf-faq-section [class*="-faq-a-inner"] {
    padding: 0 20px 18px !important;
  }
}

/* --- FAQ Accordions: details-based (bt-faq-item) --- */
@media (max-width: 767px) {
  .tf-faq-section .bt-faq-item summary {
    padding: 14px 16px !important;
    font-size: 13px !important;
    gap: 8px;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .tf-faq-section .bt-faq-answer {
    padding: 0 16px 14px !important;
  }
  .tf-faq-section .bt-faq-answer p {
    font-size: 13px !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .tf-faq-section .bt-faq-item summary {
    padding: 16px 20px !important;
    font-size: 14px !important;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .tf-faq-section .bt-faq-answer {
    padding: 0 20px 16px !important;
  }
}

/* --- Suite callout pills --- */
@media (max-width: 767px) {
  div[style*="border-radius:100px"] {
    border-radius: 12px !important;
    flex-wrap: wrap !important;
    padding: 14px 20px !important;
    font-size: 13px !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  div[style*="border-radius:100px"] {
    border-radius: 12px !important;
    flex-wrap: wrap !important;
    padding: 12px 22px !important;
  }
}

/* ========================================================================
   19. FIXES — TOGGLE STYLING & FOCUS BORDER OVERRIDES
   ======================================================================== */

/* Auto-renew toggle — neutralize global .button styling.
   WC Subscriptions renders this as a button element which inherits
   the orange CTA background. Restore native toggle appearance. */
body.woocommerce-account .subscription_details .button.toggle,
body.woocommerce-account .subscription_details a.toggle,
body.woocommerce-account .subscription_details button.toggle,
body.woocommerce-account .auto_renew_toggle,
body.woocommerce-account .wcs-auto-renew-toggle,
body.woocommerce-account td.auto_renew .button {
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  min-height: auto !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: normal !important;
  box-shadow: none !important;
}
body.woocommerce-account .subscription_details .button.toggle:hover,
body.woocommerce-account .subscription_details a.toggle:hover,
body.woocommerce-account .subscription_details button.toggle:hover,
body.woocommerce-account .auto_renew_toggle:hover,
body.woocommerce-account .wcs-auto-renew-toggle:hover,
body.woocommerce-account td.auto_renew .button:hover {
  background: transparent !important;
  background-color: transparent !important;
}

/* Focus border — Account Details / Address forms */
.woocommerce-MyAccount-content .woocommerce-EditAccountForm input.input-text:focus,
.woocommerce-MyAccount-content .woocommerce-address-fields input.input-text:focus,
.woocommerce-MyAccount-content input.input-text:focus,
.woocommerce-MyAccount-content textarea:focus,
.woocommerce-MyAccount-content select:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Focus border — Cart page coupon code input */
body.woocommerce-cart .woocommerce .coupon .input-text:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: none !important;
}