/*
	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 (Layer 2)
   
   PASTE LOCATION: Your child theme's style.css
   Path: hello-elementor Child/style.css
   Paste BELOW the existing theme header comment block (the part with
   "Theme Name: Hello Elementor Child" etc.) — don't overwrite that header.
   
   ALSO: Delete everything currently in Appearance → Customize → Additional CSS.
   That old CSS has the colors we're replacing (#00E1FF, #00B2C9, #1E1E1E, etc.)
   and will conflict if left in place. This file replaces ALL of it.
   
   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
   
   DOES NOT TOUCH: functions.php, thankyou.php, or any PHP files.
   Those stay exactly as they are.
   ======================================================================== */


/* ========================================================================
   1. DESIGN TOKENS — CSS Custom Properties
   These cascade into Elementor widgets via Global Colors
   ======================================================================== */
:root {
  /* Backgrounds (navy-tinted) */
  --bg-base: #0C0E14;
  --bg-surface: #13161E;
  --bg-card: #1A1E28;
  --bg-input: #242936;
  --bg-border: #2E3444;

  /* Text */
  --text-primary: #FFFFFF;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;

  /* CTA Orange */
  --cta: #FF9800;
  --cta-hover: #E68A00;
  --cta-active: #CC7A00;
  --cta-subtle: rgba(255, 152, 0, 0.12);

  /* Accent Teal */
  --accent: #00FFCB;
  --accent-hover: #00D4A8;
  --accent-active: #00A88A;
  --accent-subtle: rgba(0, 255, 203, 0.08);

  /* Semantic */
  --green: #22C55E;
  --red: #EF4444;
  --amber: #FBBF24;

  /* Spacing — fluid */
  --section-pad: clamp(60px, 8vw, 100px);
  --container-pad: clamp(16px, 4vw, 32px);
  --card-gap: clamp(12px, 2vw, 20px);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Type */
  --font-main: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, monospace;

  /* Focus */
  --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent);
}


/* ========================================================================
   2. BASE ACCESSIBILITY
   ======================================================================== */

/* Screen-reader only utility — hide visually but keep in DOM for AT */
.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 to content link — appears on Tab for keyboard users */
.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 ring — keyboard navigation only, not mouse clicks */
*:focus-visible {
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
  border-radius: 4px;
}
/* Inputs get border change instead of ring */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  box-shadow: none !important;
  border-color: var(--accent) !important;
}

/* Reduce motion for vestibular disorders */
@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;
  }
}

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

/* Prevent iOS zoom on input focus (16px minimum) */
@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;
  }
}


/* ========================================================================
   3. GLOBAL COMPONENT OVERRIDES
   These override Elementor defaults site-wide
   ======================================================================== */

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

/* Elementor sections — fluid padding */
.elementor-section {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}

/* Elementor containers — fluid side padding */
.elementor-container {
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* Override Elementor button defaults globally */
.elementor-button {
  min-height: 48px;
  touch-action: manipulation;
  transition: background 0.2s, transform 0.2s, border-color 0.2s;
}

/* Override Elementor form inputs */
.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;
}

/* Override Elementor form labels */
.elementor-field-label {
  color: var(--text-secondary) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Cards — containment for paint performance */
.elementor-widget-container {
  contain: layout style;
}

/* Links */
a:hover {
  transition: color 0.2s;
}


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

/* 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;
}

.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-bottom: 1px solid var(--bg-border) !important;
}

.woocommerce table.shop_table td {
  background: transparent !important;
  color: var(--text-primary) !important;
  padding: 16px 20px !important;
  border-top: 1px solid var(--bg-border) !important;
  vertical-align: middle !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;
}
.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-mono) !important;
  font-weight: 600 !important;
}

/* Cart totals sidebar */
.woocommerce .cart_totals {
  background: var(--bg-card) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: var(--radius-xl) !important;
  padding: 32px !important;
}

.woocommerce .cart_totals h2 {
  color: var(--text-primary) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin-bottom: 24px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--bg-border) !important;
}

