/*
 * The gate — «دروازهٔ هاگوارتس».
 *
 * Loaded only on gate pages (wc_gate_assets()). The notes that would otherwise
 * live in here are in CLAUDE.md; what is left below are the few rules whose
 * reason is not visible from the rule itself.
 */

.wc-gate,
.wc-gate * {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- shell -- */

body.wc-gate-page {
	background: #070914;
}

/* The theme gives every non-front page a hero two-thirds of the window tall.
   On a page whose whole job is one short form that is the entire first screen
   spent on a title, so it collapses to the bar. The !important is not
   decoration: jquery.fortunatopro writes the height as an inline style and
   rewrites it on every resize. */
body.wc-gate-page #masthead {
	height: auto !important;
	min-height: 0 !important;
	background: #080b13 !important;
}

body.wc-gate-page #masthead::before,
body.wc-gate-page #masthead > .wc-header-media,
body.wc-gate-page .site-brand-main,
body.wc-gate-page .scrollDown {
	display: none;
}

body.wc-gate-page .site-content {
	max-width: none;
	margin: 0;
	padding: 0;
}

body.wc-gate-page .site-footer {
	position: relative;
	z-index: 2;
	max-width: none;
	margin: 0;
	padding: 22px 5vw;
	background: #050711;
	color: rgba(255, 255, 255, .6);
	border-top: 1px solid rgba(231, 200, 120, .14);
}

.wc-gate {
	--gate-gold: #e7c878;
	--gate-gold-deep: #b8924a;
	--gate-ivory: #fff8e7;
	--gate-violet: #3d2a63;
	--gate-ink: #080b18;
	--gate-muted: rgba(255, 248, 231, .62);
	--gate-line: rgba(231, 200, 120, .22);
	--gate-glass: rgba(14, 17, 33, .72);

	position: relative;
	z-index: 1;
	min-height: calc(100vh - 70px);
	display: flex;
	align-items: center;
	justify-content: center;
	/* The 70px is the fixed .wc-new-navbar, which the collapsed masthead no
	   longer leaves room for — without it the crest renders underneath the bar.
	   Every padding-top below carries the same term for the same reason. */
	padding: calc(70px + clamp(16px, 3.5vh, 46px)) 20px clamp(30px, 5vh, 64px);
	color: var(--gate-ivory);
	font-family: "Estedad", Vazir, Roboto, sans-serif;
}

/* ---------------------------------------------------------------- scene -- */

/* Fixed rather than a `background-attachment: fixed` on the page: that keyword
   forces the browser to repaint the whole image on every scroll frame and is
   the single most expensive thing a phone can be asked to do with a photo. */
.wc-gate-scene {
	position: fixed;
	inset: 0;
	z-index: 0;
	background-image: url('../../../images/hogwarts/hogwarts-hub.webp');
	background-size: cover;
	background-position: 50% 32%;
	background-repeat: no-repeat;
	background-color: var(--gate-ink);
	pointer-events: none;
}

.wc-gate-veil {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 80% at 50% 8%, rgba(96, 74, 158, .34), transparent 62%),
		linear-gradient(180deg, rgba(6, 8, 20, .58) 0%, rgba(6, 8, 20, .74) 46%, rgba(4, 6, 16, .93) 100%);
}

.wc-gate-candles {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/* Six of them, each a 4px dot with a soft halo. The float is transform-only so
   it stays on the compositor and never asks for a layout. */
.wc-gate-candles span {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #ffe9b0;
	box-shadow:
		0 0 8px 3px rgba(255, 215, 140, .55),
		0 0 26px 10px rgba(255, 190, 90, .18);
	transform: scale(var(--s));
	animation: wc-gate-float 7s var(--d) ease-in-out infinite;
	will-change: transform, opacity;
}

@keyframes wc-gate-float {
	0%, 100% { transform: translate3d(0, 0, 0) scale(var(--s)); opacity: .55; }
	50%      { transform: translate3d(0, -14px, 0) scale(calc(var(--s) * 1.12)); opacity: .95; }
}

.wc-gate-shell {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 460px;
}

.wc-gate--welcome .wc-gate-shell {
	max-width: 760px;
}

/* ---------------------------------------------------------------- crest -- */

.wc-gate-crest {
	text-align: center;
	margin-bottom: 20px;
}

.wc-gate-seal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	margin-bottom: 12px;
	border-radius: 50%;
	border: 1px solid var(--gate-line);
	background: radial-gradient(circle at 50% 30%, rgba(231, 200, 120, .22), rgba(10, 13, 25, .8));
	box-shadow: 0 0 30px rgba(231, 200, 120, .16);
}

