/**
 * Vision Event – dual ticket registration section.
 * Uses assets from ../assets/
 * Fonts load from fonts.css (enqueued / linked separately).
 */

/* ------------------------------------------------------------------ */
/* Design tokens                                                      */
/* ------------------------------------------------------------------ */

:root {
	--vision-reg-red: #C40038;
	--vision-reg-red-hover: #a80030;
	--vision-reg-title: #111827;
	--vision-reg-subtitle: #6b7280;
	--vision-reg-feature: #374151;
	--vision-reg-white: #ffffff;
	--vision-reg-font: 'Yekan Bakh FaNum', Tahoma, sans-serif;
	--vision-reg-morabba: 'Morabba', 'Yekan Bakh FaNum', Tahoma, sans-serif;
	--vision-reg-max: 1120px;
	/* Fixed ticket height so center logo sits exactly between both cards */
	--vision-reg-ticket-h: 280px;
}

/* ------------------------------------------------------------------ */
/* Reset scoped to section                                            */
/* ------------------------------------------------------------------ */

.vision-reg,
.vision-reg *,
.vision-reg *::before,
.vision-reg *::after {
	box-sizing: border-box;
}

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

.vision-reg {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding: 25px 20px 40px;
	background-color: var(--vision-reg-white);
	font-family: var(--vision-reg-font);
	direction: rtl;
	text-align: center;
}

/* ------------------------------------------------------------------ */
/* Corner patterns (top-left + bottom-left of registration box)       */
/* ------------------------------------------------------------------ */

.vision-reg__pattern {
	position: absolute;
	z-index: 0;
	width: min(340px, 42vw);
	height: min(340px, 42vw);
	background-image: url('../assets/pattern.png');
	background-repeat: no-repeat;
	background-position: center;
	/* Invert dark pattern so it reads as a light watermark on white */
	pointer-events: none;
}

/* Top-left corner of the registration section */
.vision-reg__pattern--tl {
	top: 0;
	left: 0;
}

/* Bottom-left corner of the registration section */
.vision-reg__pattern--bl {
	bottom: 0;
	right: 0;
	/* Flip so the cluster sits cleanly in the bottom corner */
	transform: scaleY(-1);
}

/* Inner content wrapper */
.vision-reg__inner {
	position: relative;
	z-index: 1;
	max-width: var(--vision-reg-max);
	margin: 0 auto;
}

/* ------------------------------------------------------------------ */
/* Header                                                             */
/* ------------------------------------------------------------------ */

.vision-reg .vision-reg__title {
	margin: 0 0 12px;
	color: var(--vision-reg-title);
	font-family: var(--vision-reg-morabba);
	font-size: 24px;
	font-weight: 800;
	line-height: 1.35;
}

.vision-reg__subtitle {
	margin: 0 0 2px;
	color: #363535;
	font-family: var(--vision-reg-font);
	font-size: clamp(14px, 2vw, 17px);
	font-weight: 400;
	line-height: 1.8;
}

/* Decorative divider below the section subtitle. */
.vision-reg__header-border {
	display: block;
	width: min(100%, 420px);
	height: 12px;
	margin: 0 auto 5px;
	background: url('../assets/border.png') no-repeat center / contain;
}

/* ------------------------------------------------------------------ */
/* Feature badges (SnappPay + Zhaket Club)                            */
/* ------------------------------------------------------------------ */

.vision-reg__features {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px 40px;
	margin: 0 0 20px;
}

/* RTL row: Snapp on the right, Club on the left (matches Figma). */
.vision-reg__feature--snapp {
	order: 1;
}

.vision-reg__feature--club {
	order: 2;
}

.vision-reg__feature {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: var(--vision-reg-feature);
	font-family: var(--vision-reg-font);
	font-size: clamp(13px, 1.6vw, 15px);
	font-weight: 500;
	line-height: 1.6;
}

.vision-reg__feature img {
	display: block;
	flex-shrink: 0;
	width: 42px;
	height: 27px;
	object-fit: contain;
}

/* ------------------------------------------------------------------ */
/* Tickets grid                                                       */
/* row 1: tickets + logo | row 2: buttons under each ticket           */
/* ------------------------------------------------------------------ */

