:root {
	/* BookingWhizz CRM Design System tokens */
	--primary-color: #0056b3;
	--primary-dark: #004494;
	--primary-light: #0068d6;
	--theme-color: #ff8c00;
	--tertiary-color: #00a2c7;
	--success-color: #28a745;
	--warning-color: #ffc107;
	--danger-color: #dc3545;
	--info-color: #17a2b8;
	--dark: #333333;
	--medium: #666666;
	--light: #999999;
	--extra-light: #f5f7fa;
	--border-color: #e0e0e0;
	--shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	--shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.12);
	--border-radius-sm: 4px;
	--border-radius-md: 8px;
	--border-radius-lg: 12px;
	--border-radius-pill: 9999px;
	--spacing-xs: 4px;
	--spacing-sm: 8px;
	--spacing-md: 16px;
	--spacing-lg: 24px;
	--spacing-xl: 32px;
	--spacing-xxl: 48px;
	--sidebar-width: 240px;
	--sidebar-collapsed-width: 64px;
	--topbar-height: 64px;
	--transition: all 0.2s ease-out;
}

* { box-sizing: border-box; }

body.auth {
	font-family: 'Poppins', sans-serif;
	background: var(--extra-light);
	color: var(--dark);
}

/* Utilities */
.text-white-75 { color: rgba(255,255,255,.75) !important; }

