/* MediBook — calm clinical booking UI. Scoped under .mbk to play nicely with any theme. */

.mbk {
	--mbk-ink: #1c2b2d;
	--mbk-muted: #5c6f72;
	--mbk-line: #dbe4e4;
	--mbk-surface: #ffffff;
	--mbk-wash: #f2f6f5;
	--mbk-accent: #0f6b5f;      /* deep pine green: trustworthy, medical, not hospital-cold */
	--mbk-accent-soft: #dcefe9;
	--mbk-warn-bg: #fdecec;
	--mbk-warn: #a02c2c;
	max-width: 780px;
	margin: 0 auto;
	color: var(--mbk-ink);
	font-size: 16px;
	line-height: 1.5;
}
.mbk *, .mbk *::before, .mbk *::after { box-sizing: border-box; }
.mbk button { font: inherit; cursor: pointer; }
.mbk button:focus-visible { outline: 3px solid var(--mbk-accent); outline-offset: 2px; }

/* Step indicator */
.mbk-steps {
	display: flex; gap: 4px; list-style: none; margin: 0 0 22px; padding: 0;
	counter-reset: none;
}
.mbk-steps li {
	flex: 1; text-align: center; padding: 9px 4px 11px; font-size: 13px; font-weight: 600;
	color: var(--mbk-muted); border-bottom: 3px solid var(--mbk-line); letter-spacing: .02em;
}
.mbk-steps li::before {
	content: attr(data-step-label);
	display: inline-flex; align-items: center; justify-content: center;
	width: 20px; height: 20px; margin-right: 6px; border-radius: 50%;
	background: var(--mbk-line); color: var(--mbk-ink); font-size: 11px;
}
.mbk-steps li.is-active { color: var(--mbk-accent); border-bottom-color: var(--mbk-accent); }
.mbk-steps li.is-active::before, .mbk-steps li.is-done::before { background: var(--mbk-accent); color: #fff; }
.mbk-steps li.is-done { color: var(--mbk-accent); border-bottom-color: var(--mbk-accent-soft); }
.mbk-steps li.is-done::before { content: "✓"; }

.mbk-title { margin: 0 0 16px; font-size: 22px; line-height: 1.25; }

/* Cards (services & providers) */
.mbk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.mbk-card {
	display: flex; flex-direction: column; gap: 4px; text-align: left;
	padding: 16px; border: 1.5px solid var(--mbk-line); border-radius: 12px;
	background: var(--mbk-surface); transition: border-color .15s, box-shadow .15s, transform .1s;
}
.mbk-card:hover { border-color: var(--mbk-accent); box-shadow: 0 2px 10px rgba(15,107,95,.12); transform: translateY(-1px); }
.mbk-card-name { font-weight: 700; }
.mbk-card-meta { font-size: 13px; color: var(--mbk-accent); font-weight: 600; }
.mbk-card-desc { font-size: 13px; color: var(--mbk-muted); }
.mbk-card--provider { align-items: center; text-align: center; }
.mbk-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin-bottom: 4px; }
.mbk-avatar--initials {
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--mbk-accent-soft); color: var(--mbk-accent); font-weight: 700; font-size: 22px;
}

/* Calendar layout */
.mbk-cal-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .mbk-cal-wrap { grid-template-columns: 1fr; } }

.mbk-cal { border: 1.5px solid var(--mbk-line); border-radius: 12px; padding: 14px; background: var(--mbk-surface); }
.mbk-cal-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; margin-bottom: 10px; }
.mbk-nav {
	width: 32px; height: 32px; border: 1px solid var(--mbk-line); border-radius: 8px;
	background: var(--mbk-wash); font-size: 18px; line-height: 1;
}
.mbk-nav:hover { background: var(--mbk-accent-soft); }
.mbk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mbk-dow { text-align: center; font-size: 11px; font-weight: 700; color: var(--mbk-muted); padding: 4px 0; }
.mbk-day {
	aspect-ratio: 1; border: none; border-radius: 8px; background: transparent;
	color: #b6c2c3; font-size: 14px;
}
.mbk-day.is-open { background: var(--mbk-accent-soft); color: var(--mbk-accent); font-weight: 700; }
.mbk-day.is-open:hover { background: var(--mbk-accent); color: #fff; }
.mbk-day.is-selected { background: var(--mbk-accent); color: #fff; }
.mbk-day:disabled { cursor: default; }

/* Slots */
.mbk-slots-label { font-weight: 600; margin: 4px 0 10px; }
.mbk-slot-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.mbk-slot {
	padding: 10px 6px; border: 1.5px solid var(--mbk-line); border-radius: 8px;
	background: var(--mbk-surface); font-weight: 600; font-size: 14px;
}
.mbk-slot:hover { border-color: var(--mbk-accent); background: var(--mbk-accent-soft); color: var(--mbk-accent); }

/* Form */
.mbk-summary {
	background: var(--mbk-wash); border-left: 4px solid var(--mbk-accent);
	padding: 10px 14px; border-radius: 0 8px 8px 0; font-weight: 600; font-size: 15px;
}
.mbk-form { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.mbk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .mbk-two { grid-template-columns: 1fr; } }
.mbk-form label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 14px; }
.mbk-form input[type="text"], .mbk-form input[type="email"], .mbk-form input[type="tel"],
.mbk-form select, .mbk-form textarea {
	padding: 10px 12px; border: 1.5px solid var(--mbk-line); border-radius: 8px;
	font: inherit; background: var(--mbk-surface); color: var(--mbk-ink);
}
.mbk-form input:focus, .mbk-form select:focus, .mbk-form textarea:focus {
	outline: none; border-color: var(--mbk-accent); box-shadow: 0 0 0 3px var(--mbk-accent-soft);
}
.mbk-consent { flex-direction: row !important; align-items: flex-start; gap: 10px !important; font-weight: 400 !important; font-size: 13px !important; color: var(--mbk-muted); }
.mbk-consent input { margin-top: 3px; }

.mbk-submit {
	padding: 13px 24px; border: none; border-radius: 10px;
	background: var(--mbk-accent); color: #fff; font-weight: 700; font-size: 16px;
	transition: background .15s;
}
.mbk-submit:hover { background: #0b564c; }
.mbk-submit:disabled { opacity: .6; cursor: wait; }

.mbk-msg { background: var(--mbk-warn-bg); color: var(--mbk-warn); padding: 10px 14px; border-radius: 8px; font-size: 14px; font-weight: 600; }

/* Success */
.mbk-success { text-align: center; padding: 28px 12px; }
.mbk-check {
	width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%;
	background: var(--mbk-accent); color: #fff; font-size: 32px;
	display: flex; align-items: center; justify-content: center;
	animation: mbk-pop .35s ease-out;
}
@keyframes mbk-pop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.mbk-check { animation: none; }
	.mbk-card, .mbk-card:hover { transition: none; transform: none; }
}

.mbk-footer { margin-top: 18px; }
.mbk-back { background: none; border: none; color: var(--mbk-muted); font-weight: 600; padding: 6px 0; }
.mbk-back:hover { color: var(--mbk-accent); }
.mbk-loading { color: var(--mbk-muted); }