/* ==========================================================================
   POP360 Base Component Styles
   Shared CSS for all frontend Elementor widgets.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
	/* Colors - Primary */
	--pop360-primary: #3b3be0;
	--pop360-primary-dark: #2d2db8;
	--pop360-primary-light: #f0f0ff;
	--pop360-primary-alpha: rgba(59, 59, 224, 0.1);

	/* Colors - Semantic */
	--pop360-success: #16a34a;
	--pop360-success-dark: #166534;
	--pop360-success-bg: #dcfce7;
	--pop360-success-border: #86efac;

	--pop360-error: #dc2626;
	--pop360-error-dark: #b91c1c;
	--pop360-error-bg: #fee2e2;
	--pop360-error-border: #fca5a5;

	--pop360-warning: #f59e0b;
	--pop360-warning-dark: #92400e;
	--pop360-warning-bg: #fef3c7;

	/* Colors - Neutral */
	--pop360-text-dark: #111;
	--pop360-text-body: #374151;
	--pop360-text-muted: #666;
	--pop360-text-light: #9ca3af;
	--pop360-bg-light: #f8fafc;
	--pop360-bg-subtle: #f9fafb;
	--pop360-border: #e2e8f0;
	--pop360-border-light: #eee;

	/* Typography */
	--pop360-font: 'Rethink Sans', sans-serif;

	/* Spacing */
	--pop360-space-xs: 4px;
	--pop360-space-sm: 8px;
	--pop360-space-md: 16px;
	--pop360-space-lg: 24px;
	--pop360-space-xl: 32px;
	--pop360-space-2xl: 40px;

	/* Border Radius */
	--pop360-radius-sm: 4px;
	--pop360-radius-md: 8px;
	--pop360-radius-lg: 12px;
	--pop360-radius-xl: 18px;

	/* Shadows */
	--pop360-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
	--pop360-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.1);
	--pop360-shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.12);
}


/* --------------------------------------------------------------------------
   Auth Form Container (Login, Register, Reset Password, Forgot Password)
   -------------------------------------------------------------------------- */
.pop360-login-form-container,
.pop360-register-form-container,
.pop360-reset-password-container,
.pop360-forgot-password-container {
	background: #fff;
	border-radius: var(--pop360-radius-xl);
	box-shadow: var(--pop360-shadow-card);
	padding: 40px 36px;
	margin: 0 auto;
}

.pop360-login-form-container,
.pop360-reset-password-container,
.pop360-forgot-password-container {
	max-width: 450px;
}

.pop360-register-form-container {
	max-width: 550px;
}


/* --------------------------------------------------------------------------
   Auth Titles & Descriptions
   -------------------------------------------------------------------------- */
.pop360-login-title,
.pop360-register-title,
.pop360-reset-title,
.pop360-forgot-title {
	font-family: var(--pop360-font);
	font-weight: 800;
	margin-bottom: 12px;
	color: #000;
	text-align: center;
}

.pop360-login-title,
.pop360-register-title {
	font-size: 32px;
}

.pop360-reset-title,
.pop360-forgot-title {
	font-size: 28px;
}

.pop360-login-description,
.pop360-register-description,
.pop360-reset-description,
.pop360-forgot-description {
	font-family: var(--pop360-font);
	color: var(--pop360-text-muted);
	margin-bottom: 28px;
	text-align: center;
}

.pop360-login-description,
.pop360-register-description {
	font-size: 16px;
}

.pop360-reset-description,
.pop360-forgot-description {
	font-size: 15px;
	line-height: 1.5;
}


/* --------------------------------------------------------------------------
   Messages (Error / Success)
   -------------------------------------------------------------------------- */
.pop360-login-messages,
.pop360-register-messages,
.pop360-reset-messages,
.pop360-forgot-messages {
	padding: 12px 16px;
	border-radius: var(--pop360-radius-md);
	margin-bottom: 20px;
	font-family: var(--pop360-font);
	font-size: 14px;
}

.pop360-login-messages.error,
.pop360-register-messages.error,
.pop360-reset-messages.error,
.pop360-forgot-messages.error {
	background: var(--pop360-error-bg);
	color: var(--pop360-error);
	border: 1px solid var(--pop360-error-border);
}

.pop360-login-messages.success,
.pop360-register-messages.success,
.pop360-forgot-messages.success {
	background: var(--pop360-success-bg);
	color: var(--pop360-success);
	border: 1px solid var(--pop360-success-border);
}


/* --------------------------------------------------------------------------
   Form Group (shared across all auth forms)
   -------------------------------------------------------------------------- */
.pop360-form-group {
	margin-bottom: 20px;
}

.pop360-form-group label {
	display: block;
	font-family: var(--pop360-font);
	font-weight: 700;
	font-size: 14px;
	margin-bottom: var(--pop360-space-sm);
	color: var(--pop360-text-dark);
}

