/**
 * DeiraJobs — logged-out "My account" page (login / register).
 * Applied on the container found by deira-account.js (.deira-auth), whatever the
 * theme's markup. Colors come from Settings › Account Page (--dau-* variables).
 */

/* Until the script is ready, hide the forms (no flash of the two-column layout) */
.deira-auth-pending form.woocommerce-form-login,
.deira-auth-pending form.woocommerce-form-register { visibility: hidden; }

/* ──────────────────────────────────────────
   LAYOUT: brand panel | switch + forms
────────────────────────────────────────── */
.deira-auth.deira-auth {
	--dau-brand-bg: #0f172a;
	--dau-brand-bg2: #1e293b;
	--dau-brand-text: #ffffff;
	--dau-accent: #e9c46a;
	--dau-button-bg: #0f172a;
	--dau-button-text: #ffffff;
	--dau-button-bg-h: #ad881e;
	--dau-pad: 52px;
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	grid-auto-rows: auto;
	align-items: start;
	width: 100%;
	max-width: 1080px;
	margin: 8px auto 32px;
	padding: 0;
	overflow: hidden;
	background: #ffffff;
	border: 1px solid #edf1f6;
	border-radius: 24px;
	box-shadow: 0 30px 70px -30px rgba(15, 23, 42, .28), 0 2px 6px rgba(15, 23, 42, .04);
	box-sizing: border-box;
}

.deira-auth.deira-auth > * {
	grid-column: 2;
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0;
	flex: none;
	box-sizing: border-box;
}

.deira-auth.deira-auth > [hidden] { display: none !important; }

/* ──────────────────────────────────────────
   BRAND PANEL
────────────────────────────────────────── */
.deira-auth.deira-auth > .deira-auth__brand {
	grid-column: 1;
	grid-row: 1 / span 6;
	align-self: stretch;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 18px;
	min-height: 100%;
	padding: 64px var(--dau-pad);
	overflow: hidden;
	color: var(--dau-brand-text);
	background:
		radial-gradient(circle at 0% 100%, rgba(255, 255, 255, .06) 1.4px, transparent 1.6px) 0 0 / 22px 22px,
		linear-gradient(155deg, var(--dau-brand-bg) 0%, var(--dau-brand-bg2) 100%);
	isolation: isolate;
}

.deira-auth__glow {
	position: absolute;
	top: -140px;
	right: -140px;
	z-index: -1;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--dau-accent) 45%, transparent) 0%, transparent 68%);
	pointer-events: none;
	animation: dau-float 9s ease-in-out infinite alternate;
}

.deira-auth__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--dau-accent);
}

.deira-auth__eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.deira-auth__headline {
	margin: 0;
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.02em;
	color: inherit;
}

.deira-auth__subtitle {
	margin: 0;
	max-width: 36ch;
	font-size: 16px;
	line-height: 1.6;
	opacity: .78;
}

.deira-auth__points {
	display: grid;
	gap: 14px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.deira-auth__points li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 15px;
	line-height: 1.4;
}

.deira-auth__points svg {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	padding: 6px;
	border-radius: 50%;
	color: var(--dau-accent);
	background: color-mix(in srgb, var(--dau-accent) 16%, transparent);
	box-sizing: border-box;
}

/* ──────────────────────────────────────────
   SWITCH "Log in | Register"
────────────────────────────────────────── */
.deira-auth.deira-auth > .deira-auth__switch {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	justify-self: start;
	width: calc(100% - 2 * var(--dau-pad));
	max-width: 380px;
	margin: var(--dau-pad) var(--dau-pad) 0;
	padding: 5px;
	border-radius: 999px;
	background: #f1f5f9;
}

.deira-auth__tab {
	position: relative;
	z-index: 1;
	height: 44px;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #64748b;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: color .25s ease;
}

