/* DentaCare Booking: patient app. Uses the theme colours; logical properties only (RTL ready). */
.dcb {
	--dcb-ink: var(--dc-ink, #14323a);
	--dcb-brand: var(--dc-brand, #0b5d6b);
	--dcb-accent: var(--dc-accent, #0b5d6b);
	--dcb-on-accent: var(--dc-on-accent, #fff);
	--dcb-tint: var(--dc-tint, #f0f7f8);
	--dcb-line: var(--dc-line, #cfe0e3);
	--dcb-soft: var(--dc-soft, #4d6a71);
	--dcb-bad: #b3261e;
	--dcb-ok: #1b6b3a;
	color: var(--dcb-ink);
	font: inherit;
	max-inline-size: 760px;
	margin-inline: auto;
}
.dcb *, .dcb *::before, .dcb *::after { box-sizing: border-box; }
.dcb-wrap, .dcb-manage { background: #fff; border: 1px solid var(--dcb-line); border-radius: 18px; padding: clamp(16px, 4vw, 32px); box-shadow: var(--dc-sh, 0 8px 24px rgba(0,0,0,.06)); }
.dcb-title { margin: 0 0 8px; }
.dcb-h { margin: 20px 0 10px; font-size: 1.05rem; }
.dcb-muted { color: var(--dcb-soft); margin: 6px 0; }
.dcb-ok { color: var(--dcb-ok); font-weight: 600; }

/* Inside the theme's booking card the app must not draw a second frame. */
.dcb--embedded .dcb-wrap, .dcb--embedded .dcb-manage { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; }

/* progress */
.dcb-steps { list-style: none; display: flex; gap: 8px; margin: 0 0 20px; padding: 0; }
.dcb-steps li { flex: 1; display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--dcb-soft); border-block-end: 3px solid var(--dcb-line); padding-block-end: 8px; min-inline-size: 0; }
.dcb-steps li b { inline-size: 24px; block-size: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--dcb-tint); font-size: .8rem; }
.dcb-steps li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcb-steps li.is-on { color: var(--dcb-ink); border-color: var(--dcb-accent); font-weight: 600; }
.dcb-steps li.is-on b { background: var(--dcb-accent); color: var(--dcb-on-accent); }
@media (max-width: 560px) { .dcb-steps li span { display: none; } .dcb-steps li.is-on span { display: inline; } .dcb-steps li:not(.is-on) { flex: 0 0 40px; } }

/* fields */
.dcb-step { display: grid; gap: 14px; min-inline-size: 0; }
.dcb-step > * { min-inline-size: 0; }
.dcb-field { display: grid; gap: 6px; }
.dcb-field label { font-weight: 600; font-size: .92rem; }
.dcb input[type="text"], .dcb input[type="tel"], .dcb input[type="email"], .dcb select {
	inline-size: 100%; min-block-size: 48px; padding: 10px 14px; border: 1.5px solid var(--dcb-line); border-radius: 12px; background: #fff; color: var(--dcb-ink); font: inherit;
}
.dcb input:focus-visible, .dcb select:focus-visible, .dcb button:focus-visible, .dcb a:focus-visible { outline: 3px solid color-mix(in srgb, var(--dcb-accent) 45%, transparent); outline-offset: 2px; }
.dcb-person, .dcb-modes { border: 1.5px solid var(--dcb-line); border-radius: 14px; padding: 14px; display: grid; gap: 12px; margin: 0; min-inline-size: 0; }
.dcb-person-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-inline-size: 0; }
.dcb-person-grid > * { min-inline-size: 0; }
.dcb-person-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.dcb-person-extra { background: var(--dcb-tint); }
.dcb-person-extra input, .dcb-person-extra select { background: #fff; }
@media (max-width: 520px) { .dcb-person-grid { grid-template-columns: 1fr; } }
.dcb-person legend, .dcb-modes legend { padding-inline: 8px; font-weight: 700; }
.dcb-radio { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 10px; cursor: pointer; }
.dcb-radio:hover { background: var(--dcb-tint); }
.dcb-radio input { margin-block-start: 4px; inline-size: 18px; block-size: 18px; accent-color: var(--dcb-accent); flex: none; }
.dcb-check { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; }
.dcb-check input { inline-size: 20px; block-size: 20px; flex: none; accent-color: var(--dcb-accent); margin-block-start: 2px; }
.dcb-hp { position: absolute !important; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; opacity: 0; }

/* buttons */
.dcb-btn { font: inherit; cursor: pointer; border-radius: 999px; padding: 12px 22px; min-block-size: 48px; border: 1.5px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.dcb-primary { background: var(--dcb-accent); color: var(--dcb-on-accent); font-weight: 700; }
.dcb-primary:hover:not(:disabled) { filter: brightness(1.08); }
.dcb-ghost { background: #fff; color: var(--dcb-brand); border-color: var(--dcb-accent); font-weight: 600; }
.dcb-ghost:hover { background: var(--dcb-tint); }
.dcb-danger { background: #fff; color: var(--dcb-bad); border-color: var(--dcb-bad); font-weight: 600; }
.dcb-link { background: none; color: var(--dcb-brand); padding-inline: 4px; text-decoration: underline; justify-self: start; min-block-size: 40px; }
.dcb-btn-remove { font: inherit; cursor: pointer; justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-block-size: 40px; padding: 4px 14px; border-radius: 999px; border: 1.5px solid var(--dcb-bad); background: #fff; color: var(--dcb-bad); font-weight: 600; }
.dcb-btn-remove::before { content: "\00d7"; font-size: 1.25rem; line-height: 1; }
.dcb-btn-remove:hover { background: #fdecea; }
.dcb-btn:disabled { opacity: .55; cursor: not-allowed; }
.dcb-alert { background: #fdecea; color: var(--dcb-bad); border-radius: 12px; padding: 12px 14px; font-weight: 600; }
.dcb-alert[hidden] { display: none; }

/* day strip and times */
.dcb-daynav { display: flex; align-items: stretch; gap: 8px; }
.dcb-nav { flex: none; inline-size: 44px; border: 1.5px solid var(--dcb-line); border-radius: 12px; background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--dcb-brand); }
.dcb-nav:disabled { opacity: .35; cursor: not-allowed; }
.dcb-arrow { inline-size: 10px; block-size: 10px; border-block-start: 2.5px solid currentColor; border-inline-start: 2.5px solid currentColor; display: inline-block; }
.dcb-arrow-prev { transform: rotate(-45deg); }
.dcb-arrow-next { transform: rotate(135deg); }
.dcb[dir="rtl"] .dcb-arrow-prev { transform: rotate(45deg); }
.dcb[dir="rtl"] .dcb-arrow-next { transform: rotate(-135deg); }
.dcb-days { flex: 1; min-inline-size: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(78px, 1fr); gap: 8px; overflow-x: auto; scrollbar-width: thin; padding-block-end: 4px; }
.dcb-day { border: 1.5px solid var(--dcb-line); background: #fff; border-radius: 12px; padding: 10px 6px; font: inherit; font-size: .88rem; cursor: pointer; text-align: center; min-block-size: 52px; }
.dcb-day.is-on { background: var(--dcb-accent); color: var(--dcb-on-accent); border-color: var(--dcb-accent); font-weight: 700; }
.dcb-day.is-empty { opacity: .45; cursor: default; text-decoration: line-through; }
.dcb-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.dcb-time { border: 1.5px solid var(--dcb-line); background: #fff; border-radius: 12px; min-block-size: 46px; font: inherit; font-weight: 600; cursor: pointer; color: var(--dcb-ink); }
.dcb-time:hover { border-color: var(--dcb-accent); background: var(--dcb-tint); }
.dcb-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.dcb-tab { border: 1.5px solid var(--dcb-line); background: #fff; border-radius: 999px; padding: 8px 16px; font: inherit; cursor: pointer; min-block-size: 44px; }
.dcb-tab.is-on { border-color: var(--dcb-accent); background: var(--dcb-tint); font-weight: 700; }
.dcb-tab.is-done { color: var(--dcb-ok); }
.dcb-next { background: var(--dcb-tint); border-radius: 14px; padding: 14px; display: grid; gap: 10px; justify-items: start; }
.dcb-next p { margin: 0; }
.dcb-wait { margin-block-start: 8px; display: grid; gap: 12px; }

/* details */
.dcb-hold { background: var(--dcb-tint); border-radius: 12px; padding: 10px 14px; }
.dcb-summary { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dcb-summary li { display: grid; gap: 2px; padding: 12px 14px; border: 1.5px solid var(--dcb-line); border-radius: 12px; }
.dcb-summary li span { color: var(--dcb-soft); font-size: .92rem; }

/* manage */
.dcb-appt { display: grid; gap: 4px; border: 1.5px solid var(--dcb-line); border-radius: 14px; padding: 14px; margin-block: 12px; }
.dcb-appt.is-cancelled { opacity: .6; }
.dcb-badge { justify-self: start; font-size: .8rem; background: var(--dcb-tint); border-radius: 999px; padding: 2px 10px; }
.dcb-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 8px; }
.dcb-edit { margin-block-start: 16px; }
.dcb-ref { font-weight: 700; letter-spacing: .04em; unicode-bidi: isolate; }
.dcb bdi { unicode-bidi: isolate; }

@media (prefers-reduced-motion: reduce) { .dcb * { transition: none !important; animation: none !important; } }

.dcb-manage { max-inline-size: 680px; margin-inline: auto; }
.dcb-manage .dcb-cal { margin-block-start: 8px; }

/* Payment */
.dcb-pay { border: 1px solid var(--dcb-line, #d9e2e8); border-radius: 12px; padding: 14px 16px; margin-block: 12px; display: grid; gap: 10px; }
.dcb-pay legend { font-weight: 600; padding-inline: 6px; }
.dcb-pay-amount { margin: 0; font-size: 1.05rem; }
.dcb-pay-opt span { display: grid; gap: 2px; }
.dcb-pay-policy { margin: 0; font-size: .9rem; }
.dcb-pay-panel { background: var(--dcb-tint); }
.dcb-pay-panel.is-paid { border-color: var(--dcb-accent); }
.dcb-bank { white-space: pre-wrap; margin: 0; padding: 10px 12px; background: #fff; border-radius: 8px; font-family: inherit; unicode-bidi: plaintext; }
.dcb-pay-go { display: inline-block; text-align: center; text-decoration: none; }