/*
Theme Name: MasterTopup
Theme URI: https://mastertopup.shop
Description: Dark, high-contrast storefront for selling digital subscriptions and AI tool access. Child theme of Twenty Twenty-Five.
Author: MasterTopup
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
Template: twentytwentyfive
License: GNU General Public License v2 or later
Text Domain: mastertopup
Tags: e-commerce, dark, one-column, block-patterns, full-site-editing
*/

/* ---------------------------------------------------------------------------
   Everything that theme.json cannot express: component polish, WooCommerce
   template overrides, and the floating support button.
   Colour and type come from theme.json — do not hard-code hex values here,
   use the var(--wp--preset--color--*) tokens so the palette stays single-source.
--------------------------------------------------------------------------- */

:root {
	--mt-radius: 14px;
	--mt-radius-lg: 22px;
	--mt-border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	--mt-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px -12px rgb(0 0 0 / 0.6);
	--mt-glow: 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--primary) 45%, transparent),
	           0 18px 48px -18px color-mix(in srgb, var(--wp--preset--color--primary) 70%, transparent);
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* A faint aurora behind the page, so the flat black does not read as unstyled. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(60rem 36rem at 12% -8%, color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent), transparent 70%),
		radial-gradient(48rem 30rem at 92% 4%, color-mix(in srgb, var(--wp--preset--color--accent) 14%, transparent), transparent 72%);
}

/* ---- links & focus ---- */
a { text-underline-offset: 0.2em; }

:where(a, button, input, select, textarea, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 6px;
}

/* ---- buttons ---- */
.wp-block-button__link,
.wc-block-components-button,
button.button,
a.button,
input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: -0.01em;
	padding: 0.85em 1.6em;
	line-height: 1.1;
	transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border: 0;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: var(--mt-glow);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* ---- surface card, reused by patterns via the "mt-card" class ---- */
.mt-card {
	background: var(--wp--preset--color--surface);
	border: var(--mt-border);
	border-radius: var(--mt-radius-lg);
	box-shadow: var(--mt-shadow);
	height: 100%;
}

.mt-card--hover { transition: transform 0.18s ease, border-color 0.18s ease; }
.mt-card--hover:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) 50%, transparent);
}

/* Small uppercase eyebrow label above headings. */
.mt-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.72rem;
	font-weight: 800;
	color: var(--wp--preset--color--accent);
}

/* Pill badge, e.g. "Instant delivery". */
.mt-pill {
	display: inline-block;
	padding: 0.35em 0.85em;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
	border: var(--mt-border);
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);
}

/* ---------------------------------------------------------------------------
   WooCommerce
--------------------------------------------------------------------------- */

.woocommerce ul.products li.product,
.wc-block-grid__product {
	background: var(--wp--preset--color--surface);
	border: var(--mt-border);
	border-radius: var(--mt-radius-lg);
	padding: 1rem 1rem 1.25rem;
	box-shadow: var(--mt-shadow);
	transition: transform 0.18s ease, border-color 0.18s ease;
	text-align: left;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) 50%, transparent);
}

.woocommerce ul.products li.product a img {
	border-radius: var(--mt-radius);
	margin-bottom: 0.9rem;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 5%, transparent);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.02rem !important;
	font-weight: 700;
	letter-spacing: -0.015em;
	padding: 0 0 0.35rem !important;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
	color: var(--wp--preset--color--contrast);
	font-weight: 800;
	font-size: 1.1rem;
}

.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
	opacity: 0.45;
	font-weight: 500;
	margin-inline-end: 0.4em;
}

.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins {
	text-decoration: none;
	color: var(--wp--preset--color--accent);
}

.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	background: var(--wp--preset--color--accent);
	color: #06131a;
	border-radius: 999px;
	font-weight: 800;
	padding: 0.35em 0.8em;
	min-height: 0;
	min-width: 0;
	line-height: 1.2;
	top: 1.4rem;
	right: 1.4rem;
	left: auto;
	margin: 0;
}

