/* Purchase-flow confirmation step (SCAFFOLD — see class-purchase-step.php).
   Popup form of the two options the client's brief leaves open; swap for a
   dedicated page template later without touching class-purchase-step.php's
   validation, which doesn't care how this markup is presented.

   Matches the theme's rk- design tokens without depending on the theme (same
   approach as front.css) — every colour/radius/font reads a --rk-* custom
   property with a plain fallback, so this still looks reasonable if the
   theme is ever swapped. */

.rk-rf-purchase-step[hidden] {
	display: none;
}

.rk-rf-purchase-step {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	font-family: var(--rk-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
}

.rk-rf-purchase-step__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(6, 17, 31, 0.6);
}

.rk-rf-purchase-step__panel {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 480px;
	max-height: 90vh;
	overflow-y: auto;
	padding: 32px;
	border: 1px solid var(--rk-line, #dfe6ef);
	border-radius: var(--rk-radius-lg, 30px);
	background: var(--rk-white, #fff);
	box-shadow: var(--rk-shadow, 0 24px 60px rgba(6, 17, 31, 0.16));
}

.rk-rf-purchase-step__close {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50%;
	background: var(--rk-soft, #f4f7fb);
	color: var(--rk-ink, #132033);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.rk-rf-purchase-step__close:hover,
.rk-rf-purchase-step__close:focus-visible {
	background: var(--rk-gold-bg, #fff6df);
	color: var(--rk-gold-ink, #8d6e20);
}

.rk-rf-purchase-step__panel h2 {
	margin: 0 0 16px;
	padding-right: 32px;
	color: var(--rk-navy, #06111f);
	font-family: var(--rk-font-serif, Georgia, 'Times New Roman', serif);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.rk-rf-purchase-step__terms {
	max-height: 220px;
	overflow-y: auto;
	margin-bottom: 20px;
	padding: 16px;
	border: 1px solid var(--rk-line, #dfe6ef);
	border-radius: var(--rk-radius-sm, 14px);
	background: var(--rk-soft, #f4f7fb);
	color: var(--rk-ink, #132033);
	font-size: 14px;
	line-height: 1.5;
}

.rk-rf-purchase-step__terms p {
	margin: 0 0 0.75em;
}

.rk-rf-purchase-step__terms p:last-child {
	margin-bottom: 0;
}

.rk-rf-purchase-step__language {
	margin-bottom: 20px;
}

.rk-rf-purchase-step__language label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rk-muted, #5d6878);
}

.rk-rf-purchase-step__language select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--rk-line, #dfe6ef);
	border-radius: 10px;
	background: var(--rk-white, #fff);
	font-family: inherit;
	font-size: 15px;
	color: var(--rk-ink, #132033);
}

.rk-rf-purchase-step__language select:focus {
	border-color: var(--rk-gold, #c7a85d);
	outline: none;
	box-shadow: 0 0 0 3px rgba(199, 168, 93, 0.25);
}

.rk-rf-purchase-step__agree {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--rk-ink, #132033);
	font-size: 14px;
	cursor: pointer;
}

.rk-rf-purchase-step__agree input {
	margin-top: 3px;
	accent-color: var(--rk-gold, #c7a85d);
}

.rk-rf-purchase-step__error {
	margin: 12px 0 0;
	color: #a02525;
	font-size: 13px;
}

.rk-rf-purchase-step__actions {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 24px;
}

/* Buttons — same shape/weight as the theme's .rk-btn, kept as our own class
   so this still looks right if the plugin ever runs under a different theme. */
.rk-rf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 13px 22px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--rk-ease, 0.2s ease), transform var(--rk-ease, 0.2s ease);
}

.rk-rf-btn--primary {
	background: var(--rk-gold, #c7a85d);
	border-color: var(--rk-gold, #c7a85d);
	color: #111;
}

.rk-rf-btn--primary:hover {
	background: #d6b869;
	transform: translateY(-1px);
}

.rk-rf-btn--outline {
	background: transparent;
	border-color: var(--rk-line, #dfe6ef);
	color: var(--rk-navy, #06111f);
}

.rk-rf-btn--outline:hover {
	background: var(--rk-soft, #f4f7fb);
}

/* The actual scroll lock is applied as inline styles by JS (position: fixed
   on <body> at its current scroll offset, restored on close) — toggling
   `overflow: hidden` on <html> here directly discarded its scroll position
   in some browsers, jumping the page to the top the moment the modal opened.
   This class stays as a hook for anything else that wants to key off it. */

/* Shorter list inside this popup specifically (not the product page's own
   on-page field — .rk-rf-dd__menu there keeps front.css's 288px). The modal
   itself is capped at 90vh, so a tall list can otherwise push the Terms box
   and buttons out of view. */
#rk-rf-purchase-step .rk-rf-dd__menu {
	max-height: 170px;
}

/* Read-only edition summary inside the Terms step. */
.rk-rf-purchase-step__language {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 16px;
	padding: 12px 16px;
	border: 1px solid var(--rk-gold-line, #eddba8);
	border-radius: 10px;
	background: var(--rk-gold-bg, #fff6df);
}

.rk-rf-purchase-step__language-label {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--rk-gold-ink, #8d6e20);
}

.rk-rf-purchase-step__language-value {
	font-size: 14px;
	font-weight: 700;
	color: var(--rk-ink, #132033);
	text-align: right;
}