/**
 * Oravia Auth — Styles
 *
 * RTL-first design for login, register, reset password, and account dashboard.
 * Uses Oravia Customizer color variables.
 *
 * @package Oravia_Core
 */

/* ═══ Wrapper ═══ */
.oravia-auth-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(100vh - 200px);
	padding: 40px 20px;
	background: var(--oravia-bg, #f5f5f5);
	background-image:
		linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px);
	background-size: 30px 30px;
}

/* Full viewport centering on blank auth template (no header/footer) */
body.oravia-auth-blank .oravia-auth-wrapper {
	min-height: 100vh;
	padding: 20px;
}

/* Override any theme margins on blank template */
body.oravia-auth-blank {
	margin: 0;
	background: var(--oravia-bg, #f5f5f5);
}

/* When used inside an Elementor widget — inherit the section's background */
.oravia-auth-widget .oravia-auth-wrapper {
	min-height: unset;
	padding: 0;
	background: transparent;
	background-image: none;
}
/* If grid pattern disabled via Elementor controls */
.oravia-auth-widget.oravia-no-grid .oravia-auth-wrapper {
	background-image: none;
}

/* ═══ Card ═══ */
.oravia-auth-card {
	width: 100%;
	max-width: 440px;
	background: #fff;
	border-radius: 16px;
	padding: 40px 32px;
	box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
}

/* ═══ Logo ═══ */
.oravia-auth-logo {
	text-align: center;
	margin-bottom: 24px;
}
.oravia-auth-logo img {
	max-height: 50px;
	width: auto;
}
.oravia-auth-logo-text h1 {
	font-size: 24px;
	font-weight: 700;
	color: var(--oravia-primary, #234E52);
	margin: 0;
}

/* ═══ Title & Subtitle ═══ */
.oravia-auth-title {
	font-size: 22px;
	font-weight: 700;
	text-align: center;
	margin: 0 0 8px 0;
	color: var(--oravia-heading, #1c1c1c);
	font-family: var(--oravia-heading-font, 'Cairo', sans-serif);
}
.oravia-auth-subtitle {
	font-size: 14px;
	text-align: center;
	margin: 0 0 24px 0;
	color: var(--oravia-text-light, #6b7280);
}

/* ═══ Google Button ═══ */
.oravia-auth-google-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 12px 20px;
	background: #fff;
	border: 2px solid #e5e7eb;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	color: #374151;
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: inherit;
	margin-bottom: 20px;
}
.oravia-auth-google-btn:hover {
	background: #f9fafb;
	border-color: #d1d5db;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.oravia-auth-google-btn svg {
	flex-shrink: 0;
}

/* ═══ Divider ═══ */
.oravia-auth-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}
.oravia-auth-divider::before,
.oravia-auth-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: #e5e7eb;
}
.oravia-auth-divider span {
	font-size: 13px;
	color: #9ca3af;
	white-space: nowrap;
}

/* ═══ Form Fields ═══ */
.oravia-auth-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.oravia-auth-field label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--oravia-heading, #1c1c1c);
}
.oravia-auth-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
}
.oravia-auth-input-wrap > i {
	position: absolute;
	inset-inline-start: 14px;
	font-size: 18px;
	color: #9ca3af;
	pointer-events: none;
	z-index: 1;
}
.oravia-auth-input-wrap input {
	width: 100%;
	padding: 12px 40px 12px 14px; /* fallback for LTR; RTL handled below */
	font-size: 15px;
	font-family: inherit;
	border: 2px solid #e5e7eb;
	border-radius: 10px;
	background: #fff;
	color: var(--oravia-text, #1c1c1c);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	outline: none;
}
[dir="rtl"] .oravia-auth-input-wrap input {
	padding: 12px 44px 12px 14px;
}
[dir="ltr"] .oravia-auth-input-wrap input {
	padding: 12px 14px 12px 44px;
}
/* Password fields with toggle button need extra start padding —
   :has() keeps it working whether input is type=password (hidden) or type=text (visible) */
[dir="rtl"] .oravia-auth-input-wrap:has(.oravia-auth-toggle-pw) input,
[dir="ltr"] .oravia-auth-input-wrap:has(.oravia-auth-toggle-pw) input {
	padding-inline-start: 56px;
}

/* ═══ Password Generator Button ═══ */
.oravia-pw-generate-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-family: inherit;
	color: var(--oravia-primary, #234E52);
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px 0;
	margin-top: 2px;
	transition: opacity 0.15s;
}
.oravia-pw-generate-btn:hover {
	opacity: 0.7;
}
.oravia-pw-generate-btn i {
	font-size: 14px;
}

/* ═══ Password Strength Meter ═══ */
.oravia-pw-strength {
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.8;
}
.oravia-auth-input-wrap input:focus {
	border-color: var(--oravia-primary, #234E52);
	box-shadow: 0 0 0 3px rgba(35, 78, 82, 0.1);
}
.oravia-auth-input-wrap input::placeholder {
	color: #cbd5e1;
}

/* ═══ Password Toggle ═══ */
.oravia-auth-toggle-pw {
	position: absolute;
	inset-inline-end: 12px;
	background: none;
	border: none;
	padding: 4px;
	cursor: pointer;
	color: #9ca3af;
	font-size: 20px;
	display: flex;
	align-items: center;
	transition: color 0.15s;
	z-index: 2;
}
.oravia-auth-toggle-pw:hover {
	color: var(--oravia-primary, #234E52);
}

/* ═══ Remember + Forgot ═══ */
.oravia-auth-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.oravia-auth-remember {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: var(--oravia-text-light, #6b7280);
	cursor: pointer;
}
.oravia-auth-remember input[type="checkbox"] {
	accent-color: var(--oravia-primary, #234E52);
	width: 16px;
	height: 16px;
}
.oravia-auth-link {
	font-size: 14px;
	color: var(--oravia-primary, #234E52);
	text-decoration: none;
	font-weight: 500;
	transition: opacity 0.15s;
}
.oravia-auth-link:hover {
	opacity: 0.8;
}

/* ═══ Turnstile ═══ */
.oravia-auth-turnstile {
	display: flex;
	justify-content: center;
}

/* ═══ Messages ═══ */
.oravia-auth-message {
	min-height: 24px;
	font-size: 13px;
	text-align: center;
	transition: all 0.3s;
}
.oravia-auth-message:empty {
	min-height: 0;
}
.oravia-auth-message.oravia-auth-error {
	color: #dc2626;
	background: #fef2f2;
	padding: 10px 14px;
	border-radius: 8px;
	border: 1px solid #fecaca;
}
.oravia-auth-message.oravia-auth-success {
	color: #16a34a;
	background: #f0fdf4;
	padding: 10px 14px;
	border-radius: 8px;
	border: 1px solid #bbf7d0;
}

/* ═══ Submit Button ═══ */
.oravia-auth-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 13px 20px;
	background: var(--oravia-primary, #234E52);
	color: #fff;
	border: none;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
}
.oravia-auth-submit:hover {
	background: var(--oravia-primary-dark, #1a3b3f);
	box-shadow: 0 4px 12px rgba(35, 78, 82, 0.3);
}
.oravia-auth-submit:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}
.oravia-auth-spinner {
	width: 20px;
	height: 20px;
	border: 2px solid rgba(255,255,255,0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: oravia-spin 0.6s linear infinite;
}
.oravia-auth-spinner[hidden] {
	display: none;
}
@keyframes oravia-spin {
	to { transform: rotate(360deg); }
}

/* ═══ Footer Text ═══ */
.oravia-auth-footer-text {
	text-align: center;
	font-size: 14px;
	color: var(--oravia-text-light, #6b7280);
	margin: 16px 0 0 0;
}
.oravia-auth-footer-text a {
	color: var(--oravia-primary, #234E52);
	text-decoration: none;
	font-weight: 600;
}
.oravia-auth-footer-text a:hover {
	text-decoration: underline;
}

/* ═══ 2FA Section ═══ */
.oravia-2fa-section {
	margin-bottom: 24px;
	padding: 18px;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
}
.oravia-2fa-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}
.oravia-2fa-header i {
	font-size: 22px;
	color: var(--oravia-primary, #234E52);
}
.oravia-2fa-header strong {
	font-size: 15px;
	color: var(--oravia-heading, #1c1c1c);
	display: block;
}
.oravia-2fa-status {
	font-size: 12px;
	font-weight: 600;
	color: #9ca3af;
}
.oravia-2fa-status.active {
	color: #16a34a;
}
.oravia-2fa-desc {
	font-size: 13px;
	color: #6b7280;
	margin: 0 0 14px;
}
.oravia-2fa-setup {
	margin-top: 12px;
}
.oravia-2fa-disable-btn {
	margin-top: 8px;
}

/* ═══ Account Dashboard ═══ */
.oravia-account-card {
	max-width: 480px;
}
.oravia-account-header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 28px;
	padding-bottom: 20px;
	border-bottom: 1px solid #f3f4f6;
}
.oravia-account-avatar img {
	border-radius: 50%;
	border: 3px solid var(--oravia-primary, #234E52);
}
.oravia-account-info h2 {
	font-size: 18px;
	margin: 0 0 4px 0;
	color: var(--oravia-heading, #1c1c1c);
}
.oravia-account-info p {
	font-size: 14px;
	color: var(--oravia-text-light, #6b7280);
	margin: 0;
}
.oravia-account-actions {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.oravia-account-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 10px;
	text-decoration: none;
	color: var(--oravia-text, #1c1c1c);
	font-size: 15px;
	font-weight: 500;
	transition: background 0.15s;
}
.oravia-account-link i {
	font-size: 20px;
	color: var(--oravia-primary, #234E52);
	width: 24px;
	text-align: center;
}
.oravia-account-link:hover {
	background: #f9fafb;
}
.oravia-account-logout {
	color: #dc2626;
}
.oravia-account-logout i {
	color: #dc2626;
}
.oravia-account-logout:hover {
	background: #fef2f2;
}

/* ═══ Verification Code Input ═══ */
.oravia-verify-section {
	text-align: center;
}
.oravia-verify-code-input {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-bottom: 16px;
	direction: ltr; /* Digits are LTR always, regardless of page RTL */
}
.oravia-verify-code-input input {
	width: 48px;
	height: 56px;
	text-align: center;
	font-size: 22px;
	font-weight: 700;
	border: 2px solid #e5e7eb;
	border-radius: 10px;
	outline: none;
	transition: border-color 0.2s;
	font-family: inherit;
}
.oravia-verify-code-input input:focus {
	border-color: var(--oravia-primary, #234E52);
}
/* Shake animation for wrong 2FA code */
@keyframes oravia-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-6px); }
	40% { transform: translateX(6px); }
	60% { transform: translateX(-4px); }
	80% { transform: translateX(4px); }
}
.oravia-verify-code-input.oravia-shake {
	animation: oravia-shake 0.4s ease;
}
.oravia-verify-code-input.oravia-shake input {
	border-color: #dc2626;
	background-color: #fef2f2;
}
.oravia-verify-code-input.oravia-success input {
	border-color: #16a34a;
	background-color: #f0fdf4;
}
.oravia-verify-resend {
	font-size: 14px;
	color: var(--oravia-primary, #234E52);
	background: none;
	border: none;
	cursor: pointer;
	font-weight: 600;
	margin-top: 8px;
	text-decoration: underline;
}
.oravia-verify-resend:disabled {
	color: #9ca3af;
	cursor: not-allowed;
	text-decoration: none;
}

/* ═══ Responsive ═══ */
@media (max-width: 480px) {
	.oravia-auth-card {
		padding: 28px 20px;
		border-radius: 12px;
	}
	.oravia-auth-wrapper {
		padding: 20px 12px;
	}
	.oravia-auth-title {
		font-size: 20px;
	}
	.oravia-verify-code-input input {
		width: 40px;
		height: 48px;
		font-size: 20px;
	}
}