/* Client UX round (UX-C6 … C8).  Tokens from sp_ds, always with a fallback (the office frame does not load ds.css). */
.cx-page{display:flex;flex-direction:column;gap:20px;padding:0 16px 32px}
.cx-h{margin:0 0 8px;font-size:var(--fs-title-sm, 18px);font-weight:800}
.cx-sec .rows{margin:0}
.cx-sec .row small{display:block;font-size:var(--fs-caption, 13px);color:#46464F;font-weight:400}
.cx-num{font-weight:700;color:var(--ds-primary, #212E85)}

/* urgent help: warm, not alarming red; numbers large enough to read at a glance */
.cx-sos{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:16px;background:#FFF4E5;border:1px solid #F3D9B1;color:#5A3300}
.cx-sos h2{margin:0;font-size:var(--fs-title-sm, 18px);font-weight:800}
.cx-sos p{margin:0;font-size:var(--fs-body-sm, 14px)}
.cx-tel{display:flex;align-items:center;gap:12px;min-height:var(--touch-min, 44px);padding:10px 14px;border-radius:12px;background:#fff;color:#1B1B21;text-decoration:none}
.cx-tel-b{flex:1;display:flex;flex-direction:column;line-height:1.5}
.cx-tel-b small{font-size:var(--fs-caption, 13px);color:#46464F}
.cx-tel-n{font-size:var(--fs-title, 20px);font-weight:800;color:#5A3300}
.cx-tel:focus-visible,.cx-soslink:focus-visible{outline:2px solid var(--ds-primary, #212E85);outline-offset:2px}
.cx-abroad{font-size:var(--fs-caption, 13px)!important}

.cx-faq{display:flex;flex-direction:column;background:var(--sp-surface, #fff);border:1px solid var(--ds-line, #E3E5EE);border-radius:16px;overflow:hidden}
.cx-faq details{border-bottom:1px solid var(--ds-line, #E3E5EE)}
.cx-faq details:last-child{border-bottom:0}
.cx-faq summary{min-height:var(--touch-min, 44px);display:flex;align-items:center;padding:10px 16px;font-size:var(--fs-body, 16px);font-weight:600;cursor:pointer}
.cx-faq p{margin:0;padding:0 16px 14px;font-size:var(--fs-body-sm, 14px);color:#46464F}

.cx-soslink{display:flex;align-items:center;justify-content:center;gap:6px;min-height:var(--touch-min, 44px);margin:12px 0 0;font-size:var(--fs-body-sm, 14px);font-weight:600;color:#5A3300;text-decoration:none}
.cx-soslink svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* reschedule before cancel */
.cx-instead{display:flex;flex-direction:column;gap:8px;padding:12px;margin:0 0 12px;border-radius:12px;background:var(--ds-surface-low, #F5F2FA)}
.cx-instead p{margin:0;font-size:var(--fs-body-sm, 14px)}
.cx-change{display:flex;flex-direction:column;gap:8px}
.cx-k{display:block;font-size:var(--fs-body-sm, 14px);font-weight:600;margin-top:8px}
#change-sheet .chips{flex-wrap:wrap}
#change-sheet textarea,#help-msg textarea{width:100%;box-sizing:border-box;font:inherit;padding:10px 12px;border:1px solid #777680;border-radius:12px}

/* UX-C14: a full 48px back button */
.top .back{width:48px;height:48px;min-width:48px;min-height:48px}

/* UX-C15: inline form errors */
.cx-err{margin:4px 0 0;font-size:var(--fs-caption, 13px);color:#B3261E;font-weight:600}
[aria-invalid="true"]{border-color:#B3261E!important}
.cx-theme{display:flex;align-items:center;gap:12px;padding:12px 8px 12px 16px;border-radius:16px;background:var(--ds-surface-low, #F5F2FA)}
.cx-theme-b{flex:1;display:flex;flex-direction:column;line-height:1.5;color:inherit;text-decoration:none}
.cx-theme-b small{font-size:var(--fs-caption, 13px);color:#46464F}
.cx-pushcard .sp-btn{align-self:flex-start;margin-top:8px}

/* UX-C12: after a session */
.cx-after{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:16px;background:var(--sp-surface, #fff);border:1px solid var(--ds-line, #E3E5EE)}
.cx-after h2{margin:0;font-size:var(--fs-title-sm, 18px);font-weight:800}
.cx-after p{margin:0;font-size:var(--fs-body-sm, 14px);color:#46464F}
.cx-score{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cx-sc{min-height:var(--touch-min, 44px);border-radius:12px;border:1px solid #777680;background:#fff;font:inherit;font-size:var(--fs-body-sm, 14px);font-weight:600;color:#1B1B21}
.cx-sc:focus-visible{outline:2px solid var(--ds-primary, #212E85);outline-offset:2px}
.cx-after-x{display:flex;justify-content:center}
.cx-after-x .link{min-height:var(--touch-min, 44px)}

/* UX-C11: get ready */
.cx-ready{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:16px;background:var(--ds-surface-low, #F5F2FA);margin:8px 0}
.cx-ready h2{margin:0;font-size:var(--fs-title-sm, 18px);font-weight:800}
.cx-count{font-weight:600;color:var(--ds-primary, #212E85)}
.cx-ready ul{margin:0;padding-inline-start:20px;font-size:var(--fs-body-sm, 14px)}
.cx-ready li{margin:2px 0}
.cx-help{display:inline-flex;align-items:center;min-height:var(--touch-min, 44px);font-weight:700;color:var(--ds-primary, #212E85);text-decoration:none}

/* UX-C13: weekly repeat */
.cx-repeat{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.cx-repeat label{font-size:var(--fs-body-sm, 14px);font-weight:600}
.cx-repeat select{min-height:var(--touch-min, 44px);padding:8px 12px;border:1px solid #777680;border-radius:12px;font:inherit;background:var(--sp-surface, #fff);color:inherit}
.cx-repeat .fine{margin:0}

/* UX-C10: help me choose */
.cx-choose{display:flex;flex-direction:column;gap:16px}
.cx-q{border:0;margin:0;padding:0}
.cx-q legend{font-size:var(--fs-body, 16px);font-weight:700;margin-bottom:8px}
.cx-q .chips{flex-wrap:wrap}
.cx-picks{display:flex;flex-direction:column;gap:10px}

/* UX-C20: notifications */
.cx-push{display:flex;flex-direction:column;gap:6px;margin:16px 0}
.cx-push .fine{margin:0}

/* wallet: what the money was for, under the row title (may wrap to two lines) */
.wl-s{font-size:var(--fs-body-sm, 13.5px);color:var(--sp-ink, #1B1B1F);line-height:1.45;margin:1px 0 2px;overflow-wrap:anywhere}

/* sessions list (UX-C3): a cancelled row is quieter but never struck through; text keeps full contrast */
.sx-item{display:flex;flex-direction:column;gap:6px}
.sx.gone{background:transparent;border-style:dashed}
.sx.gone .sx-date{filter:grayscale(1);opacity:.55}
.sx .u-pill{flex:none}
/* the session can be joined now: its own link under the row, the same address as on the session page */
.sx-join{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:14px;text-decoration:none;
  background:var(--sp-primary, #212E85);color:#fff;font-weight:600}
.sx-join:focus-visible{outline:3px solid var(--sp-primary, #212E85);outline-offset:2px}
@media (min-width:821px){.sx-list:has(> .sx-item:nth-child(2)){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

/* booking calendar (UX-C2): each open day shows its number of free times */
.cal-d{height:auto;min-height:48px;padding:4px 0}
.cal-n{font-style:normal;font-size:var(--fs-label, 12px);font-weight:600;color:var(--u-ok, #17703F);white-space:nowrap}
.cal-d.on .cal-n{color:#fff}
:where(html[data-theme=dark]) .cal-d:not(.on) .cal-n{color:var(--sp-primary-night)}

/* choosing a therapist (UX-C5): gender chips on the fg filter, «دیدن معرفی» under each card, the short page */
.cx-fg{display:flex;gap:8px;margin:4px 0 12px}
.cx-fg-o{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--sp-line, #C7C5D0);
  color:var(--sp-ink, #1B1B1F);text-decoration:none;font-weight:600}
.cx-fg-o.on{border:2px solid var(--sp-primary, #212E85);background:var(--sp-primary-soft, #E8E6FF);color:var(--sp-primary, #212E85)}
.cx-fg-o svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4}
.bk-item{margin:0 0 8px}
.bk-item .bk-card{margin:0}
.bk-about{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;color:var(--sp-primary, #212E85);font-weight:600;text-decoration:none}
@media (min-width:821px){.bk-pad > .bk-item.bk-item{grid-column:auto;margin:0 0 10px}}
.cx-about-head{display:flex;align-items:center;gap:12px;margin:8px 0 16px}
.cx-about-n{display:flex;flex-direction:column;gap:4px}
.cx-about-n b{font-size:var(--fs-title, 18px)}
.cx-about-n small{color:var(--sp-ink-2, #46464F)}
.cx-about-sec{margin:0 0 16px}
.cx-tags{display:flex;flex-wrap:wrap;gap:6px}
.cx-bio{margin:0;line-height:1.8;white-space:pre-line}
.cx-times{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cx-time{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:56px;border-radius:14px;
  background:var(--u-ok-s, #E3F4EA);color:var(--sp-ink, #1B1B1F);text-decoration:none}
.cx-time b{font-size:var(--fs-body, 15.5px)}
.cx-about-page .sp-btn{margin-top:8px}