/**
 * Phone Auth Pro – UI overrides
 * 1. Force light mode on auth forms (remove dark theme)
 * 2. Hide theme toggle
 * 3. Responsive layout fixes for mobile + Woo My Account columns
 */

/* -------------------------------------------------------------------------- */
/* Hide dark-mode theme toggle button                                        */
/* -------------------------------------------------------------------------- */
.phone-auth-pro-container button[aria-label="Toggle theme"],
.phone-auth-pro-container button[title="Switch to Light Mode"],
.phone-auth-pro-container button[title="Switch to Dark Mode"],
#phone-auth-pro-login-root button[aria-label="Toggle theme"],
#phone-auth-pro-register-root button[aria-label="Toggle theme"],
.phone-auth-pro-woo-forms button[aria-label="Toggle theme"],
.phone-auth-pro-woodmart-wrap button[aria-label="Toggle theme"] {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* -------------------------------------------------------------------------- */
/* Force LIGHT mode – neutralize .dark / prefers-color-scheme on form roots  */
/* -------------------------------------------------------------------------- */
#phone-auth-pro-login-root,
#phone-auth-pro-register-root,
.phone-auth-pro-container,
.phone-auth-pro-woo-forms,
.phone-auth-pro-woo-register,
.phone-auth-pro-woodmart-wrap,
.phone-auth-pro-combined {
	color-scheme: light !important;
}

/* Outer wrapper backgrounds – always light */
#phone-auth-pro-login-root > div,
#phone-auth-pro-register-root > div,
.phone-auth-pro-container > div {
	background-color: #f8fafc !important; /* slate-50 */
	color: #0f172a !important; /* slate-900 */
}

/* Card surfaces */
#phone-auth-pro-login-root .bg-white,
#phone-auth-pro-register-root .bg-white,
#phone-auth-pro-login-root [class*="bg-slate-900"],
#phone-auth-pro-register-root [class*="bg-slate-900"],
#phone-auth-pro-login-root [class*="dark:bg-slate"],
#phone-auth-pro-register-root [class*="dark:bg-slate"] {
	background-color: #ffffff !important;
	color: #0f172a !important;
}

/* Text colors – force light palette */
#phone-auth-pro-login-root h1,
#phone-auth-pro-register-root h1,
#phone-auth-pro-login-root .text-slate-900,
#phone-auth-pro-register-root .text-slate-900,
#phone-auth-pro-login-root [class*="dark:text-white"],
#phone-auth-pro-register-root [class*="dark:text-white"] {
	color: #0f172a !important;
}

#phone-auth-pro-login-root p,
#phone-auth-pro-register-root p,
#phone-auth-pro-login-root .text-slate-500,
#phone-auth-pro-register-root .text-slate-500,
#phone-auth-pro-login-root [class*="dark:text-slate"],
#phone-auth-pro-register-root [class*="dark:text-slate"] {
	color: #64748b !important;
}

/* Labels */
#phone-auth-pro-login-root label,
#phone-auth-pro-register-root label {
	color: #334155 !important;
}

/* Inputs – always white field, dark text */
#phone-auth-pro-login-root input,
#phone-auth-pro-register-root input,
#phone-auth-pro-login-root input[type="tel"],
#phone-auth-pro-register-root input[type="tel"],
#phone-auth-pro-login-root input[type="password"],
#phone-auth-pro-register-root input[type="password"],
#phone-auth-pro-login-root input[type="text"],
#phone-auth-pro-register-root input[type="text"] {
	background-color: #ffffff !important;
	color: #0f172a !important;
	border-color: #cbd5e1 !important;
}

#phone-auth-pro-login-root input::placeholder,
#phone-auth-pro-register-root input::placeholder {
	color: #94a3b8 !important;
}

/* Country selector button */
#phone-auth-pro-login-root button[aria-haspopup="listbox"],
#phone-auth-pro-register-root button[aria-haspopup="listbox"] {
	background-color: #f8fafc !important;
	color: #1e293b !important;
	border-color: #cbd5e1 !important;
}

