/* ==========================================================================
   Faranetwork — "Fara Glass" · LOGIN / REGISTER page  (https://faranetworks.com/?login=true)
   --------------------------------------------------------------------------
   That page is the Digits plugin's own stand-alone document: it prints neither wp_head() nor the theme's stylesheets, so it showed
   a stock blue stock-photo layout with square fields. inc/login.php injects THIS file (+ a brand panel) into that document only.
   Everything is prefixed with body.digits_login_form and out-ranks Digits' inline "customizer" CSS (which uses !important).
   ========================================================================== */

@font-face {
	font-family: 'Vazirmatn';
	src: url('../fonts/Vazirmatn-variable.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
}

body.digits_login_form {
	--fl-sky-50: #f0f9ff;
	--fl-sky-100: #e0f2fe;
	--fl-sky-300: #7dd3fc;
	--fl-sky-400: #38bdf8;
	--fl-sky-500: #0ea5e9;
	--fl-sky-600: #0284c7;
	--fl-sky-700: #0369a1;
	--fl-ink: #0f172a;
	--fl-text: #1e293b;
	--fl-slate: #475569;
	--fl-mute: #94a3b8;
	--fl-grad: linear-gradient(135deg, #38bdf8, #0ea5e9);
	--fl-ease: cubic-bezier(.16, 1, .3, 1);
	position: relative;
	font-family: 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif !important;
	color: var(--fl-text);
	background: linear-gradient(160deg, #eff8ff 0%, #e0f2fe 35%, #f0f9ff 70%, #fdf8ff 100%) fixed !important;
}
/* soft light blobs behind the form, like the site's animated background */
body.digits_login_form::before,
body.digits_login_form::after {
	content: '';
	position: fixed;
	z-index: 0;
	border-radius: 50%;
	filter: blur(70px);
	pointer-events: none;
}
body.digits_login_form::before { width: 520px; height: 520px; top: -160px; inset-inline-start: -140px; background: rgba(56, 189, 248, .28); }
body.digits_login_form::after { width: 460px; height: 460px; bottom: -160px; inset-inline-end: -120px; background: rgba(99, 102, 241, .16); }

body.digits_login_form :is(div, span, a, p, h1, h2, ul, li, label, input, button, select, textarea) { font-family: inherit; }
body.digits_login_form .dig_bdy_container { position: relative; z-index: 1; min-height: 100vh; }

/* ---------- brand panel (the half that used to be a stock photo) ---------- */
body.digits_login_form .dig_ul_left_side {
	position: relative;
	overflow: hidden;
	padding: clamp(32px, 5vw, 64px);
	background-image:
		radial-gradient(520px 420px at 85% 8%, rgba(56, 189, 248, .38), transparent 70%),
		radial-gradient(460px 380px at 5% 95%, rgba(99, 102, 241, .32), transparent 70%),
		linear-gradient(155deg, #0b1e3a 0%, #0c3a63 52%, #0369a1 100%) !important;
	background-color: #0b1e3a !important;
}
body.digits_login_form .dig_ul_left_side::before {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-radial-gradient(circle at 78% 22%, rgba(255, 255, 255, .06) 0 1px, transparent 1px 46px);
	pointer-events: none;
}
body.digits_login_form .dig-bgleft-arrow-right { display: none !important; }
body.digits_login_form .fn-lg-hero { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 22px; max-width: 460px; margin: auto; color: #fff; text-align: start; }
body.digits_login_form .fn-lg-hero__logo { width: auto; height: 64px; max-width: 240px; margin: 0; object-fit: contain; object-position: start; }
body.digits_login_form .fn-lg-hero__title { margin: 0; color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 900; line-height: 1.6; }
body.digits_login_form .fn-lg-hero__title span { color: var(--fl-sky-300); }
body.digits_login_form .fn-lg-hero__text { margin: 0; color: rgba(255, 255, 255, .78); font-size: .98rem; line-height: 2.1; }
body.digits_login_form .fn-lg-hero__list { display: grid; gap: 12px; margin: 6px 0 0; padding: 0; list-style: none; }
body.digits_login_form .fn-lg-hero__list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 18px;
	background: rgba(255, 255, 255, .08);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	color: #fff;
	font-size: .92rem;
	font-weight: 700;
}
body.digits_login_form .fn-lg-hero__list li::before {
	content: '';
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat, var(--fl-grad);
	box-shadow: 0 6px 16px rgba(14, 165, 233, .45);
}
body.digits_login_form .dig_lp_footer { z-index: 2; color: rgba(255, 255, 255, .6) !important; font-size: .78rem; line-height: 1.9; }

/* ---------- form side ---------- */
body.digits_login_form .dig_lrf_box {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 32px 16px;
	box-sizing: border-box;
}
body.digits_login_form .logocontainer { position: static !important; top: auto !important; opacity: 1 !important; width: auto; max-width: 100%; margin: 0 0 6px; }
body.digits_login_form .logocontainer .logo { display: block; width: auto; height: 62px; max-width: 220px; max-height: 62px; object-fit: contain; }
body.digits_login_form .fn-lg-head { width: min(420px, 100%); margin: 6px 0 18px; text-align: center; }
body.digits_login_form .fn-lg-head h1 { margin: 0 0 6px; color: var(--fl-ink); font-size: 1.45rem; font-weight: 900; line-height: 1.7; }
body.digits_login_form .fn-lg-head p { margin: 0; color: var(--fl-slate); font-size: .9rem; line-height: 2; }
body.digits_login_form .dig_clg_bx { position: static !important; top: auto !important; opacity: 1 !important; width: min(420px, 100%); margin: 0; }

/* the glass card */
body.digits_login_form .dig_clg_bx .dig-container {
	box-sizing: border-box;
	width: 100% !important;
	height: auto !important;
	min-height: 0;
	margin: 0;
	padding: 26px 28px 24px !important;
	border: 1px solid rgba(56, 189, 248, .18);
	border-radius: 28px !important;
	background: rgba(255, 255, 255, .86) !important;
	-webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
	box-shadow: 0 30px 80px rgba(14, 165, 233, .16), 0 6px 18px rgba(15, 23, 42, .05) !important;
}
body.digits_login_form .dig_ul_divd .digloginpage,
body.digits_login_form .dig_ul_divd .forgot,
body.digits_login_form .dig_ul_divd .register { padding: 0 !important; margin: 0 !important; }

/* fields */
body.digits_login_form .minput .minput_inner { margin: 12px 0; }
body.digits_login_form .minput span.bgdark { display: none !important; }
body.digits_login_form .dig_lrf_box .minput :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea),
body.digits_login_form .dig_lrf_box .minput .countrycodecontainer input {
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	padding: 12px 18px !important;
	border: 1.5px solid rgba(56, 189, 248, .38) !important;
	border-radius: 16px !important;
	background: #fff !important;
	color: var(--fl-ink) !important;
	font-size: .95rem;
	font-weight: 500;
	line-height: 1.6 !important;
	outline: none;
	box-shadow: none !important;
	transition: border-color .3s, box-shadow .3s;
}
body.digits_login_form .dig_lrf_box .minput :is(input, textarea)::placeholder { color: var(--fl-mute); opacity: 1; font-weight: 400; }
body.digits_login_form .dig_lrf_box .minput :is(input, textarea):focus {
	border-color: var(--fl-sky-400) !important;
	box-shadow: 0 0 0 4px rgba(56, 189, 248, .18) !important;
}
body.digits_login_form .dig_lrf_box .minput input.dig-mobmail,
body.digits_login_form .dig_lrf_box .minput input[type="password"] { text-align: start !important; }

/* register form: the "+98" country code sits inside the phone field as a small chip (it used to cover the placeholder) */
body.digits_login_form .dig_lrf_box .countrycodecontainer { max-width: none !important; bottom: 9px !important; left: 10px !important; }
body.digits_login_form .dig_lrf_box .minput .countrycodecontainer input { width: 64px !important; min-height: 0 !important; height: 34px; padding: 0 8px !important; text-align: center !important; direction: ltr; font-weight: 700; }
body.digits_login_form .dig_lrf_box .minput_inner:has(.countrycodecontainer:not([style*="display: none"])) input.mobile_field { padding-left: 88px !important; }

/* buttons: primary = gradient pill, secondary = outlined pill */
body.digits_login_form .dig_lrf_box .button.bgdark,
body.digits_login_form .dig_lrf_box button.bgdark {
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	padding: 0 24px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--fl-grad) #0ea5e9 !important;
	color: #fff !important;
	font-size: .98rem !important;
	font-weight: 800 !important;
	line-height: 1.4 !important;
	cursor: pointer;
	box-shadow: 0 12px 30px rgba(14, 165, 233, .35) !important;
	transition: transform .35s var(--fl-ease), box-shadow .35s;
}
body.digits_login_form .dig_lrf_box .button.bgdark:hover,
body.digits_login_form .dig_lrf_box button.bgdark:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(14, 165, 233, .5) !important; }
body.digits_login_form .dig_ma-box .loginviasms,
body.digits_login_form .dig_lrf_box .signupbutton,
body.digits_login_form .dig_lrf_box .transupbutton {
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 50px;
	margin-top: 12px;
	padding: 0 24px !important;
	border: 1.5px solid rgba(14, 165, 233, .45) !important;
	border-radius: 999px !important;
	background: rgba(240, 249, 255, .7) !important;
	box-shadow: none !important;
	color: var(--fl-sky-700) !important;
	font-size: .95rem;
	font-weight: 800;
	cursor: pointer;
	transition: background .3s, border-color .3s, color .3s, transform .35s var(--fl-ease);
}
body.digits_login_form .dig_ma-box .loginviasms:hover,
body.digits_login_form .dig_lrf_box .signupbutton:hover,
body.digits_login_form .dig_lrf_box .transupbutton:hover { background: #fff !important; border-color: var(--fl-sky-400) !important; color: var(--fl-sky-600) !important; transform: translateY(-2px); }
body.digits_login_form .dig_ma-box .logforb { padding-top: 10px; }
body.digits_login_form .forgotpasswordaContainer,
body.digits_login_form .backtoLoginContainer { margin-top: 14px; text-align: center; }
body.digits_login_form .dig_lrf_box :is(.forgotpassworda, .backtoLogin) { color: var(--fl-sky-600) !important; font-size: .88rem; font-weight: 700; text-decoration: none; transition: color .25s; }
body.digits_login_form .dig_lrf_box :is(.forgotpassworda, .backtoLogin):hover { color: var(--fl-sky-700) !important; }
body.digits_login_form .dig_lrf_box .signdesc {
	display: flex !important;
	align-items: center;
	gap: 12px;
	margin: 22px 0 2px;
	color: var(--fl-slate) !important;
	font-size: .88rem;
	font-weight: 600;
	text-align: center;
}
body.digits_login_form .dig_lrf_box .signdesc::before,
body.digits_login_form .dig_lrf_box .signdesc::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(56, 189, 248, .35), transparent); }
body.digits_login_form .dig_resendotp { margin-top: 12px; color: var(--fl-slate); font-size: .86rem; text-align: center; }

