:root{
	--bg-overlay: rgba(18,18,18,0.44);
	--accent: #b78a56;
	--muted: #efe6de;
	--text: #222;
	--panel-bg: rgba(255,255,255,0.98);
	--panel-shadow: 0 24px 70px rgba(0,0,0,0.2);
	--hero-shadow: 0 28px 70px rgba(0,0,0,0.35);
}
body{
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	margin:0;
	color:var(--text);
	background-color:#0f0f0f;
	background-image:linear-gradient(180deg, rgba(10,10,10,0.18) 0%, rgba(10,10,10,0.34) 100%), url('images/vanessa-original.jpg');
	background-position:center top;
	background-size:100% auto;
	background-repeat:no-repeat;
	background-attachment:scroll;
	position:relative;
	min-height:100vh;
	overflow-x:hidden;
}
html{
	background:#0f0f0f;
	min-height:100%;
}
.hero{ position:relative; min-height:560px; display:flex; align-items:center; background:rgba(0,0,0,0.04); }
.hero .overlay{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.18) 60%); }
.hero-content{ position:relative; z-index:2; padding:56px; max-width:980px; margin-left:48px; background:var(--panel-bg); color:#222; border-radius:28px; box-shadow:var(--hero-shadow); backdrop-filter: blur(6px); }
.hero .brand h1{ font-family:'Playfair Display', serif; font-size:52px; margin:0 0 10px 0; color:#111; line-height:1.05; }
.hero .brand .hero-bio{ margin:0 0 12px 0; color:#333; font-size:16px; line-height:1.5; font-weight:500; max-width:820px; }
.hero .subtitle{ margin:0 0 16px 0; opacity:0.92; color:#333; font-size:18px; }
.doctor-info{ background:rgba(255,255,255,0.96); padding:12px 16px; border-radius:12px; display:inline-block; margin-bottom:18px; color:#111; box-shadow:0 10px 30px rgba(0,0,0,0.12); font-weight:600; }
.hero-cta{ margin-top:18px; }
.btn-primary{ background:var(--accent); color:white; padding:12px 18px; border-radius:999px; text-decoration:none; font-weight:700; margin-right:12px; transition:transform .2s ease, opacity .2s ease; }
.btn-primary:hover{ transform:translateY(-1px); opacity:.95; }
.btn-ghost{ background:rgba(255,255,255,0.92); color:#111; padding:12px 18px; border-radius:999px; text-decoration:none; border:1px solid rgba(34,34,34,0.12); }
.hero-ghost{ color:#111; }
#services{ display:grid; gap:16px; margin-top:16px; }
#services-list, #clinics-list{ background:var(--panel-bg); border-radius:20px; padding:24px; box-shadow:var(--panel-shadow); }
#services-list div, #clinics-list div{ margin-bottom:14px; font-weight:700; color:#1d1d1d; line-height:1.5; font-size:16px; }
#services-list div:last-child, #clinics-list div:last-child{ margin-bottom:0; }

#calendar h2,
#services h2,
#booking h2,
#month-controls,
#month-label{
	color:#f7f1ea;
	text-shadow:0 2px 8px rgba(0,0,0,0.55);
}

#month-controls button{
	color:#fff;
	background:rgba(183,138,86,0.92);
	box-shadow:0 8px 18px rgba(0,0,0,0.16);
}

#month-controls button:disabled{
	opacity:0.45;
	cursor:not-allowed;
	box-shadow:none;
}

#month-label{
	background:rgba(0,0,0,0.25);
	border:1px solid rgba(255,255,255,0.14);
}

#booking-form,
#booking-result{
	color:#f7f1ea;
	text-shadow:0 2px 8px rgba(0,0,0,0.55);
}

#booking{
	color:#222;
}

#booking #booking-form,
#booking #booking-result,
#booking #available-times,
#booking h2{
	color:#222;
	text-shadow:none;
}

#booking-form input,
#booking-form select,
#booking-form button,
#booking-form div,
#available-times{
	color:#1c1c1c;
	text-shadow:none;
}

#booking-form{
	display:grid;
	gap:10px;
}

#booking-form input,
#booking-form select{
	margin:0;
}

#booking-form input[type="date"]{
	position:relative;
	z-index:2;
}

