/*
 * ویجت ورود/ثبت‌نام گران‌ست — the front-end popup behind the header account icon.
 *
 * This is the login most visitors actually use: wp-login.php is only reached
 * by staff. The plugin ships it as a plain white card with a pale blue active
 * tab and a black button, which matches nothing else on the site. This gives
 * it the same dark green glass treatment as the login screen.
 *
 * The plugin's own rules are scoped `#pepro-profile .pepro-login-reg-container
 * …`, one ID deep, so these repeat that prefix — class-only rules lose. Where
 * the plugin writes styles inline on the element (the `h6` headings) there is
 * no way round !important.
 */

/*
 * A note on weight: the plugin prints a second, inline copy of main-form.css
 * after this file, so a rule of equal specificity always loses on order no
 * matter how late this is enqueued. The rules below therefore carry one extra
 * class rather than !important.
 */

:root {
	--gsw-green: #163d30;
	--gsw-green-deep: #0d2419;
	--gsw-gold: #d8ae6d;
	--gsw-cream: #f4ece0;
	--gsw-muted: #b9c7bd;
}

/* ---------- backdrop ---------- */

#pepro-profile .login-form-container {
	background: rgba( 6, 20, 14, .62 ) !important;
	-webkit-backdrop-filter: blur( 6px );
	backdrop-filter: blur( 6px );
}

/* ---------- the card ---------- */

/* Same recipe as the login screen card (assets/geranset-login.css): lit top
   edge, deep green glass, faint gold keyline and outer cream ring. */
#pepro-profile .pepro-login-reg-container {
	box-sizing: border-box;
	padding: 26px 24px 22px;
	border-radius: 26px;
	border: 1px solid rgba( 216, 174, 109, .28 );
	background:
		linear-gradient( 180deg, rgba( 250, 243, 230, .1 ) 0%, rgba( 250, 243, 230, .02 ) 18%, transparent 40% ),
		linear-gradient( 170deg, rgba( 45, 92, 58, .92 ) 0%, rgba( 26, 59, 36, .95 ) 55%, rgba( 18, 42, 26, .97 ) 100% );
	box-shadow:
		inset 0 1px 0 rgba( 250, 243, 230, .22 ),
		0 0 0 6px rgba( 253, 249, 239, .045 ),
		0 26px 60px rgba( 0, 0, 0, .5 );
	color: var( --gsw-cream );
}

/* The forms inside the card come with their own white bordered panel (UPS
   paints it on #pepro-login-inline / #pepro-reg-inline on the profile page);
   the card supplies the surface, so the inner panel goes flat. !important
   because the plugin's inline copy of these rules prints after this file. */
#pepro-profile .pepro-login-reg,
#pepro-profile form#pepro-login-inline,
#pepro-profile form#pepro-reg-inline {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	width: 100% !important;
	max-width: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ---------- tab switcher ---------- */

#pepro-profile .pepro-login-reg-container .switcher {
	gap: 4px;
	padding: 4px;
	margin-bottom: 20px;
	border-radius: 14px;
	background: rgba( 0, 0, 0, .26 );
	border: 1px solid rgba( 255, 255, 255, .1 );
}

#pepro-profile .pepro-login-reg-container .switcher a,
#pepro-profile .pepro-login-reg-container .switcher a.second,
[dir="rtl"] #pepro-profile .pepro-login-reg-container .switcher a,
[dir="rtl"] #pepro-profile .pepro-login-reg-container .switcher a.second {
	padding: 9px 8px;
	/* The plugin gives each tab a hard 2px black border and squares off the
	   inner corners to butt them together; as pills they need neither. */
	border: 0;
	border-radius: 11px;
	font-size: 14px;
	font-weight: 600;
	color: var( --gsw-muted );
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}

#pepro-profile .pepro-login-reg-container .switcher a:hover {
	color: var( --gsw-cream );
	background: rgba( 255, 255, 255, .07 );
}

/* Which tab is lit comes from a class on the container, not on the tab. */
#pepro-profile .pepro-login-reg-container.via-email-active .switcher a.switch-email,
#pepro-profile .pepro-login-reg-container.via-sms-active .switcher a.switch-mobile {
	color: #fff;
	background:
		linear-gradient( 180deg, rgba( 255, 255, 255, .32 ), rgba( 255, 255, 255, .04 ) 48%, rgba( 255, 255, 255, 0 ) 48% ),
		linear-gradient( 180deg, #55b083, #2f6b4a );
	box-shadow:
		0 4px 12px rgba( 6, 26, 17, .4 ),
		inset 0 1px 0 rgba( 255, 255, 255, .4 );
}

/* ---------- form headings ---------- */

/* The plugin sets margin, padding and a #ccc bottom border inline on these,
   so nothing but !important reaches them. */
#pepro-profile .pepro-login-reg h6 {
	margin: 0 0 16px !important;
	padding: 0 0 13px !important;
	border-bottom: 1px solid rgba( 216, 174, 109, .26 ) !important;
	font-size: 17px;
	font-weight: 700;
	/* !important: on the profile page UPS re-colours the heading inline. */
	color: #fff !important;
	text-align: center;
}

/* ---------- fields ---------- */

#pepro-profile .pepro-login-reg .pepro-login-reg-field {
	margin-bottom: 14px;
}

#pepro-profile .pepro-login-reg .pepro-login-reg-field label {
	display: block;
	margin-bottom: 7px;
	font-size: 13px;
	font-weight: 600;
	color: var( --gsw-cream );
}

