/* ════════════════════════════════════════════════════════════════
   AUTH PAGES — sticky left image + scrollable right form
   ════════════════════════════════════════════════════════════════
   Layout strategy:
     • The .auth wrapper is locked to 100vh and has overflow:hidden
       so the BROWSER doesn't get a scrollbar.
     • The left column (image) is 100% of that height — completely
       static, no scroll.
     • The right column (form) has overflow-y:auto so only the form
       panel scrolls when content exceeds the viewport.
     • On mobile (≤768px), the layout collapses: image becomes a
       compact banner and the page scrolls normally.
   ════════════════════════════════════════════════════════════════ */

.alert {
	position: relative;
}

/* ─── Outer wrapper ─── */
.auth {
	height: 100vh;
	padding: 16px;
	overflow: hidden;        /* prevent page-level scroll */
}

.auth .row {
	height: 100% !important; /* override Bootstrap h-100 to be specific */
	margin: 0;
	overflow: hidden;
	flex-wrap: nowrap;       /* keep two cols side-by-side */
}

.auth .row > [class*="col-"] {
	padding-left: 0;
	padding-right: 0;
}

/* Backwards-compat for templates that still use .h-100 directly */
.auth .h-100 {
	height: 100% !important;
}

/* ─── Left column: STATIC image ─── */
.auth .col-md-4 {
	height: 100%;
	padding-right: 16px;     /* gap between image and form */
}

.side-overlay {
	background-image: url(../img/service.jpg);
	background-size: cover;
	background-position: center;
	border-radius: 16px;
	height: 100%;
	width: 100%;
	position: relative;
	overflow: hidden;
}

/* Subtle gradient overlay so the logo / heading would remain
   legible if you ever drop branding on top of the image. */
.side-overlay::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(145, 9, 17, 0.18) 0%,
		rgba(0, 0, 0, 0.30) 100%);
	border-radius: 16px;
	pointer-events: none;
}

/* ─── Right column: SCROLLABLE form panel ─── */
.auth .col-md-8 {
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;     /* momentum scroll on iOS */

	/* Thin branded scrollbar */
	scrollbar-width: thin;
	scrollbar-color: rgba(145, 9, 17, 0.25) transparent;
}

.auth .col-md-8::-webkit-scrollbar {
	width: 6px;
}

.auth .col-md-8::-webkit-scrollbar-track {
	background: transparent;
}

.auth .col-md-8::-webkit-scrollbar-thumb {
	background: rgba(145, 9, 17, 0.22);
	border-radius: 3px;
}

.auth .col-md-8::-webkit-scrollbar-thumb:hover {
	background: rgba(145, 9, 17, 0.45);
}

/* ─── Inner positioning helpers ─── */
.side-container,
.auth-container {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100%;
	padding: 32px 24px 48px;
	box-sizing: border-box;
}

.auth-form {
	width: 500px;
	max-width: 100%;
}

.auth-form img {
	display: block;          /* honour the margin cleanly (inline swallows it) */
	width: 100px;
	margin-bottom: 20px;
}

.auth-heading {
	font-family: 'Playfair Display', serif;
	font-weight: 900;
	font-size: 2.7rem;
	line-height: 1.1;
	margin: 0 0 8px;         /* controlled: 8px to the subheading (a title unit) */
}

/* Secondary heading — a sub-section title within an auth panel (e.g. the
   "Add email address" block on the manage-email page). One clear step down
   from the 2.7rem .auth-heading so a panel never carries two hero titles. */
.auth-subheading-title {
	font-family: 'Playfair Display', serif;
	font-weight: 800;
	font-size: 1.45rem;
	line-height: 1.2;
	margin: 0 0 6px;
}

small {
	margin-top: 8px;
	display: block;
}

.img-container {
	width: 100%;
	text-align: center;
}

