/* ── MonTherapy app theme (mirrored from RN src/theme/colors.js) ── */
:root{
  --forest:#4D6535;  --grove:#6A8450;  --sage:#C8DECE;  --amber:#C9853A;
  --blush:#E07A84;   --walnut:#7A5035; --paper:#F2E8D5;
  --header:#5A7040;  --primary:#556f44; --btn:#4D6535;  --bg:#F2E8D5;
  --accent:#e7f1e7;  --card:#FAF3E8;
  --border:rgba(122,80,53,.18); --divider:rgba(122,80,53,.10);
  --text:rgba(45,41,32,.92); --muted:rgba(122,80,53,.65); --placeholder:rgba(122,80,53,.40);
  --soft-blue:#E5F0FF; --blue:#2D6CDF; --soft-red:#f4968a; --red:#C84B41;
  --aqua:#2F8FA4; --soft-sand:#fed697; --sand:#B7862D; --soft-cream:#fff4e1;
  --danger:#f4968a; --alert:#fed697;
  --tab-inactive:rgba(100,116,139,.60);
}
*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden]{ display:none !important; }
html,body{ height:100%; }
body{
  background:#d8d2c4; /* behind the phone frame on desktop */
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  color:var(--text);
}

/* ── Phone frame: full-screen on mobile, centered app frame on desktop ── */
#phone{
  position:relative; margin:0 auto; max-width:480px; height:100dvh;
  background:var(--bg); display:flex; flex-direction:column; overflow:hidden;
}
@media (min-width:520px){
  body{ padding:0; overflow:hidden; }
  #phone{ box-shadow:0 0 60px rgba(0,0,0,.25); }
}

/* ── Header (RN AppHeader) ── */
#app-header{
  position:relative; height:62px; flex:0 0 auto;
  background:url('../img/header_bg.png') center/cover no-repeat, var(--header);
  border-bottom:2px solid var(--forest);
  display:flex; align-items:center; gap:10px;
  padding:0 14px;
}
.hdr-btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:10; border:none; cursor:pointer;
  background:rgba(0,0,0,.18); color:#fff; font-weight:800; font-size:10px;
  border-radius:8px; padding:5px 9px; letter-spacing:.3px;
}
#hdr-left{ left:12px; } #hdr-right{ right:12px; }
/* When a back button is present, keep the brand clear of it */
#hdr-left ~ .brand-row{ margin-left:52px; }
.brand-row{ display:flex; align-items:center; gap:7px; flex:0 0 auto; }
.brand-logo{ width:34px; height:34px; object-fit:contain; }
.brand-name{ color:#2D3B1A; font-size:13px; font-weight:900; letter-spacing:.4px; line-height:1.1; }
.brand-tag{ display:none; }
.hdr-titles{ flex:1; min-width:0; padding:0; text-align:right; padding-right:34px; }
.hdr-title{
  color:#fff; font-size:15px; font-weight:900; letter-spacing:-.3px;
  text-shadow:0 1px 4px rgba(0,0,0,.25);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hdr-subtitle{ color:rgba(255,255,255,.82); font-size:9.5px; font-weight:700; margin-top:0; min-height:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Screen area ── */
#screen{ flex:1; overflow-y:auto; padding:16px; padding-bottom:86px; }

/* ── Bottom tabs (RN MainTabs) ── */
#tabbar{
  position:absolute; left:0; right:0; bottom:0; z-index:50;
  height:66px; display:flex; background:#FAF3E8;
  border-top:1px solid rgba(122,80,53,.14);
  padding:4px 0 10px;
}
.tab{
  flex:1; border:none; background:none; cursor:pointer; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--tab-inactive); font-size:11px; font-weight:800; letter-spacing:.3px;
  font-family:inherit;
}
.tab img{ width:22px; height:22px; object-fit:contain; opacity:.7; filter:grayscale(1) opacity(.55); }
.tab .tab-ind{
  position:absolute; top:0; width:28px; height:2px; border-radius:1px;
  background:transparent;
}
.tab.active{ color:var(--tab-c); }
.tab.active img{ opacity:1; filter:none; }
.tab.active .tab-ind{ background:var(--tab-c); }

/* ── Cards & shared components ── */
.card{
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:16px; margin-bottom:12px; box-shadow:0 1px 3px rgba(122,80,53,.08);
}
.btn{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  border:none; cursor:pointer; background:var(--btn); color:#fff;
  font-weight:800; font-size:15px; letter-spacing:.2px; font-family:inherit;
  border-radius:14px; padding:14px 18px; transition:transform .12s, opacity .12s;
}
.btn:active{ transform:scale(.98); }
.btn.secondary{ background:var(--accent); color:var(--forest); }
.btn.outline{ background:transparent; border:1.5px solid var(--forest); color:var(--forest); }
.btn:disabled{ opacity:.55; }
.input{
  width:100%; border:1.5px solid var(--border); border-radius:14px;
  background:#fff; padding:14px 16px; font-size:15px; color:var(--text);
  outline:none; font-family:inherit;
}
.input:focus{ border-color:var(--forest); }
.input::placeholder{ color:var(--placeholder); }
.chip{
  display:inline-flex; align-items:center; gap:5px;
  background:var(--accent); color:var(--forest); border-radius:999px;
  padding:5px 12px; font-size:12px; font-weight:700;
}
.muted{ color:var(--muted); font-size:13px; }
.h2{ font-size:17px; font-weight:900; color:var(--text); margin-bottom:10px; }

/* ── Placeholder screens (Phase 0) ── */
.placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:45vh; text-align:center; gap:10px;
}
.placeholder .ph-icon{
  width:74px; height:74px; border-radius:22px; background:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:32px;
}
.placeholder h3{ font-size:18px; font-weight:900; }

/* ── Splash ── */
#splash{
  position:absolute; inset:0; z-index:100; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  transition:opacity .4s;
}
#splash.hide{ opacity:0; pointer-events:none; }
#splash img{ width:96px; height:96px; object-fit:contain; }
.splash-name{ font-size:22px; font-weight:900; color:#2D3B1A; letter-spacing:1px; }
.spinner{
  width:26px; height:26px; border-radius:50%;
  border:3px solid var(--divider); border-top-color:var(--forest);
  animation:spin .9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ── Toasts ── */
#toasts{ position:absolute; top:14px; left:0; right:0; z-index:120; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; }
.toast{
  background:#2D3B1A; color:#fff; border-radius:12px; padding:10px 18px;
  font-size:13px; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.25);
  animation:toastIn .25s ease; max-width:86%;
}
.toast.error{ background:var(--red); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(-8px);} to{ opacity:1; transform:none; } }

/* ── Auth screens ── */
.auth-wrap{ padding-top:8px; }
.auth-wrap .field{ margin-bottom:12px; }
.auth-link{ color:var(--forest); font-weight:800; cursor:pointer; text-decoration:underline; }

/* ── Google sign-in button ── */
.btn-google{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  border:1.5px solid var(--border); background:#fff; color:var(--text); cursor:pointer;
  font-weight:800; font-size:15px; font-family:inherit;
  border-radius:14px; padding:13px 18px; transition:transform .12s, background .12s;
}
.btn-google:active{ transform:scale(.98); }
.btn-google:disabled{ opacity:.55; }
.btn-google .gicon{ width:20px; height:20px; }
.auth-divider{
  display:flex; align-items:center; gap:10px; margin:14px 0;
  color:var(--muted); font-size:12px; font-weight:700;
}
.auth-divider::before,.auth-divider::after{ content:''; flex:1; height:1px; background:var(--divider); }

/* ── Home: header bell ── */
.hdr-bell{
  position:absolute; top:50%; transform:translateY(-50%); right:10px; z-index:10;
  background:none; border:none; cursor:pointer; padding:4px;
}
.hdr-bell svg{ width:22px; height:22px; }
.bell-dot{
  position:absolute; top:2px; right:3px; width:8px; height:8px; border-radius:4px;
  background:#F59E0B; border:1.5px solid rgba(255,255,255,.88);
}

