/**
 * Argo Core — component styles (auth + base).
 * Layered on top of Tailwind utilities for the reusable widgets that the
 * markup references by class. All brand colors come from argo-tokens.css.
 */

.argo-auth,
.argo-app {
	font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
}

/* Auth screens ----------------------------------------------------------- */
.argo-auth-bg { background: var(--argo-bg); }
.argo-auth-card { box-shadow: var(--argo-shadow-lg); }

/* Form controls ---------------------------------------------------------- */
.argo-label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--argo-ink-700);
	margin-bottom: 0.45rem;
}

.argo-input {
	width: 100%;
	padding: 0.8rem 1rem;
	border: 1px solid var(--argo-border-strong);
	border-radius: 0.875rem;
	background: #fff;
	font-size: 0.95rem;
	color: var(--argo-ink-900);
	font-family: inherit; /* inherit DM Sans from the portal shell */
	transition: border-color 0.15s, box-shadow 0.15s;
	outline: none;
}
.argo-input::placeholder { color: var(--argo-ink-400); }
.argo-input:focus {
	border-color: var(--argo-brand);
	box-shadow: 0 0 0 3px rgba(25, 22, 109, 0.12);
}

/* Input group with a trailing affix button (e.g. password reveal) ------- */
.argo-input-group { position: relative; }
.argo-input-group .argo-input { padding-right: 2.75rem; }
.argo-input-affix {
	position: absolute;
	top: 50%;
	right: 0.5rem;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 2rem;
	width: 2rem;
	border: none;
	background: transparent;
	color: var(--argo-ink-400);
	cursor: pointer;
	border-radius: 0.5rem;
	transition: color 0.15s, background 0.15s;
}
.argo-input-affix:hover { color: var(--argo-brand); background: var(--argo-surface-2); }

