/* drop 947: guidance on client forms — what is left, what is next, where you are */
.ca-left{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;width:100%;margin:0 0 .75rem;padding:.6rem .85rem;border-radius:var(--r-sm,8px);
  border:1px dashed var(--border-2,var(--border));font-size:var(--fs-sm,.85rem);color:var(--fg-muted)}
.ca-left.is-ready{border-style:solid;border-color:color-mix(in srgb,var(--c-success,#1a7f4b) 45%,transparent);color:var(--c-success,#1a7f4b);font-weight:600}
.ca-next{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--accent-text,var(--accent));cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ca-steps{position:sticky;top:calc(var(--cp-header-h,64px) + .5rem);z-index:5;display:flex;gap:.35rem;flex-wrap:wrap;margin:0 0 1rem;padding:.5rem;
  border:1px solid var(--border-2,var(--border));border-radius:var(--r-md,12px);background:var(--bg-card,var(--bg));box-shadow:0 6px 18px rgba(0,0,0,.06)}
.ca-step{display:flex;align-items:center;gap:.45rem;padding:.4rem .7rem;border:0;border-radius:var(--r-pill,999px);background:none;color:var(--fg-muted);
  font:inherit;font-size:var(--fs-sm,.85rem);cursor:pointer}
.ca-step:hover{background:color-mix(in srgb,var(--fg) 6%,transparent)}
.ca-dot{display:grid;place-items:center;width:1.45rem;height:1.45rem;border-radius:50%;border:1.5px solid var(--border-2,var(--border));font-size:.75rem;font-weight:700}
.ca-step.is-cur{color:var(--fg);font-weight:700}.ca-step.is-cur .ca-dot{border-color:var(--accent);color:var(--accent-text,var(--accent))}
.ca-step.is-done .ca-dot{background:var(--c-success,#1a7f4b);border-color:transparent;color:#fff}
@media(max-width:720px){.ca-step .ca-t{display:none}.ca-step.is-cur .ca-t{display:inline}}
/* the service request form */
.req-hint{margin:-.5rem 0 1rem;font-size:var(--fs-sm,.85rem);color:var(--fg-muted);line-height:1.6}
.req-star{color:var(--accent)}
.req-other{margin-top:.5rem}
.req-other-text{display:none;margin-top:.5rem}
.req-field:has(select option[value="__other__"]:checked) .req-other-text{display:block}

/* drop 956: one required marker everywhere */
.ca-req{color:var(--accent);font-weight:800}
/* drop 957: one field height across the client portal — text boxes, dropdowns (native, searchable and drawn) all 44 px,
   whatever the language or font (Arabic text was making some boxes taller). Small controls (-sm) and text areas keep theirs. */
main input.field-input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]),
main select.field-input, main select.field-select, main .req-input:not(textarea), main .cu-ctl:not(textarea):not(.cu-ctl-sm),
main .sms-btn.field-input, main .sms-btn.field-select, main .sms-btn.req-input, main .xs-btn,
main .form-control:not(textarea):not([type=checkbox]):not([type=radio]):not([type=file]) {
  height: 44px; min-height: 44px; box-sizing: border-box; line-height: 1.25; padding-block: 0;
}
main .xs-wrap.field-input, main .xs-wrap.field-select, main .xs-wrap.req-input { height: auto; min-height: 0; padding: 0; border: 0; background: none; }