/*
 * AXIS — Astra parent overrides.
 *
 * Astra ships with a light/marketing-oriented stylesheet. This file uses the
 * `body.axis-theme` selector (specificity 0,0,1,1) to win against Astra's
 * `.ast-separate-container` and similar `.class` rules (0,0,1,0) without
 * resorting to !important everywhere.
 *
 * Loaded LAST in the chain, after layout.css and the child manifest style.css.
 */

/* ---- Remap Astra's color variables to our palette ----
   Astra ships with --ast-global-color-0 = #046bd2 (blue) used for buttons,
   links, focus rings, and the scroll-to-top widget. Overriding the variable
   itself is the most robust fix — any current OR future Astra UI that pulls
   from these vars automatically uses our teal palette without us having to
   discover and patch each element. */
body.axis-theme {
	--ast-global-color-0: var(--accent);            /* primary brand color */
	--ast-global-color-1: var(--accent-light);      /* primary hover */
	--ast-global-color-2: var(--text);              /* heading color */
	--ast-global-color-3: var(--text-dim);          /* body text */
	--ast-global-color-4: var(--bg);                /* light bg → our dark */
	--ast-global-color-5: var(--bg-card);           /* alt bg */
	--ast-global-color-6: var(--bg-elevated);       /* dark bg */
	--ast-global-color-7: var(--border);            /* subtle border */
	--ast-global-color-8: var(--bg-elevated);
}

/* ---- Body / page background ---- */
html,
body.axis-theme {
	background: var(--bg);
	background-color: var(--bg);
	color: var(--text);
}

/* ---- Astra scroll-to-top widget ----
   Defensive override on top of the variable remap above. Inline style on the
   element uses background-color directly which can sometimes outweigh the
   variable indirection. !important seals it. */
body.axis-theme #ast-scroll-top,
body.axis-theme div#ast-scroll-top.ast-scroll-top-icon {
	background: var(--accent) !important;
	background-color: var(--accent) !important;
	color: var(--bg) !important;
	border: none !important;
	box-shadow: 0 4px 16px rgba(0, 212, 170, 0.25) !important;
	transition: background 0.2s ease, transform 0.2s ease !important;
}
body.axis-theme #ast-scroll-top:hover,
body.axis-theme div#ast-scroll-top.ast-scroll-top-icon:hover {
	background: var(--accent-light) !important;
	background-color: var(--accent-light) !important;
	transform: translateY(-2px);
}
body.axis-theme #ast-scroll-top svg,
body.axis-theme #ast-scroll-top .ast-arrow-svg {
	fill: var(--bg) !important;
}

/* ---- Astra container wrappers — make transparent + full-width ---- */
body.axis-theme #page,
body.axis-theme .hfeed.site,
body.axis-theme .site-content,
body.axis-theme #content,
body.axis-theme .ast-container,
body.axis-theme .site-primary,
body.axis-theme .site-content > .ast-container {
	background: transparent;
	background-color: transparent;
	max-width: none;
	padding: 0;
	margin: 0;
}

/* ---- Astra typography overrides ---- */
body.axis-theme,
body.axis-theme button,
body.axis-theme input,
body.axis-theme select,
body.axis-theme textarea {
	font-family: var(--font-body);
	color: var(--text);
}

body.axis-theme h1,
body.axis-theme h2,
body.axis-theme h3,
body.axis-theme h4,
body.axis-theme h5,
body.axis-theme h6 {
	font-family: var(--font-display);
	color: var(--text);
}

/* ---- Astra wraps main content in #primary which has its own bg + max-width ---- */
body.axis-theme #primary {
	background: transparent;
	background-color: transparent;
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* ---- Make sure links inherit from our palette ---- */
body.axis-theme a {
	color: inherit;
}

/* ---- Astra hides things via display:none on mobile we don't want hidden ---- */
body.axis-theme .axis-header,
body.axis-theme .axis-footer {
	display: block;
}

/* =========================================================================
   GLOBAL FORM HARDENING — the "white-killer" baseline.
   Forces dark theme on every form input, textarea, select, button, and
   notice across the site so we don't have to chase per-page Astra leaks.
   Applies to: checkout, my-account/edit-address, my-account/edit-account,
   lost-password, newsletter, search, coupon, comment, and any future form.
   ========================================================================= */

/* ---------- Inputs (every type Astra styles) ---------- */
body.axis-theme input[type="text"],
body.axis-theme input[type="email"],
body.axis-theme input[type="url"],
body.axis-theme input[type="password"],
body.axis-theme input[type="search"],
body.axis-theme input[type="tel"],
body.axis-theme input[type="number"],
body.axis-theme input[type="date"],
body.axis-theme input[type="datetime-local"],
body.axis-theme input[type="month"],
body.axis-theme input[type="week"],
body.axis-theme input[type="time"],
body.axis-theme textarea,
body.axis-theme select,
body.axis-theme .woocommerce-input-wrapper input,
body.axis-theme .woocommerce form .form-row input.input-text,
body.axis-theme .woocommerce form .form-row textarea,
body.axis-theme .woocommerce form .form-row select {
	background: var(--bg-card) !important;
	background-color: var(--bg-card) !important;
	border: 1px solid var(--border) !important;
	color: var(--text) !important;
	font-family: var(--font-body) !important;
	font-size: 0.9375rem !important;
	padding: 12px 14px !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	height: auto !important;
	min-height: 44px;
	line-height: 1.4 !important;
}