/* Product page */
.woocommerce div.product .product_title {
	letter-spacing: -0.03em;
	font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin-bottom: 1.5rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-color: color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0 1.25rem 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: 0.6rem 0;
	font-weight: 700;
	opacity: 0.6;
	border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	opacity: 1;
	border-bottom-color: var(--wp--preset--color--primary);
}

/* Quantity, inputs, selects */
.woocommerce .quantity .qty,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page input[type="text"],
.woocommerce-page input[type="email"],
.woocommerce-page input[type="tel"],
.woocommerce-page input[type="password"],
.woocommerce-page textarea,
.woocommerce-page select {
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 5%, transparent);
	border: var(--mt-border);
	border-radius: 10px;
	color: var(--wp--preset--color--contrast);
	padding: 0.7em 0.9em;
}

.woocommerce form .form-row label { font-weight: 600; margin-bottom: 0.35rem; }

/* Cart / checkout panels */
.woocommerce table.shop_table,
.woocommerce-checkout #order_review,
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce ul.order_details {
	background: var(--wp--preset--color--surface);
	border: var(--mt-border);
	border-radius: var(--mt-radius-lg);
	border-collapse: separate;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td { border-color: color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent); }

.woocommerce-info,
.woocommerce-message { padding: 1rem 1.25rem; border-top-color: var(--wp--preset--color--primary); }
.woocommerce-info::before,
.woocommerce-message::before { color: var(--wp--preset--color--accent); }
.woocommerce-error { border-top-color: #ff6b6b; }

.woocommerce ul.order_details { padding: 1.25rem 1.5rem; }
.woocommerce ul.order_details li { border-color: color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent); }

/* Payment method list */
.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
	border: 0;
	padding: 0;
}
.woocommerce-checkout #payment ul.payment_methods li {
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 4%, transparent);
	border: var(--mt-border);
	border-radius: var(--mt-radius);
	padding: 0.9rem 1.1rem;
	margin-bottom: 0.7rem;
	list-style: none;
}
.woocommerce-checkout #payment div.payment_box {
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);
	border-radius: var(--mt-radius);
	color: var(--wp--preset--color--contrast);
	margin-top: 0.8rem;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }

/* ---- the manual wallet gateway's checkout fields ---- */
.mtw-fields .mtw-amount { margin: 0 0 0.9rem; }
.mtw-wallet-list {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}
.mtw-wallet-list li {
	border: var(--mt-border);
	border-radius: 10px;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 4%, transparent);
}
.mtw-wallet-list label {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem 0.9rem;
	cursor: pointer;
	margin: 0;
}
.mtw-wallet-list .mtw-wallet-name { font-weight: 700; }
.mtw-wallet-list .mtw-wallet-number {
	font-family: var(--wp--preset--font-family--mono, monospace);
	letter-spacing: 0.04em;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent);
	color: var(--wp--preset--color--contrast);
	padding: 0.15em 0.5em;
	border-radius: 6px;
	user-select: all;
}
.mtw-wallet-list em { opacity: 0.6; font-size: 0.85rem; }
.mtw-admin-claim { clear: both; }

/* ---- My account ---- */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.3rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.6rem 0.9rem;
	border-radius: 10px;
	text-decoration: none;
	font-weight: 600;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent);
}

/* ---------------------------------------------------------------------------
   Floating support button
--------------------------------------------------------------------------- */
.mt-support-fab {
	position: fixed;
	inset-block-end: 1.1rem;
	inset-inline-end: 1.1rem;
	z-index: 99;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.15rem;
	border-radius: 999px;
	font-weight: 800;
	font-size: 0.92rem;
	text-decoration: none;
	color: #04140c;
	background: #25D366;
	box-shadow: 0 10px 30px -10px rgb(37 211 102 / 0.8);
	transition: transform 0.15s ease;
}
.mt-support-fab:hover { transform: translateY(-2px); color: #04140c; }
.mt-support-fab svg { width: 1.15em; height: 1.15em; fill: currentColor; }

@media (max-width: 480px) {
	.mt-support-fab span { display: none; }
	.mt-support-fab { padding: 0.9rem; }
}

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