.vision-reg__tickets {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	grid-template-rows: auto auto;
	align-items: stretch;
	column-gap: 0;
	row-gap: 0;
	width: 100%;
}

/* Early ticket: column 1, row 1 (RTL visual right) */
.vision-reg__ticket--early {
	grid-column: 1;
	grid-row: 1;
	justify-self: center;
}

/* Center logo: column 2, row 1 only (ticket height) */
.vision-reg__divider {
	display: flex;
	align-items: center;
	justify-content: center;
	grid-column: 2;
	grid-row: 1;
	z-index: 3;
	width: 58px;
	height: var(--vision-reg-ticket-h);
	margin: 0 -28px;
	pointer-events: none;
}

.vision-reg__divider img {
	display: block;
	width: 76px;
	height: 76px;
	object-fit: contain;
	bottom: 4px;
  position: relative;
}

/* Standard ticket: column 3, row 1 (RTL visual left) */
.vision-reg__ticket--standard {
	grid-column: 3;
	grid-row: 1;
	justify-self: center;
}

/* Early button under early ticket */
.vision-reg__btn--early {
	grid-column: 1;
	grid-row: 2;
	justify-self: center;
}

/* Standard button under standard ticket */
.vision-reg__btn--standard {
	grid-column: 3;
	grid-row: 2;
	justify-self: center;
}

/* ------------------------------------------------------------------ */
/* Ticket card (ticket-background.png)                                */
/* ------------------------------------------------------------------ */

.vision-reg__ticket {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	max-width: 515px;
	/* Fixed height keeps both tickets equal and logo perfectly centered */
	height: var(--vision-reg-ticket-h);
	padding: 26px 32px 20px;
	background-image: url('../assets/ticket-background.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	color: var(--vision-reg-white);
	text-align: center;
	overflow: hidden;
}

.vision-reg .vision-reg__ticket-title {
	margin: 0 0 6px;
	font-family: var(--vision-reg-morabba);
	font-size: clamp(18px, 2.2vw, 22px);
	font-weight: 800;
	line-height: 1.4;
}

.vision-reg .vision-reg__ticket-desc {
	margin: 0 0 12px;
	font-family: var(--vision-reg-morabba);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.7;
	opacity: 0.92;
}

/* Early-bird percentage uses Yekan Bakh and scales up inside Morabba copy. */
.vision-reg .vision-reg__ticket-desc-pct {
	font-family: var(--vision-reg-font);
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	font-variation-settings: normal;
	letter-spacing: 0;
}

.vision-reg__price-wrap {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 10px;
	margin: 0 0 auto;
	padding: 4px 0 14px;
	direction: ltr;
}

.vision-reg__price {
	color: var(--vision-reg-white);
	font-family: var(--vision-reg-font);
	font-size: 60px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -5px;
	font-variant-numeric: tabular-nums;
}

.vision-reg__price-currency {
	color: var(--vision-reg-white);
	font-family: var(--vision-reg-morabba);
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	opacity: 0.95;
}

.vision-reg .vision-reg__deadline {
	margin: -11px 0 11px;
	font-family: var(--vision-reg-morabba);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	opacity: 0.9;
}

/* Date digits use Yekan Bakh so Persian numerals match the rest of the UI. */
.vision-reg .vision-reg__deadline-date {
	font-family: var(--vision-reg-font);
	font-weight: 500;
	font-variation-settings: "dots" 9;
	letter-spacing: -0.5px;
}

/* Invisible spacer so standard ticket matches early-bird deadline line */
.vision-reg__deadline--spacer {
	visibility: hidden;
	user-select: none;
}

/* ------------------------------------------------------------------ */
/* Countdown timer                                                    */
/* ------------------------------------------------------------------ */

.vision-reg__countdown-holder,
.vision-reg__countdown,
.vision-reg__countdown * {
	letter-spacing: 0;
	font-variation-settings: normal;
}

.vision-reg__countdown-holder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	max-width: calc(100% - 32px);
	min-width: 210px;
	min-height: 52px;
	margin-top: auto;
	margin-bottom: 6px;
	padding: 7px 12px;
	background: url('../assets/timer-holder.svg') no-repeat center / 100% 100%;
}