#booking #available-times{
	position:relative;
	z-index:1;
	min-height:44px;
	padding:10px 12px;
	border-radius:10px;
	border:1px solid rgba(0,0,0,0.12);
	background:#fff;
	line-height:1.4;
}
button{ padding:12px 18px; border-radius:12px; border:none; background:var(--accent); color:white; cursor:pointer; }
button:hover{ opacity:.95; }
.error{ color:#8d1f1f; font-weight:700; margin-top:10px; }

@media(max-width:900px){
	html,
	body{
		min-height:100dvh;
	}
	body{
		background-image:linear-gradient(180deg, rgba(10,10,10,0.18) 0%, rgba(10,10,10,0.34) 100%), url('images/vanessa-original.jpg');
		background-position:center center;
		background-size:cover;
		background-repeat:no-repeat;
		background-attachment:scroll;
	}
	.site-main{ grid-template-columns:1fr; padding:16px }
	.hero{ min-height:520px }
	.hero-content{ padding:32px; margin-left:0; max-width:100%; border-radius:24px; }
	.hero .brand h1{ font-size:38px; }
	.hero .brand .hero-bio{ font-size:15px; }
}
@media (max-width:420px){
	body{
		background-image:linear-gradient(180deg, rgba(10,10,10,0.18) 0%, rgba(10,10,10,0.34) 100%), url('images/vanessa-original.jpg');
		background-position:center center;
		background-size:cover;
		background-repeat:no-repeat;
	}
	#calendar h2,
	#services h2,
	#booking h2{
		font-size:24px;
	}
}

/* Mobile-friendly adjustments to avoid text overlap */
@media (max-width:768px){
	.hero{ min-height:320px; align-items:flex-end; }
	.hero .overlay{ background:linear-gradient(180deg, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.38) 60%); }
	.hero-content{ background: rgba(255,255,255,0.95); color:var(--text); padding:18px; margin:18px; border-radius:14px; max-width:calc(100% - 36px); box-shadow:0 8px 28px rgba(0,0,0,0.16); }
	.hero .brand h1{ color:var(--text); font-size:28px }
	.hero .subtitle{ color:var(--text); opacity:0.9 }
	.doctor-info{ display:block; background:transparent; color:var(--text); margin-top:8px }
	.hero-cta a{ display:inline-block; margin-top:8px }
	#booking{
		padding:16px;
	}
	#booking-form{
		gap:12px;
	}
}

