/* ==========================================================================
   Shifa Clinic — booking wizard, tracker, live queue, patient account, tools.
   Uses the template colours through the site variables (--_p, --_d, --_l …).
   ========================================================================== */
.cl-book, .cl-track, .cl-acc, .cl-result, .cl-tool { --cl-r: var(--_r, 16px); --cl-b: var(--_b, #E3E8EE); --cl-soft: var(--_l, #EEF4FF); --cl-ok: #059669; --cl-bad: #DC2626; color: var(--_t); }
[class^="cl-"][hidden], [class*=" cl-"][hidden], .cl-book [hidden], .cl-acc [hidden], .cl-track [hidden] { display: none !important; }
.cl-book .i, .cl-acc .i, .cl-track .i, .cl-result .i { width: 1.15em; height: 1.15em; flex: none; }
.cl-book button, .cl-acc button, .cl-track button { font: inherit; cursor: pointer; }
.cl-link { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--_pb); font-weight: 700; cursor: pointer; text-decoration: none; }
.cl-link:hover { text-decoration: underline; }
.cl-link.is-danger { color: var(--cl-bad); }
.cl-hint { margin: 0; font-size: .93em; opacity: .85; }
.cl-loading::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-inline-end: 8px; vertical-align: -2px; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: cl-spin .7s linear infinite; }
@keyframes cl-spin { to { transform: rotate(360deg); } }
.cl-msg { margin: 14px 0 0; padding: 12px 16px; border-radius: 12px; background: #FEE2E2; color: #991B1B; font-weight: 600; }
.cl-msg.is-ok { background: #DCFCE7; color: #166534; }
.cl-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--cl-soft); font-size: .94em; }
.cl-note.is-ok { background: #ECFDF5; color: #065F46; }
.cl-note .i { color: var(--_p); }
.cl-h { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; font-size: 1.05rem; color: var(--_h); }
.cl-h:first-of-type { margin-top: 0; }
.cl-h .i { color: var(--_p); width: 1.3em; height: 1.3em; }
.cl-narrow { max-width: 680px; }

/* fields */
.cl-grid, .cl-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.cl-full { grid-column: 1 / -1; }
.cl-f { margin: 0 0 14px; }
.cl-f label { display: block; margin-bottom: 6px; font-weight: 700; font-size: .92em; color: var(--_d); }
.cl-f label i { color: var(--cl-bad); font-style: normal; }
.cl-f label input, .cl-f label select { margin-top: 6px; font-weight: 400; }
.cl-book input:not([type=radio]):not([type=checkbox]), .cl-book select, .cl-book textarea,
.cl-acc input:not([type=radio]):not([type=checkbox]), .cl-acc select, .cl-acc textarea,
.cl-track input, .cl-tool input:not([type=checkbox]) { width: 100%; min-height: 50px; padding: .7em 1em; font: inherit; color: var(--_d); background: var(--cl-soft); border: 1.5px solid transparent; border-radius: 12px; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.cl-book textarea, .cl-acc textarea { min-height: 84px; resize: vertical; }
.cl-book :is(input, select, textarea):focus, .cl-acc :is(input, select, textarea):focus, .cl-track input:focus, .cl-tool input:not([type=checkbox]):focus { outline: none; background: #fff; border-color: var(--_p); box-shadow: 0 0 0 4px rgba(var(--_p-rgb), .14); }
.cl-f-btn { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin: 18px 0 0; }
.cl-wide { width: 100%; }

/* ------------------------------------------------------------ wizard */
.cl-book { max-width: 980px; margin-inline: auto; }
.cl-steps { display: flex; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; counter-reset: s; }
.cl-steps li { flex: 1; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1.5px solid var(--cl-b); font-weight: 700; font-size: .93em; color: var(--_t); transition: .25s var(--_e); }
.cl-steps i { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--cl-soft); color: var(--_p); font-style: normal; font-weight: 800; transition: .25s; }
.cl-steps li.is-on { border-color: var(--_p); color: var(--_d); box-shadow: 0 10px 24px rgba(var(--_p-rgb), .12); }
.cl-steps li.is-on i, .cl-steps li.is-done i { background: var(--_p); color: #fff; }
.cl-steps li.is-done { color: var(--_d); }
.cl-wiz { padding: clamp(18px, 3vw, 32px); border-radius: calc(var(--cl-r) + 6px); background: #fff; border: 1px solid var(--cl-b); box-shadow: 0 24px 60px -30px rgba(var(--_d-rgb), .28); }
.cl-step { margin: 0; padding: 0; border: 0; min-width: 0; animation: cl-in .35s var(--_e); }
@keyframes cl-in { from { opacity: 0; transform: translateY(8px); } }
.cl-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 20px; border-top: 1px dashed var(--cl-b); }

.cl-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cl-docs.is-one { grid-template-columns: minmax(0, 520px); }
.cl-doc, .cl-kind, .cl-chip { position: relative; cursor: pointer; }
.cl-doc input, .cl-kind input, .cl-chip input { position: absolute; opacity: 0; pointer-events: none; }
.cl-doc-in { display: flex; align-items: center; gap: 14px; height: 100%; padding: 14px; border-radius: 16px; border: 1.5px solid var(--cl-b); background: #fff; transition: .2s var(--_e); }
.cl-doc-in img { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; background: var(--cl-soft); flex: none; }
.cl-doc-tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cl-doc-tx b { color: var(--_d); }
.cl-doc-tx small { font-size: .86em; }
.cl-doc-tx em { font-style: normal; font-size: .84em; color: var(--_p); font-weight: 700; }
.cl-doc-ok { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--cl-b); color: transparent; flex: none; transition: .2s; }
.cl-doc:hover .cl-doc-in { border-color: rgba(var(--_p-rgb), .45); }
.cl-doc input:checked + .cl-doc-in { border-color: var(--_p); background: rgba(var(--_p-rgb), .04); box-shadow: 0 0 0 4px rgba(var(--_p-rgb), .1); }
.cl-doc input:checked + .cl-doc-in .cl-doc-ok { background: var(--_p); border-color: var(--_p); color: #fff; }
.cl-doc input:focus-visible + .cl-doc-in, .cl-kind input:focus-visible + span, .cl-chip input:focus-visible + span { outline: 3px solid rgba(var(--_p-rgb), .45); outline-offset: 2px; }

.cl-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cl-kinds-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cl-kind span { display: grid; justify-items: center; gap: 4px; height: 100%; padding: 16px 10px; border-radius: 16px; border: 1.5px solid var(--cl-b); background: #fff; text-align: center; transition: .2s var(--_e); }
.cl-kind .i { width: 28px; height: 28px; color: var(--_p); }
.cl-kind b { color: var(--_d); }
.cl-kind small { font-size: .85em; font-weight: 700; color: var(--_p); }
.cl-kind:hover span { border-color: rgba(var(--_p-rgb), .45); }
.cl-kind input:checked + span { border-color: var(--_p); background: var(--_p); box-shadow: 0 14px 26px -12px rgba(var(--_p-rgb), .7); }
.cl-kind input:checked + span :is(b, small, .i) { color: #fff; }

.cl-svcs, .cl-who { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-chip span, a.cl-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--cl-b); background: #fff; font-weight: 700; font-size: .92em; color: var(--_d); transition: .2s; text-decoration: none; }
.cl-chip small { font-weight: 600; color: var(--_p); }
.cl-chip .i { width: 1.1em; height: 1.1em; color: var(--_p); }
.cl-chip input:checked + span { background: var(--_d); border-color: var(--_d); color: #fff; }
.cl-chip input:checked + span :is(small, .i) { color: #fff; }
a.cl-add { border-style: dashed; color: var(--_p); }

.cl-picked { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; padding: 10px 14px; border-radius: 14px; background: var(--cl-soft); }
.cl-picked img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; }
.cl-picked span { flex: 1; display: grid; }
.cl-picked b { color: var(--_d); }
.cl-picked small { font-size: .86em; }
.cl-days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.cl-day { flex: 0 0 auto; display: grid; justify-items: center; gap: 0; min-width: 82px; padding: 10px 8px; border-radius: 16px; border: 1.5px solid var(--cl-b); background: #fff; color: var(--_d); scroll-snap-align: start; transition: .2s var(--_e); }
.cl-day small { font-size: .78em; color: var(--_t); }
.cl-day b { font-size: 1.5rem; line-height: 1.3; }
.cl-day:hover { border-color: rgba(var(--_p-rgb), .45); }
.cl-day.is-on { background: var(--_p); border-color: var(--_p); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(var(--_p-rgb), .8); }
.cl-day.is-on small { color: rgba(255, 255, 255, .85); }
.cl-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.cl-slots .cl-hint { grid-column: 1 / -1; }
.cl-slot { display: grid; justify-items: center; min-height: 48px; padding: 8px; border-radius: 12px; border: 1.5px solid var(--cl-b); background: #fff; color: var(--_d); font-weight: 700; direction: ltr; transition: .15s; }
.cl-slot small { font-size: .72em; font-weight: 600; color: #B45309; direction: rtl; }
.cl-slot:hover { border-color: var(--_p); color: var(--_p); }
.cl-slot.is-on { background: var(--_d); border-color: var(--_d); color: #fff; }
.cl-slot.is-on small { color: #FDE68A; }

.cl-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-bottom: 24px; border-radius: 16px; overflow: hidden; background: var(--cl-b); border: 1px solid var(--cl-b); }
.cl-sum div { display: grid; gap: 2px; padding: 12px 14px; background: #fff; }
.cl-sum small { font-size: .8em; }
.cl-sum b { color: var(--_d); font-size: .95em; }
.cl-sum .is-total { background: var(--cl-soft); }
.cl-sum .is-total b { color: var(--_p); font-size: 1.15em; }
.cl-who { margin-bottom: 18px; }

.cl-done { max-width: 640px; margin-inline: auto; animation: cl-in .45s var(--_e); }
.cl-done-in { padding: clamp(22px, 4vw, 40px); border-radius: 24px; background: #fff; border: 1px solid var(--cl-b); text-align: center; box-shadow: 0 24px 60px -30px rgba(var(--_d-rgb), .3); }
.cl-done-ic, .cl-result-ic { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 50%; background: #DCFCE7; color: var(--cl-ok); animation: cl-pop .5s var(--_e); }
.cl-done-ic .i, .cl-result-ic .i { width: 38px; height: 38px; stroke-width: 2.4; }
@keyframes cl-pop { from { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.08); } }
.cl-done h3, .cl-result h1 { margin: 0 0 16px; color: var(--_h); font-size: 1.5rem; }
.cl-done-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 16px; }
.cl-done-grid div { padding: 12px; border-radius: 14px; background: var(--cl-soft); display: grid; }
.cl-done-grid small { font-size: .8em; }
.cl-done-grid b { color: var(--_d); font-size: 1.1em; }
.cl-done-act, .cl-result-act { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin: 20px 0 0; }

/* ------------------------------------------------------------ result pages */
.cl-result { padding: clamp(24px, 4vw, 44px); border-radius: 24px; background: #fff; border: 1px solid var(--cl-b); text-align: center; }
.cl-result.is-bad .cl-result-ic { background: #FEF3C7; color: #B45309; }
.cl-dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 20px 0 0; text-align: start; }
.cl-dl div { padding: 12px 14px; border-radius: 12px; background: var(--cl-soft); }
.cl-dl dt { font-size: .8em; }
.cl-dl dd { margin: 0; font-weight: 700; color: var(--_d); }

/* ------------------------------------------------------------ tracker + queue */
.cl-track { padding: clamp(18px, 3vw, 28px); border-radius: 22px; background: #fff; border: 1px solid var(--cl-b); box-shadow: 0 24px 60px -34px rgba(var(--_d-rgb), .3); }
.cl-track h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; color: var(--_h); }
.cl-track h3 .i { color: var(--_p); width: 1.4em; height: 1.4em; }
.cl-track > .cl-hint { margin-bottom: 16px; }
.cl-out { margin-top: 18px; animation: cl-in .35s var(--_e); }
.cl-tcard { padding: 16px; border-radius: 18px; background: var(--cl-soft); }
.cl-tcard-h { display: flex; align-items: center; gap: 12px; }
.cl-tcard-h img { width: 48px; height: 48px; border-radius: 14px; object-fit: cover; }
.cl-tcard-h > div { flex: 1; display: grid; }
.cl-tcard-h b { color: var(--_d); }
.cl-tcard-h small { display: inline-flex; align-items: center; gap: 6px; font-size: .85em; }
.cl-tcard-m, .cl-appt-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; font-size: .92em; }
.cl-tcard-m span, .cl-appt-meta span { display: inline-flex; align-items: center; gap: 6px; }
.cl-tcard-m .i, .cl-appt-meta .i { color: var(--_p); }
.cl-tcard-act, .cl-appt-act { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 0; }
.cl-tcard-act:empty { display: none; }
.cl-st { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); font-size: .8rem; font-weight: 800; white-space: nowrap; }
.cl-st::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.cl-flow { display: flex; margin: 18px 0 4px; padding: 0; list-style: none; }
.cl-flow li { flex: 1; position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; font-size: .78em; font-weight: 700; color: var(--_t); }
.cl-flow li::before { content: ''; position: absolute; top: 9px; inset-inline-start: -50%; width: 100%; height: 3px; background: var(--cl-b); z-index: 0; }
.cl-flow li:first-child::before { display: none; }
.cl-flow i { position: relative; z-index: 1; width: 21px; height: 21px; border-radius: 50%; background: #fff; border: 3px solid var(--cl-b); }
.cl-flow small { font-weight: 500; opacity: .75; }
.cl-flow .is-done i { background: var(--_p); border-color: var(--_p); }
.cl-flow .is-done::before, .cl-flow .is-current::before { background: var(--_p); }
.cl-flow .is-current i { border-color: var(--_p); box-shadow: 0 0 0 5px rgba(var(--_p-rgb), .18); animation: cl-ping 1.6s infinite; }
.cl-flow .is-current { color: var(--_d); }
@keyframes cl-ping { 50% { box-shadow: 0 0 0 9px rgba(var(--_p-rgb), 0); } }

.cl-queue { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 0; padding: 12px; border-radius: 16px; background: var(--_d); color: #fff; }
.cl-queue div { display: grid; justify-items: center; padding: 8px 4px; border-radius: 12px; background: rgba(255, 255, 255, .07); }
.cl-queue small { font-size: .76em; opacity: .8; }
.cl-queue b { font-size: 1.7rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.cl-queue .is-mine { background: var(--_p); }
.cl-q-note { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 2px 0 0; font-size: .82em; opacity: .9; }
.cl-pulse { width: 8px; height: 8px; border-radius: 50%; background: #34D399; animation: cl-blink 1.4s infinite; }
@keyframes cl-blink { 50% { opacity: .25; } }

/* ------------------------------------------------------------ account */
.cl-auth { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); max-width: 980px; margin-inline: auto; border-radius: 26px; overflow: hidden; background: #fff; border: 1px solid var(--cl-b); box-shadow: 0 30px 70px -40px rgba(var(--_d-rgb), .35); }
.cl-auth-side { padding: clamp(24px, 4vw, 44px); background: linear-gradient(160deg, var(--_p), var(--_d)); color: #fff; }
.cl-auth-side h2 { margin: 18px 0 20px; color: #fff; font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); line-height: 1.4; }
.cl-auth-ic { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: rgba(255, 255, 255, .14); }
.cl-auth-ic .i { width: 30px; height: 30px; }
.cl-perks { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.cl-perks li { display: flex; align-items: center; gap: 12px; }
.cl-perks .i { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: rgba(255, 255, 255, .14); flex: none; }
.cl-auth-main { padding: clamp(22px, 4vw, 40px); }
.cl-tabs { display: flex; gap: 6px; margin: 0 0 20px; padding: 5px; border-radius: 14px; background: var(--cl-soft); overflow-x: auto; scrollbar-width: none; }
.cl-tabs button { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 0; border-radius: 10px; background: none; color: var(--_t); font-weight: 700; white-space: nowrap; transition: .2s; }
.cl-tabs button .i { width: 1.1em; height: 1.1em; }
.cl-tabs button.is-on { background: #fff; color: var(--_p); box-shadow: 0 4px 14px rgba(var(--_d-rgb), .08); }
.cl-doors { margin: 22px 0 0; padding-top: 16px; border-top: 1px dashed var(--cl-b); font-size: .92em; }
.cl-demo-note { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: #FEF3C7; color: #92400E; font-weight: 600; font-size: .92em; }
.cl-acc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 0 20px; padding: 18px; border-radius: 20px; background: #fff; border: 1px solid var(--cl-b); }
.cl-avatar { display: grid; place-items: center; width: 54px; height: 54px; flex: none; border-radius: 16px; background: linear-gradient(135deg, var(--_p), var(--_d)); color: #fff; font-weight: 800; font-size: 1.3rem; }
.cl-acc-who { flex: 1; min-width: 160px; display: grid; }
.cl-acc-name { margin: 0; font-weight: 800; color: var(--_d); font-size: 1.15rem; }
.cl-acc-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cl-bell { position: relative; min-width: 48px; padding-inline: 12px; }
.cl-bell-n { position: absolute; top: -6px; inset-inline-end: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--cl-bad); color: #fff; font-size: 11px; line-height: 20px; }
.cl-card, .cl-pane > .cl-empty { padding: clamp(18px, 3vw, 28px); border-radius: 20px; background: #fff; border: 1px solid var(--cl-b); }
.cl-pane { display: grid; gap: 12px; }
.cl-empty { text-align: center; }
.cl-empty p { margin: 0 0 14px; }
.cl-appt { display: grid; grid-template-columns: 86px minmax(0, 1fr); border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--cl-b); transition: box-shadow .2s, transform .2s var(--_e); }
.cl-appt:hover { box-shadow: 0 18px 40px -26px rgba(var(--_d-rgb), .4); transform: translateY(-2px); }
.cl-appt-date { display: grid; place-content: center; justify-items: center; gap: 2px; padding: 12px 6px; background: var(--cl-soft); text-align: center; }
.cl-appt-date b { font-size: 2rem; line-height: 1; color: var(--_p); }
.cl-appt-date small { font-size: .74em; line-height: 1.35; }
.cl-appt-main { padding: 14px 16px; min-width: 0; }
.cl-appt-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cl-appt-doc { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cl-appt-doc img { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; }
.cl-appt-doc span { display: grid; min-width: 0; }
.cl-appt-doc b { color: var(--_d); }
.cl-appt-doc small { font-size: .82em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-appt-act .btn { min-height: 40px; padding: .45em 1.1em; font-size: .9rem; }
.cl-rec { padding: 16px 18px; border-radius: 20px; background: #fff; border: 1px solid var(--cl-b); }
.cl-rec header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding-bottom: 10px; border-bottom: 1px dashed var(--cl-b); }
.cl-rec header b { color: var(--_d); }
.cl-rec header :is(span, small) { display: inline-flex; align-items: center; gap: 6px; font-size: .88em; }
.cl-rec-d { color: var(--_p); font-weight: 700; }
.cl-visit h4 { margin: 14px 0 6px; font-size: .9rem; color: var(--_p); }
.cl-visit p { margin: 0; white-space: pre-line; }
.cl-vit { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-vit span { padding: 5px 12px; border-radius: 10px; background: var(--cl-soft); font-size: .88em; }
.cl-vit b { color: var(--_d); }
.cl-rx { margin: 0; padding: 0; list-style: none; counter-reset: r; display: grid; gap: 6px; }
.cl-rx li { counter-increment: r; display: grid; grid-template-columns: 26px 1fr; column-gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--cl-soft); }
.cl-rx li::before { content: counter(r); grid-row: span 2; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--_p); color: #fff; font-size: .8em; font-weight: 800; }
.cl-rx b { color: var(--_d); }
.cl-rx small { font-size: .86em; }
.cl-mem-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: 18px; background: var(--cl-soft); }
.cl-mems { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.cl-mem { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: #fff; border: 1px solid var(--cl-b); }
.cl-mem > div { flex: 1; display: grid; min-width: 0; }
.cl-mem b { color: var(--_d); }
.cl-mem small { font-size: .84em; }
.cl-mem small.is-warn { color: #B45309; }
.cl-mem-act { display: grid; gap: 4px; justify-items: end; font-size: .88em; }
.cl-hist { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cl-hist li { padding: 8px 12px; border-inline-start: 3px solid var(--_p); background: var(--cl-soft); border-radius: 0 10px 10px 0; }
.cl-hist small { margin-inline-start: 8px; opacity: .75; }
.cl-hist p { margin: 4px 0 0; font-size: .9em; }

.cl-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(var(--_d-rgb), .55); backdrop-filter: blur(4px); animation: cl-fade .2s; }
@keyframes cl-fade { from { opacity: 0; } }
.cl-modal-in { position: relative; width: min(680px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 26px; border-radius: 22px; background: #fff; animation: cl-in .3s var(--_e); }
.cl-modal-in h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 6px; padding-inline-end: 40px; color: var(--_h); }
.cl-x { position: absolute; top: 14px; inset-inline-end: 14px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--cl-soft); color: var(--_d); font-size: 22px; line-height: 1; cursor: pointer; }
body.cl-lock { overflow: hidden; }

/* ------------------------------------------------------------ tools (home "tool" block) */
.cl-tool { padding: clamp(18px, 3vw, 28px); border-radius: 22px; background: #fff; border: 1px solid var(--cl-b); box-shadow: 0 24px 60px -34px rgba(var(--_d-rgb), .3); }
.cl-tool label { display: block; font-weight: 700; color: var(--_d); margin-bottom: 6px; }
.tl-in { display: flex; gap: 10px; align-items: end; }
.tl-in > * { flex: 1; }
.tl-in .btn { flex: 0 0 auto; }
[data-out] { margin-top: 16px; animation: cl-in .3s var(--_e); }
.tl-big { padding: 16px; border-radius: 16px; background: linear-gradient(135deg, var(--_p), var(--_d)); color: #fff; }
.tl-big small { opacity: .85; }
.tl-big b { display: block; font-size: 1.35rem; }
.tl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.tl-row span { padding: 10px 14px; border-radius: 14px; background: var(--cl-soft); display: grid; }
.tl-row small { font-size: .8em; }
.tl-row b { color: var(--_d); }
.tl-bar { position: relative; height: 10px; margin-top: 14px; border-radius: 99px; background: var(--cl-soft); overflow: hidden; }
.tl-bar i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: inherit; background: linear-gradient(90deg, var(--_a, var(--_p)), var(--_p)); transition: width .6s var(--_e); }
.tl-bar em { position: absolute; inset-block: 0; width: 2px; background: #fff; }
.tl-bp { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: #ECFDF5; color: #065F46; }
.tl-bp b { font-size: 1.8rem; direction: ltr; }
.tl-bp span { font-weight: 800; }
.tl-bp.is-e { background: #FEF9C3; color: #854D0E; }
.tl-bp.is-1 { background: #FFEDD5; color: #9A3412; }
.tl-bp.is-2, .tl-bp.is-c { background: #FEE2E2; color: #991B1B; }
.tl-bp.is-l { background: #E0F2FE; color: #075985; }
.tl-gauge { position: relative; height: 12px; margin: 16px 0 6px; border-radius: 99px; background: linear-gradient(90deg, #38BDF8 0 12%, #22C55E 12% 32%, #EAB308 32% 50%, #F97316 50% 68%, #EF4444 68% 88%, #991B1B 88%); }
.tl-gauge i { position: absolute; top: -5px; width: 22px; height: 22px; margin-inline-start: -11px; border-radius: 50%; background: #fff; border: 4px solid var(--_d); transition: inset-inline-start .6s var(--_e); }
.tl-tip { margin: 8px 0 0; font-size: .86em; opacity: .85; }
.tl-vac { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.tl-vac li { display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--cl-soft); border: 1.5px solid transparent; transition: .25s; }
.tl-vac .tl-age { display: grid; place-items: center; min-height: 44px; padding: 4px; border-radius: 10px; background: #fff; font-weight: 800; font-size: .82em; color: var(--_p); text-align: center; line-height: 1.3; }
.tl-vac b { color: var(--_d); display: block; font-size: .95em; }
.tl-tag { font-size: .8em; }
.tl-vac li.is-past { opacity: .55; }
.tl-vac li.is-due { border-color: var(--_p); background: #fff; box-shadow: 0 10px 24px -16px rgba(var(--_p-rgb), .8); }
.tl-vac li.is-due .tl-tag { color: var(--_p); font-weight: 800; }
.tl-vac li.is-soon .tl-tag { color: #B45309; font-weight: 700; }
.tl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-chips button { min-height: 42px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--cl-b); background: #fff; color: var(--_d); font: inherit; font-weight: 700; cursor: pointer; transition: .2s; }
.tl-chips button:hover { border-color: var(--_p); }
.tl-chips button.is-on { background: var(--_p); border-color: var(--_p); color: #fff; }
.tl-panel { margin-top: 14px; padding: 16px; border-radius: 16px; background: var(--cl-soft); animation: cl-in .3s var(--_e); }
.tl-panel h4 { margin: 0 0 6px; color: var(--_d); }
.tl-panel p { margin: 0 0 10px; }
.tl-panel ul { margin: 0 0 12px; padding-inline-start: 1.2em; }
.tl-price { margin: 0; padding: 0; list-style: none; }
.tl-price li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--cl-b); }
.tl-price li:last-child { border: 0; }
.tl-price b { color: var(--_p); white-space: nowrap; }

@media (max-width: 860px) {
	.cl-auth { grid-template-columns: 1fr; }
	.cl-auth-side { padding-block: 22px; }
	.cl-auth-side h2 { margin-bottom: 14px; }
	.cl-perks { grid-template-columns: 1fr 1fr; gap: 10px; font-size: .9em; }
	.cl-sum { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.cl-grid, .cl-row2 { grid-template-columns: 1fr; }
	.cl-steps li span { display: none; }
	.cl-steps li { justify-content: center; padding: 8px; }
	.cl-steps li.is-on span { display: inline; }
	.cl-steps li.is-on { flex: 2.4; }
	.cl-kinds { grid-template-columns: 1fr; }
	.cl-kind span { grid-template-columns: auto 1fr auto; justify-items: start; align-items: center; text-align: start; padding: 12px 14px; gap: 10px; }
	.cl-kinds-2 { grid-template-columns: 1fr; }
	.cl-appt { grid-template-columns: 1fr; }
	.cl-appt-date { grid-auto-flow: column; justify-content: start; gap: 10px; padding: 10px 16px; }
	.cl-appt-date b { font-size: 1.4rem; }
	.cl-perks { grid-template-columns: 1fr; }
	.cl-queue b { font-size: 1.35rem; }
	.cl-flow li { font-size: .68em; }
	.cl-dl, .cl-done-grid { grid-template-columns: 1fr 1fr; }
	.cl-nav .btn { flex: 1; }
	.tl-in { flex-wrap: wrap; }
	.tl-in .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.cl-step, .cl-out, .cl-done, .cl-modal, .cl-modal-in, [data-out], .cl-flow .is-current i, .cl-pulse { animation: none !important; }
}

/* ------------------------------------------------------------ template tools */
.tl-kid-card { position: relative; padding-top: 34px; }
.tl-kid-ic, .tl-edd-ic, .tl-panel-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--_l); color: var(--_p); }
.tl-kid-ic .i, .tl-edd-ic .i, .tl-panel-ic .i { width: 28px; height: 28px; }
.tl-kid-ic { position: absolute; top: -26px; inset-inline-start: 24px; background: var(--_a); color: #fff; box-shadow: 0 14px 30px -10px rgba(var(--_a-rgb), .8); transform: rotate(-8deg); }
.tl-kid-t { font-weight: 700; color: var(--_d); margin: 0 0 14px; }
.tl-vac-box { padding: 14px; }
.tl-vac-box .tl-vac { margin: 0; }
.tl-tri { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.tl-tri li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid var(--_b); }
.tl-tri i { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--_l); color: var(--_p); font-style: normal; font-weight: 800; }
.tl-tri span { flex: 1; display: grid; }
.tl-tri b { color: var(--_h); }
.tl-tri small { font-size: .88em; }
.tl-tri em { font-style: normal; font-size: .8em; font-weight: 800; color: var(--_p); white-space: nowrap; }
.tl-edd .tl-edd-ic { margin-bottom: 14px; }
.tl-pick { flex: 1; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.tl-pick { position: relative; }
.tl-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tl-box { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 7px; border: 2px solid var(--cl-b); color: transparent; transition: .2s; }
.tl-box .i { width: 15px; height: 15px; stroke-width: 3; }
.tl-pick input:checked + .tl-box { background: var(--_p); border-color: var(--_p); color: #fff; }
.tl-pick input:focus-visible + .tl-box { outline: 3px solid rgba(var(--_p-rgb), .4); }
.tl-pick span:last-child { display: grid; }
.tl-pick b { color: var(--_h); font-size: .97em; }
.tl-pick small { font-size: .84em; }
.tl-price em { align-self: center; font-style: normal; font-size: .86em; white-space: nowrap; }
.tl-total { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 14px 16px; border-radius: 14px; background: var(--_d); color: #fff; transition: .3s; }
.tl-total b { font-size: 1.3rem; direction: ltr; }
.tl-sum.has-sum .tl-total { background: var(--_p); }
.tl-cats { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.tl-cats li { display: flex; justify-content: space-between; gap: 10px; padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--_b); border-inline-start: 5px solid #22C55E; }
.tl-cats li.is-e { border-inline-start-color: #EAB308; }
.tl-cats li.is-1 { border-inline-start-color: #F97316; }
.tl-cats li.is-2 { border-inline-start-color: #EF4444; }
.tl-cats li.is-c { border-inline-start-color: #991B1B; }
.tl-cats b { color: var(--_h); }
.tl-cats span { font-weight: 700; font-size: .92em; }
.tl-bpbox { position: relative; overflow: hidden; }
.tl-ecg { display: block; height: 46px; margin: -6px -6px 12px; }
.tl-ecg svg { width: 100%; height: 100%; }
.tl-ecg path { fill: none; stroke: var(--_p); stroke-width: 2.5; stroke-linejoin: round; stroke-dasharray: 420; stroke-dashoffset: 420; animation: tl-ecg 2.6s linear infinite; }
@keyframes tl-ecg { 60%, 100% { stroke-dashoffset: 0; } }
.tl-in .cl-f { margin: 0; }
.tl-pickbox { max-width: 900px; margin-inline: auto; }
.tl-pickbox .tl-chips { justify-content: center; }
.tl-panel { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tl-panel > div { flex: 1; min-width: 200px; }
.tl-panel h4 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.tl-panel .tool-tag { margin: 0; }
.tl-panel-ic { background: #fff; }
@media (prefers-reduced-motion: reduce) { .tl-ecg path { animation: none; stroke-dashoffset: 0; } }
.demo-box{margin-top:20px;padding:14px;border-radius:16px;background:linear-gradient(135deg,rgba(14,165,233,.08),rgba(34,197,94,.1));border:1px dashed rgba(14,165,233,.45)}
.demo-t{display:flex;align-items:center;gap:6px;margin:0 0 10px;font-weight:700;font-size:.88rem;color:#0C4A6E}.demo-t svg{width:18px;height:18px;color:#16A34A}
.demo-list{display:grid;gap:8px}
.demo-acc{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:1px solid #DCEAF3;border-radius:12px;background:#fff;font:inherit;cursor:pointer;text-align:start;transition:border-color .2s,box-shadow .2s}
.demo-acc:hover{border-color:#0EA5E9;box-shadow:0 6px 18px rgba(14,165,233,.15)}
.demo-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#0EA5E9,#22C55E);color:#fff;flex:none}.demo-ic svg{width:19px;height:19px}
.demo-tx{flex:1;min-width:0}.demo-tx b{display:block;color:#0C4A6E;font-size:.92rem;line-height:1.3}.demo-tx small{display:block;color:#64748B;font-size:.78rem;text-align:start}
.demo-go{padding:5px 12px;border-radius:9px;background:#0EA5E9;color:#fff;font-weight:700;font-size:.8rem}
.demo-acc.is-busy{opacity:.6;pointer-events:none}