/**
 * AutoFlowsy — public auth forms & social buttons.
 * Dynamic colors use CSS custom properties set on elements (see PHP).
 */

/* Separator (OR line) — vars: --af-sep-line, --af-sep-text, --af-sep-bg, --af-sep-fs */
.af-auth-separator {
	display: flex;
	align-items: center;
	text-align: center;
	margin: 20px 0;
}

.af-auth-separator::before,
.af-auth-separator::after {
	content: "";
	flex: 1;
	border-bottom: 1px solid var(--af-sep-line, #555555);
}

.af-auth-separator .af-auth-separator-text {
	padding: 0 15px;
	color: var(--af-sep-text, #ffffff);
	background-color: var(--af-sep-bg, transparent);
	font-size: var(--af-sep-fs, 14px);
}

/* Google — vars: --af-soc-bg, --af-soc-text, --af-soc-border, --af-soc-bg-h, --af-soc-text-h, --af-soc-border-h */
.af-social-google-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--af-soc-bg, #ffffff);
	color: var(--af-soc-text, #1f2937);
	border: 1px solid var(--af-soc-border, #dadce0);
	padding: 10px 16px;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 500;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	transition: all 0.2s ease;
	cursor: pointer;
	width: 100%;
	box-sizing: border-box;
}

.af-social-google-btn:hover {
	background-color: var(--af-soc-bg-h, #f8fafc);
	color: var(--af-soc-text-h, #111827);
	border-color: var(--af-soc-border-h, #d1d5db);
}

.af-social-google-btn svg {
	width: 18px;
	height: 18px;
	min-width: 18px;
	display: block;
}

.af-social-google-btn span {
	margin-left: 10px;
	white-space: nowrap;
}

.af-social-google-btn.icon-only {
	padding: 10px;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	justify-content: center;
}

.af-social-google-btn.icon-only span {
	display: none;
}

.af-standalone .af-social-google-btn {
	width: auto;
}

/* Apple — vars: --af-apple-bg, --af-apple-text, --af-apple-border */
.af-social-apple-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--af-apple-bg, #000000);
	color: var(--af-apple-text, #ffffff);
	border: 1px solid var(--af-apple-border, #000000);
	padding: 10px 16px;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 500;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	transition: all 0.2s ease;
	cursor: pointer;
	width: 100%;
	box-sizing: border-box;
}

.af-social-apple-btn:hover {
	opacity: 0.9;
}

.af-social-apple-btn svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.af-social-apple-btn span {
	margin-left: 10px;
	white-space: nowrap;
}

.af-social-apple-btn.icon-only {
	padding: 10px;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	justify-content: center;
}

.af-social-apple-btn.icon-only span {
	display: none;
}

/* -------------------------------------------------------------------------- */
/* Auth forms — structural presets + --af-auth-* theme variables (from PHP)   */
/* -------------------------------------------------------------------------- */

/**
 * AutoFlowsy — public auth forms & social buttons.
 * Dynamic colors use CSS custom properties set on elements (see PHP).
 */

/* Separator (OR line) — vars: --af-sep-line, --af-sep-text, --af-sep-bg, --af-sep-fs */
.af-auth-separator {
	display: flex;
	align-items: center;
	text-align: center;
	margin: 20px 0;
}

.af-auth-separator::before,
.af-auth-separator::after {
	content: "";
	flex: 1;
	border-bottom: 1px solid var(--af-sep-line, #555555);
}

.af-auth-separator .af-auth-separator-text {
	padding: 0 15px;
	color: var(--af-sep-text, #ffffff);
	background-color: var(--af-sep-bg, transparent);
	font-size: var(--af-sep-fs, 14px);
}

/* Google — vars: --af-soc-bg, --af-soc-text, --af-soc-border, --af-soc-bg-h, --af-soc-text-h, --af-soc-border-h */
.af-social-google-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--af-soc-bg, #ffffff);
	color: var(--af-soc-text, #1f2937);
	border: 1px solid var(--af-soc-border, #dadce0);
	padding: 10px 16px;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 500;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	transition: all 0.2s ease;
	cursor: pointer;
	width: 100%;
	box-sizing: border-box;
}

.af-social-google-btn:hover {
	background-color: var(--af-soc-bg-h, #f8fafc);
	color: var(--af-soc-text-h, #111827);
	border-color: var(--af-soc-border-h, #d1d5db);
}

.af-social-google-btn svg {
	width: 18px;
	height: 18px;
	min-width: 18px;
	display: block;
}

.af-social-google-btn span {
	margin-left: 10px;
	white-space: nowrap;
}

.af-social-google-btn.icon-only {
	padding: 10px;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	justify-content: center;
}

.af-social-google-btn.icon-only span {
	display: none;
}

.af-standalone .af-social-google-btn {
	width: auto;
}

/* Apple — vars: --af-apple-bg, --af-apple-text, --af-apple-border */
.af-social-apple-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--af-apple-bg, #000000);
	color: var(--af-apple-text, #ffffff);
	border: 1px solid var(--af-apple-border, #000000);
	padding: 10px 16px;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 500;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	transition: all 0.2s ease;
	cursor: pointer;
	width: 100%;
	box-sizing: border-box;
}

.af-social-apple-btn:hover {
	opacity: 0.9;
}

.af-social-apple-btn svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.af-social-apple-btn span {
	margin-left: 10px;
	white-space: nowrap;
}

.af-social-apple-btn.icon-only {
	padding: 10px;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	justify-content: center;
}

.af-social-apple-btn.icon-only span {
	display: none;
}

/* -------------------------------------------------------------------------- */
/* Auth forms — structural presets + --af-auth-* theme variables (from PHP)   */
/* -------------------------------------------------------------------------- */

.af-form-container {
	background-color: var(--af-auth-container-bg, transparent);
	padding: var(--af-auth-container-padding, 0);
	border-radius: var(--af-auth-container-radius, 0);
	border-width: var(--af-auth-container-border-width, 0);
	border-style: var(--af-auth-container-border-style, solid);
	border-color: var(--af-auth-container-border-color, transparent);
	box-sizing: border-box;
}

.af-form-container * {
	box-sizing: border-box;
}

.af-form-container .af-auth-form,
.af-form-container .af-auth-form .af-form-row {
	width: 100%;
	display: block;
}

.af-form-container .af-auth-form input:not([type="checkbox"]):not([type="radio"]) {
	width: 100%;
	display: block;
}

.af-form-container .af-auth-form .af-submit-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	gap: 15px;
}

/* --- OTP / Activation Code Field Group Logic --- */
.af-flex-input-group {
    display: flex;
    align-items: flex-end;
    gap: 8px; /* Tighter gap to pull the button close */
    width: 100%;
    position: relative;
    justify-content: flex-start; /* Snaps everything to the left */
}

/* Force the OTP field to EXACTLY 50% width */
.af-flex-input-group .af-field-otp {
    flex: 0 0 50% !important;
    width: 50% !important; 
    min-width: 0;
}

/* Send Code Button specific logic & 15px radius */
.af-form-container .af-auth-form .af-send-activation-code {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 0 16px;
    height: 36px; /* Matches input height */
    border-radius: 15px; /* USER REQUESTED RADIUS */
    font-weight: 600;
    margin-bottom: 4px; /* Aligns with input border line */
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--af-auth-otp-btn-bg, #0f172a);
    color: var(--af-auth-otp-btn-text, #ffffff);
    border: 1px solid transparent;
}

/* Send Code Hover Logic (Admin Variable Fallbacks) */
.af-form-container .af-auth-form .af-send-activation-code:hover {
    background-color: var(--af-auth-otp-btn-hover-bg, var(--af-auth-otp-btn-bg, #0f172a));
    color: var(--af-auth-otp-btn-hover-text, var(--af-auth-otp-btn-text, #ffffff));
    opacity: 0.9; /* Safety fallback for visual feedback */
}

/* Error message below the field */
.af-otp-inline-message {
    margin-top: 8px;
    font-size: 13px;
    display: block;
    width: 100%;
}

.af-otp-inline-message.error {
    color: var(--af-auth-msg-error-text, #ff4d4d);
    font-weight: 500;
}

.af-form-container .af-auth-form,
.af-form-container .af-auth-form input,
.af-form-container .af-auth-form button,
.af-form-container .af-auth-form label,
.af-form-container .af-auth-form h1,
.af-form-container .af-auth-form h2,
.af-form-container .af-auth-form h3,
.af-form-container .af-auth-form p,
.af-form-container .af-auth-form span,
.af-form-container .af-auth-form a {
	font-family: var(--af-auth-font-family, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

.af-form-container.af-auth-autofill-fix .af-auth-form input:-webkit-autofill,
.af-form-container.af-auth-autofill-fix .af-auth-form input:-webkit-autofill:hover,
.af-form-container.af-auth-autofill-fix .af-auth-form input:-webkit-autofill:focus,
.af-form-container.af-auth-autofill-fix .af-auth-form input:-webkit-autofill:active {
	-webkit-text-fill-color: var(--af-auth-autofill-text-fill, #ffffff) !important;
	box-shadow: 0 0 0 1000px var(--af-auth-autofill-input-bg, #ffffff) inset !important;
	transition: background-color 5000s ease-in-out 0s;
}

.af-auth-form.af-auth-text-shadow-none label,
.af-auth-form.af-auth-text-shadow-none input,
.af-auth-form.af-auth-text-shadow-none ::placeholder,
.af-auth-form.af-auth-text-shadow-none h1,
.af-auth-form.af-auth-text-shadow-none h2,
.af-auth-form.af-auth-text-shadow-none h3,
.af-auth-form.af-auth-text-shadow-none button {
	text-shadow: none !important;
}

/* Default / flat / bold: original tighter spacing */
.af-auth-form:not(.af-preset-material) .af-form-row {
	display: flex;
	flex-direction: column-reverse;
	margin-bottom: 22px !important;
}

.af-auth-form:not(.af-preset-material) .af-form-row label {
	margin-bottom: 8px;
	display: block;
	font-weight: var(--af-auth-label-weight, 600);
	font-size: var(--af-auth-label-size, inherit);
	color: var(--af-auth-label-color, inherit);
}

/* Preset: default */
.af-auth-form.af-preset-default input:not([type="submit"]):not([type="checkbox"]) {
	height: 44px;
	padding: 10px 14px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	background: var(--af-auth-input-bg, #fff);
	box-shadow: none;
	color: var(--af-auth-input-text, inherit);
	border-color: var(--af-auth-input-border-color, #cbd5e1);
}

.af-auth-form.af-preset-default input:not([type="submit"]):not([type="checkbox"]):focus {
	border-color: var(--af-auth-input-focus-border-color, #00c2a8);
	background-color: var(--af-auth-input-focus-bg, var(--af-auth-input-bg, #fff));
	color: var(--af-auth-input-focus-text, var(--af-auth-input-text, inherit));
	outline: none;
}

.af-auth-form.af-preset-default input:not([type="submit"]):not([type="checkbox"]):hover {
	background-color: var(--af-auth-input-hover-bg, var(--af-auth-input-bg, #fff));
	border-color: var(--af-auth-input-hover-border-color, #cbd5e1);
}

/* Preset: flat */
.af-auth-form.af-preset-flat input:not([type="submit"]):not([type="checkbox"]) {
	height: 44px;
	padding: 10px 0;
	border: none;
	border-bottom: 2px solid #e2e8f0;
	border-radius: 0;
	background: var(--af-auth-input-bg, transparent);
	box-shadow: none !important;
	color: var(--af-auth-input-text, inherit);
	border-bottom-color: var(--af-auth-input-border-color, #e2e8f0);
}

.af-auth-form.af-preset-flat input:not([type="submit"]):not([type="checkbox"]):hover {
	border-bottom-color: var(--af-auth-input-hover-border-color, #cbd5e1);
	background-color: var(--af-auth-input-hover-bg, transparent);
}

.af-auth-form.af-preset-flat input:not([type="submit"]):not([type="checkbox"]):focus {
	border-bottom-color: var(--af-auth-input-focus-border-color, #00c2a8);
	background-color: var(--af-auth-input-focus-bg, transparent);
	color: var(--af-auth-input-focus-text, var(--af-auth-input-text, inherit));
	outline: none;
}

.af-auth-form.af-preset-flat {
	box-shadow: none !important;
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
}

/* Preset: bold */
.af-auth-form.af-preset-bold input:not([type="submit"]):not([type="checkbox"]) {
	height: 48px;
	padding: 10px 14px;
	border: 2px solid var(--af-auth-input-border-color, #0f172a);
	border-radius: 0;
	background: var(--af-auth-input-bg, #fff);
	box-shadow: none !important;
	font-weight: 500;
	color: var(--af-auth-input-text, inherit);
}

.af-auth-form.af-preset-bold input:not([type="submit"]):not([type="checkbox"]):focus {
	border-color: var(--af-auth-input-focus-border-color, #000);
	background-color: var(--af-auth-input-focus-bg, #fff);
	color: var(--af-auth-input-focus-text, var(--af-auth-input-text, inherit));
}

.af-auth-form.af-preset-bold input:not([type="submit"]):not([type="checkbox"]):hover {
	background-color: var(--af-auth-input-hover-bg, var(--af-auth-input-bg, #fff));
	border-color: var(--af-auth-input-hover-border-color, #0f172a);
}

.af-auth-form.af-preset-bold .af-form-row label {
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: var(--af-auth-label-weight, 800) !important;
	font-size: var(--af-auth-label-size, 12px);
	color: var(--af-auth-label-color, inherit);
}

.af-auth-form.af-preset-bold .af-auth-btn {
	border: 2px solid var(--af-auth-btn-border-color, #000);
	font-weight: 800;
	text-transform: uppercase;
	box-shadow: none !important;
}

/* Preset: material (floating labels) */
.af-auth-form.af-preset-material .af-form-row {
	position: relative;
	margin-bottom: 28px !important;
	display: block;
}

.af-preset-material .af-form-row {
	position: relative;
}

.af-auth-form.af-preset-material input:not([type="submit"]):not([type="checkbox"]) {
	width: 100%;
	height: 44px;
	padding: 12px 0 8px 0;
	border: none;
	border-bottom: 2px solid var(--af-auth-input-border-color, #cbd5e1);
	border-radius: 0;
	background: var(--af-auth-input-bg, transparent);
	box-shadow: none !important;
	font-size: 16px;
	color: var(--af-auth-input-text, inherit);
}

.af-auth-form.af-preset-material input:not([type="submit"]):not([type="checkbox"]):focus {
	border-bottom-color: var(--af-auth-input-focus-border-color, #00c2a8);
	background-color: var(--af-auth-input-focus-bg, transparent);
	color: var(--af-auth-input-focus-text, var(--af-auth-input-text, inherit));
}

.af-auth-form.af-preset-material input:not([type="submit"]):not([type="checkbox"]):hover {
	border-bottom-color: var(--af-auth-input-hover-border-color, #cbd5e1);
}

.af-auth-form.af-preset-material .af-form-row label {
	position: absolute;
	top: 12px;
	left: 0;
	font-size: var(--af-auth-label-size, 16px);
	color: var(--af-auth-label-color, #64748b);
	pointer-events: none;
	transition: 0.2s ease all;
	background: transparent;
	font-weight: var(--af-auth-label-weight, 400);
}

.af-preset-material .af-form-row label {
	position: absolute;
}

.af-auth-form.af-preset-material input:focus + label,
.af-auth-form.af-preset-material input:not(:placeholder-shown) + label {
	top: -20px;
	font-size: 12px;
	color: var(--af-auth-accent, #00c2a8);
	font-weight: 600;
}

.af-auth-form.af-preset-material {
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
	border: none;
}

/* Shared: placeholder + description */
.af-form-container .af-auth-form input::placeholder {
	color: var(--af-auth-input-placeholder, inherit);
	opacity: 1;
}

.af-form-container .af-auth-form .af-description {
	color: var(--af-auth-desc-color, inherit);
}

/* Submit + primary buttons */
.af-form-container .af-auth-form button[type="submit"].af-auth-btn,
.af-form-container .af-auth-form .af-auth-btn.af-submit-button {
	background-color: var(--af-auth-btn-bg, transparent);
	color: var(--af-auth-btn-text, inherit);
	border-width: 1px;
	border-style: solid;
	border-color: var(--af-auth-btn-border-color, transparent);
}

.af-form-container .af-auth-form button[type="submit"].af-auth-btn:hover,
.af-form-container .af-auth-form .af-auth-btn.af-submit-button:hover {
	background-color: var(--af-auth-btn-hover-bg, var(--af-auth-btn-bg, transparent));
	color: var(--af-auth-btn-hover-text, var(--af-auth-btn-text, inherit));
	border-color: var(--af-auth-btn-hover-border-color, var(--af-auth-btn-border-color, transparent));
}

/* Flash / query messages inside form container */
.af-form-container .af-auth-message.success {
    /* FIX: Force background transparent [NOTE: to change text color, edit the #ffffff hex code below] */
    background-color: transparent !important;
    color: #ffffff !important;
    font-weight: 500;
}

.af-form-container .af-auth-message.error {
	background-color: transparent !important;
	color: var(--af-auth-msg-error-text, #ff4d4d);
    font-weight: 500;
}