.vision-reg__countdown {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 0;
	width: 100%;
	direction: ltr;
	unicode-bidi: embed;
	font-variation-settings: normal;
	letter-spacing: 0;
}

.vision-reg__countdown-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	min-width: 0;
	width: 42px;
}

.vision-reg__countdown-value {
	color: var(--vision-reg-white);
	font-family: inherit;
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: normal;
	font-variation-settings: normal;
	letter-spacing: 0;
}

.vision-reg__countdown-label {
	color: rgba(255, 255, 255, 0.72);
	font-family: var(--vision-reg-morabba);
	font-size: 9px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-variation-settings: normal;
}

.vision-reg__countdown-sep {
	align-self: flex-start;
	margin: 0;
	padding: 0 2px;
	color: rgba(255, 255, 255, 0.55);
	font-family: inherit;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
}

/* ------------------------------------------------------------------ */
/* Register button                                                    */
/* ------------------------------------------------------------------ */

.vision-reg .vision-reg__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 240px;
	min-width: 0;
	margin-top: 18px;
	padding: 14px 40px;
	border: 0;
	border-radius: 12px;
	background-color: var(--vision-reg-red);
	color: var(--vision-reg-white);
	font-family: var(--vision-reg-morabba);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.vision-reg__btn:hover,
.vision-reg__btn:focus-visible {
	background-color: var(--vision-reg-red-hover);
	transform: translateY(-1px);
	outline: none;
}

.vision-reg__btn:active {
	transform: translateY(0);
}

.vision-reg__ticket.is-inactive {
	background-image: url('../assets/inactive-ticket-background.png');
}

.vision-reg__soldout {
	display: none;
	position: absolute;
	z-index: 4;
	top: 50%;
	left: 50%;
	width: min(72%, 280px);
	height: auto;
	pointer-events: none;
	transform: translate(-50%, -50%);
}

.vision-reg__ticket.is-soldout .vision-reg__soldout {
	display: block;
}

.vision-reg .vision-reg__btn:disabled,
.vision-reg .vision-reg__btn.is-disabled {
	background-color: #4c4c4c;
	cursor: not-allowed;
	pointer-events: none;
	transform: none;
	z-index: 99999;
}

.vision-reg .vision-reg__btn:disabled:hover,
.vision-reg .vision-reg__btn.is-disabled:hover,
.vision-reg .vision-reg__btn:disabled:focus-visible,
.vision-reg .vision-reg__btn.is-disabled:focus-visible {
	background-color: #4c4c4c;
	transform: none;
}

/* ------------------------------------------------------------------ */
/* Tablet                                                             */
/* ------------------------------------------------------------------ */

@media (max-width: 991px) {
	.vision-reg {
		padding: 56px 16px 72px;
	}

	:root {
		--vision-reg-ticket-h: 260px;
	}

	.vision-reg__divider {
		width: 72px;
		margin: 0 -18px;
	}

	.vision-reg__divider img {
		width: 72px;
		height: 72px;
	}

	.vision-reg__ticket {
		padding: 24px 22px 18px;
	}
}

