/*
 * AlmarFit 2.22 (v3b): the pages of the account while signed out (Intră în cont, Creează cont, Ai uitat parola, the
 * e-mail sent, the new password) in the look of the public pages: the near-black with a gold light at the top, one
 * glass card with a thin gold edge and its slow ring of light, dark fields that light up in gold, the gold button.
 * Only the look: the words, the fields and the forms stay as they are (Laravel's views cont/*.blade.php and
 * almarfit-clients). Loaded only on the account's page, signed out (functions.php), so it is in the frame "afara" the
 * Laravel pages are drawn in (App\Web\RamaSablon), never inside the account. With "reduce motion" nothing moves.
 */

:root {
	--va-bg: #121114; --va-card: rgba(27, 26, 30, .78); --va-field: #141316;
	--va-gold: #D2B04C; --va-gold2: #EBD58A; --va-grad: linear-gradient(180deg, #F0DD98, #D2B04C);
	--va-t1: #F3EFE8; --va-t2: #C9C4BD; --va-t3: #9A958F;
	--va-line: rgba(243, 239, 232, .12); --va-ease: cubic-bezier(.2, .8, .2, 1);
	--va-serif: 'Libre Caslon Text', Georgia, 'Times New Roman', serif; --va-sans: Figtree, system-ui, sans-serif;
}
@property --va-ring { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes va-ring { to { --va-ring: 360deg; } }
@keyframes va-in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes va-shine { 0% { transform: translateX(-120%) skewX(-18deg); } 60%, 100% { transform: translateX(260%) skewX(-18deg); } }
@keyframes va-halo { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }

/* ---------- The page ---------- */
body:has(.af-account--guest) { background: var(--va-bg) !important; }
body:has(.af-account--guest) main { position: relative; isolation: isolate; }
body:has(.af-account--guest) main::before {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 760px; z-index: -1; pointer-events: none;
	background: radial-gradient(60% 70% at 50% 0%, rgba(210, 176, 76, .16), rgba(210, 176, 76, 0) 70%), radial-gradient(40% 50% at 85% 30%, rgba(210, 176, 76, .06), rgba(210, 176, 76, 0) 70%);
}
.af-account--guest { padding: 72px 0 120px; color: var(--va-t1); font-family: var(--va-sans); }
.af-account--guest a:not(.af-btn):not(.wp-element-button) { color: var(--va-gold2); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--va-ease); }
.af-account--guest a:not(.af-btn):not(.wp-element-button):hover { background-size: 100% 1px; }

