/*
 * Autolight Offers - frontend styling.
 *
 * Uses the same --ao-* custom property names as the admin stylesheet
 * (admin/css/admin.css) so both can be retuned together later without
 * hunting through markup - though they are defined separately here
 * since admin.css only loads in wp-admin and this file only loads on
 * the frontend.
 *
 * Colors default to the Autolight 2.0 look (near-black panels, yellow
 * accent). If a different theme is active, these still render as a
 * clean, neutral dark card rather than looking broken - see
 * AO_Theme_Detection for how styling stays theme-independent
 * functionally, with only this visual layer being theme-conditional.
 */

.ao-offer-boxes,
.ao-preview-panel {
	--ao-bg: #0e0e0f;
	--ao-surface: #121212;
	--ao-surface-alt: #1b1b1b;
	--ao-yellow: #f5c400;
	--ao-yellow-strong: #ffd84a;
	--ao-text: #f2f2f2;
	--ao-muted: #c9c9c9;
	--ao-border: #2a2a2a;
}

.ao-offer-boxes {
	margin: 1.25em 0;
	display: flex;
	flex-direction: column;
	gap: 0.75em;
}

.ao-offer-box {
	position: relative;
	border: 1px solid var(--ao-border);
	background: var(--ao-surface);
	border-radius: 6px;
	padding: 1em 1.25em;
	color: var(--ao-text);
}

body:not(.theme-autolight-theme) .ao-offer-box {
	background: var(--ao-surface-alt);
	border-color: #3a3a3a;
}

.ao-offer-badge {
	display: inline-block;
	background: var(--ao-yellow);
	color: #111;
	font-weight: 700;
	font-size: 0.72em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.2em 0.6em;
	border-radius: 3px;
	margin-bottom: 0.5em;
}

.ao-offer-title {
	margin: 0 0 0.4em;
	font-size: 1.05em;
	color: #ffffff;
}

.ao-offer-message {
	margin: 0 0 0.6em;
	font-size: 0.88em;
	color: var(--ao-muted);
}

.ao-tier-list {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
}

.ao-tier-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.45em 0.6em;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid transparent;
	font-size: 0.92em;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.ao-tier-row.ao-tier-active {
	background: rgba(245, 196, 0, 0.12);
	border-color: var(--ao-yellow);
}

.ao-tier-range {
	color: var(--ao-muted);
}

.ao-tier-price {
	font-weight: 700;
	color: var(--ao-yellow);
}

.ao-tier-row.ao-tier-active .ao-tier-price {
	color: var(--ao-yellow-strong);
}

/* Cart discount line (the fee row itself is WooCommerce markup; this
 * only nudges its color to match, and is safe to leave unstyled on a
 * non-Autolight theme since it targets WooCommerce's own fee class). */
.woocommerce-cart-form .fee,
.cart_totals .fee {
	color: var(--ao-yellow, #f5c400);
}

@media (max-width: 480px) {
	.ao-offer-box {
		padding: 0.85em 1em;
	}
	.ao-tier-row {
		font-size: 0.85em;
	}
}