/* ------------------------------------------------------------------ */
/* Mobile – stack cards vertically                                    */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.vision-reg {
		padding: 32px 16px 48px;
	}

	:root {
		--vision-reg-ticket-h: auto;
	}

	.vision-reg .vision-reg__title {
		margin-bottom: 8px;
		font-size: 16px;
	}

	.vision-reg__subtitle {
		margin-bottom: 8px;
		font-size: 12px;
		line-height: 1.7;
	}

	.vision-reg__header-border {
		width: min(100%, 260px);
		height: 8px;
		margin-bottom: 18px;
	}

	.vision-reg__pattern {
		width: min(220px, 55vw);
		height: min(220px, 55vw);
		opacity: 0.06;
	}

	.vision-reg__features {
		display: grid;
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 10px;
		margin-bottom: 20px;
		margin-top: -11px;
	}

	.vision-reg__feature {
		gap: 8px;
		font-size: 12px;
		line-height: 1.5;
	}

	.vision-reg__feature img {
		width: 36px;
		height: 22px;
	}

	/* Mobile stack: Club first, then SnappPay. */
	.vision-reg__feature--club {
		order: 1;
		grid-row: 1;
	}

	.vision-reg__feature--snapp {
		order: 2;
		grid-row: 2;
	}

	.vision-reg__tickets {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		row-gap: 0;
	}

	.vision-reg .vision-reg__ticket-title {
		margin-bottom: 4px;
		font-size: 16px;
		line-height: 1.3;
	}

	.vision-reg .vision-reg__ticket-desc {
		margin-bottom: 8px;
		margin-top: 4px;
		font-size: 13px;
		line-height: 1.5;
	}

	.vision-reg .vision-reg__ticket-desc-pct {
		font-size: 18px;
	}

	.vision-reg__price-wrap {
		gap: 6px;
		padding: 2px 0 8px;
	}

	.vision-reg__price {
		font-size: 36px;
		letter-spacing: -2px;
	}

	.vision-reg__price-currency {
		font-size: 13px;
	}

	.vision-reg .vision-reg__deadline {
		margin: 0 0 8px;
		font-size: 11px;
	}

	/* Stack order: early ticket, early btn, standard ticket, standard btn */
	.vision-reg__ticket--early,
	.vision-reg__ticket--standard {
		width: 100%;
		max-width: 100%;
		min-height: 188px;
		height: auto;
		padding: 16px 16px 12px;
	}

	.vision-reg__ticket--early {
		grid-column: 1;
		grid-row: 1;
	}

	.vision-reg .vision-reg__btn {
		max-width: 200px;
		margin-top: 12px;
		padding: 11px 28px;
		font-size: 18px;
		font-weight: 600;
	}

	.vision-reg__btn--early {
		grid-column: 1;
		grid-row: 2;
		width: auto;
		margin-bottom: 35px;
	}

	.vision-reg__ticket--standard {
		grid-column: 1;
		grid-row: 3;
	}

	.vision-reg__btn--standard {
		grid-column: 1;
		grid-row: 4;
		width: auto;
	}

	.vision-reg__countdown-holder {
		min-width: 168px;
		min-height: 40px;
		margin-bottom: 2px;
		padding: 4px 8px;
	}

	.vision-reg__countdown-item {
		width: 30px;
		gap: 2px;
	}

	.vision-reg__countdown-value {
		font-size: 16px;
	}

	.vision-reg__countdown-label {
		font-size: 7px;
	}

	.vision-reg__countdown-sep {
		font-size: 14px;
		padding: 0 1px;
	}

	/* Hide center logo on stacked mobile layout */
	.vision-reg__divider {
		display: none;
	}

	/* Keep the invisible deadline line so both tickets share the same height. */
	.vision-reg__deadline--spacer {
		display: block;
		visibility: hidden;
	}
}

/* ------------------------------------------------------------------ */
/* Small mobile                                                       */
/* ------------------------------------------------------------------ */

@media (max-width: 479px) {
	.vision-reg .vision-reg__title {
		font-size: 14px;
	}

	.vision-reg__subtitle {
		font-size: 11px;
	}

	.vision-reg__ticket--early,
	.vision-reg__ticket--standard {
		padding: 14px 14px 10px;
	}

	.vision-reg .vision-reg__ticket-title {
		font-size: 15px;
	}

	.vision-reg .vision-reg__ticket-desc {
		font-size: 12px;
	}

	.vision-reg .vision-reg__ticket-desc-pct {
		font-size: 16px;
	}

	.vision-reg__price {
		font-size: 32px;
		letter-spacing: -1.5px;
	}

	.vision-reg__price-currency {
		font-size: 12px;
	}

	.vision-reg .vision-reg__deadline {
		font-size: 10px;
	}

	.vision-reg__countdown-item {
		width: 28px;
	}

	.vision-reg__countdown-value {
		font-size: 20px;
		font-weight: 400;
	}

	.vision-reg__countdown-label {
		font-size: 6px;
	}

	.vision-reg__countdown-sep {
		font-size: 12px;
	}
}