/**
 * vBoxStudio Global Dark Theme
 * Applied site-wide to maintain consistent dark premium design
 * Works with Elementor templates, WooCommerce pages, and custom templates
 */

/* ====== CSS VARIABLES ======
 * Defined on :root for global scope. Values match Elementor Kit globals.
 * Kit ID mapping in comments — update both if changing colors.
 *
 * To make Kit changes auto-propagate, the body-level override below
 * re-binds these vars to Elementor's CSS custom properties.
 */
:root {
  /* Tell the browser this is a dark theme — flips default form controls,
     scrollbars, checkboxes, selects, and system colors to dark automatically */
  color-scheme: dark;

  /* Brand colors (Kit ID → CSS var) */
  --blue: #3B5BDB;            /* Kit: d49ac81 — Button */
  --blue-dark: #2D46B9;       /* Kit: 332724a — Button Hover */
  --blue-light: #5A7AE8;      /* Kit: 3ee16e7 — Accent 2 */
  --teal: #00897B;             /* Kit: cfd5506 — Accent 3 */
  --green: #2ECC71;            /* Kit: ec3c7a7 — Accent 1 */

  /* Neutrals */
  --bg: #06070D;               /* Kit: 044b931 — Dark Background */
  --bg2: #0B0D16;              /* Kit: cfa1f76 — Light Background */
  --surface: #10121E;          /* Kit: 7fbea4f — Extra Light Bg */
  --card: #141728;             /* Kit: c94d9ab — Smooth Dark Bg */
  --border: #1C2035;           /* Kit: 4d462f5 — Line Color */
  --border2: #252840;
  --white: #F5F6FF;            /* Kit: secondary */
  --text: #B0B8D8;             /* Kit: primary */
  --muted: #9AA8C7;

  /* Gradients */
  --grad: linear-gradient(135deg, var(--blue) 0%, var(--teal) 50%, var(--green) 100%);
  --grad-h: linear-gradient(90deg, var(--blue) 0%, var(--teal) 60%, var(--green) 100%);

  /* Typography */
  --font: 'Outfit', sans-serif;
  --font-display: 'Chakra Petch', sans-serif;

  /* Semantic */
  --error: #e74c3c;

  /* Structural tokens */
  --r: 14px;
  --r-sm: 8px;
  --sp-xs: 8px;
  --sp-sm: 12px;
  --sp-md: 20px;
  --sp-lg: 30px;
  --sp-xl: 40px;
}

/* Auto-bind to Elementor Kit — when Kit CSS loads, these override :root fallbacks.
 * Change a color in Elementor Kit editor → propagates to theme CSS automatically. */
.elementor-kit-17 {
  --blue: var(--e-global-color-d49ac81);
  --blue-dark: var(--e-global-color-332724a);
  --blue-light: var(--e-global-color-3ee16e7);
  --teal: var(--e-global-color-cfd5506);
  --green: var(--e-global-color-ec3c7a7);
  --bg: var(--e-global-color-044b931);
  --bg2: var(--e-global-color-cfa1f76);
  --surface: var(--e-global-color-7fbea4f);
  --card: var(--e-global-color-c94d9ab);
  --border: var(--e-global-color-4d462f5);
  --white: var(--e-global-color-secondary);
  --text: var(--e-global-color-primary);
}

/* ====== BASE ====== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body,
body.elementor-default,
body.elementor-page {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

/* Scrollbar */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--grad-h); border-radius: 2px; }

/* Links */
a { color: var(--blue-light); transition: color 0.2s; text-decoration: none; }
a:hover { color: var(--white); text-decoration: none; }

/* Buttons — force white text on ALL button-like elements site-wide.
 * The base `a` rule sets color: blue-light for text links, which bleeds
 * into link-styled buttons. This catch-all ensures every button is white. */
button,
.button,
a.button,
input[type="submit"],
input[type="button"],
[class*="btn-"],
.hero-card-btn,
.elementor-button,
.elementor-button a,
a.elementor-button,
.elementor-button .elementor-button-text,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce .button,
.wp-element-button,
.wp-block-button__link,
.wpforms-submit,
[type="submit"] {
  color: #fff !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--white);
  letter-spacing: -0.01em;
}

/* ====== ELEMENTOR OVERRIDES ====== */