@media (max-width:420px){
	.hero-content{ padding:12px; margin:12px }
	.hero .brand h1{ font-size:22px }
	.hero .brand .hero-bio{ font-size:13px; line-height:1.45; }
	.hero .subtitle{ font-size:13px }
}
.site-main{ padding:28px 48px; display:grid; grid-template-columns: 1fr 360px; gap:28px; }
#slots{ background:rgba(255,255,255,0.98); border-radius:18px; padding:14px; box-shadow:0 12px 30px rgba(0,0,0,0.12); max-height:560px; overflow:auto }
#slots p{ margin:0; color:#222; font-weight:600; }
.clinic-group{ background:linear-gradient(180deg,#fff,#f7f2ec); border:1px solid #eee2d3; border-radius:14px; padding:12px; margin-bottom:12px; }
.clinic-title{ margin:0 0 10px; color:#5d3a17; font-size:16px; }
.clinic-toggle{
	width:100%;
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:10px;
	padding:12px 14px;
	border-radius:12px;
	border:1px solid #e8d8c5;
	background:linear-gradient(180deg,#fff,#f6eee4);
	color:#3f2c18;
	text-align:left;
	font-weight:700;
}
.clinic-toggle .clinic-title{ margin:0; font-size:16px; }
.clinic-meta{ font-size:12px; color:#7a5a38; font-weight:600; }
.clinic-details{ margin-top:10px; }
.clinic-group[data-expanded="true"] .clinic-toggle{
	border-color:#cfa978;
	background:linear-gradient(180deg,#fff,#f3e4d1);
}
.day-row{ margin-bottom:10px; }
.day-row:last-child{ margin-bottom:0; }
.day-row{ cursor:pointer; }
.day-times{ margin-top:6px; padding:8px 10px; border-radius:10px; background:#fff; border:1px solid #f0e5d8; color:#3a3026; font-size:14px; line-height:1.4; }
.day-row:hover .day-times{ border-color:#d8bea0; background:#fcf8f3; }
#month-controls{ display:flex; align-items:center; gap:10px; margin-bottom:14px; font-weight:700; color:#1d1d1d; }
#month-label{ padding:8px 12px; border-radius:999px; background:rgba(255,255,255,0.85); box-shadow:0 6px 18px rgba(0,0,0,0.08); }
.day{ width:100%; text-align:left; padding:14px 16px; border-bottom:1px solid #eee; background:linear-gradient(180deg,#fff,#f4efe8); margin-bottom:10px; border-radius:12px; color:#1b1b1b; font-weight:700; box-shadow:0 8px 22px rgba(0,0,0,0.08); }
.day strong{ display:block; font-size:15px; margin-bottom:4px; color:#111; }
.day:hover{ transform:translateY(-1px); }
form input, form select{ display:block; margin:8px 0; padding:14px; width:100%; border-radius:10px; border:1px solid rgba(0,0,0,0.12); background:#fff; color:#111; font-size:15px; }
button{ padding:10px 14px; border-radius:8px; border:none; background:var(--accent); color:white; cursor:pointer }
button:hover{ opacity:.95 }
.error{color:#8d1f1f; font-weight:700; margin-top:10px }

/* time buttons */
.time-btn{ margin:6px 6px 6px 0; padding:6px 10px; border-radius:8px; border:1px solid #eee; background:#fff }

@media(max-width:900px){
	.site-main{ grid-template-columns:1fr; padding:16px }
	.hero{ min-height:380px }
	.hero-content{ padding:36px; margin-left:0; max-width:100%; }
}

.admin-wrap{
	padding:24px 48px 48px;
	display:grid;
	gap:20px;
	grid-template-columns:repeat(12, 1fr);
}

.admin-card{
	grid-column:span 12;
	background:rgba(255,255,255,0.96);
	border-radius:20px;
	box-shadow:0 18px 45px rgba(0,0,0,0.10);
	padding:20px;
	backdrop-filter: blur(6px);
}

.admin-card h2{
	margin-top:0;
	color:#222;
	font-family:'Playfair Display',serif;
	font-size:28px;
}

.admin-card form{
	display:grid;
	gap:12px;
}

.admin-card form label{
	display:flex;
	flex-direction:column;
	gap:6px;
	font-weight:600;
	color:#3a2c1d;
}

.admin-card form input,
.admin-card form select,
.admin-card form textarea{
	margin:0;
	width:100%;
	box-sizing:border-box;
	padding:12px;
	border-radius:10px;
	border:1px solid rgba(0,0,0,0.14);
	background:#fff;
	color:#222;
}

.admin-card form button{
	align-self:start;
}

#schedule-services-list label,
[data-schedule-range] label{
	display:inline-flex;
	flex-direction:row;
	align-items:center;
	gap:6px;
	font-weight:600;
}

#schedule-services-list input,
[data-schedule-range] input[type="checkbox"]{
	width:auto;
	margin:0;
	padding:0;
}

.admin-card table thead th{
	background:#f5ece2;
	color:#4d3420;
	font-weight:700;
}

.admin-card table tbody td{
	background:#fff;
	color:#2b2b2b;
	vertical-align:middle;
}

.admin-grid-2{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:20px;
}

.admin-toolbar{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin:14px 0 0;
}

.admin-tabs-card{
	padding:14px;
}

.admin-tabs{
	display:flex;
	gap:8px;
	flex-wrap:wrap;
}

.admin-tab{
	padding:10px 14px;
	border-radius:999px;
	border:1px solid rgba(0,0,0,0.14);
	background:#fff;
	color:#3a2c1d;
	font-weight:700;
	cursor:pointer;
	transition:all .2s ease;
}

.admin-tab:hover{
	border-color:#c8a67b;
	transform:translateY(-1px);
}

.admin-tab.is-active{
	background:#b78a56;
	color:#fff;
	border-color:#b78a56;
}

.schedule-form-grid{
	align-items:end;
}

.schedule-form-grid .btn-align,
.schedule-delete-row .btn-align{
	min-height:44px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:0 16px;
	align-self:end;
}

.schedule-delete-row{
	align-items:flex-end;
}

.schedule-delete-row .schedule-delete-label{
	margin:0;
}

.schedule-delete-row #delete-schedule-month{
	margin:0;
}

.admin-table-wrap{
	overflow:auto;
	border-radius:16px;
	border:1px solid rgba(0,0,0,0.06);
}

.schedule-month-tabs{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin:0 0 12px;
}

.schedule-month-empty{
	margin:0 0 12px;
	color:#6a6a6a;
	font-weight:600;
}

.admin-table-wrap table{
	min-width:700px;
}

@media (max-width:900px){
	.admin-wrap{ padding:16px; }
	.admin-grid-2{ grid-template-columns:1fr; }
	.admin-card h2{ font-size:24px; }
	.admin-card{
		padding:16px;
	}
	.admin-tabs{
		overflow:auto;
		flex-wrap:nowrap;
		padding-bottom:4px;
	}
}