#pepro-profile .pepro-login-reg .form-text,
#pepro-profile .pepro-login-reg input[type="text"],
#pepro-profile .pepro-login-reg input[type="tel"],
#pepro-profile .pepro-login-reg input[type="email"],
#pepro-profile .pepro-login-reg input[type="password"],
#pepro-profile .pepro-login-reg select {
	box-sizing: border-box;
	width: 100%;
	padding: 12px 14px;
	font-size: 15px;
	line-height: 1.6;
	color: #fff;
	background: rgba( 255, 255, 255, .07 );
	border: 1px solid rgba( 255, 255, 255, .16 );
	border-radius: 12px;
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .06 );
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

#pepro-profile .pepro-login-reg .form-text:focus,
#pepro-profile .pepro-login-reg select:focus {
	outline: none;
	background: rgba( 255, 255, 255, .11 );
	border-color: var( --gsw-gold );
	box-shadow: 0 0 0 3px rgba( 216, 174, 109, .18 );
}

#pepro-profile .pepro-login-reg .form-text::placeholder {
	color: rgba( 255, 255, 255, .42 );
}

/* Phone number and one-time code are digits — keep them left-to-right inside
   an otherwise right-to-left card. */
#pepro-profile .pepro-login-reg .force-ltr {
	direction: ltr;
	text-align: left;
}

/* The theme pins selects to a fixed 37px, which is shorter than the padding
   above leaves room for — the chosen option was being clipped to a sliver.
   Let it size to its content like the text fields do. */
#pepro-profile .pepro-login-reg-container select.form-text {
	height: auto;
	min-height: 48px;
	line-height: 1.5;
	/* appearance:none is already set upstream, so the native arrow is gone and
	   the control would read as a text field without a caret of its own. */
	background-image: url( "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M5%208l5%205%205-5%27%20fill%3D%27none%27%20stroke%3D%27%23d8ae6d%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E" );
	background-repeat: no-repeat;
	background-position: left 14px center;
	background-size: 18px 18px;
	padding-left: 40px;
}

#pepro-profile .pepro-login-reg select option {
	color: #14281e;
	background: #fff;
}

/* The OTP code is short and is read back digit by digit. */
#pepro-profile .pepro-login-reg .otp-verification {
	letter-spacing: .32em;
	font-size: 17px;
	text-align: center;
	direction: ltr;
}

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

#pepro-profile .pepro-login-reg .submit-wrap {
	margin-top: 18px;
	margin-bottom: 6px;
}

/* The plugin reaches this through two IDs
   (`#pepro-profile .submit-wrap.form-required #submit`), so anything lighter
   is ignored outright. */
#pepro-profile .pepro-login-reg-container .pepro-login-reg-field.submit-wrap.form-required #submit,
#pepro-profile .pepro-login-reg-container .pepro-login-reg-field.submit-wrap.form-required button,
#pepro-profile .pepro-login-reg button.button-primary {
	width: 100%;
	padding: 13px 20px;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.5;
	color: #fff;
	text-shadow: 0 1px 2px rgba( 8, 30, 20, .45 );
	background:
		linear-gradient( 180deg, rgba( 250, 243, 230, .28 ) 0%, rgba( 250, 243, 230, .06 ) 34%, rgba( 250, 243, 230, 0 ) 52% ),
		linear-gradient( 180deg, #3a7049 0%, #2d5c3a 38%, #1a3b24 100% );
	border: 1px solid rgba( 216, 174, 109, .35 );
	border-radius: 14px;
	box-shadow:
		0 12px 26px rgba( 6, 26, 17, .45 ),
		inset 0 1px 0 rgba( 255, 255, 255, .55 );
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

#pepro-profile .pepro-login-reg-container .pepro-login-reg-field.submit-wrap.form-required #submit:hover,
#pepro-profile .pepro-login-reg-container .pepro-login-reg-field.submit-wrap.form-required button:hover,
#pepro-profile .pepro-login-reg button.button-primary:hover {
	filter: brightness( 1.07 );
	transform: translateY( -1px );
	box-shadow:
		0 16px 30px rgba( 6, 26, 17, .5 ),
		inset 0 1px 0 rgba( 255, 255, 255, .6 );
}

#pepro-profile .pepro-login-reg-container .pepro-login-reg-field.submit-wrap.form-required #submit:active,
#pepro-profile .pepro-login-reg-container .pepro-login-reg-field.submit-wrap.form-required button:active,
#pepro-profile .pepro-login-reg button.button-primary:active {
	transform: translateY( 0 );
	filter: brightness( .96 );
}

/* ---------- links under the form ---------- */

#pepro-profile .pepro-login-reg .pepro-form-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 4px;
	font-size: 13px;
	color: var( --gsw-muted );
}

#pepro-profile .pepro-login-reg .pepro-form-links a {
	color: var( --gsw-gold );
	font-weight: 600;
	text-decoration: none;
	transition: color .2s ease;
}

#pepro-profile .pepro-login-reg .pepro-form-links a:hover {
	color: #f0d3a2;
	text-decoration: underline;
}

/* ---------- errors ---------- */

/* The plugin leaves this div in place and empty until something fails, so it
   must stay invisible while it has no content. */
#pepro-profile .pepro-login-reg #login_error:not( :empty ) {
	margin: 0 0 14px;
	padding: 11px 14px;
	font-size: 13px;
	line-height: 1.9;
	color: #ffd9d4;
	background: rgba( 190, 60, 45, .24 );
	border: 1px solid rgba( 240, 130, 115, .4 );
	border-radius: 11px;
}

/* ---------- phones ---------- */

@media ( max-width: 520px ) {
	#pepro-profile .pepro-login-reg-container {
		padding: 22px 18px 18px;
		border-radius: 18px;
	}

	#pepro-profile .pepro-login-reg-container .switcher a {
		font-size: 13px;
	}
}