/*
 * My Account login/register page (Figma «Signup page», 246:9610). WoodMart's own markup already gives the
 * two-pane layout (`.wd-registration-page.wd-register-tabs`, theme option `login_tabs`); this file only re-skins
 * it. Scoped to `.wd-registration-page` so it never touches the rest of My Account (orders, addresses, ...).
 * The Figma frame is the REGISTER state (`?action=register`, body class `.active-register`); the default (login)
 * state reuses the same panel styling with the theme's own blurb text, since the design has no frame for it.
 */

/* the theme's own `.wd-registration-page{max-width:1000px}` (style-rtl.css) caps the OUTER wrapper, so widening
   #customer_login alone (the inner flex row) could never reach the Figma 1280: the parent was always narrower. */
.wd-registration-page.wd-register-tabs {
	width: calc(100% - 32px); /* phone: 16 px gutters */
	max-width: none;
}

@media (min-width: 1025px) {
	.wd-registration-page.wd-register-tabs {
		width: min(1280px, 100% - 128px);
	}
}

.wd-registration-page.wd-register-tabs #customer_login {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 16px;
	width: 100%;
	margin: 0 auto;
	padding: 64px 0;
	box-sizing: border-box;
}

/* full-bleed field + no theme content-area margin band under it (same two fixes as the 404/wishlist pages) */
body.araz-account-page .wd-page-content,
body.araz-account-page .main-page-wrapper {
	background: var(--ah-gray, #f5f5f5);
}

body.araz-account-page .wd-content-area {
	margin-block: 0 !important;
}

body.araz-account-page main.wd-content-layout {
	padding-bottom: 0 !important; /* the theme's own 40px band under the content, before the footer */
}

/* force the toggle from the server-rendered state: the theme's own JS does this too, but only after it runs,
   and this must not depend on it (e.g. with JS disabled or slow) */
.wd-registration-page.wd-register-tabs.active-register .col-login {
	display: none !important;
}

.wd-registration-page.wd-register-tabs:not(.active-register) .col-register {
	display: none !important;
}

/* the narrow panel: whichever form (login or register) is visible, Figma 804:460 => 62.8125 : 35.9375.
   Also resets the theme's own `.wd-grid-f-col > .wd-col` rule (margin-bottom: var(--wd-gap), 80px here) —
   #customer_login is flex now, not that grid, but the child-level rule still matched and inflated the row. */
.wd-registration-page.wd-register-tabs .col-login,
.wd-registration-page.wd-register-tabs .col-register,
.wd-registration-page.wd-register-tabs .col-register-text {
	margin: 0;
	/* the theme's own `.wd-grid-f-col > .wd-col{max-width:calc(100%/var(--wd-col))}` = 50% here (--wd-col:2),
	   capping the wider 62.8% panel back down to half */
	max-width: none;
}

.wd-registration-page.wd-register-tabs .col-login,
.wd-registration-page.wd-register-tabs .col-register {
	flex: 0 1 35.9375%;
	min-width: 0;
}

.wd-registration-page.wd-register-tabs .col-register-text {
	flex: 0 1 62.8125%;
	min-width: 0;
}

/* ------------------------------------------------------------ the white form card (shared: login and register) */
.wd-registration-page.wd-register-tabs .col-login,
.wd-registration-page.wd-register-tabs .col-register {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	background: var(--ah-card, #fff);
	border-radius: 24px;
}

.wd-registration-page.wd-register-tabs .col-login .wd-login-title,
.wd-registration-page.wd-register-tabs .col-register .wd-login-title {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 4px;
	margin: 0;
	font: 700 16px/32px var(--ah-font);
	color: var(--ah-purple);
	text-transform: none;
}

.wd-registration-page.wd-register-tabs .col-login .wd-login-title::after,
.wd-registration-page.wd-register-tabs .col-register .wd-login-title::after {
	content: "";
	order: -1; /* Figma: the icon sits at the RIGHT of the text (RTL start); a trailing pseudo-element would land on the left */
	width: 24px;
	height: 24px;
	background: url("../icons/account/user-circle.svg") center / contain no-repeat;
}

.wd-registration-page.wd-register-tabs .col-login form,
.wd-registration-page.wd-register-tabs .col-register form {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 504px; /* Figma 246:10759: fields on top, the consent line and the button pinned to the bottom (consent at y 375) */
}

/* every field row, both forms */
.wd-registration-page.wd-register-tabs :is(.woocommerce-form-row, .woocommerce-FormRow) {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: flex-start;
	margin: 0;
	padding: 8px 0;
}

.wd-registration-page.wd-register-tabs :is(.woocommerce-form-row, .woocommerce-FormRow) label {
	display: flex;
	margin: 0; /* the theme's label margin-bottom 5px sat on top of the 4 px gap: field 9 px under the label, Figma 4 (row 78 high, not 83) */
	gap: 4px;
	font: 400 12px/16px var(--ah-font);
	color: var(--ah-purple);
}

.wd-registration-page.wd-register-tabs :is(.woocommerce-form-row, .woocommerce-FormRow) label .required {
	color: #f11515;
}

.wd-registration-page.wd-register-tabs :is(.woocommerce-form-row, .woocommerce-FormRow) label .screen-reader-text,
.wd-registration-page.wd-register-tabs :is(.woocommerce-form-row, .woocommerce-FormRow) label .araz-optional {
	display: none;
}

/* the box is the input itself, the password one included (its .password-input wrapper and the eye: site.css, «password fields», #81) */
.wd-registration-page.wd-register-tabs :is(.woocommerce-form-row, .woocommerce-FormRow) .input-text {
	width: 100%;
	height: 42px;
	margin: 0;
	padding: 4px 12px;
	box-sizing: border-box;
	border: 1px solid var(--ah-border);
	border-radius: 4px;
	background: #fff;
	font: 400 16px/24px var(--ah-font);
	color: var(--ah-text);
	box-shadow: none;
}

/* ------------------------------------------------------------ register form: order, hidden rows, consent, submit */
/* Figma 247:10934: each field row is its own 78px block (already covered by the row's own 8px top/bottom
   padding below), with an 8px GAP between rows on top of that (pitch 86) — not zero. */
.wd-registration-page.wd-register-tabs .col-register form {
	gap: 8px;
}

/* the design shows نام / نام‌خانوادگی / شماره‌موبایل / گذرواژه: email and address (both optional) are not in the Figma
   frame. The company row is shown since #134 (the owner's question 3, required on this form), in the same Text Field
   component (310:3954) as the rows around it, after the mobile. */
.wd-registration-page.wd-register-tabs .col-register .woocommerce-form-row:has(#reg_email),
.wd-registration-page.wd-register-tabs .col-register .woocommerce-form-row:has(#araz_address) {
	display: none;
}

.wd-registration-page.wd-register-tabs .col-register .woocommerce-form-row:has(#araz_first_name) {
	order: 1;
}

.wd-registration-page.wd-register-tabs .col-register .woocommerce-form-row:has(#araz_last_name) {
	order: 2;
}

.wd-registration-page.wd-register-tabs .col-register .woocommerce-form-row:has(#araz_phone) {
	order: 3;
}

.wd-registration-page.wd-register-tabs .col-register .woocommerce-form-row:has(#araz_company) {
	order: 4;
}

.wd-registration-page.wd-register-tabs .col-register .woocommerce-form-row:has(#reg_password) {
	order: 5;
}

/* the intro line and the application questions (#134), between the password and the consent */
.wd-registration-page.wd-register-tabs .col-register .araz-questions {
	order: 6;
}

/* ------------------------------------------------------------ consent row (#35, Figma «Check Boxs» 311:4240 in 246:10563, 428 px wide)
   The DOM is in visual RTL order: the checkbox comes first and sits at the right end, the sentence follows on its left.
   Figma exports the row LTR (text first, box last), so the physical values below are the exported ones. */
.wd-registration-page.wd-register-tabs .col-register .araz-consent {
	order: 7;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	margin-top: auto;
	padding-top: 0;
}

/* 345:5910: a 30 px box, 8 px on the sentence's side, no right padding; 345:5912: padding 4 px top and bottom, 2 px sides;
   345:5913: the 20 px checkbox */
.wd-registration-page.wd-register-tabs .col-register .araz-consent__check {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	overflow: clip;
	padding: 4px 2px 4px 10px;
}

/* the states are the component's exports (345:5909): ticked (345:5908), not ticked (345:5910) and «Not Checked», orange
   (346:5973), which the box takes after a refused submit (the server adds .araz-consent--error) */
.wd-registration-page.wd-register-tabs .col-register .araz-consent__input {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: url("../icons/account/consent-box.svg") center / 20px 20px no-repeat;
	box-shadow: none;
	cursor: pointer;
}

.wd-registration-page.wd-register-tabs .col-register .araz-consent__input:checked {
	background-image: url("../icons/account/consent-checked.svg");
}

.wd-registration-page.wd-register-tabs .col-register .araz-consent--error .araz-consent__input:not(:checked) {
	background-image: url("../icons/account/consent-error.svg");
}

.wd-registration-page.wd-register-tabs .col-register .araz-consent__input:focus-visible {
	outline: 2px solid var(--ah-purple);
	outline-offset: 2px;
}

/* 246:10775 / 246:10776: flex 1, 12 px text on a 24 px line, right aligned */
.wd-registration-page.wd-register-tabs .col-register .araz-consent__text {
	flex: 1 0 0;
	min-width: 1px;
	margin: 0;
	font: 400 12px/24px var(--ah-font);
	color: var(--ah-text);
	text-align: right;
}

/* the theme sets label to block with a 5 px bottom margin: the sentence must stay one inline run */
.wd-registration-page.wd-register-tabs .col-register .araz-consent__text label {
	display: inline;
	margin: 0;
	cursor: pointer;
}

/* the policy title: bold purple, underlined from the font (Figma: decoration-from-font, skip-ink none). With approved
   text it is a link that opens the popup (#36); without a privacy page URL it is the same styling on a plain span (no link). */
.wd-registration-page.wd-register-tabs .col-register .araz-consent__link {
	font-weight: 700;
	color: var(--ah-purple);
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-underline-position: from-font;
}

/* ------------------------------------------------------------ policy popup (#36, Figma 311:5242 «info Pop-up», 560 px)
   Moved to <body> by assets/js/privacy-dialog.js, so these selectors do not rely on the form's ancestors. The frame's
   vertical centre is the viewport centre. The frame has no phone view: the card keeps 16 px gutters and the text box
   gets at most 60 % of the viewport height (the 567 px box stays on screen on a 375 x 812 phone). */
.araz-dialog {
	position: fixed;
	inset: 0;
	z-index: 10000;
	overscroll-behavior: contain;
	font-family: var(--ah-font);
}

/* 311:5165: the backdrop, rgba(91,78,205,0.2) with a 2 px blur. It is the only part that stops touch gestures (so the page
   behind cannot be dragged). It is a pseudo-element, not the overlay itself: touch-action is inherited by every element
   under the element that sets it, and the panel and the text box must keep touch scrolling. */
.araz-dialog::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(91, 78, 205, 0.2);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	touch-action: none;
}

.araz-dialog[hidden] {
	display: none;
}

html.araz-dialog-open,
html.araz-dialog-open body {
	overflow: hidden;
}

/* 311:5242: padding 16, gap 16, radius 24, white, items at the RIGHT (RTL cross-start) */
.araz-dialog__panel {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: min(560px, calc(100vw - 32px));
	max-height: calc(100dvh - 32px);
	padding: 16px;
	border-radius: 24px;
	background: #fff;
	overflow: hidden;
	outline: none;
}

/* 311:5370 «Content»: gap 8, full width */
.araz-dialog__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
	min-width: 0;
	overflow: hidden;
}

/* 311:5244 «title»: gap 4, the icon at the right, the title on its left (DOM: icon first) */
.araz-dialog__head {
	display: flex;
	align-items: center;
	gap: 4px;
	width: 100%;
}

.araz-dialog__icon {
	display: block;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	background: url("../icons/account/knitvision.svg") center / contain no-repeat;
}

/* 311:5245: Vazirmatn Bold 16 / 32, #5b4ecd, one line with an ellipsis */
.araz-dialog__title {
	flex: 1 0 0;
	min-width: 1px;
	margin: 0;
	overflow: hidden;
	font: 700 16px/32px var(--ah-font);
	color: var(--ah-purple);
	text-align: right;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 311:5253 «des»: 567 px tall, gap 8; the text first in DOM (it sits at the right), the track after it (at the left) */
.araz-dialog__body {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: min(567px, 60vh);
}

.araz-dialog__text {
	flex: 1 0 0;
	min-width: 1px;
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none; /* the designed track (311:5373) is the scroll indicator; the browser's own bar would sit beside it */
	font: 400 12px/24px var(--ah-font);
	color: var(--ah-text);
	text-align: right;
}

.araz-dialog__text::-webkit-scrollbar {
	display: none;
}

/* 311:5359: every paragraph and list is mb-0; the gaps between sections are blank 12 px paragraphs (line 24 px), which
   the approved text supplies itself. No margin is added here. */
.araz-dialog__text p {
	margin: 0;
}

.araz-dialog__text ul {
	margin: 0;
	padding: 0;
	list-style: disc;
}

.araz-dialog__text li {
	margin-inline-start: 18px;
}

.araz-dialog__text strong,
.araz-dialog__text b {
	font-weight: 700;
}

/* 311:5373 «Scroll»: an 8 px track (#f5f5f5, radius 4) with an 8 x 319 thumb (#9d95e1, radius 4) at its top */
.araz-dialog__track {
	position: relative;
	flex: 0 0 8px;
	width: 8px;
	height: 100%;
	border-radius: 4px;
	background: #f5f5f5;
	overflow: hidden;
}

.araz-dialog__thumb {
	position: absolute;
	top: 0;
	left: 0;
	width: 8px;
	height: 319px;
	border-radius: 4px;
	background: #9d95e1;
}

/* 311:5371 «fade bot»: 48 px, transparent to white, over the bottom of the text box */
.araz-dialog__fade {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 48px;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}

/* 311:5345 «button»: padding 4 / 16, radius 12, rgba(91,78,205,0.6), Vazirmatn Medium 16 / normal, white.
   Two classes deep: WoodMart's own button rule has the same specificity and loads later. */
.araz-dialog .araz-dialog__close {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin: 0;
	padding: 4px 16px;
	border: 0;
	border-radius: 12px;
	background: rgba(91, 78, 205, 0.6);
	color: #fff;
	font: 500 16px/normal var(--ah-font);
	cursor: pointer;
}

.araz-dialog .araz-dialog__close:focus-visible,
.araz-dialog__text:focus-visible {
	outline: 2px solid var(--ah-purple);
	outline-offset: 2px;
}

.wd-registration-page.wd-register-tabs .col-register .form-row-btn {
	order: 8;
	padding: 0; /* the form's own 8 px row gap is the design's 8 px above the button; the generic field row padding left it 8 px short of the card's bottom padding and 8 px too far from the consent line */
}

.wd-registration-page.wd-register-tabs .col-register .form-row-btn button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	height: auto;
	padding: 12px 16px !important;
	border: 0;
	border-radius: 12px !important;
	background: var(--ah-purple) !important;
	color: #fff;
	font: 500 16px/normal var(--ah-font);
	box-shadow: none;
}

.wd-registration-page.wd-register-tabs .col-register .form-row-btn button::after {
	content: "";
	order: -1; /* Figma: the icon is at the RIGHT of the label (RTL start); a trailing ::after lands on the left */
	width: 24px;
	height: 24px;
	background: url("../icons/account/confirm-check.svg") center / contain no-repeat;
}

/* the anti-spam honeypot stays off-screen (WooCommerce's own inline style); keep it out of the flex flow */
.wd-registration-page.wd-register-tabs .col-register form > div[style*="-999em"] {
	flex: 0 0 0;
}

/* ------------------------------------------------------------ the promo panel (col-register-text) */
.wd-registration-page.wd-register-tabs .col-register-text {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 16px 20px;
	background: #9d92f8;
	border-radius: 24px;
	overflow: hidden;
	text-align: center;
}

/* the theme's own «or / title / blurb» copy is never shown: both states carry the designer's picture and copy
   (login: Figma «login page» frame, register: 246:9610), only the pill button differs («عضویت» / «ورود») */
.wd-registration-page .col-register-text .wd-login-divider,
.wd-registration-page .col-register-text > .wd-login-title,
.wd-registration-page .col-register-text .registration-info,
.wd-registration-page .col-register-text .login-info {
	display: none;
}

.ah-acct-art {
	display: block;
	width: 435px;
	max-width: 100%;
	height: auto;
}

.ah-acct-copy {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 400px;
}

.ah-acct-copy__title {
	margin: 0;
	font: 700 36px/48px var(--ah-font);
	color: #fff;
	text-shadow: 0 2px 0 var(--ah-purple);
	text-transform: none;
}

.ah-acct-copy__text {
	margin: 0;
	font: 400 16px/24px var(--ah-font);
	color: rgba(0, 0, 0, .87);
	text-align: justify;
}

.wd-registration-page.wd-register-tabs .wd-switch-to-register {
	position: absolute;
	top: 32px;
	left: 32px; /* Figma's own literal left, not the RTL inline-start (which would be the right edge) */
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 12px 16px;
	border: 0;
	border-radius: 12px;
	background: var(--ah-purple);
	color: #fff !important;
	font: 500 16px/normal var(--ah-font);
}

.wd-registration-page.wd-register-tabs .wd-switch-to-register::after {
	content: "";
	order: -1; /* Figma: the icon is at the RIGHT of the label (RTL start); a trailing ::after lands on the left */
	width: 24px;
	height: 24px;
	background: url("../icons/account/sign-in.svg") center / contain no-repeat;
}

@media (max-width: 1024px) {
	.wd-registration-page.wd-register-tabs #customer_login {
		flex-direction: column;
	}

	.wd-registration-page.wd-register-tabs .col-login,
	.wd-registration-page.wd-register-tabs .col-register,
	.wd-registration-page.wd-register-tabs .col-register-text {
		flex: 1 1 auto;
	}
}