/* ════════════════════════════════════════════════════════════════
   MOBILE (≤768px)
   Stack vertically. Left becomes a compact banner. The page
   scrolls naturally — no inner scrolling.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
	.auth {
		height: auto;
		min-height: 100vh;
		padding: 12px;
		overflow: visible;
	}

	.auth .row {
		height: auto !important;
		overflow: visible;
		flex-direction: column;
		flex-wrap: wrap;
	}

	.auth .col-md-4 {
		height: auto;
		padding-right: 0;
		margin-bottom: 16px;
	}

	.side-overlay {
		height: 140px;
	}

	.auth .col-md-8 {
		height: auto;
		overflow-y: visible;       /* no inner scroll on mobile */
	}

	.auth-container,
	.side-container {
		padding: 16px 8px 32px;
	}

	.auth-heading {
		font-size: 2rem;
	}
}

/* Tablet refinement — narrower image column, more form room */
@media (min-width: 769px) and (max-width: 1024px) {
	.side-overlay {
		border-radius: 12px;
	}
	.auth-container {
		padding: 24px 16px 40px;
	}
}

/* ────────────────────────────────────────────────────────────
   Honeypot field — bulletproof off-screen cloak.
   Bots that walk the DOM auto-fill every input. We DON'T use
   display:none because some bots skip those. Instead we push
   the wrapper AND every descendant off-screen with !important.
   ──────────────────────────────────────────────────────────── */
.hp-field-wrap,
.hp-field-wrap * {
	position: absolute !important;
	left: -10000px !important;
	top: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	max-width: 1px !important;
	max-height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Cloudflare Turnstile — Cloudflare's default managed widget; we only own the
   wrapper's spacing so it sits in the form's 16px rhythm (mb-3 on the wrapper).
   The widget styles and sizes itself. */
.turnstile-field {
	margin-top: 0;
}

/* ────────────────────────────────────────────────────────────
   Wider variant for the signup form (needs room for 2x2 cards).
   ──────────────────────────────────────────────────────────── */
.auth-form-wide {
	width: 560px;
	max-width: 100%;
}

.auth-subheading {
	color: var(--grey);
	font-size: 14px;
	margin: 0 0 24px;        /* one clean step from the title into the form */
	line-height: 1.5;
}

.auth-field-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--dark-grey);
	margin-bottom: 6px;
	letter-spacing: 0.01em;
}

.auth-field-help {
	display: block;
	font-size: 12px;
	color: var(--grey);
	margin-top: 8px;
	line-height: 1.6;
}

.auth-field-help ul {
	margin: 6px 0 0;
	padding-left: 18px;
}

.auth-field-help ul li {
	margin-bottom: 2px;
	font-size: 11.5px;
	color: var(--grey);
}

.auth-divider {
	border: none;
	border-top: 1px solid rgba(0, 0, 0, 0.07);
	margin: 28px 0;
}

.auth-secondary-link {
	font-size: 13px;
	font-weight: 500;
	color: var(--grey);      /* muted, matching the subheading (was near-black) */
}

.auth-secondary-link:hover {
	color: var(--red);
}

/* Secondary nav row (Sign in · Back to homepage) on auth-flow pages. No top
   margin of its own — the preceding block's 16px (mb-3) sets the gap, so the
   footer keeps the same vertical rhythm as the form. */
.auth-nav {
	margin-top: 0;
}

.auth-nav-sep {
	color: var(--grey);
	margin: 0 10px;
	font-size: 13px;
}

/* ────────────────────────────────────────────────────────────
   User-type radio cards (2 x 2 grid).
   The actual <input type="radio"> is visually hidden but is
   the real form control. The <label> wraps it as a card.
   ──────────────────────────────────────────────────────────── */
.ut-section {
	margin-bottom: 16px;   /* match the 16px field rhythm below */
}

.ut-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.ut-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 16px 16px 14px;
	border: 1.5px solid rgba(0, 0, 0, 0.08);
	border-radius: 14px;
	background: #fff;
	cursor: pointer;
	position: relative;
	user-select: none;
	transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.ut-card:hover {
	border-color: var(--clay);
	background: rgba(254, 215, 201, 0.25);
}

/* Hide the actual radio — the label is the visual control */
.ut-card input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
}