/* ---------- The card: glass, a gold edge, its ring of light ---------- */
.af-account--guest .af-auth, .af-account--guest .af-join__form .af-box {
	position: relative; isolation: isolate; box-sizing: border-box; color: var(--va-t1);
	background: var(--va-card) !important; -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
	border: 1px solid rgba(210, 176, 76, .24) !important; border-radius: 28px !important;
	box-shadow: 0 60px 140px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 244, 200, .06);
}
.af-account--guest .af-auth::before, .af-account--guest .af-join__form .af-box::before {
	content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1;
	background: conic-gradient(from var(--va-ring), rgba(210, 176, 76, 0) 0deg, rgba(210, 176, 76, 0) 250deg, #8F7330 290deg, #FFF6CF 325deg, #EBD58A 340deg, rgba(210, 176, 76, 0) 360deg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
	animation: va-ring 9s linear infinite;
}
.af-account--guest .af-auth { max-width: 480px; padding: 48px 44px 40px !important; gap: 6px; }
.af-account--guest .af-auth-wrap { padding: 0 16px; }

/* The logo with a soft gold halo; the title in Caslon, not in capitals. */
.af-account--guest .af-auth .af-logo, .af-account--guest .af-auth > a:first-child, .af-account--guest .af-auth > img:first-child,
.af-account--guest .af-join__side > a:first-child, .af-account--guest .af-join__side > img:first-child { position: relative; }
.af-account--guest .af-auth img, .af-account--guest .af-join__side > a:first-child img, .af-account--guest .af-join__side > img:first-child {
	filter: drop-shadow(0 0 22px rgba(210, 176, 76, .35));
}
.af-account--guest .af-auth__h {
	margin: 14px 0 4px !important; font: 400 36px/1.1 var(--va-serif) !important; letter-spacing: -.01em; text-transform: none !important; text-align: center;
	background: linear-gradient(180deg, #FFFFFF, #E9E2D3); -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
.af-account--guest .af-auth__s { margin: 0 0 22px !important; text-align: center; color: var(--va-t3); font-size: 15px; }

/* ---------- The fields ---------- */
.af-account--guest label, .af-account--guest .af-field > label {
	display: block; margin: 0 0 8px; font: 600 11.5px/1.3 var(--va-sans) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--va-t3) !important;
}
.af-account--guest .af-check label, .af-account--guest .af-signup__inv summary { font: 400 14px/1.45 var(--va-sans) !important; letter-spacing: 0; text-transform: none; color: var(--va-t2) !important; }
.af-account--guest input[type="text"], .af-account--guest input[type="email"], .af-account--guest input[type="tel"], .af-account--guest input[type="password"], .af-account--guest input[type="number"] {
	box-sizing: border-box; width: 100%; height: 56px; padding: 0 18px !important; border-radius: 16px !important;
	background: var(--va-field) !important; color: var(--va-t1) !important; caret-color: var(--va-gold2);
	border: 1px solid var(--va-line) !important; box-shadow: inset 0 1px 0 rgba(0, 0, 0, .35) !important;
	font: 400 16px/1 var(--va-sans) !important; letter-spacing: .01em;
	transition: border-color .4s var(--va-ease), box-shadow .4s var(--va-ease), background-color .4s var(--va-ease);
}
.af-account--guest input::placeholder { color: rgba(243, 239, 232, .32); }
.af-account--guest input:hover { border-color: rgba(243, 239, 232, .22) !important; }
.af-account--guest input:focus, .af-account--guest input:focus-visible {
	outline: none !important; border-color: rgba(235, 213, 138, .75) !important; background: #17161A !important;
	box-shadow: 0 0 0 4px rgba(210, 176, 76, .14), 0 0 34px rgba(210, 176, 76, .14) !important;
}
.af-account--guest input:-webkit-autofill { -webkit-text-fill-color: var(--va-t1); -webkit-box-shadow: 0 0 0 100px var(--va-field) inset !important; }
.af-account--guest input[aria-invalid="true"] { border-color: rgba(226, 75, 74, .8) !important; box-shadow: 0 0 0 4px rgba(226, 75, 74, .12) !important; }
.af-account--guest .af-field, .af-account--guest .af-signup > p, .af-account--guest .af-grid2 > p { margin: 0 0 16px !important; }
.af-account--guest .af-hint { color: var(--va-t3) !important; font-size: 12.5px; }

/* The eye: a gold line icon in place of the emoji. */
.af-account--guest .af-auth__pwrow { position: relative; display: block; }
.af-account--guest .af-auth__pwrow input { padding-right: 54px !important; }
.af-account--guest .af-auth__eye {
	right: 6px !important; width: 44px !important; height: 44px !important; border-radius: 50% !important; font-size: 0 !important; color: transparent !important; opacity: .7;
	background: no-repeat 50% 50% / 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EBD58A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") !important;
	transition: opacity .3s var(--va-ease), background-color .3s var(--va-ease);
}
.af-account--guest .af-auth__eye:hover { opacity: 1; background-color: rgba(210, 176, 76, .1) !important; }
.af-account--guest .af-auth__eye.is-on {
	opacity: 1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EBD58A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E") !important;
}

/* The boxes to tick: a gold square, a check drawn in. */
.af-account--guest .af-check label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.af-account--guest .af-check input[type="checkbox"] {
	-webkit-appearance: none; appearance: none; flex: none; width: 22px !important; height: 22px !important; margin: 0 !important; border-radius: 7px;
	border: 1px solid rgba(210, 176, 76, .55); background: var(--va-field); cursor: pointer; display: grid; place-items: center;
	transition: background .35s var(--va-ease), box-shadow .35s var(--va-ease), border-color .35s var(--va-ease);
}
.af-account--guest .af-check input[type="checkbox"]::after {
	content: ""; width: 12px; height: 12px; transform: scale(0); transition: transform .35s var(--va-ease);
	background: no-repeat 50% 50% / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141316' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
}
.af-account--guest .af-check input[type="checkbox"]:checked { background: var(--va-grad); border-color: transparent; box-shadow: 0 0 16px rgba(210, 176, 76, .35); }
.af-account--guest .af-check input[type="checkbox"]:checked::after { transform: scale(1); }
.af-account--guest .af-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--va-gold2); outline-offset: 3px; }
.af-account--guest .af-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 22px; flex-wrap: wrap; }
.af-account--guest .af-auth__row .af-check { margin: 0; }
.af-account--guest .af-auth__forgot { font-size: 14px; font-weight: 600; }

