/* eshtarynow — wp-login.php reskin (covers both the sign-in and the
   account-creation screen, since WordPress renders both from this file). */

body.login {
	background: linear-gradient(180deg, #eaf1ff 0%, #f6f9ff 100%);
	font-family: var(--eshn-font);
}

/* The real site header/footer (injected via the 'login_header'/'login_footer'
   hooks in functions.php) already carries the eshtarynow logo and the
   language switcher, so WordPress's own logo link and its page flow no
   longer need to center the whole body — only the login/register box
   itself, inside .eshn-login-main, is centered. */
body.login .eshn-login-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
	padding: 3rem 1rem;
}

/* WordPress's own "site name" logo link above the form is redundant now
   that the real header logo shows above it — hidden rather than removed,
   since core always renders this element regardless of filters. */
body.login h1.wp-login-logo {
	display: none;
}

body.login .eshn-required-star {
	color: var(--eshn-danger);
	margin-inline-start: .15em;
}

/* The dial code is derived from the visitor's already-chosen browsing
   country and isn't user-editable — styled as a fixed prefix glued to the
   number input so the two read as one control. Phone numbers conventionally
   read left-to-right even on an RTL page, so the whole group is locked to
   ltr regardless of the surrounding page direction: without this, Arabic
   would swap the dial box and input to opposite sides and the input itself
   would accept digits right-to-left. */
body.login .eshn-phone-field {
	display: flex;
	align-items: stretch;
	direction: ltr;
	/* Same explicit height as its children (below) — without this, the
	   wrapper was only as tall as its content (2.85rem) PLUS its own 1px
	   top+bottom border on top of that, ending up ~2px taller than the
	   input it's supposed to match. border-box only folds border/padding
	   into a height that's actually declared, not an auto one. */
	height: 2.85rem;
	border: 1px solid var(--eshn-border);
	border-radius: var(--eshn-radius-sm);
	background: var(--eshn-surface);
	overflow: hidden; /* clips the dial box's own background to these shared rounded corners */
	transition: border-color .15s var(--eshn-ease), box-shadow .15s var(--eshn-ease);
}
body.login-action-register .eshn-phone-field {
	/* Widens just the input side of the control (the dial box is
	   flex-shrink:0, so all of this extra room goes to the number field) —
	   only on the register page, not the rest of the form. */
	margin-inline: -1rem;
}
body.login .eshn-phone-field:focus-within {
	/* The border disappears into the glow instead of both showing at once. */
	border-color: transparent;
	box-shadow: 0 0 0 3px rgba(53, 89, 233, .15);
}
/* Neither child declares its own height — both stretch (align-items:
   stretch, above) to fill the wrapper's single explicit height exactly.
   Giving them an explicit height too would double-count the wrapper's own
   border on top of theirs, leaving the wrapper ~2px taller than either
   child instead of exactly matching. One explicit height, one source of
   truth, both children forced equal to it and to each other. */
body.login .eshn-phone-dial {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	padding: 0 .9em;
	background: var(--eshn-surface-2);
	color: var(--eshn-text-muted);
	font-weight: 600;
	border-inline-end: 1px solid var(--eshn-border);
}
body.login .eshn-phone-field input.input {
	flex: 1;
	min-width: 0;
	text-align: left;
	border: none;
	background: transparent;
}
body.login .eshn-phone-field input.input:focus {
	box-shadow: none;
	outline: none;
}

body.login #login {
	padding: 0;
	width: 80%;
	max-width: 960px; /* keeps 80% from stretching absurdly wide on very large screens */
}

body.login #loginform,
body.login #registerform {
	background: var(--eshn-surface);
	border-radius: var(--eshn-radius-lg);
	box-shadow: var(--eshn-shadow-lg);
	padding: 2.25rem 1.85rem;
	border: none;
}

body.login form label {
	color: var(--eshn-text);
	font-weight: 600;
	font-size: .88em;
}

body.login form .input,
body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"] {
	border: 1px solid var(--eshn-border);
	border-radius: var(--eshn-radius-sm);
	padding: .75em .9em;
	font-size: 1em;
	box-shadow: none;
	width: 100%;
	transition: border-color .15s var(--eshn-ease), box-shadow .15s var(--eshn-ease);
}

body.login form .input:focus,
body.login input:focus {
	border-color: var(--eshn-primary);
	box-shadow: 0 0 0 3px rgba(53, 89, 233, .15);
	outline: none;
}

body.login .wp-core-ui .button-primary {
	background: var(--eshn-primary);
	border-color: var(--eshn-primary);
	border-radius: var(--eshn-radius-sm);
	padding: .75em 1.4em;
	height: auto;
	font-weight: 700;
	font-size: 1em;
	box-shadow: none;
	text-shadow: none;
	width: 100%;
	text-align: center;
	transition: background-color .15s var(--eshn-ease), transform .15s var(--eshn-ease);
}

body.login .wp-core-ui .button-primary:hover,
body.login .wp-core-ui .button-primary:focus {
	background: var(--eshn-primary-dark);
	border-color: var(--eshn-primary-dark);
	transform: translateY(-1px);
}

body.login form p.submit {
	text-align: center;
	margin-top: 1.5rem;
}

body.login #nav,
body.login #backtoblog {
	text-align: center;
	padding: .5rem 0;
}

body.login #nav a,
body.login #backtoblog a {
	color: var(--eshn-primary-dark);
	font-size: .9em;
	font-weight: 600;
}

body.login #nav a:hover,
body.login #backtoblog a:hover {
	color: var(--eshn-primary);
	text-decoration: underline;
}

/* Terms and Conditions link, placed inside the login/register box itself
   (no language choice here — the site's default language, Arabic, applies) */
body.login .eshn-login-terms-row {
	text-align: center;
	margin: 1.5rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--eshn-border);
	font-size: .85em;
	color: var(--eshn-text-muted);
}
body.login .eshn-login-terms-row a { color: var(--eshn-primary); font-weight: 600; text-decoration: none; }
body.login .eshn-login-terms-row a:hover { text-decoration: underline; }

body.login .message,
body.login #login_error {
	border-radius: var(--eshn-radius-sm);
	border: none;
	box-shadow: var(--eshn-shadow-sm);
	padding: .9em 1em;
	background: var(--eshn-surface);
}

body.login #login_error {
	border-inline-start: 4px solid var(--eshn-danger);
	color: #7a1f13;
}

body.login .message {
	border-inline-start: 4px solid var(--eshn-success);
}

body.login .privacy-policy-page-link {
	text-align: center;
}

body.login p.forgetmenot {
	display: flex;
	align-items: center;
	gap: .4em;
	font-size: .92em;
}

/* RTL: WordPress adds the "rtl" body class automatically for RTL locales */
body.login.rtl #nav,
body.login.rtl #backtoblog {
	text-align: center;
}

/* Country <select> on the account-creation form: browsers sometimes
   mis-paint a native select's arrow (it can render pinned above the text
   instead of vertically centered, especially before web fonts finish
   loading and the box reflows). Taking over the arrow entirely with
   appearance:none + a fixed-position SVG chevron makes the position
   deterministic instead of relying on inconsistent native rendering. */
body.login select.input {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .9em center;
	background-size: 1em;
	padding-inline-end: 2.5em;
}
body.login.rtl select.input {
	background-position: left .9em center;
}