.wc-gate-seal svg {
	width: 27px;
	height: 27px;
	fill: none;
	stroke: var(--gate-gold);
	stroke-width: 3;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.wc-gate-eyebrow {
	margin: 0 0 6px;
	font-size: .78rem;
	line-height: 1.6;
	letter-spacing: .04em;
	color: var(--gate-gold);
}

.wc-gate-crest h1 {
	margin: 0 0 10px;
	font-size: clamp(1.4rem, 4vw, 1.85rem);
	line-height: 1.5;
	color: var(--gate-ivory);
	text-shadow: 0 2px 22px rgba(0, 0, 0, .55);
}

.wc-gate-lead {
	margin: 0 auto;
	max-width: 40ch;
	font-size: .92rem;
	line-height: 2;
	color: var(--gate-muted);
}

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

.wc-gate-panel {
	position: relative;
	padding: 26px 24px 24px;
	border-radius: 26px;
	border: 1px solid var(--gate-line);
	background: var(--gate-glass);
	backdrop-filter: blur(18px);
	box-shadow:
		0 30px 70px rgba(0, 0, 0, .55),
		inset 0 1px 0 rgba(255, 248, 231, .08);
}

/* The keystone: a hairline of gold laid over the top edge, brightest in the
   middle, so the card reads as set into an arch without drawing one. */
.wc-gate-panel::before {
	content: '';
	position: absolute;
	inset-inline: 22%;
	top: -1px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gate-gold), transparent);
}

/* --------------------------------------------------------------- switch -- */

/* One rounded track with the current step filled, not two loose buttons — the
   same object the common rooms' sort control is, so it is already familiar. */
.wc-gate-switch {
	display: flex;
	gap: 4px;
	margin: 0 0 20px;
	padding: 4px;
	border-radius: 999px;
	border: 1px solid var(--gate-line);
	background: rgba(6, 8, 20, .55);
}

.wc-gate-switch a {
	flex: 1 1 0;
	padding: 9px 10px;
	border-radius: 999px;
	font-size: .88rem;
	line-height: 1.6;
	text-align: center;
	text-decoration: none;
	color: var(--gate-muted);
	transition: color .18s ease, background-color .18s ease;
}

.wc-gate-switch a:hover {
	color: var(--gate-ivory);
}

.wc-gate-switch a.is-current {
	color: #1a1206;
	background: linear-gradient(135deg, var(--gate-gold), var(--gate-gold-deep));
	font-weight: 700;
}

/* ------------------------------------------------------------- messages -- */

.wc-gate-message {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0 0 18px;
	padding: 11px 14px;
	border-radius: 14px;
	border: 1px solid transparent;
	font-size: .86rem;
	line-height: 1.9;
}

.wc-gate-message i {
	flex: 0 0 auto;
	font-style: normal;
	line-height: 1.9;
}

.wc-gate-message--error {
	border-color: rgba(233, 118, 118, .34);
	background: rgba(120, 32, 32, .24);
	color: #ffd9d9;
}

.wc-gate-message--notice {
	border-color: rgba(231, 200, 120, .3);
	background: rgba(231, 200, 120, .12);
	color: #f7e6c0;
}

/* ---------------------------------------------------------------- forms -- */

.wc-gate-form {
	margin: 0;
}

/* The honeypot leaves the page without leaving the DOM. `display: none` is
   avoided on purpose — some bots skip hidden fields, and the whole value of
   the field is that they do not. */
