/*
 * Offer-page SMS signup popup — presentation only.
 *
 * Every selector is namespaced .rnf-smsp so nothing here can reach the offer
 * page or any other surface, the same containment approach .rnf-offer2 uses.
 * All colour, radius and type values come from tokens.css — no new hex codes.
 *
 * Behaviour lives in assets/js/sms-popup.js. This file can be rewritten freely
 * without touching logic, provided the class names survive.
 */

.rnf-smsp[hidden] { display: none; }

.rnf-smsp {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.rnf-smsp__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 44, 46, 40, .55 );
}

/* Lock background scroll while open. */
body.rnf-smsp-open { overflow: hidden; }

.rnf-smsp__dialog {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: min( 900px, 100% );
	max-height: calc( 100vh - 40px );
	overflow: auto;
	background: var( --paper2 );
	border-radius: var( --radius );
	box-shadow: 0 24px 60px rgba( 44, 46, 40, .28 );
}

/* ---------- Close X ---------- */

.rnf-smsp__x {
	position: absolute;
	top: 10px;
	right: 12px;
	z-index: 2;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background: rgba( 251, 248, 240, .9 );
	color: var( --ink );
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.rnf-smsp__x:hover { background: var( --paper2 ); }

/* ---------- Left panel ---------- */

.rnf-smsp__media {
	background-image: url( "../images/pop-up.jpg" );
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 520px;
}

/* ---------- Right panel ---------- */

.rnf-smsp__body {
	padding: 34px 32px;
	font-family: var( --font-body );
	color: var( --ink );
}

.rnf-smsp__wordmark {
	margin: 0 0 10px;
	font-family: var( --font-script );
	font-size: 34px;
	line-height: 1.1;
	color: var( --pine );
}

.rnf-smsp__eyebrow {
	margin: 0 0 4px;
	font-family: var( --font-display );
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .16em;
	color: var( --inks );
}

.rnf-smsp__offer {
	margin: 0 0 6px;
	font-family: var( --font-display );
	font-size: 52px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: var( --track-display );
	color: var( --pine );
}

.rnf-smsp__sub {
	margin: 0 0 20px;
	font-family: var( --font-display );
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	color: var( --inks );
}

/* ---------- Form ---------- */

.rnf-smsp__label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
}

.rnf-smsp__input {
	width: 100%;
	padding: 12px 14px;
	margin-bottom: 14px;
	border: 1px solid var( --line );
	border-radius: var( --radius-sm );
	background: #fff;
	font-family: var( --font-body );
	font-size: 16px; /* 16px prevents iOS zoom-on-focus. */
	color: var( --ink );
}

.rnf-smsp__input:focus {
	outline: 2px solid var( --sage );
	outline-offset: 1px;
}

/* Mirrors .rnf-btn (assets/css/offer.css:376) so the popup matches the site. */
.rnf-smsp__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	gap: 8px;
	padding: 13px 26px;
	border: none;
	border-radius: var( --radius-pill );
	background: var( --pine );
	color: var( --on-pine );
	font-family: var( --font-body );
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.rnf-smsp__btn:hover { background: var( --kick ); }
.rnf-smsp__btn[disabled] { opacity: .6; cursor: default; }

.rnf-smsp__error {
	margin: 10px 0 0;
	font-size: 13px;
	font-weight: 600;
	color: var( --clay );
}

/* ---------- Consent — always visible ---------- */

.rnf-smsp__consent { margin-top: 14px; }

.rnf-smsp__agree {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	font-size: 11.5px;
	line-height: 1.5;
	color: var( --inks );
}

.rnf-smsp__check {
	flex: 0 0 auto;
	margin-top: 2px;
	width: 15px;
	height: 15px;
	accent-color: var( --pine );
}

.rnf-smsp__agree-text a {
	color: var( --pine );
	text-decoration: underline;
}

.rnf-smsp__fine {
	margin: 9px 0 0;
	font-size: 10.5px;
	line-height: 1.5;
	color: var( --inks );
}

.rnf-smsp__valid {
	margin: 14px 0 0;
	font-size: 14px;
	color: var( --pine );
}

.rnf-smsp__nothanks {
	display: inline-block;
	margin-top: 14px;
	padding: 0;
	border: none;
	background: none;
	font-family: var( --font-body );
	font-size: 13px;
	color: var( --inks );
	text-decoration: underline;
	cursor: pointer;
}

/* ---------- Confirmation ---------- */

.rnf-smsp__done {
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 1.6;
}

/* ---------- Stack on narrow screens ---------- */
/* 720px is an existing theme breakpoint (the offer page uses 860/720/520). */

@media ( max-width: 720px ) {

	.rnf-smsp { padding: 12px; }

	.rnf-smsp__dialog { grid-template-columns: 1fr; }

	/* Image becomes a short banner so the form stays reachable. */
	.rnf-smsp__media {
		min-height: 150px;
		border-radius: var( --radius ) var( --radius ) 0 0;
	}

	.rnf-smsp__body { padding: 24px 20px; }
	.rnf-smsp__offer { font-size: 42px; }
	.rnf-smsp__wordmark { font-size: 30px; }
}