/* Elementor section backgrounds */
.elementor-section {
  background-color: transparent;
}

/* Elementor widgets text */
.elementor-widget-text-editor,
.elementor-widget-text-editor p {
  color: var(--text);
}

.elementor-widget-heading .elementor-heading-title {
  color: var(--white);
  font-family: var(--font-display);
}

/* Elementor buttons */
.elementor-button {
  font-family: var(--font);
  font-weight: 600;
  border-radius: var(--r-sm);
  transition: all 0.2s;
}
/* Any button with gradient background must have white text */
.elementor-button .elementor-button-text {
  color: #fff !important;
}

/* ====== WOOCOMMERCE DARK THEME ====== */

/* Shop / Archive */
.woocommerce ul.products li.product {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0;
  overflow: hidden;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  border-color: rgba(59,91,219,0.3);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.woocommerce ul.products li.product a img {
  border-radius: 0;
  margin: 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display);
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  padding: 12px 16px 4px;
}
.woocommerce ul.products li.product .price {
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  padding: 0 16px;
}
.woocommerce ul.products li.product .price del {
  color: var(--muted) !important;
  font-weight: 400;
  opacity: 0.7;
  text-decoration: line-through !important;
}
.woocommerce ul.products li.product .price del .woocommerce-Price-amount {
  text-decoration: line-through !important;
}
.woocommerce ul.products li.product .price ins {
  text-decoration: none !important;
  font-weight: 700;
  font-size: 24px;
  color: var(--white) !important;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.add_to_cart_button {
  background: var(--blue);
  color: var(--white);
  border-radius: var(--r-sm);
  font-family: var(--font);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.03em;
  margin: 12px 16px 16px;
  padding: 10px 18px;
  transition: all 0.2s;
}
.woocommerce ul.products li.product .button:hover {
  background: var(--blue-dark);
  box-shadow: 0 4px 20px rgba(59,91,219,0.3);
}

/* Sale badge */
.woocommerce span.onsale {
  background: var(--grad-h);
  color: var(--white);
  font-family: var(--font);
  font-weight: 700;
  border-radius: var(--r-sm);
  padding: 4px 10px;
  min-height: auto;
  min-width: auto;
  line-height: 1.5;
}

/* Single Product */
.woocommerce div.product {
  color: var(--text);
}
.woocommerce div.product .product_title {
  font-family: var(--font-display);
  color: var(--white);
  font-weight: 700;
}
.woocommerce div.product p.price {
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
}
.woocommerce div.product p.price del {
  color: var(--muted);
  opacity: 0.7;
}
.woocommerce div.product p.price ins {
  text-decoration: none;
  color: var(--green);
}
.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--text);
}
.woocommerce div.product .woocommerce-tabs {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 0;
  margin: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  color: var(--muted);
  font-family: var(--font);
  font-weight: 600;
  padding: 14px 24px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--white);
  background: var(--surface);
}
.woocommerce div.product .woocommerce-tabs .panel {
  padding: 24px;
  color: var(--text);
}
.woocommerce div.product .woocommerce-tabs .panel h2 {
  color: var(--white);
  font-family: var(--font-display);
}