/* ---------- The buttons: the gold one with its light passing, the outlined one ---------- */
.af-account--guest button[type="submit"], .af-account--guest .af-btn:not(.af-btn--ghost) {
	position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 58px; padding: 0 28px !important;
	border: 0 !important; border-radius: 999px !important; background: var(--va-grad) !important; color: #141316 !important;
	font: 600 16px/1 var(--va-sans) !important; letter-spacing: .02em; text-transform: none; cursor: pointer;
	box-shadow: 0 16px 40px rgba(210, 176, 76, .28), inset 0 1px 0 rgba(255, 255, 255, .6) !important;
	transition: transform .5s var(--va-ease), box-shadow .5s var(--va-ease);
}
.af-account--guest button[type="submit"]::after, .af-account--guest .af-btn:not(.af-btn--ghost)::after {
	content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; z-index: -1; pointer-events: none;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
	transform: translateX(-120%) skewX(-18deg); animation: va-shine 5.5s var(--va-ease) 1.2s infinite;
}
.af-account--guest button[type="submit"]:hover, .af-account--guest .af-btn:not(.af-btn--ghost):hover { transform: translateY(-2px); box-shadow: 0 22px 54px rgba(210, 176, 76, .4), inset 0 1px 0 rgba(255, 255, 255, .6) !important; }
.af-account--guest button[type="submit"]:disabled { opacity: .5; transform: none; }
.af-account--guest .af-btn--ghost {
	display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; box-sizing: border-box; border-radius: 999px !important;
	background: transparent !important; border: 1px solid rgba(210, 176, 76, .5) !important; color: var(--va-gold2) !important;
	font: 600 15.5px/1 var(--va-sans) !important; text-decoration: none !important; transition: background .45s var(--va-ease), border-color .45s var(--va-ease), transform .45s var(--va-ease);
}
.af-account--guest .af-btn--ghost:hover { background: rgba(210, 176, 76, .08) !important; border-color: var(--va-gold2) !important; transform: translateY(-2px); }
.af-account--guest .af-auth__or { margin: 26px 0 14px !important; color: var(--va-t3) !important; font-size: 13.5px; }
.af-account--guest .af-auth__or::before { background: linear-gradient(90deg, rgba(210, 176, 76, 0), rgba(210, 176, 76, .45)) !important; }
.af-account--guest .af-auth__or::after { background: linear-gradient(90deg, rgba(210, 176, 76, .45), rgba(210, 176, 76, 0)) !important; }