.pop360-form-group input[type="text"],
.pop360-form-group input[type="email"],
.pop360-form-group input[type="password"],
.pop360-form-group input[type="tel"],
.pop360-form-group input[type="date"],
.pop360-form-group select,
.pop360-form-group textarea {
	width: 100%;
	padding: 14px 16px;
	border: 2px solid var(--pop360-border);
	border-radius: var(--pop360-radius-lg);
	font-size: 16px;
	font-family: var(--pop360-font);
	transition: border-color 0.2s, box-shadow 0.2s;
	background: var(--pop360-bg-light);
	box-sizing: border-box;
}

.pop360-form-group input:focus,
.pop360-form-group select:focus,
.pop360-form-group textarea:focus {
	border-color: var(--pop360-primary);
	box-shadow: 0 0 0 3px var(--pop360-primary-alpha);
	outline: none;
	background: #fff;
}

.pop360-form-group input.error,
.pop360-form-group select.error,
.pop360-form-group textarea.error {
	border-color: var(--pop360-error);
}

.pop360-form-group input.success,
.pop360-form-group select.success {
	border-color: var(--pop360-success);
}

.pop360-form-group select {
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
	background-position: right 12px center;
	background-repeat: no-repeat;
	background-size: 20px;
	padding-right: 40px;
}

.pop360-form-group textarea {
	resize: vertical;
	min-height: 100px;
}

.pop360-form-row {
	display: flex;
	gap: var(--pop360-space-md);
}

.pop360-form-group.pop360-half {
	flex: 1;
}


/* --------------------------------------------------------------------------
   Submit Buttons (shared pattern)
   -------------------------------------------------------------------------- */
.pop360-login-btn,
.pop360-register-btn,
.pop360-reset-btn,
.pop360-forgot-btn {
	width: 100%;
	padding: 16px 24px;
	border-radius: var(--pop360-radius-lg);
	border: none;
	background: var(--pop360-accent-color, var(--pop360-primary));
	color: #fff;
	font-family: var(--pop360-font);
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s, transform 0.1s;
}

.pop360-login-btn:hover,
.pop360-register-btn:hover,
.pop360-reset-btn:hover,
.pop360-forgot-btn:hover {
	background: var(--pop360-accent-color-dark, var(--pop360-primary-dark));
}

.pop360-login-btn:active,
.pop360-register-btn:active,
.pop360-reset-btn:active,
.pop360-forgot-btn:active {
	transform: scale(0.98);
}

.pop360-login-btn:disabled,
.pop360-register-btn:disabled,
.pop360-reset-btn:disabled,
.pop360-forgot-btn:disabled {
	background: var(--pop360-text-light);
	cursor: not-allowed;
	opacity: 0.7;
}


/* --------------------------------------------------------------------------
   Spinner Animation
   -------------------------------------------------------------------------- */
.pop360-login-btn .spinner,
.pop360-register-btn .spinner,
.pop360-reset-btn .spinner,
.pop360-forgot-btn .spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid #fff;
	border-top-color: transparent;
	border-radius: 50%;
	animation: pop360-spin 0.8s linear infinite;
	margin-right: var(--pop360-space-sm);
	vertical-align: middle;
}

@keyframes pop360-spin {
	to { transform: rotate(360deg); }
}


/* --------------------------------------------------------------------------
   Auth Link Sections (login-link, register-link)
   -------------------------------------------------------------------------- */
.pop360-register-link,
.pop360-login-link {
	text-align: center;
	margin-top: var(--pop360-space-lg);
	padding-top: var(--pop360-space-lg);
	border-top: 1px solid var(--pop360-border);
}

.pop360-register-link p,
.pop360-login-link p {
	font-family: var(--pop360-font);
	font-size: 14px;
	color: var(--pop360-text-muted);
	margin: 0;
}

.pop360-register-link a,
.pop360-login-link a {
	color: var(--pop360-accent-color, var(--pop360-primary));
	font-weight: 600;
	text-decoration: none;
}

.pop360-register-link a:hover,
.pop360-login-link a:hover {
	text-decoration: underline;
}


/* --------------------------------------------------------------------------
   Password Strength Indicator (shared by register + reset)
   -------------------------------------------------------------------------- */
.pop360-password-strength {
	margin-top: var(--pop360-space-sm);
}

.pop360-strength-bar,
.strength-bar {
	height: 5px;
	background: var(--pop360-border);
	border-radius: 3px;
	overflow: hidden;
}

.pop360-strength-fill,
.strength-fill {
	height: 100%;
	width: 0%;
	transition: width 0.3s, background-color 0.3s;
	border-radius: 3px;
}

.pop360-strength-fill.weak,
.strength-fill.weak { width: 25%; background: var(--pop360-error); }

.pop360-strength-fill.fair,
.strength-fill.fair { width: 50%; background: var(--pop360-warning); }