/* Quantity stepper */
.woocommerce .quantity {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 46px;
  border: 1.5px solid rgba(176,184,216,.35);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.qty-btn {
  width: 100%;
  height: 22px;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
  user-select: none;
  padding: 0;
  margin: 0;
}
.qty-btn:hover {
  background: rgba(59,91,219,.2);
  color: var(--white);
}
.woocommerce .quantity .qty {
  width: 100%;
  height: 28px;
  text-align: center;
  border: none;
  border-top: 1px solid rgba(176,184,216,.25);
  border-bottom: 1px solid rgba(176,184,216,.25);
  background: var(--surface);
  color: var(--white);
  font-family: var(--font);
  font-weight: 600;
  font-size: 14px;
  -moz-appearance: textfield;
  padding: 0;
  border-radius: 0;
}
.woocommerce .quantity .qty::-webkit-inner-spin-button,
.woocommerce .quantity .qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* WooCommerce buttons — gradient bg, forced white text */
.woocommerce div.product form.cart .button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wc-proceed-to-checkout a.checkout-button,
.woocommerce .wc-proceed-to-checkout a.checkout-button {
  background: var(--grad-h) !important;
  color: #fff !important;
  border: none;
  border-radius: var(--r-sm);
  font-family: var(--font);
  font-weight: 700;
  padding: 12px 28px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: opacity 0.2s, transform 0.2s;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.wc-proceed-to-checkout a.checkout-button:hover {
  color: #fff !important;
  opacity: 0.88;
  transform: translateY(-1px);
}

/* Product gallery */
.woocommerce div.product div.images {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}

/* Related / upsell products */
.woocommerce .related h2,
.woocommerce .upsells h2,
.woocommerce .cross-sells h2 {
  font-family: var(--font-display);
  color: var(--white);
}

/* Breadcrumb */
.woocommerce .woocommerce-breadcrumb {
  color: var(--muted);
  font-size: 13px;
}
.woocommerce .woocommerce-breadcrumb a {
  color: var(--blue-light);
}

/* WooCommerce tables — cart, order details, my account */
.woocommerce table.shop_table {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.woocommerce table.shop_table th {
  background: var(--surface);
  color: var(--white);
  font-family: var(--font-display);
  border-bottom: 1px solid var(--border);
}
.woocommerce table.shop_table td {
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
  color: var(--text);
}
.woocommerce table.shop_table a {
  color: var(--blue-light);
}
.woocommerce table.shop_table .amount {
  color: var(--white);
  font-weight: 600;
}
/* Cart totals */
.woocommerce-cart .cart-collaterals .cart_totals {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 24px;
}
.woocommerce-cart .cart-collaterals .cart_totals .order-total th,
.woocommerce-cart .cart-collaterals .cart_totals .order-total td {
  color: var(--white);
  font-weight: 700;
}

/* Checkout — classic WooCommerce form styling (non-Elementor forms: My Account, etc.) */
.woocommerce form .form-row label {
  color: var(--text);
  font-family: var(--font);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  background: var(--surface);
  border: 1px solid var(--border2);
  color: var(--white);
  border-radius: var(--r-sm);
  font-family: var(--font);
  padding: 10px 14px;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--blue);
  outline: none;
}

/* Select2 dropdowns (rendered outside Elementor widget scope) */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--white);
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--muted) transparent transparent transparent;
}
.select2-dropdown {
  background: var(--surface);
  border-color: var(--border2);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--card);
  border-color: var(--border2);
  color: var(--white);
}
.select2-container--default .select2-results__option {
  color: var(--text);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--blue);
  color: var(--white);
}

/*
 * FOUC prevention — Elementor checkout post CSS loads late, so WooCommerce
 * default white backgrounds flash before dark styles apply. These rules
 * load early via global-dark.css to prevent the white flash. They target
 * the exact Elementor checkout wrapper classes + WooCommerce inner HTML.
 */
.e-checkout__container,
.e-checkout__column,
.e-checkout__column-start,
.e-checkout__column-end,
.e-checkout__column-inner,
.e-checkout__order_review,
.woocommerce-checkout,
.woocommerce-checkout .col2-set,
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2,
.woocommerce-checkout #customer_details,
.woocommerce-checkout-review-order,
.woocommerce-checkout-review-order-table {
  background-color: transparent;
}

/*
 * WooCommerce core form-row / field wrappers — rendered by WC, NOT Elementor.
 */
.woocommerce .form-row,
.woocommerce-additional-fields,
.woocommerce-additional-fields__field-wrapper,
.woocommerce-shipping-fields,
.woocommerce-billing-fields,
.woocommerce-checkout .col-1,
.woocommerce-checkout .col-2,
.e-checkout__additional_information,
.e-checkout__additional_information *,
.e-checkout__shipping_details,
.e-checkout__shipping_details *,
.e-checkout__billing_details,
.e-checkout__billing_details *,
#order_comments_field,
#order_comments_field .woocommerce-input-wrapper {
  background-color: transparent !important;
  background-image: none !important;
}

/*
 * WooCommerce core #payment section — rendered by WC, NOT Elementor.
 */
.woocommerce-checkout #payment {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.woocommerce-checkout #payment .payment_methods {
  border-color: var(--border);
}
.woocommerce-checkout #payment .payment_methods li {
  border-color: var(--border);
}
.woocommerce-checkout #payment .payment_methods li label {
  color: var(--white);
}
.woocommerce-checkout #payment .payment_box {
  background: var(--surface);
  color: var(--text);
}
.woocommerce-checkout #payment .payment_box::before {
  border-bottom-color: var(--surface);
}