.wc-gate-hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.wc-gate-field {
	position: relative;
	margin: 0 0 16px;
}

.wc-gate-field label {
	display: block;
	margin-bottom: 7px;
	font-size: .82rem;
	line-height: 1.7;
	color: var(--gate-muted);
}

.wc-gate-field input {
	display: block;
	width: 100%;
	padding: 12px 15px;
	border-radius: 14px;
	border: 1px solid rgba(231, 200, 120, .18);
	background: rgba(6, 8, 20, .6);
	color: var(--gate-ivory);
	font-family: inherit;
	font-size: .95rem;
	line-height: 1.7;
	transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

/* The placeholder is now the field's only visible label — labels are kept for
   screen readers only — so it carries more contrast than a decorative hint
   would, and never fades on :focus the way a browser default sometimes does. */
.wc-gate-field input::placeholder {
	color: rgba(255, 248, 231, .5);
	opacity: 1;
}

.wc-gate-field input:focus {
	outline: none;
	border-color: rgba(231, 200, 120, .6);
	background: rgba(9, 12, 26, .78);
	box-shadow: 0 0 0 3px rgba(231, 200, 120, .16);
}

/* Chrome paints its own near-white block over an autofilled field, which turns
   ivory text on ink into black text on white. The inset shadow repaints the
   surface underneath it — the only way to reach that layer. */
.wc-gate-field input:-webkit-autofill,
.wc-gate-field input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--gate-ivory);
	-webkit-box-shadow: 0 0 0 40px #0b0f1f inset;
	caret-color: var(--gate-ivory);
}

.wc-gate-hint {
	display: block;
	margin-top: 6px;
	font-size: .74rem;
	line-height: 1.8;
	color: rgba(255, 248, 231, .45);
}

/* The eye sits inside the field, so the field keeps room for it. Logical
   properties, because the page is RTL and the button belongs at the end of the
   line whichever way the line runs. */
.wc-gate-field--password input {
	padding-inline-end: 46px;
}