body.axis-theme textarea {
	min-height: 96px;
	resize: vertical;
}

body.axis-theme input::placeholder,
body.axis-theme textarea::placeholder {
	color: var(--text-muted) !important;
	opacity: 1;
}

body.axis-theme input:focus,
body.axis-theme textarea:focus,
body.axis-theme select:focus {
	border-color: var(--accent) !important;
	outline: none !important;
}

/* Chrome / Safari autofill — kills the yellow-flash and forces our colors.
   The `transition: 600000s` trick stalls Chrome's autofill animation effectively
   forever so the browser-native autofill background never has time to apply. */
body.axis-theme input:-webkit-autofill,
body.axis-theme input:-webkit-autofill:hover,
body.axis-theme input:-webkit-autofill:focus,
body.axis-theme input:-webkit-autofill:active,
body.axis-theme input:-internal-autofill-selected,
body.axis-theme input:-internal-autofill-previewed,
body.axis-theme textarea:-webkit-autofill,
body.axis-theme select:-webkit-autofill {
	-webkit-text-fill-color: var(--text) !important;
	-webkit-box-shadow: 0 0 0 1000px var(--bg-card) inset !important;
	box-shadow: 0 0 0 1000px var(--bg-card) inset !important;
	background-color: var(--bg-card) !important;
	background-image: none !important;
	background-clip: content-box !important;
	caret-color: var(--text) !important;
	-webkit-text-size-adjust: 100% !important;
	transition: background-color 600000s ease-in-out 0s, color 600000s ease-in-out 0s !important;
}

/* ---------- Select2 (WC uses this for country/state dropdowns) ---------- */
body.axis-theme .select2-container--default .select2-selection--single,
body.axis-theme .select2-container--default .select2-selection--multiple {
	background: var(--bg-card) !important;
	border: 1px solid var(--border) !important;
	color: var(--text) !important;
	min-height: 44px !important;
	border-radius: 0 !important;
}
body.axis-theme .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--text) !important;
	line-height: 44px !important;
	padding: 0 14px !important;
}
body.axis-theme .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 44px !important;
}
body.axis-theme .select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: var(--text-dim) transparent transparent transparent !important;
}
body.axis-theme .select2-dropdown {
	background: var(--bg-elevated) !important;
	border: 1px solid var(--border-hover) !important;
	color: var(--text) !important;
	border-radius: 0 !important;
}
body.axis-theme .select2-results__option {
	color: var(--text) !important;
	padding: 10px 14px !important;
}
body.axis-theme .select2-results__option--highlighted,
body.axis-theme .select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--accent) !important;
	color: var(--bg) !important;
}
body.axis-theme .select2-search--dropdown .select2-search__field {
	background: var(--bg-card) !important;
	border: 1px solid var(--border-hover) !important;
	color: var(--text) !important;
	padding: 8px !important;
}

/* ---------- Buttons — kill Astra's blue (--ast-global-color-0) ----------
   Astra applies blue to .button, button.alt, input[type=submit], etc.
   We force teal on every "primary" button selector WC and Astra emit. */
body.axis-theme .woocommerce a.button,
body.axis-theme .woocommerce a.button.alt,
body.axis-theme .woocommerce button.button,
body.axis-theme .woocommerce button.button.alt,
body.axis-theme .woocommerce input.button,
body.axis-theme .woocommerce input.button.alt,
body.axis-theme .woocommerce #respond input#submit,
body.axis-theme .woocommerce #respond input#submit.alt,
body.axis-theme .woocommerce-page a.button,
body.axis-theme .woocommerce-page button.button,
body.axis-theme .woocommerce-page input.button,
body.axis-theme #place_order,
body.axis-theme .woocommerce-form-login__submit,
body.axis-theme .woocommerce-form-register__submit,
body.axis-theme .woocommerce-Button,
body.axis-theme button[name="login"],
body.axis-theme button[name="register"],
body.axis-theme button[name="save_account_details"],
body.axis-theme button[name="save_address"],
body.axis-theme button[name="apply_coupon"],
body.axis-theme button[name="update_cart"],
body.axis-theme button[name="wc_reset_password"],
body.axis-theme input[name="wc_reset_password"],
body.axis-theme .lost_reset_password button[type="submit"],
body.axis-theme button.single_add_to_cart_button,
body.axis-theme .single_add_to_cart_button,
body.axis-theme button.single_add_to_cart_button.button.alt,
body.axis-theme form.cart button.button,
body.axis-theme form.cart button.alt,
body.axis-theme .add_to_cart_button {
	background: var(--accent) !important;
	background-color: var(--accent) !important;
	color: var(--bg) !important;
	border: 1px solid var(--accent) !important;
	border-radius: 0 !important;
	padding: 14px 28px !important;
	font-family: var(--font-body) !important;
	font-weight: 600 !important;
	font-size: 0.875rem !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	transition: background 0.2s ease !important;
	height: auto !important;
	line-height: 1.4 !important;
	box-shadow: none !important;
}