/* ------------------------------------------------------------ login form (Figma «login page»): same card, fields at the top,
   «مرا به خاطر بسپار» and the lost-password link under them, the button pinned to the bottom */
.wd-registration-page.wd-register-tabs .col-login form.woocommerce-form-login {
	display: flex !important; /* the theme sets display:block on form.login with !important */
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 504px;
	gap: 8px;
}

.wd-registration-page.wd-register-tabs .col-login .form-row-username {
	order: 1;
}

.wd-registration-page.wd-register-tabs .col-login .form-row-password {
	order: 2;
}

/* the footer paragraph holds the remember-me label and the lost-password link: lift them into the form's flex flow */
.wd-registration-page.wd-register-tabs .col-login .login-form-footer {
	display: contents;
}

.wd-registration-page.wd-register-tabs .col-login .woocommerce-form-login__rememberme {
	order: 3;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	margin: 0;
	padding: 4px 0;
	font: 400 12px/24px var(--ah-font);
	color: var(--ah-text);
}

.wd-registration-page.wd-register-tabs .col-login .woocommerce-form-login__rememberme input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: url("../icons/archive/check-off.svg") center / 20px no-repeat;
	box-shadow: none;
}

.wd-registration-page.wd-register-tabs .col-login .woocommerce-form-login__rememberme input[type="checkbox"]:checked {
	background-image: url("../icons/archive/check-on.svg");
}