.wc-gate-reveal {
	position: absolute;
	inset-inline-end: 8px;
	/* Centred on the input, not measured down from a label that no longer sits
	   in the flow — the label is screen-reader-only, so the input starts at the
	   top of the field. 26px is the input's half-height (12px padding + ~26px
	   line + 1px border, both sides), and translateY re-centres the button on
	   it; the strength meter below the input does not move it. */
	top: 26px;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	cursor: pointer;
	opacity: .55;
	transition: opacity .18s ease, background-color .18s ease;
	--gate-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.wc-gate-reveal::before {
	content: '';
	position: absolute;
	inset: 7px;
	background: var(--gate-ivory);
	-webkit-mask: var(--gate-eye) center / contain no-repeat;
	mask: var(--gate-eye) center / contain no-repeat;
}

.wc-gate-reveal[aria-pressed="true"] {
	--gate-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 5.2A9.9 9.9 0 0 1 12 5c6 0 10 7 10 7a17 17 0 0 1-3.2 3.9M6.3 6.4A17 17 0 0 0 2 12s4 7 10 7a9.6 9.6 0 0 0 4-.9'/%3E%3C/svg%3E");
	opacity: .9;
}

.wc-gate-reveal:hover,
.wc-gate-reveal:focus-visible {
	opacity: 1;
	background: rgba(231, 200, 120, .12);
}

/* Faint on purpose: an empty meter sits directly under the field with a hint
   below it, and at full track opacity the three of them read as a divider rule
   with a caption rather than as a gauge waiting to fill. */
.wc-gate-meter {
	display: block;
	height: 3px;
	margin-top: 7px;
	border-radius: 999px;
	background: rgba(255, 248, 231, .07);
	overflow: hidden;
}

.wc-gate-meter > span {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: var(--gate-gold);
	transition: width .25s ease, background-color .25s ease;
}

.wc-gate-meter[data-level="1"] > span { width: 33%; background: #e58a6d; }
.wc-gate-meter[data-level="2"] > span { width: 66%; background: #e7c878; }
.wc-gate-meter[data-level="3"] > span { width: 100%; background: #86d6a4; }

.wc-gate-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 20px;
}

.wc-gate-check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: .82rem;
	line-height: 1.9;
	color: var(--gate-muted);
	cursor: pointer;
}

.wc-gate-check input {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 5px;
	accent-color: var(--gate-gold);
}

.wc-gate-check--terms {
	margin: 0 0 20px;
}

.wc-gate-check a {
	color: var(--gate-gold);
	text-decoration: none;
	border-bottom: 1px solid rgba(231, 200, 120, .35);
}

.wc-gate-quiet {
	font-size: .8rem;
	line-height: 1.9;
	color: var(--gate-muted);
	text-decoration: none;
	transition: color .18s ease;
}

.wc-gate-quiet:hover {
	color: var(--gate-gold);
}

/* --------------------------------------------------------------- submit -- */

.wc-gate-submit {
	position: relative;
	display: block;
	width: 100%;
	padding: 14px 20px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, #f0d492, var(--gate-gold-deep));
	color: #1a1206;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.6;
	cursor: pointer;
	overflow: hidden;
	box-shadow: 0 12px 30px rgba(184, 146, 74, .28);
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.wc-gate-submit > span {
	position: relative;
	z-index: 1;
}

/* The shimmer is a single translated gradient — the same effect the comment
   form's submit already uses, so the two buttons behave alike. */
.wc-gate-submit::after {
	content: '';
	position: absolute;
	inset: 0 auto 0 -60%;
	width: 45%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
	transform: translate3d(0, 0, 0);
	opacity: 0;
}

@media (hover: hover) {
	.wc-gate-submit:hover {
		transform: translateY(-2px);
		box-shadow: 0 16px 38px rgba(184, 146, 74, .38);
	}

	.wc-gate-submit:hover::after {
		opacity: 1;
		animation: wc-gate-shimmer .9s ease;
	}
}

.wc-gate-submit:active {
	transform: translateY(0);
}

.wc-gate-submit[disabled] {
	filter: grayscale(.4);
	opacity: .65;
	cursor: progress;
}

@keyframes wc-gate-shimmer {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(360%, 0, 0); }
}

.wc-gate-alt,
.wc-gate-foot {
	margin: 18px 0 0;
	text-align: center;
	font-size: .84rem;
	line-height: 1.9;
	color: var(--gate-muted);
}

.wc-gate-alt a,
.wc-gate-foot a {
	color: var(--gate-gold);
	text-decoration: none;
	border-bottom: 1px solid rgba(231, 200, 120, .3);
	transition: border-color .18s ease;
}

.wc-gate-alt a:hover,
.wc-gate-foot a:hover {
	border-bottom-color: var(--gate-gold);
}

.wc-gate-foot {
	margin-top: 22px;
	font-size: .8rem;
}

/* -------------------------------------------------------------- journey -- */

.wc-gate-crest--wide .wc-gate-lead {
	max-width: 52ch;
}

.wc-gate-journey {
	padding: 26px 22px 22px;
	border-radius: 26px;
	border: 1px solid var(--gate-line);
	background: var(--gate-glass);
	backdrop-filter: blur(18px);
	box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}

.wc-gate-progress {
	margin-bottom: 16px;
}

.wc-gate-progress-bar {
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 248, 231, .1);
	overflow: hidden;
}

.wc-gate-progress-bar > span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--gate-gold-deep), var(--gate-gold));
	transition: width .4s ease;
}

.wc-gate-progress-label {
	margin: 9px 0 0;
	font-size: .8rem;
	line-height: 1.8;
	color: var(--gate-muted);
}

.wc-gate-progress-label strong {
	color: var(--gate-gold);
}

.wc-gate-nextup {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 20px;
	padding: 10px 14px;
	border-radius: 14px;
	border: 1px solid rgba(231, 200, 120, .24);
	background: rgba(231, 200, 120, .09);
	font-size: .85rem;
	line-height: 1.9;
	color: var(--gate-muted);
}

.wc-gate-nextup a {
	color: var(--gate-gold);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid rgba(231, 200, 120, .4);
}