.ut-card-icon {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--peach);
	color: var(--red);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	margin-bottom: 12px;
	transition: background 0.2s ease, color 0.2s ease;
}

.ut-card-title {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--dark-grey);
	line-height: 1.25;
	margin-bottom: 2px;
}

.ut-card-sub {
	font-size: 11.5px;
	color: #888;
	font-weight: 400;
}

/* Selected state */
.ut-card.is-selected {
	border-color: var(--red);
	background: var(--peach);
}

.ut-card.is-selected .ut-card-icon {
	background: var(--red);
	color: var(--peach);
}

.ut-card.is-selected::after {
	content: '\f00c';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	position: absolute;
	top: 14px;
	right: 14px;
	color: var(--red);
	font-size: 12px;
}

/* Focus ring for keyboard users */
.ut-card:has(input:focus-visible) {
	outline: 2px solid var(--red);
	outline-offset: 2px;
}

@media (max-width: 576px) {
	.auth-form-wide {
		width: 100%;
	}
	.ut-grid {
		grid-template-columns: 1fr;
	}
}

/* ════════════════════════════════════════════════════════════════
   EMAIL TYPO SUGGESTION
   Injected by auth-enhancements.js below an [data-emailcheck] field.
   ════════════════════════════════════════════════════════════════ */
.email-suggestion {
	font-size: 12px;
	color: #777;
	margin-top: 6px;
	min-height: 1.2em;   /* prevent layout jump */
	line-height: 1.4;
}

.email-suggestion:empty {
	display: none;
}

