/* ==========================================================================
   تسجيل الدخول — node 7689:1341
   انشاء حساب  — node 7720:6615

   One centred .v3-formcard on the cream ground. The two screens are the same
   shell; register differs only in that its fields sit in two columns.

   Vertical rhythm, measured off node 7689:1435 (the card's 544-wide content):

     head            0    78     h1 38, 16 gap, p 24
     fields        134   192     two 88-tall fields on a 104 pitch
     aside link    350    16
     actions       398   112     a 360-wide CTA, 16 gap, the switch link

   which is 510, plus the card's 24 block padding, giving the 558 Figma draws.
   ========================================================================== */

.v3-auth {
	position: relative;
	/* The card sits at y=160 of the section and the navbar is 111 tall. */
	padding: 49px var(--v3-space-5) 130px;
	background: var(--v3-bg-page);
	overflow: hidden;                    /* the glow below runs off the left */
}

/* Node 7689:1358 — two overlapping blurred discs low on the section's left.
   Barely visible against the cream; they lift the flat ground very slightly. */
.v3-auth__glow {
	position: absolute;
	left: -74px;
	top: 392px;
	width: 469px;
	height: 604px;
	border-radius: 50%;
	background: var(--v3-white);
	filter: blur(180px);
	pointer-events: none;
	z-index: 0;
}

.v3-auth__card {
	position: relative;
	z-index: 1;
}

.v3-auth__form {
	display: flex;
	flex-direction: column;
	/* 134 - 78: the gap under the heading, carried by the form rather than the
	   heading so register can keep the same rhythm with a different field grid */
	margin-top: 56px;
	gap: var(--v3-space-4);              /* 16px between fields */
}

/* Node 7689:1452 — the forgot link, 24 under the last field. It is a block so
   it can hold the whole row; the text itself sits at the start (right). */
.v3-auth__aside {
	margin-top: 8px;                     /* 24 total, less the form's 16 gap */
	font-size: var(--v3-fs-caption);     /* 14px */
	font-weight: var(--v3-fw-medium);
	line-height: var(--v3-lh-auto);
	text-align: right;
}

/* Node 7689:1434 — 360 wide, centred in the 544 content, 32 under the link. */
.v3-auth__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--v3-space-4);              /* 16px */
	width: 360px;
	max-width: 100%;
	margin: 16px auto 0;                 /* 32 total, less the form's 16 gap */
}

.v3-auth__submit {
	width: 100%;
}

/* Node 7720:6636 — 270 wide, where login's is 360. */
.v3-auth--register .v3-auth__actions { width: 270px; }

/* Figma draws this as a second Button instance, but it renders as a line of
   text with the action underlined — so it is text with a link in it, not a
   button that happens to look like one. */
.v3-auth__switch {
	margin: 0;
	color: var(--v3-text-tertiary);
	font-size: var(--v3-fs-caption);
	font-weight: var(--v3-fw-medium);
	line-height: 48px;                   /* the Button instance it replaces */
	text-align: center;
}

.v3-auth__switch a {
	font-weight: var(--v3-fw-semibold);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   انشاء حساب — the same card with the fields in two columns.
   -------------------------------------------------------------------------- */

.v3-auth__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--v3-space-4);              /* 16px both ways */
}

/* A field that runs the width of the grid rather than taking one column. */
.v3-field--wide { grid-column: 1 / -1; }

/* The consent row and the "I already have an account" link share a line. */
.v3-auth__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--v3-space-4);
	margin-top: 8px;
}

.v3-auth__consent {
	display: flex;
	align-items: center;
	gap: var(--v3-space-2);              /* 8px */
	color: var(--v3-green-900);
	font-size: var(--v3-fs-caption);
	font-weight: var(--v3-fw-medium);
	line-height: 20px;                   /* the row is 20 tall — node 7720:6632 */
	cursor: pointer;
}

.v3-auth__consent input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--v3-orange-500);
	cursor: pointer;
}

.v3-auth__row a {
	font-size: var(--v3-fs-caption);
	font-weight: var(--v3-fw-medium);
	line-height: 20px;
	text-decoration: underline;
	white-space: nowrap;
}

/* ==========================================================================
   RESPONSIVE — DERIVED
   ========================================================================== */

@media (max-width: 900px) {
	.v3-auth { padding: 40px var(--v3-space-5) 72px; }
	.v3-auth__glow { display: none; }
	.v3-auth__form { margin-top: 40px; }
	.v3-formcard__head h1 { font-size: var(--v3-fs-h4); }
	.v3-formcard__head p { font-size: var(--v3-fs-body); }
}

@media (max-width: 600px) {
	.v3-auth { padding: 24px var(--v3-space-4) 56px; }
	.v3-formcard { padding: var(--v3-space-5) var(--v3-space-5); border-radius: 20px; }
	.v3-auth__form { margin-top: 32px; }
	/* One column: two 56px pills side by side on a phone leaves no room to type */
	.v3-auth__grid { grid-template-columns: minmax(0, 1fr); }
	.v3-auth__row { flex-direction: column; align-items: flex-start; gap: var(--v3-space-3); }
	.v3-auth__actions { width: 100%; }
}