.wd-registration-page.wd-register-tabs .col-login .woocommerce-form-login__rememberme input[type="checkbox"]::before,
.wd-registration-page.wd-register-tabs .col-login .woocommerce-form-login__rememberme input[type="checkbox"]::after {
	content: none;
}

.wd-registration-page.wd-register-tabs .col-login .woocommerce-LostPassword {
	order: 4;
	align-self: flex-start;
	font: 400 12px/24px var(--ah-font);
	color: var(--ah-purple);
	text-decoration: underline;
}

.wd-registration-page.wd-register-tabs .col-login .form-row-btn {
	order: 6;
	margin: auto 0 0; /* pinned to the bottom; the theme's .form-row margin-bottom (20 px) would lift it */
	padding: 0;
}

.wd-registration-page.wd-register-tabs .col-login .form-row-btn button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	height: auto;
	padding: 12px 16px !important;
	border: 0;
	border-radius: 12px !important;
	background: var(--ah-purple) !important;
	color: #fff;
	font: 500 16px/normal var(--ah-font);
	box-shadow: none;
}

.wd-registration-page.wd-register-tabs .col-login .form-row-btn button::after {
	content: "";
	order: -1; /* Figma: the icon is at the RIGHT of the label (RTL start); a trailing ::after lands on the left */
	width: 24px;
	height: 24px;
	background: url("../icons/account/sign-in.svg") center / contain no-repeat;
}