/* Hero (left side) */
.hero {
	/* CRM blue gradient + optional hero image */
	background: linear-gradient(135deg, rgba(0,86,179,0.92) 0%, rgba(0,68,148,0.92) 55%, rgba(0,162,199,0.85) 100%), url('images/login-hero.jpg');
	background-size: cover;
	background-position: center;
	position: relative;
}
.hero-overlay { display: none; }
.brand-header { position: absolute; top: 32px; left: 32px; z-index: 2; color: #fff; display: flex; align-items: center; }
.brand-logo-img { height: 44px; width: auto; }
.brand-title { font-weight: 700; font-size: 22px; line-height: 1; color: #fff; }
.brand-subtitle { opacity: .85; font-size: 12px; color: #fff; }
.hero-cta { position: relative; z-index: 2; margin: 0 var(--spacing-xl) var(--spacing-xxl) var(--spacing-xl); }

/* Card (right side) */
.auth-card { 
	width: 100%; 
	max-width: 520px; 
	border-radius: var(--border-radius-lg); 
	background: #fff; 
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.12); 
}
.auth-card .form-label { font-weight: 500; color: var(--dark); }

.input-with-icon .input-group-text { background: #fff; border-right: 0; border-color: var(--border-color); }
.input-with-icon .form-control { border-left: 0; border-color: var(--border-color); padding-top: .65rem; padding-bottom: .65rem; font-family: 'Poppins', sans-serif; }
.input-with-icon .form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 .2rem rgba(0, 86, 179, .15); }
.password-toggle { border-color: var(--border-color) !important; background: #fff !important; }
.password-toggle:hover { background: #f7f9ff !important; }

/* Buttons (design system) */
.btn.btn-primary { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; color: #fff !important; transition: var(--transition); }
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn-check:checked + .btn.btn-primary,
.show > .btn.btn-primary.dropdown-toggle { background-color: var(--theme-color) !important; border-color: var(--theme-color) !important; color: #fff !important; box-shadow: 0 6px 18px rgba(0, 86, 179, 0.18); }
.btn.btn-primary:active { transform: translateY(0.5px); }

/* Secondary (theme orange) for left CTA */
.btn.btn-secondary { background-color: var(--theme-color) !important; border-color: var(--theme-color) !important; color: #fff !important; transition: var(--transition); }
.btn.btn-secondary:hover { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; }

/* Links */
.link-primary { color: var(--primary-color); }
.link-primary:hover { color: var(--primary-dark); }

/* Alerts */
#alerts .alert { border: 1px solid var(--border-color); border-radius: var(--border-radius-md); }

/* Inputs & placeholders */
.input-with-icon .form-control::placeholder { color: var(--light); opacity: .9; }
.form-control, .input-group-text { transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }

/* Checkbox accent */
.form-check-input { border-color: var(--border-color); }
.form-check-input:checked { background-color: var(--primary-color); border-color: var(--primary-color); }

/* Card border refinement */
.auth-card { border: 1px solid rgba(0,0,0,0.04); }

/* Responsive spacing - Mobile first approach */
.card-body { padding: 1.5rem; }
@media (min-width: 768px) { .card-body { padding: 2rem; } }
@media (min-width: 992px) { .card-body { padding: 2.5rem 3rem; } }

/* Hero animated gradient */
@keyframes heroGradientShift {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
.hero { background-size: 200% 200%; animation: heroGradientShift 22s ease-in-out infinite; }

/* Input icon focus highlight */
.input-with-icon .input-group-text i { color: var(--medium); transition: color .2s ease; }
.input-with-icon:focus-within .input-group-text { background: rgba(0,86,179,.06); border-color: var(--primary-color); }
.input-with-icon:focus-within .input-group-text i { color: var(--primary-color); }
.password-toggle { transition: border-color .2s ease, background-color .2s ease; }
.password-toggle:hover { border-color: var(--primary-color) !important; }

/* Button micro-interactions */
.btn { transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Card entrance */
@keyframes floatUp { from { opacity: 0; transform: translateY(8px) scale(.995); } to { opacity: 1; transform: translateY(0) scale(1); } }
.auth-card { animation: floatUp 600ms ease 120ms both; }

/* ===== MOBILE RESPONSIVE STYLES ===== */

/* Extra small phones (320px and up) */
@media (min-width: 320px) {
	.auth-card { 
		margin: 0 12px; 
		box-shadow: 0 15px 40px rgba(0,0,0,.08); 
	}
	.card-body { padding: 1.25rem; }
	.brand-logo-img { height: 32px; }
	.brand-title { font-size: 16px; }
	.hero-cta h2 { font-size: 20px; }
	.hero-cta h6 { font-size: 13px; }
}

/* Small phones (375px and up) */
@media (min-width: 375px) {
	.auth-card { margin: 0 16px; }
	.card-body { padding: 1.5rem; }
	.brand-logo-img { height: 36px; }
	.brand-title { font-size: 18px; }
	.hero-cta h2 { font-size: 22px; }
	.hero-cta h6 { font-size: 14px; }
}

/* Medium phones (425px and up) */
@media (min-width: 425px) {
	.auth-card { margin: 0 20px; }
	.card-body { padding: 1.75rem; }
	.brand-logo-img { height: 40px; }
	.brand-title { font-size: 20px; }
	.hero-cta h2 { font-size: 24px; }
	.hero-cta h6 { font-size: 15px; }
}

/* Large phones (576px and up) */
@media (min-width: 576px) {
	.auth-card { margin: 0 24px; }
	.card-body { padding: 2rem; }
	.brand-logo-img { height: 44px; }
	.brand-title { font-size: 22px; }
	.hero-cta h2 { font-size: 26px; }
	.hero-cta h6 { font-size: 16px; }
}

/* Tablets (768px and up) */
@media (min-width: 768px) {
	.auth-card { 
		margin: 0 32px; 
		box-shadow: 0 25px 60px rgba(0,0,0,.10); 
	}
	.card-body { padding: 2.5rem; }
	.hero-cta h2 { font-size: 28px; }
	.hero-cta h6 { font-size: 17px; }
}

/* Desktop (992px and up) */
@media (min-width: 992px) {
	.auth-card { 
		margin: 0; 
		box-shadow: 0 30px 80px rgba(0,0,0,.12); 
	}
	.card-body { padding: 3rem; }
	.hero-cta h2 { font-size: 32px; }
	.hero-cta h6 { font-size: 18px; }
}

/* Large desktop (1200px and up) */
@media (min-width: 1200px) {
	.auth-card { 
		box-shadow: 0 40px 100px rgba(0,0,0,.14); 
	}
	.card-body { padding: 3.5rem; }
	.hero-cta h2 { font-size: 36px; }
	.hero-cta h6 { font-size: 17px; }
}

/* Input sizing adjustments for mobile */
@media (max-width: 575.98px) {
	.input-group-lg > .form-control,
	.input-group-lg > .input-group-text,
	.input-group-lg > .btn { 
		font-size: 1rem; 
		padding: .6rem .75rem; 
	}
	.btn-lg { 
		padding: .75rem 1.5rem; 
		font-size: 1rem; 
	}
	.form-label { font-size: 0.9rem; }
}

/* Landscape phone adjustments */
@media (max-width: 767.98px) and (orientation: landscape) {
	.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
	.auth-card { margin: 0 16px; }
	.card-body { padding: 1.5rem; }
}

/* Touch-friendly improvements for mobile */
@media (max-width: 767.98px) {
	.btn { min-height: 44px; }
	.form-control { min-height: 44px; }
	.form-check-input { min-width: 20px; min-height: 20px; }
	.form-check-label { min-height: 20px; display: flex; align-items: center; }
}

/* ===== RESPONSIVE ACCOUNT PAGES STYLES ===== */

/* Mobile-first responsive input groups */
.input-group-sm .form-control {
	font-size: 0.875rem;
	padding: 0.5rem 0.75rem;
}

.input-group-md .form-control {
	font-size: 1rem;
	padding: 0.75rem 1rem;
}

.input-group-lg .form-control {
	font-size: 1.125rem;
	padding: 1rem 1.25rem;
}

/* Mobile-first responsive buttons */
.btn-sm {
	font-size: 0.875rem;
	padding: 0.5rem 1rem;
}

.btn-md {
	font-size: 1rem;
	padding: 0.75rem 1.5rem;
}

.btn-lg {
	font-size: 1.125rem;
	padding: 1rem 2rem;
}

/* Mobile-first responsive font sizes */
.fs-4 {
	font-size: 1.25rem;
}

.fs-sm-3 {
	font-size: 1.75rem;
}

/* Mobile-first responsive spacing */
@media (max-width: 576px) {
	.auth-card {
		margin: 0.5rem !important;
		border-radius: 0.75rem !important;
	}
	.brand-logo-img {
		height: 2rem !important;
	}
	.fs-4 {
		font-size: 1.25rem !important;
	}
}

/* Mobile-first responsive alerts */
@media (max-width: 576px) {
	.alert {
		font-size: 0.875rem;
		padding: 0.75rem;
	}
	.alert .fw-semibold {
		font-size: 0.875rem !important;
	}
	.alert .text-muted {
		font-size: 0.75rem !important;
	}
}

/* Responsive padding for auth pages */
@media (max-width: 576px) {
	.py-2 {
		padding-top: 0.5rem !important;
		padding-bottom: 0.5rem !important;
	}
	.py-sm-3 {
		padding-top: 1rem !important;
		padding-bottom: 1rem !important;
	}
	.py-md-4 {
		padding-top: 1.5rem !important;
		padding-bottom: 1.5rem !important;
	}
	.py-lg-5 {
		padding-top: 3rem !important;
		padding-bottom: 3rem !important;
	}
}

/* Responsive margins for auth pages */
@media (max-width: 576px) {
	.mx-2 {
		margin-left: 0.5rem !important;
		margin-right: 0.5rem !important;
	}
	.mx-sm-3 {
		margin-left: 1rem !important;
		margin-right: 1rem !important;
	}
	.mx-md-4 {
		margin-left: 1.5rem !important;
		margin-right: 1.5rem !important;
	}
	.mx-lg-0 {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* Responsive card body padding */
@media (max-width: 576px) {
	.p-2 {
		padding: 0.5rem !important;
	}
	.p-sm-3 {
		padding: 1rem !important;
	}
	.p-md-4 {
		padding: 1.5rem !important;
	}
	.p-lg-5 {
		padding: 3rem !important;
	}
}

/* Responsive margins for elements */
@media (max-width: 576px) {
	.mb-3 {
		margin-bottom: 1rem !important;
	}
	.mb-sm-4 {
		margin-bottom: 1.5rem !important;
	}
}