.deira-auth__tab[aria-selected="true"] { color: #0f172a; }
.deira-auth__tab:hover { color: #0f172a; }

.deira-auth__tab:focus-visible {
	outline: 2px solid var(--dau-accent);
	outline-offset: 2px;
}

.deira-auth__pill {
	position: absolute;
	top: 5px;
	bottom: 5px;
	left: 5px;
	width: calc(50% - 5px);
	border-radius: 999px;
	background: #ffffff;
	box-shadow: 0 6px 16px -6px rgba(15, 23, 42, .25), 0 1px 2px rgba(15, 23, 42, .08);
	transition: transform .4s cubic-bezier(.2, .9, .25, 1);
}

.deira-auth[data-mode="register"] .deira-auth__pill { transform: translateX(100%); }

/* ──────────────────────────────────────────
   PANELS (the theme's columns, neutralised)
────────────────────────────────────────── */
.deira-auth.deira-auth > .deira-auth__panel {
	padding: 8px var(--dau-pad) var(--dau-pad);
}

.deira-auth--single.deira-auth > .deira-auth__panel { padding-top: var(--dau-pad); }

.deira-auth__panel.is-entering { animation: dau-in .42s cubic-bezier(.2, .9, .25, 1) both; }

/* Theme cards, boxes and original headings inside the panels.
   !important: the theme uses Bootstrap utilities (p-md-5, d-flex…), which are !important themselves. */
.deira-auth .deira-auth__panel [class*="card"],
.deira-auth .deira-auth__panel form.woocommerce-form {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.deira-auth .deira-auth__panel h2:not(.deira-auth__title),
.deira-auth .deira-auth__panel h3:not(.deira-auth__title) { display: none !important; }

.deira-auth .deira-auth__head { margin: 26px 0 26px; }

.deira-auth .deira-auth__title {
	margin: 0 0 6px;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: #0f172a;
}

.deira-auth .deira-auth__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: #64748b;
}

/* Fields */
.deira-auth .deira-auth__panel label {
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #334155;
}

.deira-auth .deira-auth__panel input[type="text"],
.deira-auth .deira-auth__panel input[type="email"],
.deira-auth .deira-auth__panel input[type="password"] {
	width: 100%;
	height: 50px;
	padding: 0 16px;
	border: 1.5px solid #e2e8f0;
	border-radius: 12px;
	background: #f8fafc;
	color: #0f172a;
	font-size: 15px;
	box-shadow: none;
	transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.deira-auth .deira-auth__panel input[type="text"]:hover,
.deira-auth .deira-auth__panel input[type="email"]:hover,
.deira-auth .deira-auth__panel input[type="password"]:hover { border-color: #cbd5e1; }

.deira-auth .deira-auth__panel input[type="text"]:focus,
.deira-auth .deira-auth__panel input[type="email"]:focus,
.deira-auth .deira-auth__panel input[type="password"]:focus {
	outline: none;
	border-color: var(--dau-accent);
	background: #ffffff;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--dau-accent) 24%, transparent);
}

.deira-auth .deira-auth__panel a:not(.deira-auth__tab) { color: #8a6a12; }

/* Buttons */
.deira-auth .deira-auth__panel button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 52px;
	margin-top: 6px;
	border: 0;
	border-radius: 12px;
	background: var(--dau-button-bg);
	color: var(--dau-button-text);
	font-size: 16px;
	font-weight: 700;
	box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--dau-button-bg) 70%, transparent);
	transition: background-color .25s ease, transform .2s ease, box-shadow .25s ease;
}

.deira-auth .deira-auth__panel button[type="submit"]:hover,
.deira-auth .deira-auth__panel button[type="submit"]:focus-visible {
	background: var(--dau-button-bg-h);
	color: var(--dau-button-text);
	transform: translateY(-1px);
	box-shadow: 0 16px 28px -14px color-mix(in srgb, var(--dau-button-bg-h) 80%, transparent);
}

/* Account type: two selectable cards */
.deira-auth .deira-account-type {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 4px 0 18px;
}

.deira-auth .deira-account-type legend {
	grid-column: 1 / -1;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #334155;
}

.deira-auth .deira-account-type label {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding: 14px 14px 14px 46px;
	border: 1.5px solid #e2e8f0;
	border-radius: 14px;
	background: #ffffff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: #0f172a;
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.deira-auth .deira-account-type label:hover { border-color: #cbd5e1; }

.deira-auth .deira-account-type input[type="radio"] {
	position: absolute;
	top: 16px;
	left: 16px;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: #ad881e;
}

.deira-auth .deira-account-type label:has(input:checked) {
	border-color: var(--dau-accent);
	background: color-mix(in srgb, var(--dau-accent) 10%, #ffffff);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--dau-accent) 20%, transparent);
}

.deira-auth .g-recaptcha { margin: 6px 0 16px; }

/* WooCommerce privacy notice under the register form */
.deira-auth .woocommerce-privacy-policy-text,
.deira-auth .woocommerce-privacy-policy-text p {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.55;
	color: #64748b;
}

/* Link to the other form */
.deira-auth .deira-auth__alt {
	margin: 22px 0 0;
	text-align: center;
	font-size: 14px;
	color: #64748b;
}

.deira-auth .deira-auth__alt a {
	font-weight: 700;
	color: #0f172a;
	text-decoration: none;
	border-bottom: 2px solid var(--dau-accent);
}

.deira-auth .deira-auth__alt a:hover { color: #8a6a12; }

/* ──────────────────────────────────────────
   ANIMATIONS
────────────────────────────────────────── */
@keyframes dau-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

@keyframes dau-float {
	from { transform: translate(0, 0); }
	to   { transform: translate(-30px, 24px); }
}

@media (prefers-reduced-motion: reduce) {
	.deira-auth *,
	.deira-auth *::before { animation: none !important; transition: none !important; }
}

/* ──────────────────────────────────────────
   TABLET & MOBILE: brand panel on top, compact
────────────────────────────────────────── */
@media (max-width: 900px) {
	.deira-auth.deira-auth {
		--dau-pad: 26px;
		grid-template-columns: minmax(0, 1fr);
		border-radius: 20px;
	}

	.deira-auth.deira-auth > * { grid-column: 1; }

	.deira-auth.deira-auth > .deira-auth__brand {
		grid-row: auto;
		gap: 10px;
		min-height: 0;
		padding: 32px var(--dau-pad) 30px;
	}

	.deira-auth__headline { font-size: 26px; }
	.deira-auth__subtitle { font-size: 15px; }
	.deira-auth__points { display: none; }

	.deira-auth.deira-auth > .deira-auth__switch {
		justify-self: stretch;
		width: auto;
		max-width: none;
		margin: 24px var(--dau-pad) 0;
	}

	.deira-auth .deira-auth__head { margin: 22px 0; }
	.deira-auth .deira-auth__title { font-size: 24px; }
}

@media (max-width: 420px) {
	.deira-auth .deira-account-type { grid-template-columns: 1fr; }
}