/* OTP step + messages */
body.digits_login_form .dig_verify_code_head { margin: 0 0 6px; color: var(--fl-ink) !important; font-size: 1.15rem; font-weight: 900; text-align: center; }
body.digits_login_form .dig_verify_code_msg { margin-bottom: 14px; color: var(--fl-slate) !important; font-size: .9rem; line-height: 2; text-align: center; }
body.digits_login_form .dig_verify_otp_input { text-align: center !important; letter-spacing: .4em; font-weight: 800; }
body.digits_login_form .dig_login_rembe label { color: var(--fl-slate); font-size: .88rem; font-weight: 600; }

/* "cancel" link under the card → quiet "back to site" pill */
body.digits_login_form .dig_login_cancel { position: static !important; width: auto; margin-top: 18px; }
body.digits_login_form .dig_login_cancel a.dig_page_cancel_color {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 20px;
	border-radius: 999px;
	color: var(--fl-slate) !important;
	font-size: .86rem;
	font-weight: 700;
	text-transform: none;
	transition: background .3s, color .3s;
}
body.digits_login_form .dig_login_cancel a.dig_page_cancel_color:hover { background: rgba(255, 255, 255, .8); color: var(--fl-sky-600) !important; }

/* with the brand panel on screen the logo is already there — show the form-side logo only when the panel is hidden */
@media (min-width: 835px) {
	body.digits_login_form .logocontainer { display: none !important; }
}

/* ---------- phones & small screens (the brand panel is hidden by Digits below 835px) ---------- */
@media (max-width: 834px) {
	body.digits_login_form .dig_lrf_box { justify-content: flex-start; padding-top: 36px; }
}
@media (max-width: 440px) {
	body.digits_login_form .dig_clg_bx .dig-container { padding: 22px 18px 20px !important; border-radius: 24px !important; }
	body.digits_login_form .fn-lg-head h1 { font-size: 1.3rem; }
}