/* ==========================================================================
   THE APP'S THREE AUTH SCREENS
   — 6785:6545 (تسجيل الدخول), 6785:6778 (انشاء حساب), 6785:9062 (نسيت كلمة المرور)

   SAME MARKUP, DIFFERENT SHELL. The fields, the button and the links are the
   web's; what goes is everything around them — the navbar, the tab bar, the
   white card, and the label above each field. What arrives is the app mark at
   the top. The page is the layout.

   No tab bar is not an oversight: these are the screens you see before there is
   an account for a tab bar to belong to. The rule that used to leave 95px of
   clearance here is gone with it — and it had never fired anyway, because none
   of these views set .v3-app on the body until now.

   EVERY VERTICAL NUMBER IS FIGMA'S MINUS 52, not the 44 the rest of the app
   uses: these three frames open with an 8px inset above the 44px iOS status
   bar, where the screens built so far open with the status bar alone. Read 44
   here and everything lands 8 low.

   The rhythm is 32 between blocks and 16 within them, on all three screens.
   ========================================================================== */

.v3-app .v3-auth {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 44px 20px 40px;             /* 96 - 52 */
	overflow: visible;                   /* nothing left to clip */
}

/* A 180px blur behind a 335-wide column is just a lighter page. */
.v3-app .v3-auth__glow { display: none; }

/* THE MARK — 6785:6598. Figma composes it as a 72 square with the 40px fist
   centred in it; the fist is /img/favicon.png, which is the mark on its own
   with no plate, so the plate is drawn here. */
.v3-authmark {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	flex: 0 0 auto;
	border-radius: 22px;
	background: var(--v3-orange-500);
}

.v3-authmark img {
	display: block;
	width: 40px;
	height: 40px;
	object-fit: contain;
}

/* NO CARD. Every one of these has to be turned off by hand — .v3-formcard is a
   white panel with a border, a shadow and 24/32 of padding, and in the app the
   form sits on the page ground with none of it. */