.woocommerce .cart_totals table th {
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
}

.woocommerce .cart_totals table td {
  font-family: var(--font-mono) !important;
  font-weight: 600 !important;
}

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

/* Cart remove button */
.woocommerce a.remove {
  color: var(--text-muted) !important;
  font-size: 20px !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--radius-sm) !important;
  transition: all 0.2s !important;
}
.woocommerce a.remove:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  color: var(--red) !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-mono) !important;
  width: 60px !important;
  min-height: 44px !important;
  text-align: center !important;
}

/* Cart coupon */
.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: 48px !important;
  padding: 10px 14px !important;
}

/* Cart update/coupon buttons */
.woocommerce .coupon .button,
.woocommerce button[name="update_cart"] {
  background: transparent !important;
  color: var(--text-secondary) !important;
  border: 1.5px solid var(--bg-border) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
  min-height: 48px !important;
  padding: 10px 24px !important;
  transition: border-color 0.2s, color 0.2s !important;
}
.woocommerce .coupon .button:hover,
.woocommerce button[name="update_cart"]:hover {
  border-color: var(--text-muted) !important;
  color: var(--text-primary) !important;
}

/* Proceed to checkout button */
.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: 15px !important;
  border-radius: var(--radius-sm) !important;
  min-height: 48px !important;
  padding: 14px 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;
}
.woocommerce .cart_totals .checkout-button:hover,
.wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--cta-hover) !important;
}

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

/* Empty cart */
.woocommerce .cart-empty {
  color: var(--text-secondary) !important;
  text-align: center !important;
  padding: 60px 0 !important;
}
.woocommerce .return-to-shop a {
  background: var(--cta) !important;
  color: #000 !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 700 !important;
}


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

/* Checkout form */
.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;
}

/* Checkout headings */
.woocommerce-checkout h3 {
  color: var(--text-primary) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin-bottom: 24px !important;
}

/* Checkout form fields */
.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;
}

/* Checkout labels */
.woocommerce-checkout .form-row label {
  color: var(--text-secondary) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Required asterisk */
.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;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  padding: 14px 24px !important;
  border-bottom: 1px solid var(--bg-border) !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-mono) !important;
  font-weight: 600 !important;
}

.woocommerce-checkout-review-order-table .order-total td {
  font-family: var(--font-mono) !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  color: var(--accent) !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-input) !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 {
  background: var(--bg-input) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 14px 18px !important;
  min-height: 48px !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 notices */
.woocommerce-info,
.woocommerce-message {
  background: var(--bg-card) !important;
  border-left: 4px solid var(--accent) !important;
  color: var(--text-secondary) !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
  padding: 14px 20px !important;
}
.woocommerce-error {
  background: var(--bg-card) !important;
  border-left: 4px solid var(--red) !important;
  color: var(--text-secondary) !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}
.woocommerce-info a,
.woocommerce-message a {
  color: var(--accent) !important;
}


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

/* Account navigation */
.woocommerce-MyAccount-navigation {
  background: var(--bg-card) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !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 */
.woocommerce-MyAccount-content {
  color: var(--text-secondary) !important;
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  color: var(--text-primary) !important;
}

/* Account tables (orders, subscriptions, downloads) */
.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;
}

/* Order status badges */
.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: 1.5px 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;
  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 */
.subscription-status {
  font-weight: 700 !important;
}

/* Subscription details table */
.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;
}

/* Subscription actions */
.woocommerce-MyAccount-content .subscription_details .button {
  background: transparent !important;
  color: var(--accent) !important;
  border: 1.5px solid var(--accent) !important;
}

/* Cancel subscription */
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
   ======================================================================== */

/* Login/register form container */
.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;
}

/* Lost password link */
.woocommerce-LostPassword a {
  color: var(--accent) !important;
  font-size: 13px !important;
}