.wc-gate-nextup--done {
	border-color: rgba(134, 214, 164, .3);
	background: rgba(134, 214, 164, .1);
	color: #cdeedb;
}

.wc-gate-steps {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wc-gate-step {
	display: grid;
	grid-template-columns: auto auto 1fr auto;
	align-items: center;
	gap: 14px;
	padding: 14px 4px;
	border-top: 1px solid rgba(255, 248, 231, .08);
}

.wc-gate-step:first-child {
	border-top: 0;
}

.wc-gate-step-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid var(--gate-line);
	font-size: .78rem;
	line-height: 1;
	color: var(--gate-muted);
}

.wc-gate-step-mark svg {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wc-gate-step.is-done .wc-gate-step-mark {
	border-color: rgba(134, 214, 164, .5);
	background: rgba(134, 214, 164, .16);
	color: #86d6a4;
}

.wc-gate-step-icon svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: var(--gate-gold);
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: .85;
}

.wc-gate-step-body {
	display: block;
	min-width: 0;
}

.wc-gate-step-title {
	display: block;
	font-size: .95rem;
	line-height: 1.8;
	color: var(--gate-ivory);
}

.wc-gate-step-flag {
	margin-inline-start: 7px;
	padding: 1px 8px;
	border-radius: 999px;
	background: rgba(134, 214, 164, .16);
	color: #86d6a4;
	font-size: .68rem;
	font-style: normal;
	line-height: 1.9;
}

.wc-gate-step-text {
	display: block;
	margin-top: 3px;
	font-size: .8rem;
	line-height: 1.9;
	color: var(--gate-muted);
}

.wc-gate-step-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid var(--gate-line);
	font-size: .8rem;
	line-height: 1.7;
	color: var(--gate-gold);
	text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.wc-gate-step-cta i {
	font-style: normal;
}

.wc-gate-step-cta:hover {
	background: rgba(231, 200, 120, .14);
	border-color: rgba(231, 200, 120, .45);
	color: var(--gate-ivory);
}

.wc-gate-step.is-done .wc-gate-step-icon svg {
	opacity: .5;
}

/* Locked is dimmed, never removed: the step it is waiting on is the one right
   above it, so seeing it is what explains the order. */
.wc-gate-step.is-locked .wc-gate-step-cta {
	color: var(--gate-muted);
	border-style: dashed;
}

.wc-gate-journey-foot {
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 248, 231, .08);
	text-align: center;
	font-size: .82rem;
	line-height: 1.9;
	color: var(--gate-muted);
}

.wc-gate-journey-foot a {
	color: var(--gate-gold);
	text-decoration: none;
}

.wc-gate-journey-foot span {
	margin: 0 8px;
	opacity: .45;
}

/* ---------------------------------------------------------- small print -- */

@media (max-width: 640px) {
	.wc-gate {
		padding-top: calc(70px + 14px);
	}

	.wc-gate-panel,
	.wc-gate-journey {
		padding-inline: 17px;
		border-radius: 22px;
	}

	/* Four columns of 14px gutters do not fit 375px, and the icon is the one
	   that carries no information the title does not. */
	.wc-gate-step {
		grid-template-columns: auto 1fr;
		gap: 10px 12px;
	}

	.wc-gate-step-icon {
		display: none;
	}

	.wc-gate-step-cta {
		grid-column: 2;
		justify-self: start;
	}
}

/* Below the tablet breakpoint the blur is removed from both panels. Their own
   backgrounds are 72% opaque so almost none of it was ever visible, while each
   one forces its own render surface and a full re-blur on every scroll frame —
   the same cost control the Hogwarts hub documents. */
@media (max-width: 1050px) {
	.wc-gate-panel,
	.wc-gate-journey {
		backdrop-filter: none;
		background: rgba(10, 13, 26, .88);
	}
}

/* A sign-in form whose button is below the fold reads as broken, and a laptop
   at 1280x720 is the commonest screen this page will ever load on. The scene
   keeps its scale; what gives way is the ceremony above the panel, which is
   the part a returning member has already read. */