/* ------------------------------------------------------------ refused sign-up (Figma «Signup page alert», 305:3628)
   Frame 672: header, 24 px, the warning bar (56 high, as wide as the two panels), 12 px, the panels, 12 px of the frame's
   own padding + 24 px, the footer. The empty fields take the same orange. The theme's own bar (white text, font icon,
   its own paddings) is replaced on this page only. The bar and the spacing key on the notice itself (:has); the orange
   fields key on `.araz-register-failed` (Account::body_class), so a failed LOGIN does not colour the register form. */
.araz-account-page .woocommerce-notices-wrapper {
	width: calc(100% - 32px);
	margin: 0 auto;
}

@media (min-width: 1025px) {
	.araz-account-page .woocommerce-notices-wrapper {
		width: min(1280px, 100% - 128px);
	}
}

/* the 24 px under the header is PADDING on the content, not a margin on the bar: a margin collapses through the grey
   .wd-page-content and leaves a white band above the bar (the theme's own 40 px band is replaced by it) */
.araz-account-page:has(.woocommerce-notices-wrapper .woocommerce-error) main.wd-content-layout {
	padding-top: 24px !important;
}

.araz-account-page .woocommerce-notices-wrapper .woocommerce-error {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	margin: 0;
	padding-block: 16px;
	padding-inline: 48px 16px !important; /* the icon sits at the start (right in RTL): 24 px + 8 px gap; the theme sets 65/30 */
	box-sizing: border-box;
	border: 0;
	box-shadow: inset 0 0 0 1px #ff861b; /* Figma strokes are inside: the bar stays 56 px high */
	border-radius: 16px;
	background: #ffe1b3;
	color: var(--ah-text2);
	font: 400 16px/24px var(--ah-font);
	text-align: start;
}