/* Borders on cards */
#phone-auth-pro-login-root [class*="border-slate"],
#phone-auth-pro-register-root [class*="border-slate"],
#phone-auth-pro-login-root [class*="dark:border"],
#phone-auth-pro-register-root [class*="dark:border"] {
	border-color: #e2e8f0 !important;
}

/* -------------------------------------------------------------------------- */
/* Responsive – remove fixed min-height that breaks mobile / columns         */
/* -------------------------------------------------------------------------- */
#phone-auth-pro-login-root > div,
#phone-auth-pro-register-root > div {
	min-height: 0 !important;
	padding-top: 1rem !important;
	padding-bottom: 1rem !important;
	padding-left: 0.75rem !important;
	padding-right: 0.75rem !important;
	border-radius: 1rem !important;
}

@media (min-width: 640px) {
	#phone-auth-pro-login-root > div,
	#phone-auth-pro-register-root > div {
		padding: 1.5rem !important;
	}
}

/* Form card max width on mobile */
#phone-auth-pro-login-root .max-w-md,
#phone-auth-pro-register-root .max-w-md {
	max-width: 100% !important;
	width: 100% !important;
}

/* WooCommerce My Account two-column layout */
.phone-auth-pro-woo-forms {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 1.5rem !important;
	width: 100% !important;
}

.phone-auth-pro-woo-forms .u-column1,
.phone-auth-pro-woo-forms .u-column2,
.phone-auth-pro-woo-forms .col-1,
.phone-auth-pro-woo-forms .col-2 {
	flex: 1 1 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	padding: 0 !important;
}

@media (min-width: 768px) {
	.phone-auth-pro-woo-forms .u-column1,
	.phone-auth-pro-woo-forms .u-column2,
	.phone-auth-pro-woo-forms .col-1,
	.phone-auth-pro-woo-forms .col-2 {
		flex: 1 1 calc(50% - 0.75rem) !important;
		max-width: calc(50% - 0.75rem) !important;
	}
}

.phone-auth-pro-woo-forms h2 {
	font-size: 1.25rem;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 0.75rem;
}

/* Prevent horizontal overflow on small screens */
#phone-auth-pro-login-root,
#phone-auth-pro-register-root,
.phone-auth-pro-container,
.phone-auth-pro-woo-forms {
	overflow-x: hidden !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

#phone-auth-pro-login-root *,
#phone-auth-pro-register-root * {
	box-sizing: border-box;
}

/* Country dropdown should not overflow viewport */
#phone-auth-pro-login-root [class*="absolute"][class*="z-50"],
#phone-auth-pro-register-root [class*="absolute"][class*="z-50"] {
	max-width: min(16rem, calc(100vw - 2rem)) !important;
}

/* Primary buttons stay full width and tappable on mobile */
#phone-auth-pro-login-root button[type="submit"],
#phone-auth-pro-register-root button[type="submit"] {
	min-height: 48px;
	width: 100%;
}

/* Fix white bar / overlay artifacts from theme conflicts */
#phone-auth-pro-login-root .relative > .fixed,
#phone-auth-pro-register-root .relative > .fixed {
	/* theme toggle already hidden; ensure no leftover fixed bars */
}

/* Loading spinner area – keep compact */
#phone-auth-pro-login-root [role="status"],
#phone-auth-pro-register-root [role="status"] {
	display: inline-flex;
}

/* Mobile spacing tighten */
@media (max-width: 480px) {
	#phone-auth-pro-login-root > div,
	#phone-auth-pro-register-root > div {
		padding-left: 0.5rem !important;
		padding-right: 0.5rem !important;
		padding-top: 0.75rem !important;
		padding-bottom: 0.75rem !important;
	}

	.phone-auth-pro-woo-forms h2 {
		font-size: 1.125rem;
		text-align: center;
	}
}