/* ── Home: section heads ── */
.home-section{ padding:0 2px; }
.home-sec-head{ display:flex; align-items:center; gap:7px; margin:4px 0 8px; }
.sec-icon{ width:22px; height:22px; border-radius:11px; background:rgba(122,80,53,.12); display:flex; align-items:center; justify-content:center; }
.sec-icon img{ width:12px; height:12px; object-fit:contain; }
.sec-title{ color:#5C3D25; font-size:15px; font-weight:900; }

/* ── Home: quick therapist cards ── */
.quick-scroll{ display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.quick-scroll::-webkit-scrollbar{ display:none; }
.quick-card{
  position:relative; flex:0 0 110px; width:110px; height:150px; border-radius:14px;
  border:1px solid rgba(122,80,53,.18); background-color:#D4C4A8;
  background-size:cover; background-position:center; overflow:hidden;
  box-shadow:0 10px 20px rgba(15,23,42,.18);
}
.qc-shade{ position:absolute; inset:0; background:rgba(8,12,20,.26); }
.qc-initial{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#2F3540; font-weight:900; font-size:18px; }
.qc-badge{
  position:absolute; top:8px; left:8px; z-index:2; color:#fff; font-size:9px; font-weight:900;
  padding:2px 8px; border-radius:14px; border:1px solid rgba(255,255,255,.6);
}
.qc-bottom{ position:absolute; left:8px; right:6px; bottom:6px; z-index:3; }
.qc-profile{
  display:inline-block; background:rgba(250,243,232,.96); color:#4D6535; border:none; cursor:pointer;
  font-size:10px; font-weight:900; border-radius:12px; padding:6px 10px; margin-bottom:5px; font-family:inherit;
  box-shadow:0 3px 8px rgba(77,101,53,.18);
}
.qc-name{ color:#fff; font-size:12px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.quick-skeleton{
  flex:0 0 110px; height:150px; border-radius:14px;
  background:linear-gradient(100deg, #E8DFC8 40%, #F2E8D5 50%, #E8DFC8 60%);
  background-size:200% 100%; animation:skel 1.2s infinite;
}
@keyframes skel{ from{ background-position:120% 0; } to{ background-position:-20% 0; } }

/* ── Home: therapy option cards ── */
.opt-card{
  display:block; text-decoration:none; border-radius:16px; overflow:hidden;
  border:1px solid rgba(122,80,53,.16); background:#FAF3E8;
  box-shadow:0 6px 16px rgba(15,23,42,.10); transition:transform .12s;
}
.opt-card:active{ transform:scale(.99); }
.opt-strip{ height:3px; }
.opt-body{ padding:12px; }
.opt-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.opt-emoji{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:19px; flex:0 0 auto; }
.opt-titles{ flex:1; min-width:0; }
.opt-title{ color:#5C3D25; font-size:13px; font-weight:900; }
.opt-sub{ color:#8A7060; font-size:10px; font-weight:700; margin-top:1px; }
.opt-chip{ font-size:9px; font-weight:900; padding:3px 8px; border-radius:20px; white-space:nowrap; }
.opt-tags{ display:flex; flex-wrap:wrap; gap:4px; margin-bottom:10px; }
.opt-tag{ background:rgba(138,158,106,.14); font-size:9px; font-weight:700; padding:3px 8px; border-radius:20px; }
.opt-div{ height:1px; margin-bottom:10px; }
.opt-foot{ display:flex; align-items:center; justify-content:space-between; }
.opt-price{ color:#7A5035; font-size:11px; font-weight:900; }
.opt-btn{ color:#fff; font-size:10px; font-weight:900; border-radius:20px; padding:6px 14px; }

/* ── Home: promo + WhatsApp fab ── */
.promo-card{ height:200px; border-radius:14px; overflow:hidden; border:1px solid rgba(122,80,53,.14); background:#FAF3E8; }
.promo-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.wa-fab{ position:absolute; bottom:82px; right:14px; z-index:60; }
.wa-fab img{ width:40px; height:40px; }

/* ── In Clinic: home card ── */
.cl-link{ text-decoration:none; }
.cl-photo{ position:relative; display:block; height:132px; overflow:hidden; background:#E3EEF0; }
.cl-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.cl-photo::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.45)); }
.cl-photo-tag{
  position:absolute; left:10px; bottom:9px; z-index:2; display:inline-flex; align-items:center; gap:4px;
  color:#fff; font-size:10px; font-weight:900; padding:3px 9px; border-radius:20px;
  background:rgba(20,40,45,.45); border:1px solid rgba(255,255,255,.45);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.cl-photo-tag svg{ width:11px; height:11px; }
.cl-address{ display:flex; align-items:flex-start; gap:6px; color:#6B5A4C; font-size:10.5px; font-weight:700; line-height:15px; margin-bottom:10px; }
.cl-address svg{ width:13px; height:13px; flex:0 0 auto; margin-top:1px; color:#2F8FA4; }
.cl-actions{ display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:6px; margin-bottom:10px; }
.cl-act{
  display:inline-flex; align-items:center; justify-content:center; gap:5px; height:34px; padding:0 6px;
  border-radius:10px; border:1px solid rgba(47,143,164,.35); background:#fff; color:#2F6F7E;
  font-family:inherit; font-size:11px; font-weight:900; text-decoration:none; cursor:pointer; white-space:nowrap;
}
.cl-act svg{ width:14px; height:14px; flex:0 0 auto; }
.cl-act:active{ transform:scale(.97); }
.cl-act.cl-wa{ background:#2AA81B; border-color:#2AA81B; color:#fff; } /* same green as the floating WhatsApp button */
.cl-act.cl-reserve{ background:#E07A84; border-color:#E07A84; color:#fff; } /* pink of the Flexible card on Home */
@media (max-width:360px){ .cl-act{ font-size:10px; gap:3px; } .cl-act svg{ width:12px; height:12px; } }

/* ── In Clinic: /clinic page ── */
.cl-gallery{ scroll-snap-type:x mandatory; margin-bottom:12px; }
.cl-shot{
  flex:0 0 86%; height:190px; margin:0; border-radius:14px; overflow:hidden; scroll-snap-align:start;
  border:1px solid rgba(122,80,53,.14); background:#E3EEF0; box-shadow:0 6px 14px rgba(15,23,42,.10);
}
.cl-shot img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.cl-info{ background:#FAF3E8; border:1px solid rgba(122,80,53,.16); border-radius:16px; padding:12px 12px 2px; margin-bottom:16px; box-shadow:0 6px 16px rgba(15,23,42,.08); }
.cl-info-row{ display:flex; gap:10px; margin-bottom:10px; }
.cl-ico{ width:32px; height:32px; border-radius:10px; background:rgba(47,143,164,.12); color:#2F8FA4; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.cl-ico svg{ width:16px; height:16px; }
.cl-info-row b{ display:block; color:#5C3D25; font-size:12px; font-weight:900; }
.cl-info-row > div > span{ display:block; color:#6B5A4C; font-size:11.5px; font-weight:700; line-height:16px; margin-top:2px; }
.cl-info-row a{ display:inline-block; margin-top:4px; color:#2F8FA4; font-size:11px; font-weight:900; text-decoration:none; }
.cl-plans{ display:flex; flex-wrap:wrap; gap:5px; padding:0 12px 10px; }
.cl-plan{ padding:4px 9px; border-radius:20px; background:rgba(47,143,164,.08); border:1px solid rgba(47,143,164,.22); color:#2F6F7E; font-size:9.5px; font-weight:700; }
.cl-plan b{ font-weight:900; }
.cl-tcc.open .tcc-about{ display:block; -webkit-line-clamp:unset; overflow:visible; }
.tcc-view.cl-profile{ display:inline-flex; align-items:center; background:#E07A84; color:#fff; text-decoration:none; } /* pink of the Flexible card on Home */

/* ── In Clinic: therapist profile (/clinic/therapist/{id}) ── */
.cp-card{ background:#FAFDF7; border:1px solid rgba(77,101,53,.14); border-radius:16px; padding:14px; margin-bottom:12px; box-shadow:0 2px 6px rgba(77,101,53,.07); }
.cp-head{ display:flex; gap:14px; align-items:flex-start; }
.cp-photo{ width:96px; height:110px; border-radius:14px; flex:0 0 auto; background:#D9E8CE center/cover no-repeat; border:2px solid rgba(77,101,53,.18); }
.cp-photo-fb{ display:flex; align-items:center; justify-content:center; color:#4D6535; font-size:30px; font-weight:900; }
.cp-headinfo{ flex:1; min-width:0; }
.cp-name{ color:#1A2D0E; font-size:18px; font-weight:900; line-height:22px; }
.cp-degree{ color:#5A7A42; font-size:11.5px; font-weight:800; margin-top:3px; }
.cp-badge{ display:inline-flex; align-items:center; gap:4px; margin-top:8px; padding:3px 9px; border-radius:20px; background:rgba(47,143,164,.10); color:#2F6F7E; font-size:10.5px; font-weight:800; }
.cp-badge svg{ width:11px; height:11px; flex:0 0 auto; }
.cp-price{ color:#3D5C28; font-size:13px; font-weight:900; margin-top:8px; }
.cp-tags{ margin-top:12px; }
.cp-section{ background:#FAF3E8; border:1px solid rgba(122,80,53,.14); border-radius:14px; padding:12px 14px; margin-bottom:12px; }
.cp-title{ color:#5C3D25; font-size:13px; font-weight:900; margin-bottom:8px; }
.cp-about{ color:#4B5563; font-size:12.5px; line-height:19px; margin:0; white-space:pre-line; }
.cp-list{ margin:0; padding-left:18px; color:#4B5563; font-size:12.5px; line-height:19px; }
.cp-plans{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.cp-plan{ background:#fff; border:1px solid rgba(47,143,164,.22); border-radius:12px; padding:10px; }
.cp-plan-name{ color:#1A2D0E; font-size:12px; font-weight:900; line-height:16px; }
.cp-plan-meta{ color:#6B7B5E; font-size:10.5px; font-weight:700; margin-top:2px; }
.cp-plan-price{ color:#2F6F7E; font-size:13px; font-weight:900; margin-top:6px; }
.cp-section .cl-actions{ margin:10px 0 0; }
.cl-empty{ text-align:center; color:var(--muted); font-size:12.5px; font-weight:700; line-height:18px; padding:22px 14px; background:#FAF3E8; border:1px dashed rgba(122,80,53,.25); border-radius:14px; }
.cl-retry{ margin-top:8px; display:inline-block; border:none; background:#2F8FA4; color:#fff; font-family:inherit; font-size:12px; font-weight:900; border-radius:8px; padding:6px 12px; cursor:pointer; }

/* ── Home: alerts modal ── */
.alerts-overlay{
  position:absolute; inset:0; z-index:130; background:rgba(0,0,0,.55);
  display:flex; flex-direction:column; justify-content:flex-end;
}
.alerts-overlay[hidden]{ display:none; }
.alerts-sheet{
  background:#fff; border-radius:20px 20px 0 0;
  display:flex; flex-direction:column;
}
.alerts-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 16px 12px; border-bottom:1px solid rgba(0,0,0,.07); flex:0 0 auto;
}
.alerts-title{ font-size:15px; font-weight:900; color:#1E293B; }
.alerts-close{
  width:30px; height:30px; border-radius:15px; border:none;
  background:rgba(0,0,0,.07); color:#64748B; font-size:18px; font-weight:400; cursor:pointer;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.alerts-body{ padding:12px 12px 24px; display:flex; flex-direction:column; gap:10px; }
/* instant call card */
.ic-card{ border-radius:16px; background:rgba(242,232,213,.96); border:1.5px solid rgba(77,101,53,.22); overflow:hidden; }
.ic-head{ display:flex; align-items:center; gap:8px; padding:12px 13px 9px; }
.ic-dot{ width:9px; height:9px; border-radius:5px; background:#4D6535; flex:0 0 auto; }
.ic-titles{ flex:1; display:flex; flex-direction:column; }
.ic-titles b{ color:#4D6535; font-size:10px; font-weight:900; letter-spacing:1.1px; }
.ic-titles i{ color:#7A8C6A; font-size:9px; font-weight:700; font-style:normal; margin-top:1px; }
.ic-live{ background:rgba(77,101,53,.12); color:#4D6535; font-size:9px; font-weight:900; padding:3px 8px; border-radius:20px; border:1px solid rgba(77,101,53,.3); }
.ic-avatars{ display:flex; gap:11px; overflow-x:auto; padding:12px 13px; border-top:1px solid rgba(77,101,53,.14); scrollbar-width:none; }
.ic-avatars::-webkit-scrollbar{ display:none; }
.ic-person{ display:flex; flex-direction:column; align-items:center; width:65px; flex:0 0 auto; }
.ic-avatar{
  width:54px; height:54px; border-radius:27px; border:2.5px solid; background-color:#E8DFC8;
  background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center;
}
.ic-avatar b{ color:#4D6535; font-size:18px; font-weight:900; }
.ic-name{ color:#2D3B1A; font-size:10px; font-weight:800; margin-top:5px; max-width:64px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ic-ready{ margin-top:3px; background:rgba(77,101,53,.14); color:#4D6535; font-size:7px; font-weight:900; letter-spacing:.5px; padding:2px 6px; border-radius:20px; border:1px solid rgba(77,101,53,.32); }
.ic-foot{ display:flex; align-items:center; gap:8px; padding:10px 13px; border-top:1px solid rgba(77,101,53,.14); }
.ic-cta-text{ flex:1; display:flex; flex-direction:column; }
.ic-cta-text b{ color:#1E293B; font-size:13px; font-weight:900; }
.ic-cta-text i{ color:#64748B; font-size:10px; font-weight:700; font-style:normal; margin-top:2px; }
.ic-call{ background:#4D6535; color:#F2E8D5; border:none; cursor:pointer; font-size:12px; font-weight:900; border-radius:22px; padding:8px 16px; font-family:inherit; }
/* banner rows */
.bn-row{
  display:flex; align-items:center; border-radius:12px; background:#FAF3E8;
  border:1px solid rgba(122,80,53,.15); overflow:hidden;
}
.bn-strip{ width:4px; align-self:stretch; flex:0 0 auto; }
.bn-emoji{ width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:16px; margin:11px 10px 11px 12px; flex:0 0 auto; }
.bn-titles{ flex:1; min-width:0; display:flex; flex-direction:column; margin-right:8px; }
.bn-titles b{ color:#1E293B; font-size:13px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bn-titles i{ color:#64748B; font-size:11px; font-weight:600; font-style:normal; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bn-btn{ color:#fff; font-size:10px; font-weight:900; padding:6px 9px; border-radius:7px; text-decoration:none; margin-right:12px; }

/* ── Therapist compact card (mirrors TherapistCompactCard) ── */
.tcc{ background:#FAFDF7; border-radius:14px; border:1px solid rgba(77,101,53,.14); margin-bottom:10px; overflow:hidden; box-shadow:0 2px 6px rgba(77,101,53,.07); cursor:pointer; }
.tcc-online{ border-color:rgba(77,101,53,.40); }
.tcc-top{ display:flex; padding:12px 12px 10px; }
.tcc-imgcol{ margin-right:12px; flex:0 0 auto; display:flex; flex-direction:column; align-items:center; }
.tcc-img{ display:block; width:82px; height:82px; border-radius:10px; border:2px solid rgba(77,101,53,.18); background-color:#D9E8CE; background-size:cover; background-position:center; }
.tcc-img-fallback{ display:flex; align-items:center; justify-content:center; background:#C8DDB8; color:#4D6535; font-size:26px; font-weight:900; }
.tcc-online-badge{ margin-top:5px; display:inline-flex; align-items:center; gap:3px; padding:2px 6px; border-radius:20px; background:rgba(34,197,94,.14); border:1px solid rgba(34,197,94,.35); color:#16A34A; font-size:8px; font-weight:900; }
.tcc-online-badge .dot, .tcc-instant .dot{ width:5px; height:5px; border-radius:3px; background:#22C55E; display:inline-block; }
.tcc-info{ flex:1; min-width:0; }
.tcc-name{ color:#1A2D0E; font-size:15px; font-weight:900; line-height:19px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tcc-degrees{ color:#5A7A42; font-size:10px; font-weight:800; margin-top:3px; line-height:14px; }
.tcc-about{ color:#6B7B5E; font-size:10.5px; font-weight:500; margin-top:5px; line-height:15px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tcc-tags{ display:flex; flex-wrap:wrap; margin-top:6px; gap:4px; }
.tcc-tag{ padding:3px 8px; border-radius:20px; background:rgba(77,101,53,.12); border:1px solid rgba(77,101,53,.25); color:#3D5C28; font-size:9px; font-weight:800; }
.tcc-div{ height:1px; background:rgba(77,101,53,.08); margin:0 12px; }
.tcc-bottom{ display:flex; align-items:center; padding:9px 12px; }
.tcc-meta{ flex:1; min-width:0; }
.tcc-price{ color:#3D5C28; font-size:11px; font-weight:800; }
.tcc-sched{ color:#7A8F6A; font-size:10px; font-weight:700; margin-top:3px; }
.tcc-view{ margin-left:10px; padding:7px 14px; border-radius:8px; background:#4D6535; color:#fff; border:none; cursor:pointer; font-size:12px; font-weight:900; font-family:inherit; flex:0 0 auto; }
.tcc-instant{ width:100%; display:flex; align-items:center; gap:8px; padding:9px 14px; background:#4D6535; color:#fff; border:none; cursor:pointer; font-size:11px; font-weight:900; font-family:inherit; text-align:left; }
.tcc-instant .dot{ width:7px; height:7px; border-radius:4px; box-shadow:0 0 6px #22C55E; }
.tcc-instant .arr{ margin-left:auto; color:#C8DC96; font-size:16px; }

/* ── Bottom sheet (mirrors TherapistDetailSheet) ── */
.sheet-overlay{ position:absolute; inset:0; z-index:140; background:rgba(0,0,0,.62); display:flex; flex-direction:column; justify-content:flex-end; }
.sheet{ background:#F5F5F5; border-radius:22px 22px 0 0; max-height:92%; display:flex; flex-direction:column; padding-bottom:18px; animation:sheetUp .28s ease; position:relative; }
@keyframes sheetUp{ from{ transform:translateY(40%);} to{ transform:none; } }
.sheet-handle{ width:38px; height:4px; border-radius:2px; background:rgba(0,0,0,.15); margin:10px auto 2px; flex:0 0 auto; }
.sheet-close{ position:absolute; top:12px; right:16px; width:30px; height:30px; border-radius:15px; border:none; background:rgba(0,0,0,.08); color:#374151; font-size:14px; font-weight:900; cursor:pointer; z-index:2; }
.sheet-body{ overflow-y:auto; padding:8px 12px 16px; }
.sheet-loading{ padding:30px; text-align:center; color:#64748B; font-weight:700; }

/* ── Therapist detail card (mirrors TherapistCard tile) ── */
.tdc{ background:#F8FAFD; border:1px solid rgba(162,173,189,.35); border-radius:10px; padding:12px; }
.tdc-head{ display:flex; gap:12px; }
.tdc-photo{ width:96px; height:110px; border-radius:10px; border:1px solid rgba(162,173,189,.35); background-color:#E8EEF7; background-size:cover; background-position:center; flex:0 0 auto; }
.tdc-photo-fallback{ display:flex; align-items:center; justify-content:center; color:#2F3540; font-weight:900; font-size:22px; }
.tdc-headinfo{ flex:1; min-width:0; }
.tdc-name{ color:#1E293B; font-size:16px; font-weight:900; }
.tdc-verified{ display:inline-flex; width:15px; height:15px; border-radius:99px; background:#1EA35A; color:#fff; font-size:9px; font-weight:900; align-items:center; justify-content:center; vertical-align:2px; }
.tdc-degree{ color:#6B7280; font-size:12px; font-weight:700; margin-top:2px; }
.tdc-online{ display:inline-flex; align-items:center; gap:4px; margin-top:5px; padding:2px 8px; border-radius:20px; background:rgba(34,197,94,.14); border:1px solid rgba(34,197,94,.35); color:#16A34A; font-size:9px; font-weight:900; }
.tdc-online .dot{ width:5px; height:5px; border-radius:3px; background:#22C55E; }
.tdc-avail{ color:#475569; font-size:11px; font-weight:700; margin-top:6px; }
.tdc-tags{ display:flex; flex-wrap:wrap; gap:4px; margin-top:10px; }
.tdc-about{ color:#475569; font-size:12px; line-height:17px; margin-top:10px; }
.tdc-status{ margin-top:12px; border-radius:10px; padding:9px 12px; display:flex; flex-direction:column; background:rgba(33,153,103,.12); border:1px solid rgba(33,153,103,.35); }
.tdc-status b{ color:#0A6A45; font-size:12px; font-weight:900; }
.tdc-status i{ color:#1D6A4F; font-size:10.5px; font-weight:700; font-style:normal; margin-top:2px; }
.tdc-status.warn{ background:rgba(255,168,99,.16); border-color:rgba(209,120,50,.38); }
.tdc-status.warn b{ color:#9C4E17; } .tdc-status.warn i{ color:#7A4A26; }
.tdc-status.off{ background:rgba(215,215,215,.24); border-color:rgba(140,140,140,.35); }
.tdc-status.off b, .tdc-status.off i{ color:#4B5565; }
.tdc-sec{ color:#334155; font-size:13px; font-weight:900; margin:14px 0 8px; }
.tdc-plans{ display:flex; flex-wrap:wrap; gap:8px; }
.tdc-plan{ width:calc(50% - 4px); text-align:left; padding:9px 10px; border-radius:6px; background:rgba(255,244,225,.7); border:1px solid rgba(217,119,6,.35); cursor:pointer; font-family:inherit; display:flex; flex-direction:column; gap:4px; }
.tdc-plan.sel{ background:rgba(31,87,216,.16); border-color:rgba(31,87,216,.6); }
.tdc-pname{ color:#1E293B; font-size:12px; font-weight:900; display:flex; align-items:center; gap:5px; }
.tdc-pname .pop{ background:rgba(31,87,216,.12); color:#1F57D8; font-size:8px; font-weight:900; padding:2px 6px; border-radius:999px; font-style:normal; }
.tdc-pprice{ color:#556f44; font-size:11px; font-weight:900; }
.tdc-pb{ display:inline-block; padding:2px 7px; border-radius:999px; font-size:9.5px; font-weight:900; margin-right:4px; }
.tdc-pb.green{ background:rgba(132,204,22,.18); border:1px solid rgba(132,204,22,.40); color:#3F6212; }
.tdc-pb.amber{ background:rgba(217,119,6,.13); border:1px solid rgba(217,119,6,.35); color:#9A3412; }
.tdc-pdesc{ color:#64748B; font-size:10px; font-weight:800; }
.tdc-day{ color:#475569; font-size:11px; font-weight:900; margin:8px 0 5px; }
.tdc-slots{ display:flex; flex-wrap:wrap; gap:6px; }
.tdc-slot{ padding:7px 12px; border-radius:8px; border:1px solid rgba(47,143,164,.35); background:rgba(235,245,255,.9); color:#155E75; font-size:11px; font-weight:800; cursor:pointer; font-family:inherit; }
.tdc-slot.sel{ background:#2F8FA4; color:#fff; border-color:#2F8FA4; }
.tdc-primary{ margin-top:14px; }
.tdc-request{ margin-top:8px; }

/* ── Chats tab (mirrors ChatsScreen rows) ── */
.ch-sec{ display:flex; align-items:center; gap:7px; color:var(--text); font-size:14px; font-weight:900; margin:6px 0 10px; }
.ch-row{ display:flex; align-items:center; gap:10px; background:#FAF3E8; border:1px solid rgba(122,80,53,.22); border-radius:10px; padding:10px; margin-bottom:8px; text-decoration:none; color:inherit; box-shadow:0 2px 8px rgba(15,23,42,.06); }
.ch-row.trial{ background:#FFFBEB; border-color:rgba(245,158,11,.35); }
.ch-row.expired{ border-color:rgba(220,38,38,.25); }
.ch-av{ width:52px; height:52px; border-radius:9px; flex:0 0 auto; background-color:rgba(122,80,53,.12); background-size:cover; background-position:center; border:1px solid rgba(122,80,53,.25); display:flex; align-items:center; justify-content:center; }
.ch-av.big{ width:64px; height:64px; border-radius:14px; font-size:24px; }
.ch-av-fb{ color:var(--primary); font-weight:900; font-size:20px; }
.ch-mid{ flex:1; min-width:0; display:flex; flex-direction:column; }
.ch-mid b{ color:var(--text); font-weight:900; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-mid i{ color:var(--muted); font-weight:700; font-size:11px; font-style:normal; margin-top:2px; }
.ch-chips{ display:flex; gap:5px; margin-top:4px; flex-wrap:wrap; }
.ch-chips em{ font-style:normal; font-size:10px; font-weight:800; padding:2px 7px; border-radius:99px; }
.ch-chips em.green{ color:#15803D; background:rgba(22,163,74,.11); border:1px solid rgba(22,163,74,.30); }
.ch-chips em.red{ color:#DC2626; background:rgba(239,68,68,.10); border:1px solid rgba(239,68,68,.30); }
.ch-chips em.amber{ color:#B45309; background:rgba(245,158,11,.14); }
.ch-btn{ flex:0 0 auto; padding:7px 12px; border-radius:7px; font-size:12px; font-weight:900; }
.ch-btn.renew{ background:rgba(122,80,53,.10); border:1px solid rgba(122,80,53,.25); color:var(--primary); font-size:11px; }
.ch-browse{ display:block; text-align:center; margin-top:8px; padding:13px; border-radius:10px; background:rgba(122,80,53,.10); border:1px solid rgba(122,80,53,.25); color:var(--primary); font-weight:900; font-size:13px; text-decoration:none; }

/* ── Live chat (mirrors the app's LiveChatScreen) ── */
#chat-topbar ~ #screen{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
#chat-topbar{
  flex:0 0 auto; background:var(--header); display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-bottom:1px solid rgba(0,0,0,.18);
  box-shadow:0 3px 6px rgba(0,0,0,.18); z-index:5;
}
.ct-back{ color:#fff; font-size:26px; font-weight:900; text-decoration:none; line-height:1; }
.ct-avwrap{ position:relative; flex:0 0 auto; }
.ct-av{
  display:block; width:42px; height:42px; border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.25) center/cover no-repeat;
  border:2.5px solid #FFC25C; box-sizing:border-box;
  text-align:center; line-height:37px; color:#fff; font-weight:900; font-size:13px;
}
.ct-avdot{
  position:absolute; bottom:0; right:0; width:11px; height:11px; border-radius:999px;
  background:#F59E0B; border:2px solid var(--header);
}
.ct-info{ flex:1; min-width:0; display:flex; flex-direction:column; }
.ct-info b{ color:#fff; font-weight:900; font-size:14px; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ct-status{ display:flex; align-items:center; margin-top:1px; }
.ct-status .dot{ display:none; }
.ct-status i{ color:#FCD34D; font-weight:700; font-size:10.5px; font-style:normal; }
.ct-refresh{
  width:38px; height:38px; border-radius:999px; flex:0 0 auto; cursor:pointer;
  border:1.5px solid rgba(255,255,255,.45); background:rgba(255,255,255,.14);
  color:#fff; font-size:18px; font-weight:900;
}
.ct-refresh.spin{ animation:spin .8s linear infinite; }

.lc-wrap{ flex:1; min-height:0; display:flex; flex-direction:column; background:var(--bg); }
.lc-trial{ background:#FFFBEB; color:#B45309; font-size:11.5px; font-weight:700; padding:7px 14px; border-bottom:1px solid rgba(245,158,11,.25); }
.lc-messages{ flex:1; overflow-y:auto; padding:10px 0; display:flex; flex-direction:column; }
.lc-row{ display:flex; padding:3px 18px; }
.lc-row.out{ justify-content:flex-end; }
.lc-row.in{ justify-content:flex-start; }
.lc-bubble{
  max-width:83%; min-width:68px; padding:9px 11px; border-radius:16px; position:relative;
  border:1px solid rgba(193,149,93,.20); background:#FFF8EE;
  box-shadow:0 1px 2px rgba(0,0,0,.07);
}
.lc-bubble.voice{ min-width:242px; }
.lc-row.in .lc-bubble{ border-top-left-radius:4px; }
.lc-row.out .lc-bubble{ background:#D4F5B5; border-color:rgba(77,101,53,.22); border-top-right-radius:4px; }
.lc-text{ color:var(--text); font-weight:700; font-size:14px; line-height:21px; white-space:pre-wrap; word-break:break-word; }
.lc-time{ display:block; text-align:right; font-size:10px; font-weight:700; color:rgba(122,80,53,.55); margin-top:4px; }
.lc-row.out .lc-time{ color:rgba(77,101,53,.65); }
.lc-empty{ text-align:center; color:var(--muted); font-weight:700; font-size:13px; padding:30px 20px; }

/* Voice note player (custom — matches the app) */
.vn{ display:flex; align-items:center; gap:9px; width:220px; min-height:50px; cursor:pointer; }
.vn-play{
  width:40px; height:40px; border-radius:20px; flex:0 0 auto; background:#2F8FA4;
  color:#fff; font-weight:900; font-size:15px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 5px rgba(47,143,164,.35);
}
.lc-row.out .vn-play{ background:var(--primary); box-shadow:0 2px 5px rgba(85,111,68,.35); }
.vn-right{ display:flex; flex-direction:column; width:158px; }
.vn-wave{ display:flex; align-items:flex-end; gap:3px; }
.vn-wave i{ width:5px; border-radius:3px; background:rgba(47,143,164,.50); display:block; }
.lc-row.out .vn-wave i{ background:rgba(77,101,53,.55); }
.vn.playing .vn-wave i{ animation:vnpulse 1s ease-in-out infinite; }
.vn.playing .vn-wave i:nth-child(2n){ animation-delay:.15s; }
.vn.playing .vn-wave i:nth-child(3n){ animation-delay:.3s; }
@keyframes vnpulse{ 50%{ transform:scaleY(.55); } }
.vn-dur{ margin-left:5px; color:var(--muted); font-weight:700; font-size:10px; font-style:normal; }
.vn-hint{ color:var(--muted); font-weight:700; font-size:10px; margin-top:5px; }

/* Trial plan prompt (matches the app's card) */
.lc-planprompt{ padding:0 18px 10px; flex:0 0 auto; max-height:46%; overflow-y:auto; }
.pp-box{ background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:12px; box-shadow:0 2px 10px rgba(15,23,42,.06); }
.pp-title{ display:block; color:var(--text); font-weight:900; font-size:14px; }
.pp-body{ display:block; color:var(--muted); font-weight:700; font-size:12.5px; line-height:18px; margin-top:6px; }
.pp-choose{ display:block; color:var(--text); font-weight:900; font-size:13px; margin-top:12px; }
.pp-grid{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.pp-card{ width:calc(50% - 5px); background:rgba(255,244,225,.92); border:1px solid rgba(85,111,68,.18); border-radius:12px; padding:10px; cursor:pointer; display:flex; flex-direction:column; }
.pp-card.sel{ background:rgba(65,158,255,.14); border-color:rgba(65,158,255,.5); }
.pp-card b{ color:var(--text); font-weight:900; font-size:13px; }
.pp-price{ color:var(--primary); font-weight:900; font-size:13px; margin-top:4px; }
.pp-days{ color:var(--muted); font-weight:800; font-size:10.5px; margin-top:4px; }
.pp-more{ align-self:flex-start; margin-top:6px; border:none; background:none; padding:0; cursor:pointer; color:var(--aqua); font-size:10.5px; font-weight:800; font-family:inherit; }
.pp-detail{ color:var(--muted); font-size:10.5px; font-weight:700; margin-top:6px; line-height:15px; }
.pp-pay{ margin-top:4px; }

/* Composer (matches the app's pill) */
.lc-composer-wrap{ padding:8px 14px calc(12px + env(safe-area-inset-bottom)); flex:0 0 auto; background:var(--bg); border-top:1px solid rgba(122,80,53,.10); }
.lc-offline{ background:rgba(255,93,93,.12); border:1px solid rgba(255,93,93,.30); border-radius:12px; padding:10px; margin-bottom:10px; display:flex; flex-direction:column; }
.lc-offline b{ color:var(--text); font-weight:900; font-size:13px; }
.lc-offline span{ color:var(--muted); font-weight:700; font-size:12px; margin-top:4px; }
.lc-composer{ display:flex; align-items:center; gap:8px; background:#fff; border:1px solid rgba(85,111,68,.16); border-radius:24px; padding:6px 6px 6px 12px; box-shadow:0 2px 10px rgba(15,23,42,.06); }
.lc-input{ flex:1; min-width:0; border:none; outline:none; background:none; resize:none; font-family:inherit; font-size:14px; font-weight:700; line-height:20px; color:var(--text); padding:9px 4px; height:38px; max-height:110px; }
.lc-input:disabled{ color:var(--muted); }
.lc-input::placeholder{ color:var(--placeholder); font-weight:700; }
.lc-action{ width:42px; height:42px; border-radius:21px; flex:0 0 auto; border:none; cursor:pointer; background:rgba(77,101,53,.12); color:var(--forest); display:flex; align-items:center; justify-content:center; }
.lc-action.send{ background:var(--forest); color:#F2E8D5; font-size:16px; }
.lc-action:disabled{ opacity:.45; }
.lc-recbar{ flex:1; min-width:0; display:flex; align-items:center; gap:10px; border:1.5px solid rgba(220,38,38,.35); border-radius:18px; padding:7px 10px 7px 14px; font-weight:800; color:#DC2626; }
.lc-rec-dot{ width:9px; height:9px; border-radius:5px; background:#DC2626; animation:recblink 1s infinite; }
@keyframes recblink{ 50%{ opacity:.25; } }
.lc-rec-cancel{ margin-left:auto; border:none; background:rgba(0,0,0,.06); color:#374151; font-weight:800; font-size:12px; border-radius:14px; padding:7px 12px; cursor:pointer; font-family:inherit; }
.lc-rec-send{ border:none; background:var(--forest); color:#fff; font-weight:900; font-size:12px; border-radius:14px; padding:7px 14px; cursor:pointer; font-family:inherit; }

/* ── Sessions tab ── */
.sec-count{ display:inline-flex; align-items:center; justify-content:center; margin-left:6px; padding:1px 8px; border-radius:99px; background:rgba(122,80,53,.12); color:var(--primary); font-size:11px; font-weight:800; }
.sess-card{ background:#fff; border:1px solid rgba(122,80,53,.22); border-radius:10px; padding:12px; margin-bottom:8px; box-shadow:0 2px 8px rgba(15,23,42,.06); }
.sess-card.ongoing{ background:#FFF5F5; border-color:rgba(220,38,38,.35); }
.sess-top{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.sess-join{ padding:11px; font-size:14px; border-radius:8px; }
.sess-wait{ background:var(--bg); border:1px solid rgba(122,80,53,.22); border-radius:8px; padding:10px; text-align:center; color:var(--muted); font-weight:700; font-size:12px; }
.sess-live{ flex:0 0 auto; font-size:9px; font-weight:800; display:flex; flex-direction:column; align-items:center; gap:3px; }
.sess-live::before{ content:''; width:8px; height:8px; border-radius:4px; }
.sess-live.ok{ color:#16A34A; } .sess-live.ok::before{ background:#16A34A; }
.sess-live.wait{ color:#B45309; } .sess-live.wait::before{ background:#F59E0B; }
.ch-chips em.blue{ color:#1D4ED8; background:rgba(37,99,235,.12); }
.ch-chips em.brown{ color:var(--primary); background:rgba(122,80,53,.10); }

/* ── Payment page ── */
.pay-price-row{ margin:4px 0 12px; }
.pay-old{ color:var(--muted); text-decoration:line-through; font-weight:700; margin-right:8px; }
.pay-new{ color:var(--primary); font-weight:900; font-size:20px; }
.pay-promo{ border-top:1px solid var(--divider); padding-top:12px; margin-top:4px; }
.pay-promo-row{ display:flex; gap:8px; }
.pay-promo-err{ color:var(--red); font-weight:700; font-size:12px; margin-top:6px; }
.pay-promo-applied{ display:flex; align-items:center; gap:10px; background:rgba(62,90,52,.08); border:1px solid rgba(62,90,52,.25); border-radius:12px; padding:12px; font-size:12px; color:#3D5C28; }
.pay-promo-applied button{ border:none; background:none; color:var(--red); font-weight:900; cursor:pointer; font-family:inherit; font-size:12px; }
.pay-wait{ position:absolute; inset:0; z-index:150; background:rgba(20,25,15,.55); display:flex; align-items:center; justify-content:center; padding:24px; }
.pay-wait[hidden]{ display:none; }
.pay-wait-card{ background:#fff; border-radius:18px; padding:24px; max-width:320px; text-align:center; display:flex; flex-direction:column; gap:10px; }
.pay-wait-card b{ font-size:15px; }
.pay-wait-card span{ color:var(--muted); font-size:12.5px; line-height:18px; }

/* ── Pre-call ── */
.pc-status{ margin-top:12px; padding:11px 12px; border-radius:10px; background:var(--bg); border:1px solid var(--border); display:flex; align-items:center; gap:8px; color:var(--muted); font-weight:700; font-size:12.5px; }
.pc-status .dot{ width:8px; height:8px; border-radius:4px; background:var(--muted); flex:0 0 auto; }
.pc-status.ok{ background:var(--accent); border-color:var(--btn); color:var(--primary); }
.pc-status.ok .dot{ background:var(--primary); }
.pc-pill{ padding:10px 14px; border-radius:18px; border:1px solid var(--border); background:var(--bg); color:var(--muted); font-weight:900; font-size:12px; cursor:pointer; font-family:inherit; }
.pc-pill.on{ background:var(--accent); border-color:var(--btn); color:var(--primary); }

/* ── Call screen (mirrors CallScreen dark UI) ── */
.cs-wrap{ position:absolute; inset:0; z-index:60; background:#0D1117; display:flex; flex-direction:column; }
.cs-remote{ position:absolute; inset:0; }
.cs-remote video{ width:100%!important; height:100%!important; object-fit:cover!important; }
.cs-top{ position:relative; z-index:10; display:flex; flex-direction:column; align-items:center; padding-top:calc(26px + env(safe-area-inset-top)); }
.cs-avatar{ width:96px; height:96px; border-radius:48px; background:rgba(255,255,255,.10); border:2px solid rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.9); font-weight:900; font-size:40px; margin-bottom:14px; }
.has-remote .cs-avatar{ display:none; }
.cs-name{ color:#fff; font-weight:700; font-size:21px; text-shadow:0 1px 4px rgba(0,0,0,.4); }
.cs-status{ color:rgba(255,255,255,.55); font-size:13px; font-weight:600; margin-top:4px; }
.cs-elapsed{ color:rgba(255,255,255,.8); font-size:13px; font-weight:700; letter-spacing:1px; margin-top:6px; }
.cs-pip{ position:absolute; right:16px; top:calc(56px + env(safe-area-inset-top)); width:100px; height:140px; border-radius:14px; overflow:hidden; border:1.5px solid rgba(255,255,255,.25); background:rgba(0,0,0,.5); z-index:20; }
.cs-pip video{ width:100%!important; height:100%!important; object-fit:cover!important; }
.cs-bottom{ position:relative; z-index:10; margin-top:auto; padding:0 28px calc(22px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:20px; }
.cs-mins{ align-self:center; background:rgba(255,255,255,.08); border-radius:20px; padding:6px 16px; color:rgba(255,255,255,.6); font-size:13px; font-weight:700; }
.cs-controls{ display:flex; justify-content:space-around; }
.cs-btn{ display:flex; flex-direction:column; align-items:center; gap:6px; background:none; border:none; cursor:pointer; font-family:inherit; }
.cs-btn .ico{ width:58px; height:58px; border-radius:29px; background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; color:#fff; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.cs-btn .ico svg{ display:block; }
.cs-btn.off .ico{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.18); }
.cs-btn .lbl{ color:rgba(255,255,255,.65); font-size:11px; font-weight:700; }
.cs-end{ align-self:center; width:72px; height:72px; border-radius:36px; border:1px solid #FF3B30; background:#FF3B30; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 18px rgba(255,59,48,.35); }
.cs-end svg{ display:block; transform:rotate(134deg); }

/* ── Profile page ── */
.pf-div{ height:1px; background:rgba(122,80,53,.10); margin:4px 0; }
/* Lucide line icons (inline SVG): sized by font-size, coloured by currentColor */
.lic{ width:1em; height:1em; flex:0 0 auto; display:inline-block; vertical-align:-.125em; }
.pf-sub{ display:flex; align-items:center; gap:5px; margin-top:3px; min-width:0; }
.pf-sub .lic{ font-size:13px; }
.pf-chip{ display:inline-flex; align-items:center; gap:5px; }
.pf-chip .lic{ font-size:12px; }
.pf-info{ display:flex; align-items:center; justify-content:space-between; padding:8px 0; font-size:13px; }
.pf-info span{ display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-weight:700; }
.pf-info span .lic{ font-size:15px; color:var(--forest); opacity:.85; }
.pf-info b{ color:var(--text); font-weight:800; }
.pf-stats{ display:flex; gap:8px; margin-bottom:14px; }
.pf-stat{ flex:1; background:#FAF3E8; border:1px solid rgba(122,80,53,.18); border-radius:12px; padding:12px 6px; text-align:center; }
.pf-stat b{ display:block; font-size:19px; font-weight:900; color:var(--text); }
.pf-stat span{ display:flex; align-items:center; justify-content:center; gap:4px; font-size:10px; font-weight:800; color:var(--muted); margin-top:3px; }
.pf-stat span .lic{ font-size:12px; color:var(--forest); }
.pf-label{ display:flex; align-items:center; gap:6px; color:var(--muted); font-weight:800; font-size:11px; letter-spacing:.5px; text-transform:uppercase; margin-bottom:8px; }
.pf-label .lic{ font-size:13px; color:var(--amber); }
.pf-row{ display:flex; align-items:center; width:100%; gap:12px; background:#FAF3E8; border:1px solid rgba(122,80,53,.15); border-radius:10px; padding:10px 12px; margin-bottom:8px; text-decoration:none; color:inherit; cursor:pointer; font-family:inherit; text-align:left; }
.pf-row .ico{ width:36px; height:36px; border-radius:10px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:rgba(77,101,53,.10); color:var(--forest); font-size:18px; }
.pf-row .ico.wa{ background:rgba(37,211,102,.14); color:#1B9E4B; }
.pf-row .lbl{ flex:1; font-weight:800; font-size:14px; color:var(--text); }
.pf-row .arr{ display:flex; color:var(--muted); font-size:18px; }
.pf-row.danger{ border-color:rgba(220,38,38,.25); }
.pf-row.danger .ico{ background:rgba(220,38,38,.10); color:#DC2626; }
.pf-row.danger .lbl, .pf-row.danger .arr{ color:#DC2626; }

/* ── Notifications ── */
.nt-row{ display:flex; align-items:flex-start; gap:12px; background:#FAF3E8; border:1px solid rgba(122,80,53,.15); border-radius:10px; padding:12px 14px; margin-bottom:8px; }
.nt-ico{ font-size:18px; flex:0 0 auto; }

/* ── Instant call banner (updated app design) ── */
.ic-title-lg{ color:#2D3B1A!important; font-size:12px!important; letter-spacing:.6px!important; }
.ic-info{ margin-top:4px; background:rgba(77,101,53,.85); color:#F2E8D5; border:none; border-radius:20px; padding:2px 8px; font-size:8px; font-weight:900; cursor:pointer; font-family:inherit; }
.ic-callnow{ margin-top:4px; background:#4D6535; color:#F2E8D5; border:none; border-radius:20px; padding:3px 10px; font-size:11px; font-weight:900; cursor:pointer; font-family:inherit; }

/* ── Instant info modal ── */
.ii-overlay{ position:absolute; inset:0; z-index:140; background:rgba(0,0,0,.60); display:flex; align-items:center; justify-content:center; padding:20px; }
.ii-card{ width:100%; max-width:360px; max-height:80%; background:#FAF3E8; border:1.5px solid rgba(77,101,53,.25); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; }
.ii-head{ background:#4D6535; padding:14px 16px; display:flex; align-items:center; gap:14px; }
.ii-av{ width:60px; height:60px; border-radius:30px; background-color:#D8EDD0; background-size:cover; background-position:center; border:2px solid rgba(242,232,213,.6); flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.ii-av-fb{ color:#F2E8D5; font-size:26px; font-weight:900; }
.ii-titles{ flex:1; min-width:0; display:flex; flex-direction:column; }
.ii-titles b{ color:#F2E8D5; font-size:15px; font-weight:900; }
.ii-titles i{ color:rgba(242,232,213,.8); font-size:11px; font-weight:700; font-style:normal; margin-top:3px; }
.ii-ready{ display:inline-flex; align-items:center; gap:5px; margin-top:5px; color:#B2E8C0; font-size:10px; font-weight:900; }
.ii-ready .dot{ width:6px; height:6px; border-radius:3px; background:#4ADE80; }
.ii-close{ width:28px; height:28px; border-radius:14px; border:none; background:rgba(242,232,213,.2); color:#F2E8D5; font-size:18px; cursor:pointer; flex:0 0 auto; }
.ii-body{ padding:16px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
.ii-label{ color:#4D6535; font-size:10px; font-weight:900; letter-spacing:.8px; }
.ii-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.ii-tag{ background:rgba(77,101,53,.10); border:1px solid rgba(77,101,53,.25); color:#4D6535; font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px; }
.ii-about{ color:#475569; font-size:13px; font-weight:600; line-height:20px; }

/* ── Call screen additions ── */
.cs-avatar.has-pic{ background-size:cover; background-position:center; }
.cs-live{ display:inline-flex; align-items:center; gap:5px; margin-top:6px; padding:4px 10px; border-radius:20px; background:rgba(74,222,128,.20); border:1px solid rgba(74,222,128,.40); color:#4ADE80; font-size:10px; font-weight:900; letter-spacing:.8px; }
.cs-live .dot{ width:6px; height:6px; border-radius:3px; background:#4ADE80; }

/* ── Instant "Call Now" inside the chat plan prompt ── */
.pp-callnow{
  display:flex; align-items:center; width:100%; margin-top:14px; cursor:pointer;
  border:none; border-radius:10px; background:#4D6535; color:#fff;
  padding:12px 14px; font-family:inherit; font-size:14px; font-weight:900;
}
.pp-callnow .dot{ width:8px; height:8px; border-radius:4px; background:#4ADE80; margin-right:8px; }
.pp-callnow .arr{ margin-left:auto; color:#A3C266; font-size:18px; font-weight:900; }

/* ── API notification modal (full-screen creative from /getappbannars) ── */
.apn-overlay{
  position:absolute; inset:0; z-index:150; background:rgba(0,0,0,.80);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:30px 16px; gap:18px;
}
.apn-inner{ width:100%; display:flex; flex-direction:column; align-items:center; gap:14px; max-height:85%; overflow-y:auto; }
.apn-img{ width:100%; max-height:100%; object-fit:contain; border-radius:18px; }
.apn-close{
  width:44px; height:44px; border-radius:22px; flex:0 0 auto; cursor:pointer;
  border:none; background:rgba(255,255,255,.22); color:#fff; font-size:20px; font-weight:900;
}

/* ── Drag-to-scroll affordance (desktop) ── */
.quick-scroll, .ic-avatars, .tdc-slots{ cursor:grab; }
.quick-scroll.dragging, .ic-avatars.dragging, .tdc-slots.dragging, .pp-grid.dragging{
  cursor:grabbing; user-select:none; scroll-behavior:auto;
}
.quick-scroll img, .ic-avatars img{ -webkit-user-drag:none; user-select:none; }

/* ── Clinic reservations (clinic list, clinic therapist profile) ── */
.cs-section{ scroll-margin-top:72px; }
.cs-sub{ color:#6B5A4C; font-size:11.5px; font-weight:700; line-height:16px; margin:-2px 0 10px; }
.cs-days{ display:flex; gap:8px; overflow-x:auto; padding:2px 2px 8px; margin:0 -2px; scrollbar-width:none; }
.cs-days::-webkit-scrollbar{ display:none; }
.cs-day{ flex:0 0 auto; min-width:66px; display:flex; flex-direction:column; align-items:center; gap:1px; padding:8px 8px 7px; border-radius:14px; border:1.5px solid rgba(47,143,164,.22); background:#fff; color:#2F6F7E; font-family:inherit; cursor:pointer; }
.cs-day b{ font-size:18px; line-height:21px; font-weight:900; color:#1A2D0E; }
.cs-dow, .cs-mon{ font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.3px; }
.cs-n{ margin-top:3px; font-size:9.5px; font-weight:800; color:#6B7B5E; }
.cs-day.on{ background:#2F8FA4; border-color:#2F8FA4; color:#fff; box-shadow:0 4px 12px rgba(47,143,164,.28); }
.cs-day.on b, .cs-day.on .cs-n{ color:#fff; }
.cs-times{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:7px; margin-top:6px; }
.cs-time{ padding:10px 4px; border-radius:11px; border:1.5px solid rgba(77,101,53,.22); background:#fff; color:#1A2D0E; font-family:inherit; font-size:12.5px; font-weight:900; cursor:pointer; }
.cs-time.on{ background:#E07A84; border-color:#E07A84; color:#fff; box-shadow:0 4px 12px rgba(224,122,132,.35); }
.cs-day:active, .cs-time:active, .cs-go:active{ transform:scale(.97); }
.cs-bar{ display:flex; align-items:center; gap:10px; margin-top:12px; padding-top:10px; border-top:1px dashed rgba(122,80,53,.22); }
.cs-pick{ flex:1; min-width:0; display:flex; align-items:center; gap:6px; color:#1A2D0E; font-size:12px; font-weight:900; }
.cs-pick svg{ width:14px; height:14px; color:#2F8FA4; flex:0 0 auto; }
.cs-pick .muted{ font-weight:700; }
.cs-go{ flex:0 0 auto; border:none; border-radius:12px; padding:11px 16px; background:#E07A84; color:#fff; font-family:inherit; font-size:12.5px; font-weight:900; cursor:pointer; }
.cs-go:disabled{ background:#D9C9BE; cursor:not-allowed; }
.cs-empty{ color:#6B5A4C; font-size:12px; font-weight:700; line-height:18px; }
.cs-alt{ display:block; margin-top:8px; color:#2F8FA4; font-weight:900; text-decoration:none; }
.cs-done{ text-align:center; background:#F1F8EC; border-color:rgba(77,101,53,.22); }
.cs-done-ico{ width:46px; height:46px; margin:4px auto 8px; border-radius:50%; background:#4D6535; color:#fff; display:flex; align-items:center; justify-content:center; }
.cs-done-ico svg{ width:24px; height:24px; }
.cs-done-title{ color:#1A2D0E; font-size:15px; font-weight:900; }
.cs-done-when{ display:inline-flex; align-items:center; gap:6px; margin-top:8px; padding:6px 12px; border-radius:20px; background:#fff; color:#2F6F7E; font-size:13px; font-weight:900; }
.cs-done-when svg{ width:14px; height:14px; flex:0 0 auto; }
.cs-done-who{ color:#5A7A42; font-size:12px; font-weight:800; margin-top:6px; }
.cs-done .cl-address{ justify-content:center; text-align:left; margin:10px 0 4px; }
.cs-done-note{ color:#6B5A4C; font-size:11.5px; font-weight:700; line-height:17px; margin-top:6px; }
.cs-again{ margin:10px 0 2px; border:1.5px solid rgba(77,101,53,.3); background:transparent; color:#4D6535; font-family:inherit; font-size:12px; font-weight:900; border-radius:10px; padding:8px 14px; cursor:pointer; }
.cs-next{ display:flex; align-items:center; gap:6px; margin:0 12px 10px; padding:7px 10px; border-radius:10px; background:rgba(224,122,132,.10); color:#9A4450; font-size:11px; font-weight:700; }
.cs-next b{ font-weight:900; }
.cs-next svg{ width:13px; height:13px; flex:0 0 auto; }
.cs-next.none{ background:rgba(107,90,76,.08); color:#6B5A4C; }
.cs-next.cp-next{ margin:12px 0 0; }
.cs-mine{ margin-bottom:14px; }
.cs-mine-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid rgba(122,80,53,.12); text-decoration:none; color:inherit; }
.cs-mine .cp-title + .cs-mine-row{ border-top:0; }
.cs-mine-row > svg{ width:18px; height:18px; color:#2F8FA4; flex:0 0 auto; }
.cs-mine-row div{ flex:1; min-width:0; }
.cs-mine-row b{ display:block; color:#1A2D0E; font-size:12.5px; font-weight:900; }
.cs-mine-row div span{ display:block; color:#6B5A4C; font-size:11px; font-weight:700; }
.cs-chip{ flex:0 0 auto; padding:3px 9px; border-radius:20px; background:#4D6535; color:#fff; font-size:10px; font-weight:900; }
@media (min-width:600px){ .cs-times{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
/* Booked clinic visit on the clinic therapist profile */
.cs-visits{ display:grid; gap:6px; margin:12px 0 4px; text-align:left; }
.cs-visit{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:12px; background:#fff; border:1px solid rgba(77,101,53,.16); }
.cs-visit > svg{ width:18px; height:18px; color:#2F8FA4; flex:0 0 auto; }
.cs-visit div{ flex:1; min-width:0; }
.cs-visit b{ display:block; color:#1A2D0E; font-size:13px; font-weight:900; }
.cs-visit div span{ display:block; color:#2F6F7E; font-size:12px; font-weight:800; }
.cs-done-note b{ color:#1A2D0E; font-weight:900; }
.cs-back{ display:block; border:none; background:transparent; color:#2F8FA4; font-family:inherit; font-size:12px; font-weight:900; padding:0; margin:-2px 0 8px; cursor:pointer; }
/* Show / hide button inside password fields */
.pw-wrap{ position:relative; display:block; }
.pw-wrap .input{ padding-right:46px; }
.pw-eye{ position:absolute; right:8px; top:50%; transform:translateY(-50%); width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:none; border-radius:10px; background:transparent; color:#8a7a6a; cursor:pointer; }
.pw-eye:hover, .pw-eye:focus-visible{ background:rgba(77,101,53,.08); color:var(--forest); outline:none; }
.pw-eye svg{ width:19px; height:19px; }
/* Session prices: in clinic next to online (clinic cards and clinic profile) */
.pt{ margin:0 12px 10px; border:1px solid rgba(47,143,164,.18); border-radius:12px; overflow:hidden; background:#fff; }
.pt-row{ display:grid; grid-template-columns:1.05fr 1fr 1fr; align-items:center; }
.pt-row + .pt-row{ border-top:1px solid rgba(47,143,164,.10); }
.pt-row > span{ padding:7px 9px; min-width:0; }
.pt-head{ background:rgba(47,143,164,.07); }
.pt-head > span{ display:flex; align-items:center; gap:4px; color:#5C6B55; font-size:9.5px; font-weight:900; letter-spacing:.4px; text-transform:uppercase; }
.pt-head svg{ width:12px; height:12px; flex:0 0 auto; }
.pt-head .pt-col-clinic{ color:#2F6F7E; }
.pt-head .pt-col-online{ color:#4D6535; }
.pt-col-clinic{ background:rgba(47,143,164,.035); }
.pt-name b{ display:block; color:#1A2D0E; font-size:12px; font-weight:900; line-height:15px; }
.pt-name i{ display:block; color:#6B7B5E; font-size:10.5px; font-weight:700; font-style:normal; }
.pt-price{ color:#1A2D0E; font-size:12px; font-weight:900; white-space:nowrap; }
.pt-price em{ color:#B3A698; font-size:10px; font-weight:700; font-style:normal; }
.pt-lg{ margin:0; border-radius:14px; }
.pt-lg .pt-row > span{ padding:10px 12px; }
.pt-lg .pt-head > span{ font-size:10.5px; }
.pt-lg .pt-name b{ font-size:13.5px; }
.pt-lg .pt-name i{ font-size:11.5px; }
.pt-lg .pt-price{ font-size:13.5px; }
.pt-note{ margin-top:10px; color:#6B5A4C; font-size:11.5px; font-weight:600; line-height:17px; }
.pt-note b{ color:#1A2D0E; }
@media (max-width:360px){ .pt-row > span{ padding:6px 6px; } .pt-price{ font-size:11px; } }

/* ── Booking: plan → time → payment → confirmed (clinic profile, therapist profile, payment) ── */
.bk-section{ padding-bottom:10px; }
.bk-steps{ list-style:none; display:flex; gap:4px; margin:0 0 12px; padding:0; counter-reset:none; }
.bk-steps li{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px; color:#9A8A7C; font-size:10px; font-weight:800; text-align:center; position:relative; }
.bk-steps li + li::before{ content:''; position:absolute; top:11px; right:50%; width:100%; height:2px; background:rgba(122,80,53,.16); z-index:0; }
.bk-steps li.done + li::before, .bk-steps li.done + li.now::before{ background:#4D6535; }
.bk-steps li span{ position:relative; z-index:1; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#fff; border:2px solid rgba(122,80,53,.22); color:#9A8A7C; font-size:11px; font-weight:900; }
.bk-steps li span svg{ width:12px; height:12px; }
.bk-steps li.now{ color:#1A2D0E; }
.bk-steps li.now span{ border-color:#E07A84; color:#E07A84; }
.bk-steps li.done{ color:#4D6535; }
.bk-steps li.done span{ background:#4D6535; border-color:#4D6535; color:#fff; }
.bk-h{ display:flex; align-items:center; gap:8px; margin:14px 0 8px; color:#1A2D0E; font-size:13px; font-weight:900; }
.bk-h > span{ width:20px; height:20px; border-radius:50%; background:#4D6535; color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.bk-h em{ margin-left:auto; font-style:normal; font-size:10px; font-weight:900; color:#2F6F7E; background:rgba(47,143,164,.10); padding:3px 9px; border-radius:20px; }
.bk-h.off{ color:#A89886; }
.bk-h.off > span{ background:#D9C9BE; }
.bk-modes{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.bk-mode{ display:flex; align-items:center; gap:8px; padding:10px; border-radius:12px; border:1.5px solid rgba(77,101,53,.18); background:#fff; color:#4D6535; font-family:inherit; text-align:left; cursor:pointer; }
.bk-mode svg{ width:20px; height:20px; flex:0 0 auto; }
.bk-mode span{ min-width:0; display:flex; flex-direction:column; }
.bk-mode b{ color:#1A2D0E; font-size:12.5px; font-weight:900; }
.bk-mode i{ font-style:normal; color:#6B7B5E; font-size:10px; font-weight:700; }
.bk-mode.on{ border-color:#4D6535; background:#F1F8EC; box-shadow:0 3px 10px rgba(77,101,53,.14); }
.bk-mode:disabled{ opacity:.5; cursor:not-allowed; }
.bk-plans{ display:grid; gap:7px; }
.bk-plan{ display:flex; align-items:center; gap:10px; width:100%; padding:11px 12px; border-radius:12px; border:1.5px solid rgba(77,101,53,.16); background:#fff; font-family:inherit; text-align:left; cursor:pointer; }
.bk-plan:active{ transform:scale(.99); }
.bk-radio{ width:20px; height:20px; flex:0 0 auto; border-radius:50%; border:2px solid rgba(77,101,53,.35); display:flex; align-items:center; justify-content:center; color:#fff; }
.bk-radio svg{ width:11px; height:11px; }
.bk-plan-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.bk-plan-main b{ color:#1A2D0E; font-size:12.5px; font-weight:900; line-height:16px; }
.bk-plan-main i{ font-style:normal; color:#6B7B5E; font-size:10.5px; font-weight:700; margin-top:1px; }
.bk-plan-price{ flex:0 0 auto; color:#1A2D0E; font-size:13px; font-weight:900; white-space:nowrap; }
.bk-plan.on{ border-color:#E07A84; background:#FFF6F6; box-shadow:0 3px 10px rgba(224,122,132,.16); }
.bk-plan.on .bk-radio{ background:#E07A84; border-color:#E07A84; }
.bk-tag{ display:inline-block; font-style:normal; padding:3px 9px; border-radius:20px; background:rgba(77,101,53,.12); color:#3D5C28; font-size:10.5px; font-weight:900; letter-spacing:.3px; text-transform:uppercase; }
.bk-note{ margin-top:8px; color:#6B5A4C; font-size:11px; font-weight:600; line-height:16px; }
.bk-lock{ display:flex; align-items:center; gap:8px; padding:12px; border-radius:12px; border:1.5px dashed rgba(122,80,53,.22); color:#8A7A6C; font-size:11.5px; font-weight:700; }
.bk-lock svg{ width:16px; height:16px; flex:0 0 auto; }
.bk-bar{ align-items:center; }
.bk-sum{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.bk-sum > b{ color:#1A2D0E; font-size:12px; font-weight:900; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bk-sum .cs-pick{ flex:0 0 auto; font-size:11.5px; }
.bk-sum > i{ font-style:normal; color:#6B7B5E; font-size:10px; font-weight:700; }
.bk-sum .muted{ font-size:11px; font-weight:700; }
.bk-bar .cs-go{ max-width:58%; line-height:15px; }
.cp-badge-online{ background:rgba(77,101,53,.10); color:#3D5C28; margin-left:4px; }
.pt-free{ color:#3D5C28; font-weight:900; text-transform:uppercase; font-size:11px; letter-spacing:.3px; }
.tdc-free{ font-style:normal; display:inline-block; padding:2px 8px; border-radius:999px; background:rgba(77,101,53,.14); color:#3D5C28; font-size:10px; font-weight:900; letter-spacing:.3px; }
.tdc-hint{ color:#6B5A4C; font-size:11.5px; font-weight:700; padding:2px 0 10px; }
.pay-slot{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:0 0 10px; padding:9px 12px; border-radius:12px; background:rgba(47,143,164,.08); color:#2F6F7E; font-size:12px; font-weight:700; }
.pay-slot b{ color:#1A2D0E; font-weight:900; margin-left:auto; }
.pay-free-note{ border-top:1px solid var(--divider); padding-top:12px; margin-top:4px; color:#3D5C28; font-size:12.5px; font-weight:800; }
.pay-after{ margin-top:8px; color:var(--muted); font-size:11.5px; font-weight:700; text-align:center; }
@media (max-width:360px){ .bk-steps li{ font-size:9px; } .bk-mode{ padding:8px; } .bk-mode i{ display:none; } }

/* ── Session prices: two columns (Clinic / Online), each listing its plans by name ── */
.pt-cols{ display:grid; grid-template-columns:1fr 1fr; }
.pt-col{ min-width:0; }
.pt-col + .pt-col{ border-left:1px solid rgba(47,143,164,.14); }
.pt-col-clinic{ background:rgba(47,143,164,.035); }
.pt-colhead{ display:flex; align-items:center; gap:5px; padding:7px 10px; background:rgba(47,143,164,.07); color:#2F6F7E; font-size:9.5px; font-weight:900; letter-spacing:.4px; text-transform:uppercase; }
.pt-col-online .pt-colhead{ color:#4D6535; }
.pt-colhead svg{ width:12px; height:12px; flex:0 0 auto; }
.pt-item{ display:flex; align-items:flex-start; justify-content:space-between; gap:6px; padding:7px 10px; }
.pt-item + .pt-item{ border-top:1px solid rgba(47,143,164,.10); }
.pt-item .pt-name{ min-width:0; }
.pt-item .pt-name b{ display:block; color:#1A2D0E; font-size:11.5px; font-weight:900; line-height:14px; overflow-wrap:anywhere; }
.pt-item .pt-name i{ display:block; color:#6B7B5E; font-size:10px; font-weight:700; font-style:normal; margin-top:1px; }
.pt-item .pt-price{ flex:0 0 auto; color:#1A2D0E; font-size:11.5px; font-weight:900; white-space:nowrap; }
.pt-empty{ padding:10px; color:#B3A698; font-size:10.5px; font-weight:700; }

/* Only the first plan of each kind shows; "View all plans" opens the rest. */
.pt-plans .pt-more{ display:none; }
.pt-plans.pt-open .pt-more{ display:flex; }
.pt-toggle{
  display:flex; align-items:center; justify-content:center; gap:5px;
  width:100%; padding:7px 10px; border:0; border-top:1px solid rgba(47,143,164,.14);
  background:rgba(47,143,164,.06); color:#2F6F7E; font-size:10.5px; font-weight:900;
  letter-spacing:.2px; cursor:pointer;
}
.pt-toggle::after{ content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-1px); }
.pt-plans.pt-open .pt-toggle::after{ transform:rotate(-135deg) translateY(-1px); }
.pt-toggle .pt-toggle-close{ display:none; }
.pt-plans.pt-open .pt-toggle .pt-toggle-open{ display:none; }
.pt-plans.pt-open .pt-toggle .pt-toggle-close{ display:inline; }
.pt-lg .pt-toggle{ padding:9px 12px; font-size:11.5px; }
@media (max-width:360px){ .pt-plans.pt-open .pt-more{ display:flex; flex-direction:column; } }
.pt-lg .pt-item{ padding:10px 12px; }
.pt-lg .pt-item .pt-name b, .pt-lg .pt-item .pt-price{ font-size:13px; }
@media (max-width:360px){ .pt-item{ flex-direction:column; gap:2px; } }