/*
 * WooPay plugin section — injected by WooCommerce Payments plugin JS/PHP.
 * Not Elementor-controllable. Must override plugin's hardcoded white styles.
 */
.woopay-save-new-user-container {
  background: var(--surface) !important;
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--sp-md);
  color: var(--text);
}
.woopay-save-new-user-container h3,
.woopay-save-new-user-container h2 {
  color: var(--white) !important;
}
.woopay-save-new-user-container label,
.woopay-save-new-user-container .save-details-header label,
.woopay-save-new-user-container .additional-information,
.woopay-save-new-user-container .tos,
.woopay-save-new-user-container p {
  color: var(--text) !important;
}
.woopay-save-new-user-container a {
  color: var(--blue-light) !important;
}
.woopay-save-new-user-container .save-details-form .phone-input {
  background-color: var(--bg2) !important;
  border-color: var(--border) !important;
  color: var(--white) !important;
}
.woopay-save-new-user-container .save-details-form .phone-input::placeholder {
  color: var(--muted) !important;
}
.woopay-save-new-user-container .save-details-form .line {
  border-color: var(--border) !important;
}
.woopay-save-new-user-container .iti__selected-flag .iti__selected-dial-code {
  color: var(--text) !important;
}
.woopay-save-new-user-container .iti__selected-flag .iti__arrow {
  border-top-color: var(--text) !important;
}
.woopay-save-new-user-container .iti__selected-flag .iti__arrow--up {
  border-bottom-color: var(--text) !important;
  border-top-color: transparent !important;
}
.iti__country-list {
  background-color: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.iti__country.iti__highlight {
  background-color: var(--blue) !important;
  color: var(--white) !important;
}
.iti__dial-code {
  color: var(--muted) !important;
}
.iti__divider {
  border-bottom-color: var(--border) !important;
}

/*
 * Stripe / WooCommerce Payments card form — plugin injects light backgrounds.
 */
#wc-stripe-upe-form,
.wc-stripe-upe-element,
#wc-stripe-card-element,
.wc-block-card-element,
#payment .payment_method_stripe .payment_box,
#payment .payment_method_woocommerce_payments .payment_box,
.woocommerce-PaymentMethod .payment_box,
#add_payment_method #payment .payment_box,
.woocommerce-MyAccount-content form,
#wcpay-card-element,
.wcpay-upe-element,
#wcpay-upe-element,
.payment_method_woocommerce_payments .payment_box,
.wc-payment-form,
#wc-woocommerce_payments-upe-form,
.woocommerce-SavedPaymentMethods-new,
#wc-woocommerce_payments-upe-form .wc-payment-form {
  background: var(--card) !important;
  color: var(--text) !important;
  border-radius: var(--r-sm);
}
#add_payment_method #payment,
.woocommerce-add-payment-method #payment {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r);
}
#add_payment_method #payment .payment_methods li label,
.woocommerce-add-payment-method #payment .payment_methods li label {
  color: var(--white) !important;
}
/* Stripe iframe container background */
.wc-stripe-elements-field,
.wc-stripe-upe-element,
.__PrivateStripeElement {
  background: var(--surface) !important;
  border-radius: var(--r-sm);
}

/*
 * #place_order button — WooCommerce Payments JS injects inline gradient.
 * Only override background-image to kill the gradient; let Kit handle
 * the rest (color, font, border) via .elementor-kit-17 button {} rule.
 */
#place_order {
  background-image: none !important;
  box-shadow: none !important;
}

/*
 * WooPay / Express Checkout — outer containers full-width.
 * Inner button & logo styling is handled by WCPay's own CSS
 * (blocks-checkout.css) — do NOT override it.
 */
#wcpay-woopay-button,
#wcpay-express-checkout-element,
#wcpay-express-checkout-wrapper {
  width: 100%;
}
#wcpay-express-checkout-button-separator {
  width: 100%;
}

/*
 * Stripe card input container — plugin-rendered, not Elementor.
 */
#wcpay-upe-element,
.wcpay-upe-element {
  background: var(--surface) !important;
  border-radius: var(--r-sm);
}

