/**
 * WooCommerce Age Restriction Manager — Storefront styles
 *
 * Colors and text size are exposed as CSS custom properties (with safe
 * fallbacks below) so admin-configured values from the settings page can
 * override them via a small inline <style> block, without touching this file.
 *
 * @package WAARM
 * @since   1.0.0
 */

/* ---------------------------------------------------------------------
 * Listing / archive badge
 * ------------------------------------------------------------------- */
.waarm-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 6px 0;
	padding: 3px 8px;
	font-size: calc( 0.75em * var( --waarm-font-scale, 1 ) );
	font-weight: 600;
	line-height: 1.4;
	color: var( --waarm-badge-text-color, #7a1f1f );
	background-color: var( --waarm-badge-bg-color, #fdeaea );
	border: 1px solid #f0b8b8;
	border-radius: 3px;
	white-space: nowrap;
}

.waarm-badge__icon {
	font-weight: 700;
}

/* ---------------------------------------------------------------------
 * Product page warning message
 * ------------------------------------------------------------------- */
.waarm-product-warning {
	margin-top: 12px;
	padding: 10px 14px;
	font-size: calc( 0.9em * var( --waarm-font-scale, 1 ) );
	color: var( --waarm-warning-text-color, #7a1f1f );
	background-color: var( --waarm-warning-bg-color, #fdeaea );
	border-left: 4px solid var( --waarm-warning-border-color, #c0392b );
}

.waarm-product-warning p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------
 * Cart / checkout notice text (the notice box itself keeps the theme's
 * native WooCommerce notice styling; only the message text color follows
 * the configured warning color).
 * ------------------------------------------------------------------- */
.waarm-notice-text {
	color: var( --waarm-warning-text-color, #7a1f1f );
	font-weight: 600;
}

/* Notice injected directly above the block-based Cart/Checkout blocks. */
.waarm-block-notice.woocommerce-info {
	margin: 0 0 1em;
}

/* ---------------------------------------------------------------------
 * Age verification modal
 * ------------------------------------------------------------------- */
.waarm-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background-color: rgba( 20, 20, 20, 0.92 );
	backdrop-filter: blur( 6px );
}

.waarm-modal-overlay[hidden] {
	display: none;
}

.waarm-modal {
	box-sizing: border-box;
	width: 100%;
	max-width: 480px;
	max-height: 90vh;
	overflow-y: auto;
	padding: 28px 24px;
	background-color: #fff;
	border-top: 4px solid var( --waarm-modal-accent-color, #c0392b );
	border-radius: 6px;
	box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.35 );
	text-align: center;
}

.waarm-modal__title {
	margin-top: 0;
	margin-bottom: 12px;
	font-size: calc( 1.3em * var( --waarm-font-scale, 1 ) );
}

.waarm-modal__message {
	margin-bottom: 12px;
	font-size: calc( 0.95em * var( --waarm-font-scale, 1 ) );
	line-height: 1.5;
	color: #333;
}

.waarm-modal__message p:last-child {
	margin-bottom: 0;
}

.waarm-modal__age {
	margin-bottom: 20px;
	font-weight: 600;
	color: var( --waarm-modal-accent-color, #c0392b );
}

.waarm-modal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.waarm-modal__confirm,
.waarm-modal__exit {
	flex: 1 1 auto;
	min-width: 140px;
	padding: 10px 18px;
	cursor: pointer;
}

.waarm-modal__confirm:focus,
.waarm-modal__exit:focus,
.waarm-modal button:focus-visible {
	outline: 3px solid #2271b1;
	outline-offset: 2px;
}

/* Prevent scrolling/interaction with the page behind the modal. */
body.waarm-modal-open {
	overflow: hidden;
}

/*
 * Restricted product pages are obscured by default - server-rendered, so
 * this applies before any script runs and stays in effect if a visitor has
 * JavaScript disabled or blocked. JS removes the "blocked" state (by adding
 * .waarm-age-verified) once the visitor confirms, or immediately if their
 * confirmation cookie is already present.
 */
body.waarm-age-restricted:not( .waarm-age-verified ) #page,
body.waarm-age-restricted:not( .waarm-age-verified ) .site,
body.waarm-age-restricted:not( .waarm-age-verified ) #content,
body.waarm-age-restricted:not( .waarm-age-verified ) main {
	filter: blur( 4px );
	pointer-events: none;
	user-select: none;
}

.waarm-noscript-notice {
	max-width: 480px;
	margin: 40px auto;
	padding: 16px 20px;
	text-align: center;
	background-color: #fff;
	border: 1px solid #f0b8b8;
	border-radius: 6px;
}

@media ( max-width: 480px ) {
	.waarm-modal {
		padding: 20px 16px;
	}

	.waarm-modal__actions {
		flex-direction: column;
	}
}