/**
 * Storefront Age Verify — public styles.
 */

.sav-verify {
	max-width: 640px;
	margin: 1.5em auto;
}

.sav-verify__reasons,
.sav-account__reasons,
.sav-account__docs,
.sav-verify__docs ul {
	padding-left: 1.2em;
}

.sav-verify__reasons li,
.sav-account__reasons li {
	margin-bottom: .5em;
	line-height: 1.45;
}

.sav-verify__cta,
.sav-account__cta {
	margin-top: 1.25em;
}

.sav-verify__start {
	font-size: 1.05em;
}

.sav-verify__docs {
	margin-top: 1.5em;
	border-top: 1px solid #e5e5e5;
	padding-top: 1em;
}

.sav-verify__docs summary {
	cursor: pointer;
	font-weight: 600;
}

.sav-verify__tip {
	font-style: italic;
	opacity: .8;
}

/* Status badge */
.sav-badge {
	display: inline-block;
	padding: .25em .75em;
	border-radius: 999px;
	font-size: .9em;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
}

.sav-badge--ok {
	background: #2e7d32;
}

.sav-badge--legacy {
	background: #b8860b;
}

.sav-badge--grandfather {
	background: #1565c0;
}

.sav-badge--no {
	background: #c62828;
}

.sav-account__meta {
	opacity: .85;
}

/* Locked checkout / address name fields */
.sav-locked-field input[type="text"],
.woocommerce form .form-row .sav-locked-field input.input-text,
input.sav-locked-input {
	background-color: #f3f3f3;
	cursor: not-allowed;
}

.sav-account-lock-note {
	margin-top: -.25em;
	font-size: .85em;
	opacity: .8;
}

.sav-account-lock-note em {
	font-style: italic;
}

.sav-reward-offer {
	margin-top: .75em;
	padding: .6em .8em;
	background: #fff8e1;
	border: 1px solid #ffe2a8;
	border-radius: 6px;
}

.sav-locked-field .description,
.sav-locked-field small {
	display: block;
	margin-top: .25em;
	font-size: .85em;
	opacity: .8;
}

/* Login modal */
.sav-modal-overlay {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .55);
	z-index: 100000;
	padding: 1em;
}

/* The attribute selector beats the rule above so [hidden] overlays stay hidden. */
.sav-modal-overlay[hidden] {
	display: none;
}

.sav-modal {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
	width: 100%;
	max-width: 400px;
	padding: 1.75em;
	max-height: 90vh;
	overflow: auto;
}

.sav-modal__title {
	margin-top: 0;
}

.sav-modal--center {
	text-align: center;
}

.sav-modal--center .sav-spinner {
	display: block;
	margin: 0 auto .9em;
}

.sav-modal__intro {
	opacity: .85;
	margin-bottom: 1.25em;
}

.sav-modal form p {
	margin-bottom: .9em;
}

.sav-modal input[type="text"],
.sav-modal input[type="password"] {
	width: 100%;
}

.sav-modal .button,
.sav-modal input[type="submit"] {
	width: 100%;
}

/* In the modal the CTA buttons are full-width and stack vertically (e.g. the
   grace modal's "Verify now" / "Verify later") — space them apart. */
.sav-modal .sav-verify__cta .button + .button {
	margin-top: .6em;
}

.sav-modal__links {
	margin-top: 1.25em;
	font-size: .9em;
	text-align: center;
}

.sav-modal__links span {
	margin: 0 .4em;
	opacity: .5;
}

/* Waiting / polling state */
.sav-verify__waiting {
	margin-top: 1.25em;
	padding: 1em;
	border: 1px solid #e5e5e5;
	border-radius: 6px;
	text-align: center;
}

.sav-spinner {
	display: inline-block;
	width: 26px;
	height: 26px;
	border: 3px solid rgba(0, 0, 0, .15);
	border-top-color: rgba(0, 0, 0, .55);
	border-radius: 50%;
	animation: sav-spin 0.8s linear infinite;
}

@keyframes sav-spin {
	to { transform: rotate(360deg); }
}

/* Info modal close button */
.sav-modal {
	position: relative;
}

.sav-modal__close {
	position: absolute;
	top: .5em;
	right: .6em;
	background: none;
	border: 0;
	font-size: 1.6em;
	line-height: 1;
	cursor: pointer;
	color: #777;
	padding: .1em .25em;
}

.sav-modal__close:hover {
	color: #111;
}

.sav-modal__content > :first-child {
	margin-top: 0;
}

/* Theme top bar link */
.sav-topbar {
	text-align: center;
	padding: .5em 1em;
	font-size: .9em;
}

.sav-topbar a.sav-info-open {
	text-decoration: underline;
	cursor: pointer;
}

.sav-info-open {
	cursor: pointer;
}

/* Age gate (DOB self-check) */
html.sav-agegate-lock,
body.sav-agegate-lock {
	overflow: hidden !important;
}

.sav-agegate__label {
	display: block;
	font-weight: 600;
	margin-bottom: .5em;
}

.sav-agegate__dob {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .4em;
	margin-bottom: 1em;
}

/* Higher specificity than the generic .sav-modal input[type=text] {width:100%}. */
.sav-agegate .sav-agegate__dob input[type="text"] {
	width: 3.2em;
	text-align: center;
	font-size: 1.1em;
	padding: .5em .25em;
}

.sav-agegate .sav-agegate__dob input.sav-agegate__yyyy {
	width: 4.6em;
}

.sav-agegate__sep {
	opacity: .45;
	font-size: 1.2em;
}

.sav-agegate__error {
	color: #b32d2e;
	margin: -.25em 0 .9em;
	font-size: .9em;
}

.sav-agegate__fail {
	color: #b32d2e;
	font-weight: 600;
	margin-top: 1em;
}

/* Font Awesome 5 fix for WooCommerce notice icons (our legacy grace notice
   renders via wc_print_notice() as .woocommerce-info). "Font Awesome 5 Free"
   only carries its solid glyphs at weight 900; Firefox matches font-weight
   strictly (WebKit is lenient), so the ::before icon shows as an empty box
   without it. Force the weight so the notice icon renders cross-browser on
   every site this plugin ships to, regardless of theme. */
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before {
	font-weight: 900 !important;
}