.araz-account-page .woocommerce-notices-wrapper .woocommerce-error::before {
	content: "";
	position: absolute;
	top: 16px;
	right: 16px; /* RTL: the start edge */
	left: auto;
	width: 24px;
	height: 24px;
	margin: 0;
	background: url("../icons/account/attention-alert.svg") center / contain no-repeat;
	font-size: 0;
}

.araz-account-page .woocommerce-notices-wrapper .woocommerce-error li {
	margin: 0;
	padding: 0;
	color: inherit;
}

.araz-account-page .woocommerce-notices-wrapper .woocommerce-error li::before {
	content: none;
}

/* 12 px to the panels, 36 px (12 + 24) to the footer */
.araz-account-page:has(.woocommerce-notices-wrapper .woocommerce-error) #customer_login {
	padding: 12px 0 36px;
}

/* each field that is still empty (Figma 305:3740): 1 px #ff861b, #fff8ec, radius 4 (the password input is an .input-text too) */
.araz-account-page.araz-register-failed .col-register .input-text:placeholder-shown {
	border-color: #ff861b;
	background: #fff8ec;
}

/* ------------------------------------------------------------ application questions (araz-customers, `.araz-question`, #134)
   Every value below is from get_design_context (file vHWADW7DYoP0PRSbFuYlyl) through figma-ctx-to-css.py; node ids in the
   comments. The sign-up frame has no question rows, so they take the design system's components as the panel 247:11728
   uses them: the Text Field row (332:13520: label 310:3951, box 310:3954), the DropDown variant 359:12613, and the check-box
   row 247:11871 with the Checkbox set 345:5909. The design system has NO radio: the radio rows are the check-box row with a
   round box drawn in the Checkbox set's colours (icons/account/radio-*.svg). Scoped to WooCommerce's register form, so it
   holds with or without the theme's two-pane wrapper. */