/* My Account */
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
}
.woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 12px 20px;
  color: var(--text);
  font-family: var(--font);
  font-weight: 500;
  border-radius: var(--r-sm);
  transition: all 0.2s;
}
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
  background: rgba(59,91,219,0.1);
  color: var(--white);
}

/*
 * WooCommerce notices & validation — site-wide.
 * Higher specificity to override WC core (background-color: #f6f5f8).
 */
.woocommerce .woocommerce-message,
.woocommerce-message {
  background-color: var(--card) !important;
  border: 1px solid var(--blue) !important;
  border-top: 3px solid var(--blue) !important;
  border-radius: var(--r-sm);
  color: var(--text) !important;
}
.woocommerce .woocommerce-error,
.woocommerce-error {
  background-color: var(--card) !important;
  border: 1px solid var(--error) !important;
  border-top: 3px solid var(--error) !important;
  border-radius: var(--r-sm);
  color: var(--text) !important;
}
.woocommerce .woocommerce-info,
.woocommerce-info {
  background-color: var(--card) !important;
  border: 1px solid var(--teal) !important;
  border-top: 3px solid var(--teal) !important;
  border-radius: var(--r-sm);
  color: var(--text) !important;
}
/* Notice list items & links */
.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
  color: var(--text) !important;
}
.woocommerce-error a,
.woocommerce-message a,
.woocommerce-info a {
  color: var(--blue-light);
}
/* WC notice icons (::before pseudo) */
.woocommerce-message::before { color: var(--blue) !important; }
.woocommerce-error::before { color: var(--error) !important; }
.woocommerce-info::before { color: var(--teal) !important; }

/*
 * Form validation errors — inline text under fields + label coloring.
 * WC uses .woocommerce-invalid and role="alert" for these.
 */
.woocommerce form .form-row.woocommerce-invalid label {
  color: var(--error) !important;
}
.woocommerce form .form-row .woocommerce-error-text,
.woocommerce form .form-row [role="alert"],
.woocommerce form .form-row.woocommerce-invalid .woocommerce-error,
.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text ~ .required + span,
.woocommerce .woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox .woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text,
.form-row.validate-required .optional + .woocommerce-error {
  color: var(--error) !important;
}
/* Inline validation text that appears below fields */
.woocommerce form p.form-row .woocommerce-password-strength,
.woocommerce form .form-row .description {
  color: var(--text);
}
/* Invalid field borders */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid textarea {
  border-color: var(--error) !important;
}
/* Terms checkbox validation — the red outline */
.woocommerce-invalid #terms {
  outline-color: var(--error) !important;
}
/* Validated (success) field borders */
.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select {
  border-color: var(--green) !important;
}

/* Elementor form fields — placeholder muted, content white */
.elementor-field-textual,
.elementor-field-textual input,
.elementor-field-textual textarea,
.elementor-form .elementor-field {
  color: var(--white) !important;
}
.elementor-form .elementor-field::placeholder {
  color: var(--muted) !important;
  opacity: 1;
}

/* Elementor form messages */
.elementor-message {
  color: var(--text) !important;
}
.elementor-message.elementor-message-danger {
  color: var(--error) !important;
}
.elementor-message.elementor-message-success {
  color: var(--green) !important;
}

/*
 * Order Received / Thank-You page — rendered by WooCommerce, NOT Elementor.
 * The checkout widget container provides the dark section background;
 * these rules style the inner WC-generated HTML.
 */
.woocommerce-order-received .woocommerce-order,
.woocommerce-order-received .woocommerce-order-details,
.woocommerce-order-received .woocommerce-customer-details {
  color: var(--text);
}

/* ── "Thank you" success message ── */
.woocommerce-order-received .woocommerce-thankyou-order-received {
  color: var(--green);
  font-size: 1.5rem;
  font-weight: 700;
  margin: var(--sp-lg) 0;
}

/* ── Order overview strip (order#, date, total, payment) ── */
.woocommerce-order-received .woocommerce-order-overview {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--sp-lg);
  margin-bottom: var(--sp-xl);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
}
.woocommerce-order-received .woocommerce-order-overview li {
  color: var(--text);
  border-right: 1px solid var(--border);
  padding-right: var(--sp-md);
}
.woocommerce-order-received .woocommerce-order-overview li:last-child {
  border-right: none;
}
.woocommerce-order-received .woocommerce-order-overview li strong {
  color: var(--white);
  display: block;
  margin-top: 4px;
  font-size: 1.1em;
}

