<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dr. Costi — Booking Page Preview</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
/* ===== Page scaffold (simulates the SimplyBook theme shell) ===== */
* { margin:0; padding:0; box-sizing:border-box; }
body {
	font-family:'Raleway',sans-serif;
	background:#F2EDE4;
	color:#0E2A37;
	padding-bottom:60px;
}
.page-header {
	background:#0E2A37;
	padding:26px 20px 24px;
	text-align:center;
}
.monogram {
	display:inline-block;
	width:52px; height:52px;
	border:1px solid #D3B57C;
	border-radius:50%;
	line-height:50px;
	color:#D3B57C;
	font-size:18px;
	letter-spacing:0.1em;
	font-weight:500;
	margin-bottom:10px;
}
.page-header h1 {
	color:#F7F3EC;
	font-weight:400;
	font-size:17px;
	letter-spacing:0.22em;
	text-transform:uppercase;
}
.page-header p {
	color:#D3B57C;
	font-weight:300;
	font-size:12.5px;
	letter-spacing:0.08em;
	margin-top:6px;
}
.wrap { max-width:680px; margin:0 auto; padding:0 16px; }
.step-label {
	font-size:11px;
	letter-spacing:0.18em;
	text-transform:uppercase;
	color:#84735F;
	margin:34px 0 14px;
	text-align:center;
}
.preview-note {
	text-align:center;
	font-size:11px;
	color:#84735F;
	letter-spacing:0.1em;
	margin-top:40px;
}

/* ===== The actual Custom CSS, verbatim ===== */

#events h3 {
	font-family:'Raleway','Optima',serif !important;
	font-weight:500 !important;
	font-size:19px !important;
	letter-spacing:0.06em !important;
	color:#0E2A37 !important;
	line-height:1.35 !important;
}
#events p.duration {
	font-weight:400 !important;
	font-size:12px !important;
	letter-spacing:0.12em !important;
	text-transform:uppercase !important;
	color:#84735F !important;
	margin-top:4px;
}
#events p.description {
	font-weight:300 !important;
	font-size:14.5px !important;
	line-height:1.7 !important;
	color:#4A5A63 !important;
	max-width:62ch;
	margin-top:8px;
}
#events .event-card {
	background:#FFFFFF;
	border:1px solid #E7DECF;
	border-left:3px solid transparent;
	border-radius:6px;
	padding:22px 22px 20px;
	margin-bottom:14px;
	cursor:pointer;
	transition:border-color .2s ease, box-shadow .2s ease;
}
#events .event-card:hover { border-color:#D3B57C; }
#events .selectedEvent {
	background-color:#F7F3EC !important;
	border-left:3px solid #D3B57C !important;
	box-shadow:0 6px 24px rgba(14,42,55,0.08) !important;
	border-radius:6px !important;
}
.btn-row { display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
#events input.reserve_time_btn {
	font-family:'Raleway',sans-serif !important;
	font-weight:500 !important;
	font-size:13px !important;
	letter-spacing:0.14em !important;
	text-transform:uppercase !important;
	color:#D3B57C !important;
	background:#0E2A37 !important;
	border:1px solid #0E2A37 !important;
	border-radius:100px !important;
	padding:13px 34px !important;
	min-height:46px;
	cursor:pointer;
	transition:background .25s ease,color .25s ease !important;
}
#events input.reserve_time_btn:hover { background:#16394A !important; color:#E5CD9C !important; }
#events input.select_another_btn {
	font-family:'Raleway',sans-serif !important;
	font-weight:400 !important;
	font-size:13px !important;
	letter-spacing:0.1em !important;
	text-transform:uppercase !important;
	color:#0E2A37 !important;
	background:transparent !important;
	border:1px solid #C9BBA6 !important;
	border-radius:100px !important;
	padding:12px 28px !important;
	cursor:pointer;
	transition:border-color .25s ease !important;
}
#events input.select_another_btn:hover { border-color:#D3B57C !important; }

#eventForm h3 {
	font-weight:500 !important;
	font-size:17px !important;
	letter-spacing:0.08em !important;
	color:#0E2A37 !important;
	border-bottom:1px solid #E7DECF !important;
	padding-bottom:10px !important;
	margin-bottom:16px;
}