@media (min-width: 641px) and (max-height: 820px) {
	.wc-gate:not(.wc-gate--welcome) {
		padding-top: calc(70px + 12px);
		padding-bottom: 24px;
	}

	.wc-gate:not(.wc-gate--welcome) .wc-gate-seal {
		width: 46px;
		height: 46px;
		margin-bottom: 8px;
	}

	.wc-gate:not(.wc-gate--welcome) .wc-gate-seal svg {
		width: 22px;
		height: 22px;
	}

	.wc-gate:not(.wc-gate--welcome) .wc-gate-crest {
		margin-bottom: 14px;
	}

	.wc-gate:not(.wc-gate--welcome) .wc-gate-crest h1 {
		font-size: 1.5rem;
		margin-bottom: 6px;
	}

	.wc-gate:not(.wc-gate--welcome) .wc-gate-lead {
		font-size: .86rem;
		line-height: 1.85;
	}

	.wc-gate:not(.wc-gate--welcome) .wc-gate-panel {
		padding: 20px 22px 20px;
	}

	.wc-gate:not(.wc-gate--welcome) .wc-gate-switch {
		margin-bottom: 16px;
	}

	.wc-gate:not(.wc-gate--welcome) .wc-gate-foot {
		margin-top: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wc-gate-candles span,
	.wc-gate-submit::after {
		animation: none !important;
	}

	.wc-gate-candles span {
		opacity: .75;
	}

	.wc-gate-submit,
	.wc-gate-progress-bar > span,
	.wc-gate-meter > span {
		transition: none;
	}
}

/* -------------------------------------------------------------- captcha -- */

/* The theme's shared CAPTCHA markup, dressed as a gate field. Its own classes
   are styled for the comment form, which is a different surface entirely, so
   everything here is scoped inside .wc-gate-captcha and nothing reaches back
   out to the comment form's copy. */
.wc-gate-captcha {
	margin: 0 0 18px;
}

.wc-gate-captcha .wc-captcha-wrapper {
	margin: 0;
}

.wc-gate-captcha label {
	display: block;
	margin-bottom: 8px;
	font-size: .82rem;
	line-height: 1.7;
	color: var(--gate-muted);
}

.wc-gate-captcha .required {
	color: var(--gate-gold);
}

.wc-gate-captcha .wc-captcha-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 6px 6px 6px;
	padding-inline-start: 15px;
	border-radius: 14px;
	border: 1px solid rgba(231, 200, 120, .18);
	background: rgba(6, 8, 20, .6);
	transition: border-color .18s ease, box-shadow .18s ease;
}

.wc-gate-captcha .wc-captcha-row:focus-within {
	border-color: rgba(231, 200, 120, .6);
	box-shadow: 0 0 0 3px rgba(231, 200, 120, .16);
}

.wc-gate-captcha .wc-captcha-question {
	flex: 1 1 auto;
	font-size: .95rem;
	line-height: 1.7;
	color: var(--gate-ivory);
}

/* The answer is a number and the question beside it is Persian, so the input
   is pinned LTR — left to itself it renders a typed «12» in the RTL flow and
   the caret jumps to the wrong end between digits. */
.wc-gate-captcha .wc-captcha-input {
	flex: 0 0 84px;
	width: 84px;
	padding: 9px 12px;
	border-radius: 10px;
	border: 1px solid rgba(231, 200, 120, .18);
	background: rgba(255, 248, 231, .06);
	color: var(--gate-ivory);
	font-family: inherit;
	font-size: .95rem;
	line-height: 1.7;
	direction: ltr;
	text-align: center;
}

.wc-gate-captcha .wc-captcha-input:focus {
	outline: none;
	border-color: rgba(231, 200, 120, .45);
}

/* The «enter in English» tip is hidden, not removed: gate.js converts Persian
   digits to ASCII on the fly, so the instruction no longer applies here — but
   the same markup is shared with the comment form, which has no such
   conversion and still needs it, so only the gate's copy is suppressed. */
.wc-gate-captcha .wc-captcha-hint {
	display: none;
}