/* ── "Order details" / "Billing address" headings ── */
.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-column__title {
  color: var(--white);
  margin-top: var(--sp-xl);
  margin-bottom: var(--sp-lg);
}

/* ── Order details section — same card treatment as billing address ── */
.woocommerce-order-received .woocommerce-order-details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--sp-lg);
  margin: var(--sp-md) 0;
}
.woocommerce-order-received .woocommerce-order-details .woocommerce-order-details__title {
  margin-top: 0;
}
/* Table inside the card — no outer border, inherits card padding */
.woocommerce-order-received .woocommerce-table--order-details {
  background: transparent;
  border: none;
  border-radius: 0;
  width: 100%;
}
.woocommerce-order-received .woocommerce-table--order-details th,
.woocommerce-order-received .woocommerce-table--order-details td {
  border-bottom: 1px solid var(--border);
  color: var(--white);
  padding: var(--sp-md) var(--sp-sm);
}
.woocommerce-order-received .woocommerce-table--order-details thead th {
  color: var(--white);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85em;
  letter-spacing: 0.5px;
}
.woocommerce-order-received .woocommerce-table--order-details tbody td {
  color: var(--text);
}
.woocommerce-order-received .woocommerce-table--order-details tbody .product-name a {
  color: var(--blue-light);
}
.woocommerce-order-received .woocommerce-table--order-details tfoot th {
  color: var(--text);
  font-weight: 600;
}
.woocommerce-order-received .woocommerce-table--order-details tfoot td {
  color: var(--white);
  font-weight: 500;
}
.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child td {
  border-bottom: none;
}

/* ── Customer / Billing address ── */
.woocommerce-order-received .woocommerce-customer-details address {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--sp-lg);
  color: var(--text);
  margin-top: var(--sp-sm);
}
.woocommerce-order-received .woocommerce-customer-details address p {
  color: var(--text);
  margin: 4px 0;
}

/* ── Payment instruction text ── */
.woocommerce-order-received .woocommerce-order > p {
  color: var(--text);
  margin: var(--sp-sm) 0;
}

/* ====== GENERAL ELEMENTS ====== */

/* Forms */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
  background: var(--surface);
  border: 1px solid var(--border2);
  color: var(--white);
  border-radius: var(--r-sm);
  font-family: var(--font);
  padding: 10px 14px;
  transition: border-color 0.2s;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--blue);
  outline: none;
}
/* Placeholder = muted, typed content = white */
::placeholder { color: var(--muted) !important; opacity: 1; }
input:-webkit-autofill {
  -webkit-text-fill-color: var(--white) !important;
  box-shadow: 0 0 0 1000px var(--surface) inset !important;
}

/* Ensure del/strikethrough is always visible */
del, del * {
  text-decoration: line-through !important;
}