.v3-app .v3-auth__card {
	width: 100%;
	max-width: 335px;
	margin: 32px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

/* 24 Bold over 16 Medium, 8 apart — where the web has 32 SemiBold over 24 and
   16 apart. Both numbers are set because the 600px breakpoint above already
   moves them, and this has to win on a 375 screen. */
.v3-app .v3-formcard__head { gap: 8px; }

.v3-app .v3-formcard__head h1 {
	font-size: var(--v3-fs-m-h2);        /* 24 */
	font-weight: var(--v3-fw-bold);
	line-height: var(--v3-lh-auto);
}

.v3-app .v3-formcard__head p {
	font-size: var(--v3-fs-m-body);      /* 16 Medium */
	font-weight: var(--v3-fw-medium);
	line-height: var(--v3-lh-auto);
}

/* 87 - 55: the heading block is 55 tall and the fields start at 87. */
.v3-app .v3-auth__form { margin-top: 32px; }

/* THE LABELS GO, BUT ONLY TO LOOK AT. Each placeholder already says what the
   label says, and Figma has no labels on these screens — but a placeholder is
   not a label to a screen reader, and it disappears the moment there is a
   value. So they are hidden the accessible way rather than display:none. */
.v3-app .v3-auth .v3-field__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

/* ONE COLUMN. The 600px breakpoint above already does this; restated because
   the app is defined by isApp rather than by width, and a 430-wide phone in
   landscape would otherwise get two columns of 56px pills. */
.v3-app .v3-auth__grid { grid-template-columns: minmax(0, 1fr); }

.v3-app .v3-auth__actions { width: 100%; }

/* Under the button, 16 below it and 19 tall — not the 48-line pseudo-button the
   web draws. */
.v3-app .v3-auth__switch {
	font-size: var(--v3-fs-m-body);
	line-height: var(--v3-lh-auto);
	color: var(--v3-green-800);
}

.v3-app .v3-auth__switch a {
	color: var(--v3-orange-500);
	font-weight: var(--v3-fw-semibold);
	text-decoration: none;
}

/* ---- انشاء حساب ------------------------------------------------------- */

.v3-app .v3-auth--register .v3-auth__actions { width: 100%; }

/* The consent keeps its line to itself: the app moved لدي حساب بالفعل under the
   button, where login's twin is, so the row has one child again. */
.v3-app .v3-auth__rowlink { display: none; }

/* ---- نسيت كلمة المرور -------------------------------------------------- */

/* One field and a button, 16 apart — 6785:9111. Everywhere else the button is
   32 below what precedes it, and .v3-auth__actions buys that second 16 with a
   margin; here the form's own gap is the whole distance. */
.v3-auth--forgot .v3-auth__actions { margin-top: 0; }

/* THE CTA IS 56 IN THE APP, and a phone otherwise gets 44: the 600px block in
   components.css shrinks .v3-btn--md twice over, on the reasoning that the
   desktop size is too heavy on a small screen. Figma disagrees for this one —
   335x56 on a 375 frame is the whole width of the column, and it is the only
   button on the screen.

   The shine goes back with it. .v3-btn--md::after repositions the right arc for
   a 48 box; at 56 those offsets leave it floating short of the corner, and the
   base geometry is the one that belongs to this height. */
.v3-app .v3-auth__submit {
	height: var(--v3-btn-h-lg);
	font-size: var(--v3-fs-m-body);
	font-weight: var(--v3-fw-semibold);
}

.v3-app .v3-auth__submit::after {
	top: 4.95px;
	right: 6px;
	width: 30.0015px;
	height: 24.1013px;
}

/* هل نسيت كلمة المرور؟ is 8 under the last field here and 24 on the web —
   6785:6557. The form's own 16px gap already overshoots that, so this pulls
   back rather than pushing down: the alternative is a second element order for
   the app, and one negative margin is the smaller lie. */
.v3-app .v3-auth__aside { margin-top: -8px; }

/* ---- انشاء حساب's own two numbers -------------------------------------- */

/* IT STARTS AT THE TOP OF THE WEBVIEW, where the other two start 44 down —
   6785:6783 puts the mark at y=60 against login's y=96. The form is five fields
   long (seven here) and the design buys the room back from the space above it.

   The mark is 64 rather than 72 for the same reason. */
.v3-app .v3-auth--register { padding-top: 8px; }

.v3-app .v3-auth--register .v3-authmark {
	width: 64px;
	height: 64px;
	border-radius: 20px;
}

/* THE CONSENT BOX IS DRAWN, not a native checkbox: a 20px green square with a
   6px radius and a white tick — 6785:6799. accent-color alone gets the fill and
   the tick but never the corners, and at 20px square-versus-rounded is the
   whole difference between it and the browser's default.

   The tick is a background image so the box stays one element; the same
   /img/v3/tick.svg the rest of the app uses. */
.v3-app .v3-auth__consent input {
	appearance: none;
	-webkit-appearance: none;
	border: 1.5px solid var(--v3-green-800);
	border-radius: 6px;
	background: var(--v3-bg-surface);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
	transition: background-color .12s ease;
}

.v3-app .v3-auth__consent input:checked {
	background-color: var(--v3-green-800);
	background-image: url("/img/v3/tick.svg");
}

.v3-app .v3-auth__consent input:focus-visible {
	outline: 2px solid var(--v3-orange-500);
	outline-offset: 2px;
}

/* ==========================================================================
   التحقق من رقم الهاتف — DERIVED, no frame

   login's shell with a code field in it, the same way --forgot derives its web
   layout. Only the three things a code screen has that a login does not are
   here: the number it was sent to, the field itself, and the countdown.
   ========================================================================== */

/* The number sits inside a right-to-left sentence and reads left-to-right, so
   it is marked dir="ltr" in the markup; this is only its weight and colour. */
.v3-verify__phone {
	color: var(--v3-green-900);
	font-weight: var(--v3-fw-bold);
	unicode-bidi: isolate;               /* keeps the + on the correct end */
}

/* Six digits, centred and spaced, because that is what a code field is for —
   a left-aligned run of 6 characters in a 544 box reads as an empty input. */
.v3-verify__code {
	text-align: center;
	font-size: var(--v3-fs-h4);
	font-weight: var(--v3-fw-bold);
	letter-spacing: .38em;
	/* the tracking is between the digits, so the last one sits off-centre
	   without this taking the trailing gap back */
	text-indent: .38em;
}

.v3-verify__code::placeholder {
	letter-spacing: .38em;
	font-weight: var(--v3-fw-medium);
}

.v3-verify__resend {
	margin: var(--v3-space-4) 0 0;
	color: var(--v3-text-secondary);
	font-family: var(--v3-font);
	font-size: var(--v3-fs-caption);
	font-weight: var(--v3-fw-medium);
	line-height: var(--v3-lh-auto);
	text-align: center;
}

/* #counter is rewritten every second by /js/phone-verification.js. */
.v3-verify__resend #counter {
	color: var(--v3-green-900);
	font-weight: var(--v3-fw-bold);
	font-variant-numeric: tabular-nums;  /* so the line does not twitch */
}

/* A DESCENDANT SELECTOR, NOT A CLASS, and deliberately.

   When the countdown ends the script REPLACES this element's innerHTML with
   `<a class="cursor-pointer fw-bold text-blurple" onclick="resendCode(this)">`
   — v2's markup, which we do not get to choose. Styling by class would mean
   editing that string; styling the descendant catches it whatever it arrives
   as, and stops MDB's a:hover turning it blue. */
.v3-verify__resend a,
.v3-verify__resend a:link,
.v3-verify__resend a:visited,
.v3-verify__resend a:hover,
.v3-verify__resend a:focus,
.v3-verify__resend a:active {
	color: var(--v3-orange-500);
	font-weight: var(--v3-fw-bold);
	text-decoration: none;
	cursor: pointer;
}

/* The countdown already provides the gap login's actions row buys with a
   margin — see the note on --forgot, which does the same for its own reason. */
.v3-auth--verify .v3-auth__actions { margin-top: 0; }