/* the block: the intro line, then one row per question; 247:11906: a column, 8 px between rows */
.woocommerce-form-register .araz-questions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
	width: 100%;
}

/* the intro line: the panel's 12 / 24 text (247:11873) */
.woocommerce-form-register .araz-questions__intro {
	margin: 0;
	font: 400 12px/24px var(--ah-font);
	color: rgba(0, 0, 0, .87);
	text-align: right;
}

/* a conditional question while its parent's answer does not ask it (the script toggles `hidden`) */
.woocommerce-form-register .araz-question[hidden] {
	display: none;
}

/* 332:13520 (Text Field row): a column, 4 px between label and box, 8 px above and below, at most 500 wide. The frame's
   `items-end` is its LTR export's right edge: on this RTL page that edge is `flex-start` (as on the rows above) */
.woocommerce-form-register .araz-question {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	max-width: 500px;
	margin: 0;
	padding: 8px 0;
	font-family: var(--ah-font);
}

/* 310:3951: the label row, 12 / 16, the asterisk (310:3952, #f11515) and the title (310:3953, #5b4ecd) 4 apart */
.woocommerce-form-register .araz-question > label:not(.araz-question__choice),
.woocommerce-form-register .araz-question__label {
	display: flex;
	gap: 4px;
	align-items: flex-start;
	margin: 0;
	font: 400 12px/16px var(--ah-font);
	color: #5b4ecd;
	text-align: right;
}

