/*
	High-end dark theme for Barber Booking System
	- Uses CSS variables for easy tuning
	- Modern glassmorphism, subtle gradients, and accessible focus styles
*/
:root{
	--bg:#05060a;
	--bg-2:#0b0f14;
	--surface:#0f1720;
	--muted:#9aa4ae;
	--text:#e6eef6;
	--accent:#ff7a59;
	--accent-2:#6ef3d6;
	--glass: rgba(255,255,255,0.03);
	--card-shadow: 0 10px 30px rgba(2,6,23,0.6);
	--radius:14px;
}

/* Basic reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family: 'Inter', 'Segoe UI', Roboto, system-ui, -apple-system, 'Helvetica Neue', Arial;
	background: radial-gradient(1200px 600px at 10% 10%, rgba(110, 86, 255, 0.06), transparent),
							linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
	color:var(--text);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	line-height:1.45;
	padding:32px;
}

.container{
	max-width:1100px;
	margin:0 auto;
}

/* Header / navbar */
.site-header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	margin-bottom:28px;
}
.brand{
	display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);
}
.brand .logo{
	width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#bd5fff);box-shadow:var(--card-shadow);
	display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:18px
}
.nav-actions{display:flex;gap:12px;align-items:center}

/* Hero */
.hero{
	display:grid;grid-template-columns:1fr 420px;gap:36px;align-items:start;margin-bottom:36px;
}
.panel{
	background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
	border-radius:var(--radius);
	padding:28px;
	box-shadow:var(--card-shadow);
	border:1px solid rgba(255,255,255,0.03);
}

.hero h1{margin:0 0 8px 0;font-size:30px;letter-spacing:-0.02em;color:var(--text)}
.hero p.lead{margin:0;color:var(--muted)}

/* Booking button */
.btn-book, .booking-btn, #bookNow{
	display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:12px;border:0;cursor:pointer;font-weight:600;color: #07111a;background:linear-gradient(90deg,var(--accent),#bd5fff);box-shadow:0 8px 24px rgba(107,43,94,0.28);transition:transform .18s ease, box-shadow .18s ease, opacity .12s ease;}
.btn-book .icon{display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center}
.btn-book:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(107,43,94,0.38)}
.btn-book:active{transform:translateY(1px) scale(.997)}
.btn-book:focus{outline:3px solid rgba(107,43,94,0.22);outline-offset:3px}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--text);padding:10px 16px;border-radius:10px;cursor:pointer;transition:all .18s ease;}
.btn-ghost:hover{background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.08)}

/* Cards list */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.card{padding:18px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.015), transparent);border:1px solid rgba(255,255,255,0.03)}
.card h3{margin:0 0 6px 0}
.muted{color:var(--muted);font-size:14px}

/* Modal / popup */
.modal-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1200}
.modal-overlay.active{display:flex}
.modal-backdrop{position:absolute;inset:0;background:linear-gradient(180deg, rgba(2,6,23,0.6), rgba(2,6,23,0.75));backdrop-filter:blur(5px)}
.modal{position:relative;z-index:2;width:100%;max-width:520px;border-radius:14px;padding:22px;background:linear-gradient(180deg, rgba(12,16,20,0.9), rgba(18,21,24,0.95));border:1px solid rgba(255,255,255,0.04);box-shadow:0 30px 60px rgba(2,6,23,0.7)}
.modal header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.modal h2{margin:0;font-size:18px}
.modal .close-btn{background:transparent;border:0;color:var(--muted);cursor:pointer}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-row{margin-bottom:12px}
label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=time],select{
	width:100%;padding:10px 12px;border-radius:10px;background:var(--glass);border:1px solid rgba(255,255,255,0.04);color:var(--text);font-size:14px;transition:border-color 0.2s ease, background 0.2s ease;
}
input[type=text]:focus,input[type=email]:focus,input[type=tel]:focus,input[type=date]:focus,input[type=time]:focus,select:focus{
	background:rgba(255,255,255,0.05);border-color:rgba(255,122,89,0.3);outline:none;
}
textarea{min-height:92px;padding:12px;border-radius:10px;background:var(--glass);border:1px solid rgba(255,255,255,0.04);color:var(--text);transition:border-color 0.2s ease, background 0.2s ease;}
textarea:focus{background:rgba(255,255,255,0.05);border-color:rgba(255,122,89,0.3);outline:none;}

.form-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:10px}
.note{font-size:13px;color:var(--muted)}

.success-box{background:linear-gradient(90deg, rgba(110,243,214,0.06), rgba(255,255,255,0.02));padding:14px;border-radius:10px;border:1px solid rgba(110,243,214,0.06);color:var(--accent-2)}

/* small screens */
@media (max-width:880px){
	.hero{grid-template-columns:1fr;}
	body{padding:18px}
}

/* utilities */
.hidden{display:none}
.muted-small{font-size:13px;color:var(--muted)}

/* Contact Section */
.contact-section {
	margin-top: 24px;
}

.contact-info {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
	margin-top: 16px;
}

.contact-item {
	display: flex;
	align-items: start;
	gap: 12px;
	padding: 16px;
	background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.04);
	transition: all 0.3s ease;
}

.contact-item:hover {
	background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
	border-color: rgba(255,255,255,0.08);
	transform: translateY(-2px);
}

.contact-item .icon {
	flex-shrink: 0;
}

.contact-item a {
	transition: color 0.2s ease;
}

.contact-item a:hover {
	color: var(--accent) !important;
}

.phone-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all 0.2s ease;
}

.phone-btn:hover {
	color: var(--accent-2) !important;
	transform: translateY(-1px);
}


/* subtle focus-visible improvement */
:focus{outline:none}
:focus-visible{outline:3px solid rgba(255,122,89,0.18);outline-offset:3px}

/* Entrance animations */
@keyframes fadeInUp{
	from{opacity:0;transform:translateY(20px)}
	to{opacity:1;transform:translateY(0)}
}

@keyframes fadeIn{
	from{opacity:0}
	to{opacity:1}
}

/* Apply animations with staggered delays */
.site-header{
	animation: fadeInUp 0.6s ease-out backwards;
	animation-delay: 0.1s;
}

.hero > .panel:first-child{
	animation: fadeInUp 0.7s ease-out backwards;
	animation-delay: 0.2s;
}

.hero > .panel:last-child{
	animation: fadeInUp 0.7s ease-out backwards;
	animation-delay: 0.35s;
}

.card{
	animation: fadeInUp 0.6s ease-out backwards;
}

.card:nth-child(1){animation-delay: 0.45s}
.card:nth-child(2){animation-delay: 0.55s}
.card:nth-child(3){animation-delay: 0.65s}
.card:nth-child(4){animation-delay: 0.75s}

.modal-overlay.active .modal{
	animation: fadeInUp 0.4s ease-out;
}

.modal-overlay.active .modal-backdrop{
	animation: fadeIn 0.3s ease-out;
}