/* Calendar */
.ui-widget-content {
	background:#FDFBF7 !important;
	border:1px solid #E7DECF !important;
	border-radius:10px !important;
	overflow:hidden;
}
.ui-widget-header {
	font-weight:500 !important;
	letter-spacing:0.1em !important;
	background:#0E2A37 !important;
	color:#D3B57C !important;
	text-transform:uppercase;
	font-size:13px;
	padding:14px 18px;
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.ui-widget-header .nav { color:#D3B57C; cursor:pointer; font-size:15px; padding:0 6px; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; padding:14px; }
.cal-grid .dow {
	font-size:10px; letter-spacing:0.12em; text-transform:uppercase;
	color:#84735F; text-align:center; padding:6px 0;
}
.cal-grid .day {
	text-align:center; padding:10px 0; font-size:14px; border-radius:6px;
	cursor:pointer; color:#0E2A37;
}
.cal-grid .day:hover { background:#FBF6EC; }
.cal-grid .day.muted { color:#C9BBA6; cursor:default; }
.cal-grid .day.today { border:1px solid #D3B57C; }
.cal-grid .day.picked { background:#0E2A37; color:#D3B57C; font-weight:600; }

/* Timeline */
table.timeline {
	width:100%;
	border-collapse:separate !important;
	border-spacing:4px !important;
	margin-top:8px;
}
.timeline td {
	text-align:center;
	padding:13px 4px;
	font-size:13.5px;
	width:25%;
}
.timeline td.not_worked_time {
	background:#F2EDE4 !important;
	opacity:0.45;
	border-radius:5px !important;
	color:#84735F;
}
.timeline td.free_time {
	background:#FFFFFF !important;
	border:1px solid #E7DECF !important;
	border-radius:5px !important;
	color:#0E2A37 !important;
	cursor:pointer;
	transition:border-color .2s ease, background .2s ease;
}
.timeline td.free_time:hover { background:#FBF6EC !important; border-color:#D3B57C !important; }
.timeline td.selected_time {
	background:#D3B57C !important;
	border:1px solid #C6A55F !important;
	border-radius:5px !important;
	color:#0E2A37 !important;
	font-weight:600 !important;
	box-shadow:0 4px 12px rgba(211,181,124,0.4) !important;
}
.timeline td.reserved_time {
	background:#DBCCBB !important;
	border-radius:5px !important;
	color:#84735F !important;
	opacity:0.55;
}
.legend { display:flex; gap:18px; justify-content:center; margin-top:14px; flex-wrap:wrap; }
.legend span { font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:#84735F; display:flex; align-items:center; gap:6px; }
.legend i { width:12px; height:12px; border-radius:3px; display:inline-block; }

/* Form labels + confirm */
.zend_form dt {
	font-weight:400 !important;
	font-size:12px !important;
	letter-spacing:0.14em !important;
	text-transform:uppercase !important;
	color:#84735F !important;
	margin:18px 0 6px;
}
.zend_form input[type=text], .zend_form input[type=email] {
	width:100%;
	font-family:'Raleway',sans-serif;
	font-size:15px;
	color:#0E2A37;
	background:#FDFBF7;
	border:1px solid #E7DECF;
	border-radius:8px;
	padding:13px 16px;
	outline:none;
	transition:border-color .2s ease;
}
.zend_form input:focus { border-color:#D3B57C; }
.consent { display:flex; gap:10px; align-items:flex-start; margin-top:16px; font-size:13px; font-weight:300; color:#4A5A63; line-height:1.6; }
.consent input { margin-top:3px; accent-color:#0E2A37; }
#save_button {
	display:block;
	width:100%;
	font-family:'Raleway',sans-serif !important;
	font-weight:500 !important;
	font-size:14px !important;
	letter-spacing:0.14em !important;
	text-transform:uppercase !important;
	color:#D3B57C !important;
	background:#0E2A37 !important;
	border:1px solid #0E2A37 !important;
	border-radius:100px !important;
	padding:15px 44px !important;
	min-height:50px;
	cursor:pointer;
	margin-top:26px;
	transition:background .25s ease !important;
	box-shadow:0 8px 20px rgba(14,42,55,0.18) !important;
}
#save_button:hover { background:#16394A !important; }
.policy-line {
	text-align:center;
	font-size:12px;
	font-weight:300;
	color:#84735F;
	margin-top:16px;
	line-height:1.7;
	letter-spacing:0.03em;
}
section.card {
	background:#FFFFFF;
	border:1px solid #E7DECF;
	border-radius:10px;
	padding:24px 22px 26px;
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }
</style>
</head>
<body>

<header class="page-header">
	<div class="monogram">DC</div>
	<h1>Dr. Costi</h1>
	<p>Reserve a consultation with Dr. Costi's clinic in Beirut</p>
</header>

<div class="wrap">

	<div class="step-label">Choose your consultation</div>
	<div id="events">
		<div class="event-card">
			<h3>New Patient Consultation — Dr. Costi</h3>
			<p class="duration">30 minutes</p>
			<p class="description">A private, unhurried assessment with Dr. Costi to understand your skin and build your plan.</p>
		</div>
		<div class="event-card selectedEvent">
			<h3>Returning Patient Consultation</h3>
			<p class="duration">20 minutes</p>
			<p class="description">A follow-up review of your progress and the next step in your treatment plan.</p>
			<div class="btn-row">
				<input type="button" class="reserve_time_btn" value="Reserve your consultation">
				<input type="button" class="select_another_btn" value="Choose another">
			</div>
		</div>
		<div class="event-card">
			<h3>Medical Dermatology Consultation</h3>
			<p class="duration">30 minutes</p>
			<p class="description">A clinical consultation for skin, hair, and nail concerns, led by Dr. Costi.</p>
		</div>
	</div>

	<div class="step-label">Choose a time that suits you</div>
	<div id="eventForm">
		<div class="ui-widget-content" style="margin-bottom:22px;">
			<div class="ui-widget-header">
				<span class="nav">‹</span>
				<span>September 2026</span>
				<span class="nav">›</span>
			</div>
			<div class="cal-grid">
				<div class="dow">Mo</div><div class="dow">Tu</div><div class="dow">We</div><div class="dow">Th</div><div class="dow">Fr</div><div class="dow">Sa</div><div class="dow">Su</div>
				<div class="day muted">31</div><div class="day">1</div><div class="day">2</div><div class="day">3</div><div class="day">4</div><div class="day">5</div><div class="day muted">6</div>
				<div class="day">7</div><div class="day today">8</div><div class="day">9</div><div class="day picked">10</div><div class="day">11</div><div class="day">12</div><div class="day muted">13</div>
				<div class="day">14</div><div class="day">15</div><div class="day">16</div><div class="day">17</div><div class="day">18</div><div class="day">19</div><div class="day muted">20</div>
			</div>
		</div>

		<section class="card">
			<h3>Thursday, 10 September</h3>
			<table class="timeline">
				<tr>
					<td class="not_worked_time">09:00</td>
					<td class="free_time">10:00</td>
					<td class="reserved_time">10:30</td>
					<td class="free_time">11:00</td>
				</tr>
				<tr>
					<td class="free_time">11:30</td>
					<td class="selected_time">12:00</td>
					<td class="reserved_time">12:30</td>
					<td class="free_time">13:00</td>
				</tr>
				<tr>
					<td class="reserved_time">16:00</td>
					<td class="free_time">16:30</td>
					<td class="free_time">17:00</td>
					<td class="not_worked_time">18:00</td>
				</tr>
			</table>
			<div class="legend">
				<span><i style="background:#FFFFFF;border:1px solid #E7DECF;"></i>Available</span>
				<span><i style="background:#D3B57C;"></i>Your time</span>
				<span><i style="background:#DBCCBB;opacity:.55;"></i>Reserved</span>
			</div>
		</section>
	</div>

	<div class="step-label">A few details, and your time is held</div>
	<section class="card">
		<dl class="zend_form">
			<dt>First name</dt>
			<dd><input type="text" placeholder="Layla"></dd>
			<dt>Last name</dt>
			<dd><input type="text" placeholder="Haddad"></dd>
			<dt>Mobile</dt>
			<dd><input type="text" placeholder="+961 __ ___ ___"></dd>
			<dt>Email</dt>
			<dd><input type="email" placeholder="layla@email.com"></dd>
		</dl>
		<label class="consent"><input type="checkbox" checked> I agree to the terms and privacy policy.</label>
		<label class="consent"><input type="checkbox"> Keep me informed about Dr. Costi availability and skin-health notes.</label>
		<input type="button" id="save_button" value="Reserve">
		<p class="policy-line">We hold your time exclusively. If plans change,<br>kindly adjust up to 24 hours ahead.</p>
	</section>

	<p class="preview-note">Design preview · Dr. Costi × SimplyBook.me</p>
</div>

</body>
</html>