/* Tables */
table {
  border-collapse: collapse;
}
table th {
  background: var(--surface);
  color: var(--white);
  font-family: var(--font-display);
}
table td {
  color: var(--text);
  border-color: var(--border);
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

/* Star ratings */
.woocommerce .star-rating span::before {
  color: var(--blue-light);
}

/* Elementor container backgrounds */
.e-con {
  --background-color: transparent;
}

/* ====== TOPBAR ====== */
.topbar {
  background: linear-gradient(90deg, var(--blue-dark), var(--teal));
  padding: 9px 24px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}
.topbar-item { display: flex; align-items: center; gap: 8px; }
.topbar-sep { opacity: 0.4; }

/* ====== HEADER ====== */
header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(6,7,13,0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  padding: 0 48px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.custom-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
header .custom-logo-link .custom-logo {
  height: 46px;
  max-height: 46px;
  width: auto;
  max-width: 320px;
  object-fit: contain;
  display: block;
}

nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
nav a {
  padding: 7px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--white) !important;
  text-decoration: none;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}
nav a:hover { color: var(--blue-light) !important; background: rgba(255,255,255,0.05); }
nav a.active { color: var(--blue-light) !important; background: rgba(59,91,219,0.15); }

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-cart {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: var(--r);
  border: 1px solid var(--border2);
  background: var(--surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background 0.2s;
  color: var(--text);
}
.btn-cart:hover {
  border-color: var(--blue);
  background: rgba(59,91,219,0.1);
  color: var(--white);
}
.cart-badge {
  position: absolute;
  top: -5px; right: -5px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--grad-h);
  font-size: 9px;
  font-weight: 700;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
}

.btn-shop {
  padding: 10px 22px;
  background: var(--grad-h);
  border: none;
  border-radius: var(--r-sm);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.2s, transform 0.2s;
  white-space: nowrap;
}
.btn-shop:hover { opacity: 0.88; transform: translateY(-1px); color: var(--white); }

/* ====== FOOTER ====== */
footer {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: 64px 60px 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 56px;
}
footer .footer-logo {
  height: 40px;
  max-height: 40px;
  width: auto;
  max-width: 280px;
  object-fit: contain;
  display: block;
  margin-bottom: 14px;
}
.footer-tagline { font-size: 16px; color: var(--text); line-height: 1.7; margin-bottom: 24px; max-width: 280px; font-weight: 400; letter-spacing: 1px; }
.footer-socials { display: flex; gap: 8px; }
.social-btn {
  width: 34px; height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.social-btn:hover { border-color: var(--blue); color: var(--blue-light); }
.footer-col-title { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-light); margin-bottom: 18px; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 9px; }
.footer-links a { font-size: 13px; color: var(--white) !important; text-decoration: none; transition: color 0.2s; font-weight: 400; }
.footer-links a:hover { color: var(--blue-light) !important; }

.footer-bottom {
  padding-top: 36px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-copy { font-size: 12px; color: var(--muted); }
.footer-copy span { color: var(--blue-light); font-weight: 600; }
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { font-size: 12px; color: var(--muted); text-decoration: none; transition: color 0.2s; }
.footer-legal a:hover { color: var(--white); }

/* ====== 404 BUTTON HOVER ====== */
/* Elementor 404 template uses dark blue text on blue button hover — force white */
.elementor-widget-heading + .elementor-widget-button .elementor-button:hover .elementor-button-text,
.page-template-default.error404 .elementor-button:hover .elementor-button-text,
.error404 .elementor-button:hover {
  color: #fff !important;
}

/* ====== WPFORMS DARK OVERRIDES ====== */
/* WPForms injects light-theme CSS variables on every page — override them */
div.wpforms-container-full,
div.wpforms-container {
  --wpforms-field-background-color: var(--surface) !important;
  --wpforms-field-border-color: var(--border2) !important;
  --wpforms-field-text-color: var(--white) !important;
  --wpforms-label-color: var(--text) !important;
  --wpforms-button-background-color: var(--blue) !important;
  --wpforms-button-text-color: #fff !important;
  --wpforms-label-sublabel-color: var(--muted) !important;
  --wpforms-label-error-color: var(--error) !important;
  --wpforms-button-border-color: transparent !important;
  --wpforms-page-break-color: var(--blue) !important;
  --wpforms-background-color: transparent !important;
  --wpforms-container-padding: 0 !important;
}
div.wpforms-container-full .wpforms-form input[type="text"],
div.wpforms-container-full .wpforms-form input[type="email"],
div.wpforms-container-full .wpforms-form input[type="tel"],
div.wpforms-container-full .wpforms-form input[type="url"],
div.wpforms-container-full .wpforms-form input[type="number"],
div.wpforms-container-full .wpforms-form textarea,
div.wpforms-container-full .wpforms-form select {
  background-color: var(--surface) !important;
  border-color: var(--border2) !important;
  color: var(--white) !important;
  border-radius: var(--r-sm);
}
div.wpforms-container-full .wpforms-form input:focus,
div.wpforms-container-full .wpforms-form textarea:focus,
div.wpforms-container-full .wpforms-form select:focus {
  border-color: var(--blue) !important;
}
div.wpforms-container-full .wpforms-form .wpforms-field-label {
  color: var(--text) !important;
}
div.wpforms-container-full .wpforms-form .wpforms-field-sublabel {
  color: var(--muted) !important;
}
div.wpforms-container-full .wpforms-form button[type="submit"],
div.wpforms-container-full .wpforms-form .wpforms-submit {
  background-color: var(--blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font);
  font-weight: 700;
  padding: 12px 28px !important;
  transition: background-color 0.2s;
}
div.wpforms-container-full .wpforms-form button[type="submit"]:hover {
  background-color: var(--blue-dark) !important;
}

/* ====== WP ELEMENT BUTTON ====== */
/* WordPress core .wp-element-button defaults to dark gray — override for dark theme */
.wp-element-button,
.wp-block-button__link {
  background: var(--blue) !important;
  color: #fff !important;
  border: none;
  border-radius: var(--r-sm);
  font-family: var(--font);
  font-weight: 700;
  transition: background 0.2s;
}
.wp-element-button:hover,
.wp-block-button__link:hover {
  background: var(--blue-dark) !important;
  color: #fff !important;
}

/* ====== WP ADMIN BAR OFFSET ====== */
body.admin-bar header {
  top: 32px;
}
body.admin-bar .elementor-location-header {
  top: 32px;
}
@media (max-width: 782px) {
  body.admin-bar header {
    top: 46px;
  }
  body.admin-bar .elementor-location-header {
    top: 46px;
  }
}

/* ====== RESPONSIVE MEDIA ====== */
img { max-width: 100%; height: auto; }
iframe, video, embed, object { max-width: 100%; }

/* Prevent horizontal overflow on tables in narrow viewports */
.woocommerce table.shop_table,
.woocommerce-order-received table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ====== HAMBURGER MENU ====== */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  z-index: 1001;
  -webkit-tap-highlight-color: transparent;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.hamburger.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.is-active span:nth-child(2) {
  opacity: 0;
}
.hamburger.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ====== RESPONSIVE - Shared Components ====== */

/* -- Tablet (≤1100px) -- */
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* -- Mobile Nav & Header (≤900px) -- */
@media (max-width: 900px) {
  .hamburger { display: flex; }

  nav {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(6,7,13,0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transform: translateX(100%);
    transition: transform 0.35s ease;
    overflow-y: auto;
    padding: 80px 24px 40px;
  }
  nav.nav-open {
    transform: translateX(0);
  }
  nav a {
    font-size: 20px;
    padding: 14px 28px;
    width: 100%;
    max-width: 320px;
    text-align: center;
    border-radius: var(--r-sm);
  }
  nav a:hover,
  nav a.active {
    background: rgba(59,91,219,0.12);
  }

  header { padding: 0 16px; height: 64px; gap: 12px; }
  header .custom-logo-link .custom-logo {
    height: 36px;
    max-height: 36px;
    max-width: 200px;
  }

  .btn-shop-desktop { display: none; }

  .topbar { font-size: 11px; gap: 12px; padding: 8px 16px; }

  footer { padding: 56px 24px 36px; }
}

/* -- Small Mobile (≤600px) -- */
@media (max-width: 600px) {
  /* Topbar: hide separators, allow wrapping */
  .topbar {
    font-size: 10px;
    gap: 6px 14px;
    padding: 7px 12px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .topbar-sep { display: none; }

  /* Header */
  header { padding: 0 12px; height: 58px; gap: 8px; }
  header .custom-logo-link .custom-logo {
    height: 30px;
    max-height: 30px;
    max-width: 160px;
  }
  .btn-cart { width: 38px; height: 38px; }

  /* Footer: single column */
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  footer { padding: 40px 16px 28px; }
  .footer-tagline { max-width: 100%; }
  .footer-bottom {
    flex-direction: column;
    gap: 14px;
    text-align: center;
  }
  .footer-legal { justify-content: center; flex-wrap: wrap; gap: 12px; }
  .footer-copy { font-size: 11px; }

  /* WooCommerce: stack product gallery + summary */
  .woocommerce div.product div.images,
  .woocommerce div.product .summary {
    float: none;
    width: 100%;
  }
  .woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex;
    flex-wrap: wrap;
  }
  .woocommerce div.product .woocommerce-tabs ul.tabs li a {
    padding: 10px 14px;
    font-size: 13px;
  }
}

/* -- Extra Small Mobile (≤400px) -- */
@media (max-width: 400px) {
  .topbar { font-size: 9px; gap: 4px 10px; }
  header { padding: 0 10px; height: 54px; }
  header .custom-logo-link .custom-logo {
    height: 26px;
    max-height: 26px;
    max-width: 140px;
  }
  .btn-cart { width: 34px; height: 34px; }
  .cart-badge { width: 15px; height: 15px; font-size: 8px; }
}