.email-suggestion-link {
	color: var(--red);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.email-suggestion-link:hover {
	color: var(--rosewood);
}

/* ════════════════════════════════════════════════════════════════
   PASSWORD STRENGTH METER
   Injected by auth-enhancements.js below an [data-password-strength] field.
   ════════════════════════════════════════════════════════════════ */
.pw-strength {
	margin-top: 8px;
	margin-bottom: 4px;
}

.pw-strength-bar {
	height: 4px;
	background: rgba(0, 0, 0, 0.08);
	border-radius: 2px;
	overflow: hidden;
}

.pw-strength-fill {
	height: 100%;
	width: 0;
	background: var(--grey);
	border-radius: 2px;
	transition: width 0.25s ease, background-color 0.25s ease;
}

.pw-strength-fill[data-score="0"] { background: #d9534f; }
.pw-strength-fill[data-score="1"] { background: #e07b51; }
.pw-strength-fill[data-score="2"] { background: #e7b34a; }
.pw-strength-fill[data-score="3"] { background: #5cb85c; }
.pw-strength-fill[data-score="4"] { background: #2a9d3f; }

.pw-strength-label {
	display: block;
	font-size: 11px;
	margin-top: 6px;
	font-weight: 500;
	letter-spacing: 0.04em;
	min-height: 1em;
}

.pw-strength-label[data-score="0"] { color: #d9534f; }
.pw-strength-label[data-score="1"] { color: #e07b51; }
.pw-strength-label[data-score="2"] { color: #c79434; }
.pw-strength-label[data-score="3"] { color: #2a9d3f; }
.pw-strength-label[data-score="4"] { color: #2a9d3f; }

/* ════════════════════════════════════════════════════════════════
   INLINE FIELD VALIDATION
   Driven by form-enhancements.js. Applied to inputs with
   data-validate / data-validate-match. Plus character counters
   on textareas with data-counter.
   ════════════════════════════════════════════════════════════════ */

input.is-valid,
input.is-invalid,
textarea.is-valid,
textarea.is-invalid {
	background-image: none !important;     /* override Bootstrap's icon bg */
	padding-right: 24px !important;
}

input.is-valid,
textarea.is-valid {
	border-color: #2a9d3f !important;
	box-shadow: 0 0 0 1px rgba(42, 157, 63, 0.12) inset !important;
}

input.is-invalid,
textarea.is-invalid {
	border-color: #d9534f !important;
	box-shadow: 0 0 0 1px rgba(217, 83, 79, 0.12) inset !important;
}

.field-feedback {
	display: block;
	font-size: 11.5px;
	margin-top: 5px;
	line-height: 1.4;
	min-height: 0;
}

.field-feedback-ok {
	color: #2a9d3f;
}

.field-feedback-bad {
	color: #d9534f;
}

.field-feedback-ok::before {
	content: '\f00c';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	margin-right: 4px;
}

.field-feedback-bad::before {
	content: '\f071';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	margin-right: 4px;
}

/* Character counter — appears below a textarea with data-counter="N" */
.char-counter {
	display: block;
	text-align: right;
	font-size: 11px;
	color: var(--grey);
	margin-top: 4px;
	font-variant-numeric: tabular-nums;
}

.char-counter-near {
	color: #c79434;
}

.char-counter-over {
	color: #d9534f;
	font-weight: 600;
}

/* ──────────────────────────────────────────────────────────
   Defensive field styling for allauth pages that render default
   forms (set password, manage email, reset-from-key). Ensures bare
   inputs inside .auth-form match the .form-control look used across
   the rest of the auth flow, even when the widget lacks the class.
   ────────────────────────────────────────────────────────── */
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="number"],
.auth-form select,
.auth-form textarea {
	width: 100%;
	padding: 12px 24px;
	font-size: 14px;
	background-color: var(--light-grey);
	border-radius: 16px;
	border: 1px solid transparent;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-form input[type="text"]:focus,
.auth-form input[type="email"]:focus,
.auth-form input[type="password"]:focus,
.auth-form input[type="number"]:focus,
.auth-form select:focus,
.auth-form textarea:focus {
	outline: none;
	border-color: var(--red);
	box-shadow: 0 0 0 .2rem var(--peach);
}

/* Django as_p rendering: tidy label + spacing */
.auth-fields p { margin-bottom: 16px; }
.auth-fields label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--dark-grey);
	margin-bottom: 6px;
}
.auth-fields .helptext {
	display: block;
	font-size: 11px;
	color: var(--grey);
	margin-top: 6px;
	line-height: 1.5;
}
.auth-fields ul { margin: 6px 0 0; padding-left: 18px; }
.auth-fields ul li { font-size: 11px; color: var(--grey); }

/* ── Manage Email page (account/email.html) ── */
.email-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 22px;
}

.email-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	background: var(--light-grey);
	border: 1px solid transparent;
	border-radius: 14px;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.email-row:hover { border-color: var(--peach); }

.email-row input[type="radio"] { accent-color: var(--red); width: 16px; height: 16px; flex-shrink: 0; }

.email-row:has(input:checked) {
	border-color: var(--red);
	background: #fff;
}

.email-row-main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex: 1;
	min-width: 0;
	flex-wrap: wrap;
}

.email-row-addr {
	font-size: 14px;
	font-weight: 500;
	color: var(--dark-grey);
	word-break: break-all;
}

.email-row-badges { display: inline-flex; gap: 6px; flex-shrink: 0; }

.email-badge {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 999px;
}

.email-badge-verified { background: #e3f5e9; color: #0a8a3a; }
.email-badge-unverified { background: #fdecea; color: #c0392b; }
.email-badge-primary { background: var(--peach); color: var(--red); }

.email-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

/* ════════════════════════════════════════════════════════════════
   AUTH ACTIONS — aligned, full-width CTAs + centred secondary links
   ════════════════════════════════════════════════════════════════
   Primary calls-to-action (btn-large) stretch to the form width so
   every button lines up in one clean column and reads at a consistent
   height; the text links beneath sit centred under them. Scoped to
   .auth-form, so the compact inline row-actions on the manage-email
   page (btn-small / btn-medium) are deliberately left untouched. */
.auth-form .btn-large {
	display: block;
	width: 100%;
	padding: 13px 24px;      /* ~46px tall — comfortable, not chunky */
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
}

/* Centred secondary-link rows read as one quiet, aligned line. */
.auth-nav {
	line-height: 1.6;
}