/* ==========================================================================
   Auth Modal (Find & Bind)
   ========================================================================== */

:root{
	--modal-z: 1000;
	--modal-backdrop: rgba(0,0,0,.5);
	--surface: #fff;
	--radius: 16px;
}

/* Container + overlay */
.fv-modal.is-hidden { display:none; }
.fv-modal{
	position:fixed; inset:0; z-index:var(--modal-z);
	display:grid; place-items:center;
}
.fv-modal__overlay{
	position:absolute; inset:0;
	background:var(--modal-backdrop);
}

/* Dialog */
.fv-modal__dialog{
	position:relative; z-index:1;
	width:min(600px, 92vw);
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius);
	box-shadow:0 20px 50px rgba(0,0,0,.18);
	padding:16px;
}
.fv-modal__close{
	position:absolute; right:10px; top:10px;
	width:36px; height:36px; border-radius:10px; border:1px solid var(--line);
	background:#fff; cursor:pointer;
}

/* Tabs */
.auth-tabs{
	display:flex; gap:8px; margin-bottom:10px;
}
.auth-tab{
	flex:1; padding:10px; border-radius:12px;
	border:1px solid var(--line); background:#f8fafc; cursor:pointer;
	font-weight:700;
}
.auth-tab.is-active{ border-color:var(--green); background:#fff; }

/* Panes */
.auth-panes{ }
.auth-pane{ display:none; }
.auth-pane.is-active{ display:block; }

/* Titles */
.auth-title{ margin:2px 0 4px; color:var(--navy); font-size:20px; }
.auth-sub{ margin:0 0 12px; color:var(--muted); }

/* Forms */
.form-grid{
	display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
@media (max-width:720px){ .form-grid{ grid-template-columns:1fr; } }

.form-row{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.row-slim{ margin-bottom:6px; }
.t-center{ text-align:center; }

.form-row label{ font-weight:700; color:var(--ink); }
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="password"]{
	height:var(--field-h); border:1px solid var(--line); border-radius:12px;
	padding:0 12px; font-size:15px;
}
.w-100{ width:100%; }

.chk{ display:flex; align-items:center; gap:8px; cursor:pointer; }
.chk input{ width:16px; height:16px; }

.hint{ color:#6b7280; }

/* Password field with toggle */
.pwd-wrap{ position:relative; }
.pwd-wrap input{ width:100%; padding-right:40px; }
.pwd-toggle{
	position:absolute; right:6px; top:50%; transform:translateY(-50%);
	border:1px solid var(--line); background:#fff; width:34px; height:34px; border-radius:10px; cursor:pointer;
}

/* Buttons reuse your theme */
.btn-owner{ background:var(--green); color:#fff; border:1px solid var(--green-dark); }

/* Errors */
.form-errors{
	margin-top:6px; color:#dc2626; font-weight:600;
}

/* Small polish on focus */
input:focus, button:focus{ outline:3px solid rgba(17,24,39,.18); outline-offset:2px; }

/* signup submit loading state */
.btn[disabled]{
	opacity:.75;
	cursor:not-allowed;
}

/* add a spinner when we set .is-loading on the button */
.btn.is-loading{
	position:relative;
}

.btn.is-loading .spinner{
	display:inline-block;
	width:1em;
	height:1em;
	margin-right:8px;
	border:2px solid currentColor;
	border-right-color:transparent;
	border-radius:50%;
	animation:spin .6s linear infinite;
	vertical-align:-0.2em;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ==========================================================================
   Find & Bind · Authentication Page
   Uses design tokens from base.css (:root)
   ========================================================================== */

/* Slim hero spacing override for this page */
.auth-hero .hero-inner {
	padding: 48px 16px 42px;
}

/*
	Contain the decorative hero circles so they do not extend the page width
	and create horizontal scrolling/right-side whitespace.
*/
.auth-hero{
	overflow:hidden;
}

/* Center card */
.auth-page { padding: 18px 0 28px; }
.auth-card{
	background:#fff;
	border:1px solid var(--line);
	border-radius:16px;
	box-shadow: var(--shadow);
	padding:18px;
	max-width:720px;
	margin:0 auto;
}

/* ==========================================================================
   Dark Theme for Auth (scoped by [data-theme="dark"] on <html>)
   ========================================================================== */

[data-theme="dark"]{
	/* override/extend tokens used by auth */
	--surface:#0e1420;                /* modal/card surface */
	--modal-backdrop:rgba(0,0,0,.7);  /* slightly darker overlay */
	--line:#1f2937;             /* borders / dividers */
	--line2:#485e7c;
}

/* --- Modal shell --- */
[data-theme="dark"] .fv-modal__overlay{
	background:var(--modal-backdrop);
}
[data-theme="dark"] .fv-modal__dialog{
	background:var(--surface);
	border-color: var(--line2);
	box-shadow:0 24px 60px rgba(0,0,0,.6);
}
[data-theme="dark"] .fv-modal__close{
	background:#0b1220;
	border-color:var(--line2);
	color:#e5e7eb;
}

/* --- Tabs --- */
[data-theme="dark"] .auth-tab{
	background:#0f172a;
	border-color:#1f2937;
	color:#e5e7eb;
}
[data-theme="dark"] .auth-tab.is-active{
	background:#0b1220;
	border-color:#2a3342;
}

/* --- Titles / text --- */
[data-theme="dark"] .auth-title{ color:#c7d2fe; }       /* uses your dark 'navy' tint vibe */
[data-theme="dark"] .auth-sub{ color:#94a3b8; }
[data-theme="dark"] .hint{ color:#8ea2ba; }
[data-theme="dark"] .form-errors{ color:#fca5a5; }      /* keep errors readable on dark */

/* --- Form controls --- */
[data-theme="dark"] .form-row label{ color:#e5e7eb; }
[data-theme="dark"] .form-row input[type="text"],
[data-theme="dark"] .form-row input[type="email"],
[data-theme="dark"] .form-row input[type="password"]{
	background:#0b1220;
	color:#e5e7eb;
	border-color:var(--line);
}
[data-theme="dark"] .pwd-toggle{
	background:#0b1220;
	color:#e5e7eb;
	border-color:var(--line);
}

/* --- Buttons (inherits your global .btn / .btn-owner) --- */
[data-theme="dark"] .btn-owner{
	/* keep brand green; just give a crisper edge on dark */
	border-color:var(--green-dark);
}

/* --- Standalone auth page card --- */
[data-theme="dark"] .auth-card{
	background:var(--surface);
	border-color:var(--line);
	box-shadow:0 20px 50px rgba(0,0,0,.55);
}

/* ==========================================================================
   Authentication Page Height / Footer
   ========================================================================== */

.auth-page-body{
	display:flex;
	flex-direction:column;
	min-height:100vh;
	min-height:100dvh;
}

/*
	The authentication form area consumes any unused viewport height,
	keeping the footer at the bottom on short pages.

	Center the authentication card vertically within the remaining
	page area on larger screens.
*/
.auth-page-body .auth-page{
	display:flex;
	align-items:center;
	width:100%;
	flex:1 0 auto;
}

.auth-page-body .site-footer{
	flex-shrink:0;
}

.auth-page-body .auth-page > .wrap{
	width:var(--page-width);
	max-width:var(--page-max);
}

/*
	On smaller screens, keep the authentication card naturally positioned
	near the top so taller forms remain comfortable to scroll and use.
*/
@media (max-width:720px){
	.auth-page-body .auth-page{
		align-items:flex-start;
	}
}

/* Google assets are hosted locally; credentials are never exposed to the browser. */
@font-face {
	font-family: 'Fnb Google Sans';
	src: url('../fonts/google-sans-medium.woff2') format('woff2');
	font-style: normal;
	font-weight: 500;
	font-display: swap;
}
/* Provider buttons share the row and wrap when the screen is too narrow. */
.auth-provider-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.auth-provider-form {
	flex: 1 1 220px;
	min-width: 0;
	margin: 0;
}
.google-signin-button, .microsoft-signin-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid #747775;
	border-radius: 4px;
	background: #fff;
	color: #1f1f1f;
	font-family: 'Fnb Google Sans', Arial, sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.google-signin-button img, .microsoft-signin-button svg {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	object-fit: contain;
}
.google-signin-button:hover:not(:disabled), .microsoft-signin-button:hover:not(:disabled) {
	background: #f8faff;
	box-shadow: 0 1px 3px rgba(60, 64, 67, .25);
}
.google-signin-button:focus-visible, .microsoft-signin-button:focus-visible {
	outline: 3px solid #4285f4;
	outline-offset: 3px;
}
.google-signin-button:disabled, .microsoft-signin-button:disabled {
	opacity: .7;
	cursor: wait;
}
/* Match the site's dark outline buttons while retaining the Google logo. */
[data-theme="dark"] .google-signin-button, [data-theme="dark"] .microsoft-signin-button {
	background: #0b1220;
	color: #e5e7eb;
	border-color: #334155;
}
[data-theme="dark"] .google-signin-button:hover:not(:disabled), [data-theme="dark"] .microsoft-signin-button:hover:not(:disabled) {
	background: #101827;
	color: #fff;
	border-color: #475569;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
[data-theme="dark"] .google-signin-button:focus-visible, [data-theme="dark"] .microsoft-signin-button:focus-visible {
	outline-color: #60a0ff;
}
.auth-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 0;
	color: var(--muted);
	font-size: 13px;
}
.auth-divider::before, .auth-divider::after {
	content: '';
	flex: 1;
	border-top: 1px solid var(--line);
}
.oauth-help {
	color: var(--muted);
	line-height: 1.6;
	margin: 16px 0;
	overflow-wrap: anywhere;
}
.oauth-notice {
	padding: 10px 0;
}
.oauth-complete .auth-sub {
	overflow-wrap: anywhere;
}
.oauth-complete .form-errors {
	margin-bottom: 12px;
}
.auth-modal-open {
	overflow: hidden;
}
.fv-modal__dialog {
	max-height: calc(100dvh - 32px);
	overflow-y: auto;
}
.fv-modal__dialog > .auth-title {
	padding-right: 40px;
}

/* Microsoft uses the system font and the same outline/button theme. */
.microsoft-signin-button { font-family: "Segoe UI", Arial, sans-serif; }
.google-signin-button.is-loading .spinner,
.microsoft-signin-button.is-loading .spinner {
	display: inline-block;
	flex: 0 0 1em;
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: spin .6s linear infinite;
}