body.axis-theme .woocommerce a.button:hover,
body.axis-theme .woocommerce button.button:hover,
body.axis-theme .woocommerce input.button:hover,
body.axis-theme #place_order:hover,
body.axis-theme button[name="login"]:hover,
body.axis-theme button[name="register"]:hover,
body.axis-theme button[name="save_account_details"]:hover,
body.axis-theme button[name="save_address"]:hover,
body.axis-theme button[name="update_cart"]:hover,
body.axis-theme button[name="apply_coupon"]:hover,
body.axis-theme button.single_add_to_cart_button:hover,
body.axis-theme .single_add_to_cart_button:hover,
body.axis-theme form.cart button.button:hover,
body.axis-theme .add_to_cart_button:hover {
	background: var(--accent-light) !important;
	background-color: var(--accent-light) !important;
	color: var(--bg) !important;
	border-color: var(--accent-light) !important;
}

/* ---------- Checkboxes + radios ---------- */
body.axis-theme input[type="checkbox"],
body.axis-theme input[type="radio"] {
	accent-color: var(--accent);
	width: 18px;
	height: 18px;
	cursor: pointer;
	background: var(--bg-card);
	border: 1px solid var(--border-hover);
}

/* ---------- WC notices — defensive baseline applied everywhere ---------- */
body.axis-theme .woocommerce-notices-wrapper .woocommerce-message,
body.axis-theme .woocommerce-notices-wrapper .woocommerce-info,
body.axis-theme .woocommerce-notices-wrapper .woocommerce-error,
body.axis-theme .woocommerce-message,
body.axis-theme .woocommerce-info,
body.axis-theme .woocommerce-error,
body.axis-theme ul.woocommerce-error,
body.axis-theme ul.woocommerce-info,
body.axis-theme ul.woocommerce-message,
body.axis-theme .wc-block-components-notice-banner {
	background: var(--bg-card) !important;
	border: 1px solid var(--border) !important;
	border-left: 3px solid var(--accent) !important;
	color: var(--text) !important;
	padding: 14px 18px !important;
	margin: 0 0 24px !important;
	font-size: 0.875rem !important;
	list-style: none !important;
	box-shadow: none !important;
}
body.axis-theme .woocommerce-error,
body.axis-theme ul.woocommerce-error {
	border-left-color: #ff6b6b !important;
}
body.axis-theme .woocommerce-message::before,
body.axis-theme .woocommerce-info::before,
body.axis-theme .woocommerce-error::before,
body.axis-theme .woocommerce-message > li::before,
body.axis-theme .woocommerce-info > li::before,
body.axis-theme .woocommerce-error > li::before {
	display: none !important;
	content: none !important;
}
body.axis-theme .woocommerce-error a,
body.axis-theme .woocommerce-message a,
body.axis-theme .woocommerce-info a {
	color: var(--accent) !important;
	text-decoration: underline;
}
body.axis-theme .woocommerce-error li,
body.axis-theme .woocommerce-message li,
body.axis-theme .woocommerce-info li {
	margin: 0;
	padding: 0;
}

/* ---------- Form labels — make sure they're not invisible ---------- */
body.axis-theme .woocommerce form .form-row label,
body.axis-theme form label {
	color: var(--text-dim) !important;
}
body.axis-theme .woocommerce form .form-row .required {
	color: var(--accent) !important;
	border: none !important;
	text-decoration: none !important;
}

/* ---------- Required field indicator ---------- */
body.axis-theme .required {
	color: var(--accent) !important;
}

/* ---------- Newsletter form ---------- */
body.axis-theme .axis-newsletter-form,
body.axis-theme .axis-newsletter-form input,
body.axis-theme .axis-newsletter-form button {
	border-radius: 0 !important;
}
body.axis-theme .axis-newsletter-form input[type="email"] {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	min-height: 0 !important;
}
body.axis-theme .axis-newsletter-form button {
	background: var(--accent) !important;
	color: var(--bg) !important;
	border: none !important;
	padding: 16px 28px !important;
	font-weight: 600 !important;
}

/* ---------- WC quantity buttons (for cart / single product) ---------- */
body.axis-theme .woocommerce .quantity input.minus,
body.axis-theme .woocommerce .quantity input.plus,
body.axis-theme .woocommerce .quantity button.minus,
body.axis-theme .woocommerce .quantity button.plus {
	background: var(--bg-elevated) !important;
	color: var(--text) !important;
	border: 1px solid var(--border-hover) !important;
}
body.axis-theme .woocommerce .quantity input.minus:hover,
body.axis-theme .woocommerce .quantity input.plus:hover,
body.axis-theme .woocommerce .quantity button.minus:hover,
body.axis-theme .woocommerce .quantity button.plus:hover {
	background: var(--accent) !important;
	color: var(--bg) !important;
	border-color: var(--accent) !important;
}