/* ========================================================================
   9. WOOCOMMERCE — GLOBAL NOTICE STYLES
   ======================================================================== */

.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message {
  background: var(--bg-card) !important;
  border-left: 4px solid var(--accent) !important;
  color: var(--text-secondary) !important;
  padding: 14px 20px !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}

.woocommerce .woocommerce-error {
  background: var(--bg-card) !important;
  border-left: 4px solid var(--red) !important;
  color: var(--text-secondary) !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;
}


/* ========================================================================
   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) {
  /* Stack cart table for tablet */
  .woocommerce table.shop_table td.product-thumbnail {
    display: none !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  /* Stack account layout */
  .woocommerce-MyAccount-navigation {
    margin-bottom: 24px !important;
  }
  
  /* Make cart table responsive */
  .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;
  }
  
  /* Stack checkout form */
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2 {
    width: 100% !important;
    float: none !important;
  }
  
  /* Stack billing/shipping */
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    padding: 20px !important;
  }

  /* Full-width account nav on mobile */
  .woocommerce-MyAccount-navigation,
  .woocommerce-MyAccount-content {
    width: 100% !important;
    float: none !important;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .woocommerce-form-login,
  .woocommerce-form-register {
    padding: 24px !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
   Replaces: .price{color:#00E1FF} from your Customizer
   ======================================================================== */

/* Product prices */
.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;
}

/* Generic WP block buttons (used by some WooCommerce blocks) */
.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;
}

/* Generic .button class (WooCommerce uses this widely) */
.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;
}

/* Password strength meter */
.woocommerce-password-strength {
  color: var(--text-primary) !important;
  font-size: 13px !important;
}

/* Checkout checkbox labels */
.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;
}

/* Checkout checkbox links */
.woocommerce form .form-row label.checkbox a {
  color: var(--accent) !important;
}


/* ========================================================================
   14. CUSTOM CHECKOUT FIELDS
   Styles the TradingView Username field and Refund Policy checkbox
   added by your child theme's functions.php
   ======================================================================== */

/* TradingView Username section */
#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
   Replaces all .afw-campaigns and .afwc_ styles from your Customizer
   ======================================================================== */

/* Affiliate dashboard container */
.elementor-widget-woocommerce-my-account {
  color: var(--text-secondary) !important;
  font-family: var(--font-main) !important;
}

/* Affiliate details card */
div.afwc-affiliate-details-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: var(--radius-lg) !important;
}

/* Affiliate KPI numbers */
.afwc-kpi-number {
  color: var(--text-primary) !important;
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
}

/* Affiliate form fields */
.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;
}

/* Affiliate labels */
label.afwc_,
label.afwc_required {
  color: var(--text-secondary) !important;
  font-family: var(--font-main) !important;
  font-weight: 500 !important;
}

/* Affiliate registration success message */
.afwc_reg_message .success {
  color: var(--green) !important;
  font-family: var(--font-main) !important;
  font-weight: 500 !important;
}

/* Affiliate buttons */
#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 section — full dark theme override */
.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;
}

/* Campaign detail cards — Tailwind utility overrides */
.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;
}

/* Campaign sidebar & panels with white backgrounds */
.afw-campaigns .bg-white,
.afw-campaigns [class*="bg-white"] {
  background-color: var(--bg-card) !important;
}

/* Campaign text that uses Tailwind gray classes */
.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;
}

/* Campaign borders */
.afw-campaigns [class*="border-gray-"] {
  border-color: var(--bg-border) !important;
}

/* Campaign shadows */
.afw-campaigns [class*="shadow"] {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}


/* ========================================================================
   16. WOOCOMMERCE THANK YOU PAGE
   Styles the custom thankyou.php template override in your child theme
   ======================================================================== */

.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;
}

/* Failed order notice */
.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;
}

/* Account/Policy Details section (added by functions.php) */
.woocommerce-order .woocommerce-order-details h2 {
  color: var(--text-primary) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
}