.woocommerce-form-register .araz-question .required {
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: #f11515;
}

/* 310:3954 / 359:12617: the box, 42 high, white, 1 px #e0e0e0, radius 4, padding 4 12, text 16 / 24 rgba(0,0,0,.87) */
.woocommerce-form-register .araz-question :is(input.input-text, select.input-text, textarea.input-text) {
	width: 100%;
	margin: 0;
	padding: 4px 12px;
	box-sizing: border-box;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	background-color: #fff;
	font: 400 16px/24px var(--ah-font);
	color: rgba(0, 0, 0, .87);
	box-shadow: none;
}

.woocommerce-form-register .araz-question :is(input.input-text, select.input-text) {
	height: 42px;
}

.woocommerce-form-register .araz-question textarea.input-text {
	height: auto;
	min-height: 96px;
	padding-block: 8px;
	resize: vertical;
}

/* 359:12617 / 359:12618: a drop-down's ▾ is the frame's own 24 px export at the start of the box's left side, 12 in */
.woocommerce-form-register .araz-question select.input-text {
	-webkit-appearance: none;
	appearance: none;
	background-image: url("../icons/select-arrow.svg");
	background-repeat: no-repeat;
	background-position: left 12px center;
	background-size: 24px 24px;
}

/* 359:12619: the empty choice reads in the frame's «disable» colour */
.woocommerce-form-register .araz-question select.input-text:has(option[value=""]:checked) {
	color: rgba(0, 0, 0, .12);
}

/* the choice rows of one question: the panel's 8 px between rows (247:11906) */
.woocommerce-form-register .araz-question__choices {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

/* 247:11871 «Check Boxs»: one row, the box at the right end (first in the DOM, RTL), the text filling the rest.
   justify-content is the frame's own value; the text's flex 1 leaves it nothing to move. */
.woocommerce-form-register .araz-question label.araz-question__choice {
	display: flex;
	gap: 0; /* the panel's label rule (gap 4) is for a field's title, not this row: 247:11871 has no gap */
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	margin: 0;
	cursor: pointer;
}

/* 247:11873: the option's text, 12 / 24 Vazirmatn, rgba(0,0,0,.87), right aligned, flex 1 0 0 */
.woocommerce-form-register .araz-question__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1 0 0;
	min-width: 1px;
	font: 400 12px/24px var(--ah-font);
	color: rgba(0, 0, 0, .87);
	text-align: right;
}

/* 247:11875: 8 px between the box and the text (its left), none on the right */
.woocommerce-form-register .araz-question__box {
	display: flex;
	flex-shrink: 0;
	align-items: flex-start;
	padding: 0 0 0 8px;
}

/* 247:11876: 4 px above and below the box, clipped */
.woocommerce-form-register .araz-question__tick {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	overflow: clip;
	padding: 4px 0;
}

/* 247:11877 / 345:5913: the 20 px box. The states are the Checkbox set's exports (345:5909): not ticked (345:5910),
   ticked (345:5908), and «Not Checked» (346:5973), orange, on a required group left empty after a refused submit. */
.woocommerce-form-register .araz-question__input {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: url("../icons/account/consent-box.svg") center / 20px 20px no-repeat;
	box-shadow: none;
	cursor: pointer;
}

.woocommerce-form-register .araz-question__input:checked {
	background-image: url("../icons/account/consent-checked.svg");
}

/* the radio: no radio in the design system (#134); the same box drawn round in the same colours */
.woocommerce-form-register .araz-question__input[type="radio"] {
	background-image: url("../icons/account/radio-box.svg");
}

.woocommerce-form-register .araz-question__input[type="radio"]:checked {
	background-image: url("../icons/account/radio-checked.svg");
}

.woocommerce-form-register .araz-question__input:focus-visible {
	outline: 2px solid #5b4ecd;
	outline-offset: 2px;
}

.araz-account-page.araz-register-failed .col-register .araz-question:has(.required):not(:has(:checked)) .araz-question__input {
	background-image: url("../icons/account/consent-error.svg");
}

.araz-account-page.araz-register-failed .col-register .araz-question:has(.required):not(:has(:checked)) .araz-question__input[type="radio"] {
	background-image: url("../icons/account/radio-error.svg");
}

.woocommerce-form-register .araz-question__help {
	font: 400 12px/16px var(--ah-font);
	color: var(--ah-muted);
}