/* The messages. */
.af-account--guest .af-auth__err, .af-account--guest .af-alert--error { border-radius: 14px; background: rgba(226, 75, 74, .1) !important; border: 1px solid rgba(226, 75, 74, .35) !important; color: #F4C6C5 !important; }
.af-account--guest .af-alert--ok { border-radius: 14px; background: rgba(210, 176, 76, .08) !important; border: 1px solid rgba(210, 176, 76, .35) !important; color: var(--va-gold2) !important; }

/* ---------- Creează cont: the side (what you get, what comes next), the form in the card ---------- */
.af-account--guest.af-join { padding-inline: 16px; }
.af-account--guest .af-join__grid { max-width: 1240px; gap: 72px; }
.af-account--guest .af-join__side { padding-top: 8px; }
.af-account--guest .af-join__eyebrow { margin: 24px 0 14px !important; font: 600 12px/1 var(--va-sans) !important; letter-spacing: .22em; text-transform: uppercase; color: var(--va-gold) !important; }
.af-account--guest .af-join__h {
	margin: 0 0 16px !important; font: 400 clamp(40px, 4.6vw, 62px)/1.04 var(--va-serif) !important; letter-spacing: -.015em; text-transform: none !important;
	background: linear-gradient(180deg, #FFFFFF 30%, #E2D6B4); -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
.af-account--guest .af-join__have { color: var(--va-t3); font-size: 15px; }
.af-account--guest .af-join__lbl { margin: 36px 0 14px !important; font: 600 11.5px/1 var(--va-sans) !important; letter-spacing: .18em; text-transform: uppercase; color: var(--va-t3) !important; }
.af-account--guest .af-join__get { gap: 10px; }
.af-account--guest .af-join__get li {
	position: relative; padding: 14px 16px; gap: 14px; border-radius: 16px; font-size: 14.5px; color: var(--va-t1);
	background: linear-gradient(180deg, rgba(243, 239, 232, .045), rgba(243, 239, 232, .02)); border: 1px solid var(--va-line);
	transition: border-color .5s var(--va-ease), transform .5s var(--va-ease), background .5s var(--va-ease);
}
.af-account--guest .af-join__get li:hover { border-color: rgba(210, 176, 76, .4); transform: translateY(-2px); }
.af-account--guest .af-join__get li span {
	width: 30px; height: 30px; font-size: 0; color: transparent; background: rgba(210, 176, 76, .1); border: 1px solid rgba(210, 176, 76, .45); box-shadow: 0 0 14px rgba(210, 176, 76, .15);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EBD58A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: 50% 50%; background-size: 15px;
}
.af-account--guest .af-join__get li:last-child { border-color: rgba(210, 176, 76, .5); background: linear-gradient(135deg, rgba(210, 176, 76, .14), rgba(210, 176, 76, .04)); }
.af-account--guest .af-join__get li:last-child span {
	border-color: transparent; box-shadow: 0 0 18px rgba(210, 176, 76, .45); background-size: 15px, 100% 100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141316' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"), var(--va-grad);
}
.af-account--guest .af-join__steps { position: relative; gap: 18px; }
.af-account--guest .af-join__steps::before { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 1px; background: linear-gradient(180deg, rgba(210, 176, 76, .6), rgba(210, 176, 76, .1)); }
.af-account--guest .af-join__steps li { padding-left: 50px; font-size: 15.5px; color: var(--va-t2); }
.af-account--guest .af-join__steps li::before {
	width: 32px; height: 32px; top: -4px; border: 0; background: var(--va-bg); color: var(--va-gold2);
	box-shadow: inset 0 0 0 1px rgba(210, 176, 76, .7), 0 0 16px rgba(210, 176, 76, .18); font: 400 15px/1 var(--va-serif);
}
.af-account--guest .af-join__form .af-box { padding: 44px 44px 36px !important; }
.af-account--guest .af-signup__grp {
	display: flex; align-items: center; gap: 14px; margin: 30px 0 18px !important; padding-top: 0 !important; border-top: 0 !important;
	font: 600 11.5px/1 var(--va-sans) !important; letter-spacing: .2em; color: var(--va-gold) !important;
}
.af-account--guest .af-signup__grp::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(210, 176, 76, .4), rgba(210, 176, 76, 0)); }
.af-account--guest .af-signup .af-signup__grp.is-first { margin-top: 0 !important; }
.af-account--guest .af-grid2 { gap: 14px; }
.af-account--guest .af-auth__meter { height: 4px; margin: -6px 2px 6px; background: rgba(243, 239, 232, .08); }
.af-account--guest .af-auth__meter.is-strong i { background: var(--va-grad); }
.af-account--guest .af-auth__strength { margin: 0 0 14px !important; font-size: 12.5px; color: var(--va-t3); }
.af-account--guest .af-consents { display: grid; gap: 14px; padding: 18px; border-radius: 18px; background: rgba(0, 0, 0, .18); border: 1px solid var(--va-line); }
.af-account--guest .af-consents .af-check { margin: 0 !important; }
.af-account--guest .af-signup__inv { margin: 20px 0 22px; }
.af-account--guest .af-signup__inv summary { cursor: pointer; color: var(--va-gold2) !important; font-weight: 600 !important; }
.af-account--guest .af-su-sec { margin-top: 16px !important; line-height: 1.55; }
.af-account--guest .af-signup__alt { text-align: center; color: var(--va-t3); }

/* ---------- Coming into view ---------- */
@media (prefers-reduced-motion: no-preference) {
	.af-account--guest .af-auth, .af-account--guest .af-join__form .af-box { animation: va-in 1s var(--va-ease) both; }
	.af-account--guest .af-join__side > * { animation: va-in .9s var(--va-ease) both; }
	.af-account--guest .af-join__side > :nth-child(2) { animation-delay: .06s; }
	.af-account--guest .af-join__side > :nth-child(3) { animation-delay: .12s; }
	.af-account--guest .af-join__side > :nth-child(4) { animation-delay: .18s; }
	.af-account--guest .af-join__side > :nth-child(5) { animation-delay: .24s; }
	.af-account--guest .af-join__side > :nth-child(n+6) { animation-delay: .3s; }
	.af-account--guest .af-join__form .af-box { animation-delay: .15s; }
}

/* ---------- On a phone ---------- */
@media (max-width: 781px) {
	.af-account--guest { padding: 28px 0 72px; }
	.af-account--guest .af-auth-wrap { padding: 0 12px; }
	.af-account--guest .af-auth { padding: 34px 22px 28px !important; border-radius: 24px !important; }
	.af-account--guest .af-auth__h { font-size: 30px !important; }
	.af-account--guest .af-join__grid { gap: 28px; }
	.af-account--guest .af-join__h { font-size: 38px !important; }
	.af-account--guest .af-join__lbl { margin-top: 24px !important; }
	.af-account--guest .af-join__get { grid-template-columns: 1fr 1fr; gap: 8px; }
	.af-account--guest .af-join__get li { padding: 10px 12px; gap: 10px; font-size: 13px; }
	.af-account--guest .af-join__get li span { width: 26px; height: 26px; background-size: 13px; }
	.af-account--guest .af-join__get li:last-child { grid-column: 1 / -1; }
	.af-account--guest .af-join__get li:last-child span { background-size: 13px, 100% 100%; }
	.af-account--guest .af-join__form .af-box { margin-inline: -4px; padding: 30px 20px 26px !important; border-radius: 24px !important; }
	.af-account--guest .af-grid2 { grid-template-columns: 1fr !important; gap: 0; }
	.af-account--guest input[type="text"], .af-account--guest input[type="email"], .af-account--guest input[type="tel"], .af-account--guest input[type="password"] { height: 54px; }
	.af-account--guest .af-auth__row { flex-direction: row; }
}

@media (prefers-reduced-motion: reduce) {
	.af-account--guest .af-auth::before, .af-account--guest .af-join__form .af-box::before,
	.af-account--guest button[type="submit"]::after, .af-account--guest .af-btn::after { animation: none !important; display: none; }
	.af-account--guest *, .af-account--guest *::after { transition: none !important; }
}