/* Buttons ---------------------------------------------------------------- */
.argo-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.9rem 1.25rem;
	border-radius: 0.875rem;
	background: var(--argo-brand);
	color: #fff;
	font-weight: 600;
	font-size: 0.95rem;
	border: none;
	cursor: pointer;
	transition: background 0.15s, transform 0.05s, box-shadow 0.15s;
}
.argo-btn-primary:hover { background: var(--argo-brand-dark); box-shadow: var(--argo-shadow-brand); }
.argo-btn-primary:active { transform: translateY(1px); }
.argo-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.argo-btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.7rem 1.25rem;
	border-radius: 0.75rem;
	background: #fff;
	color: #334155;
	font-weight: 600;
	font-size: 0.9rem;
	border: 1px solid #e2e8f0;
	cursor: pointer;
}
.argo-btn-secondary:hover { background: #f8fafc; }

/* Alerts ----------------------------------------------------------------- */
.argo-alert {
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.4;
}
.argo-alert.is-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.argo-alert.is-success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.argo-alert.is-info { background: var(--argo-brand-light); color: var(--argo-brand-dark); border: 1px solid #c7d2fe; }

/* Registration tabs ------------------------------------------------------ */
.argo-tab {
	padding: 0.55rem 0.75rem;
	border-radius: 0.6rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: #64748b;
	background: transparent;
	border: none;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.argo-tab-active {
	background: #fff;
	color: var(--argo-brand);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* Spinner ---------------------------------------------------------------- */
.argo-spinner {
	height: 2.5rem;
	width: 2.5rem;
	border-radius: 9999px;
	border: 3px solid var(--argo-brand-light);
	border-top-color: var(--argo-brand);
	animation: argo-spin 0.7s linear infinite;
}
@keyframes argo-spin { to { transform: rotate(360deg); } }

/* Notification rows ------------------------------------------------------ */
.argo-notif {
	display: block;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid #f1f5f9;
}
.argo-notif.is-unread { background: #f8faff; }
.argo-notif-title { font-size: 0.85rem; font-weight: 600; color: #0f172a; }
.argo-notif-msg { font-size: 0.8rem; color: #64748b; margin-top: 0.125rem; }
.argo-notif-time { font-size: 0.7rem; color: #94a3b8; margin-top: 0.25rem; }

/* Social sign-in buttons (auth) ----------------------------------------- */
.argo-social-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	width: 100%;
	padding: 0.7rem 1rem;
	border: 1px solid var(--argo-border-strong);
	border-radius: 0.75rem;
	background: #fff;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--argo-ink-700);
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.argo-social-btn:hover { background: var(--argo-surface-2); border-color: var(--argo-ink-300); box-shadow: var(--argo-shadow-xs); }

/* Signup account-type choice cards -------------------------------------- */
.argo-choice-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	text-align: center;
	padding: 1.25rem 1rem;
	border: 1.5px solid var(--argo-border-strong);
	border-radius: 1rem;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
	color: var(--argo-ink-700);
}
.argo-choice-card:hover { border-color: var(--argo-brand-300); background: var(--argo-surface-2); }
.argo-choice-card .argo-choice-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 2.75rem;
	width: 2.75rem;
	border-radius: 0.875rem;
	background: var(--argo-brand-50);
	color: var(--argo-brand);
	transition: background 0.15s, color 0.15s;
}
.argo-choice-card.is-selected {
	border-color: var(--argo-brand);
	background: var(--argo-brand-50);
	box-shadow: 0 0 0 3px rgba(25, 22, 109, 0.10);
}
.argo-choice-card.is-selected .argo-choice-icon { background: var(--argo-brand); color: #fff; }

/* International phone input --------------------------------------------- */
.argo-phone-row { position: relative; display: flex; gap: 0.5rem; }
.argo-phone-country {
	display: inline-flex; align-items: center; gap: 0.4rem;
	padding: 0 0.75rem; height: 3rem;
	border: 1px solid var(--argo-border-strong); border-radius: 0.875rem;
	background: #fff; cursor: pointer; color: var(--argo-ink-500);
	transition: border-color 0.15s, box-shadow 0.15s; flex-shrink: 0;
}
.argo-phone-country:hover { border-color: var(--argo-ink-300); }
.argo-phone-flag { font-size: 1.25rem; line-height: 1; }
.argo-phone-input {
	display: flex; align-items: center; flex: 1;
	border: 1px solid var(--argo-border-strong); border-radius: 0.875rem;
	background: #fff; padding-left: 0.875rem;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.argo-phone-input:focus-within { border-color: var(--argo-brand); box-shadow: 0 0 0 3px rgba(25,22,109,0.14); }
.argo-phone-dial { color: var(--argo-ink-500); font-size: 0.95rem; margin-right: 0.4rem; white-space: nowrap; }
.argo-phone-number {
	flex: 1; border: none; outline: none; background: transparent;
	padding: 0.8rem 0.875rem 0.8rem 0; font-size: 0.95rem; color: var(--argo-ink-900);
}
.argo-phone-menu {
	position: absolute; z-index: 60; top: calc(100% + 0.4rem); left: 0; right: 0;
	background: #fff; border: 1px solid var(--argo-border); border-radius: 1rem;
	box-shadow: var(--argo-shadow-lg); overflow: hidden;
}
.argo-phone-search {
	display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--argo-border); color: var(--argo-ink-400);
}
.argo-phone-search input { flex: 1; border: none; outline: none; font-size: 0.9rem; color: var(--argo-ink-900); background: transparent; }
.argo-phone-list { list-style: none; margin: 0; padding: 0.35rem; max-height: 14rem; overflow-y: auto; }
.argo-phone-option {
	display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.75rem;
	border-radius: 0.6rem; cursor: pointer; font-size: 0.9rem; color: var(--argo-ink-700);
}
.argo-phone-option:hover { background: var(--argo-surface-2); }
.argo-phone-option.is-active { background: var(--argo-brand-50); color: var(--argo-brand); font-weight: 600; }
.argo-phone-wa-check { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.65rem; font-size: 0.875rem; color: var(--argo-ink-700); cursor: pointer; }
.argo-phone-wa-hint { margin-top: 0.25rem; font-size: 0.75rem; color: var(--argo-ink-400); }

/* Auth full-viewport (accounts for the WP admin bar so the panel never
   scrolls under it). Used in place of a raw h-screen utility. */
.argo-auth-viewport { height: 100vh; }
body.admin-bar .argo-auth-viewport { height: calc(100vh - 32px); }
@media screen and (max-width: 782px) {
	body.admin-bar .argo-auth-viewport { height: calc(100vh - 46px); }
}

/* Mobile: release the fixed-height viewport on auth pages (login, register,
   forgot-password) so the logo scrolls with the form instead of staying
   pinned at the top of the screen. The desktop design intentionally keeps
   the logo visible while the form scrolls inside its own scroll-area, but
   on a phone there isn't enough vertical room for that nested-scroll
   pattern — it crowds the form and traps the user inside a tiny scrollable
   region. We let the body scroll naturally below 640px.

   `min-height` instead of fixed `height` lets the panel still fill the
   screen on a short form (login) while allowing it to grow past the
   viewport on the longer ones (register).

   `.argo-scroll-area` is the inner overflow:auto container created by the
   flex shell. Disabling its overflow on mobile is the other half of the
   fix — without that, the inner area would still scroll independently. */
@media (max-width: 640px) {
	.argo-auth-viewport,
	body.admin-bar .argo-auth-viewport { height: auto; min-height: 100vh; }
	.argo-auth.argo-auth-viewport,
	.argo-auth.argo-auth-viewport > * { overflow: visible !important; }
	.argo-auth.argo-auth-viewport .argo-scroll-area { overflow: visible !important; }
}

/* OTP code input -------------------------------------------------------- */
.argo-otp-input {
	font-size: 1.5rem;
	letter-spacing: 0.5em;
	text-align: center;
	font-weight: 600;
	padding-left: 1.25rem;
}
.argo-otp-input::placeholder { letter-spacing: 0.5em; color: var(--argo-ink-300); }