.pop360-strength-fill.good,
.strength-fill.good { width: 75%; background: #10b981; }

.pop360-strength-fill.strong,
.strength-fill.strong { width: 100%; background: var(--pop360-success); }

.pop360-strength-text,
.strength-text {
	font-family: var(--pop360-font);
	font-size: 12px;
	color: var(--pop360-text-muted);
	margin-top: var(--pop360-space-xs);
	display: block;
}


/* --------------------------------------------------------------------------
   Password Match Indicator
   -------------------------------------------------------------------------- */
.pop360-password-match {
	font-family: var(--pop360-font);
	font-size: 12px;
	margin-top: 6px;
	display: block;
}

.pop360-password-match.match { color: var(--pop360-success); }
.pop360-password-match.no-match { color: var(--pop360-error); }


/* --------------------------------------------------------------------------
   Auth Success / Status States
   -------------------------------------------------------------------------- */
.pop360-logged-in-message,
.pop360-register-logged-in,
.pop360-reset-success,
.pop360-forgot-success,
.pop360-reset-invalid,
.pop360-blocked-message {
	text-align: center;
	padding: 30px 20px;
}

.pop360-logged-in-message .icon,
.pop360-register-logged-in-icon,
.pop360-reset-success .success-icon,
.pop360-forgot-success .success-icon,
.pop360-reset-invalid .invalid-icon,
.pop360-blocked-message .icon {
	font-size: 48px;
	margin-bottom: var(--pop360-space-md);
}

.pop360-logged-in-message h3,
.pop360-reset-success h3,
.pop360-forgot-success h3 {
	font-family: var(--pop360-font);
	font-weight: 700;
	font-size: 22px;
	margin-bottom: 12px;
}

.pop360-reset-success h3,
.pop360-forgot-success h3 {
	color: var(--pop360-success-dark);
}

.pop360-logged-in-message p,
.pop360-reset-success p,
.pop360-forgot-success p {
	font-family: var(--pop360-font);
	font-size: 15px;
	color: var(--pop360-text-muted);
	line-height: 1.5;
	margin-bottom: 20px;
}

.pop360-logged-in-message .buttons,
.pop360-register-logged-in-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}


/* --------------------------------------------------------------------------
   Button Variants (shared across widgets)
   -------------------------------------------------------------------------- */
.pop360-btn-sm {
	padding: 8px 16px;
	font-size: 13px;
}

.pop360-btn-outline {
	background: transparent;
	color: var(--pop360-text-body);
	border: 2px solid var(--pop360-border);
	border-radius: var(--pop360-radius-md);
	cursor: pointer;
	transition: all 0.2s;
}

.pop360-btn-outline:hover {
	background: #f3f4f6;
}

.pop360-btn-link {
	background: transparent;
	color: #6b7280;
	border: none;
	padding: 8px 12px;
	cursor: pointer;
}

.pop360-btn-link:hover {
	color: var(--pop360-error);
}


/* --------------------------------------------------------------------------
   Toggle Password Visibility
   -------------------------------------------------------------------------- */
.pop360-password-wrapper {
	position: relative;
}

.pop360-toggle-password {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	font-size: 18px;
	padding: 4px;
}


/* --------------------------------------------------------------------------
   Responsive: Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.pop360-login-form-container,
	.pop360-register-form-container,
	.pop360-reset-password-container,
	.pop360-forgot-password-container {
		padding: 32px 28px;
	}
}

/* --------------------------------------------------------------------------
   Responsive: Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.pop360-login-form-container,
	.pop360-register-form-container,
	.pop360-reset-password-container,
	.pop360-forgot-password-container {
		padding: 24px 16px;
		border-radius: var(--pop360-radius-lg);
		margin: 0 8px;
	}

	.pop360-login-title,
	.pop360-register-title {
		font-size: 26px;
	}

	.pop360-reset-title,
	.pop360-forgot-title {
		font-size: 24px;
	}

	.pop360-login-description,
	.pop360-register-description {
		font-size: 14px;
		margin-bottom: 20px;
	}

	.pop360-form-row {
		flex-direction: column;
		gap: 0;
	}

	.pop360-form-group input[type="text"],
	.pop360-form-group input[type="email"],
	.pop360-form-group input[type="password"],
	.pop360-form-group input[type="tel"],
	.pop360-form-group input[type="date"],
	.pop360-form-group select,
	.pop360-form-group textarea {
		padding: 12px 14px;
		font-size: 16px; /* Prevents iOS zoom on focus */
	}

	.pop360-login-btn,
	.pop360-register-btn,
	.pop360-reset-btn,
	.pop360-forgot-btn {
		padding: 14px 20px;
		font-size: 16px;
	}

	.pop360-logged-in-message .buttons,
	.pop360-register-logged-in-actions {
		flex-direction: column;
	}
}