/* 12-features.css — Auto Check-ins, Share Card, Walk Nudge, Festival, Family, Lapse */

/* ── Lapse badges ──────────────────────────────────────────────────────── */
.lapse-badge { display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:600; border:1px solid; }
.lapse-badge.high { background:rgba(232,93,74,.12); color:#E85D4A; border-color:rgba(232,93,74,.3); }
.lapse-badge.medium { background:rgba(217,119,6,.12); color:#D97706; border-color:rgba(217,119,6,.3); }
.lapse-badge.low { background:var(--green-soft); color:var(--green); border-color:var(--green-mid); }

/* ── Check-in panel ────────────────────────────────────────────────────── */
.ci-summary-bar { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
.ci-stat { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px; }
.ci-stat b { display:block; font-size:24px; font-weight:700; color:var(--ink); }
.ci-stat span { font-size:12px; color:var(--ink-3); }
.ci-stat.warn b { color:#D97706; }
.ci-stat.danger b { color:#E85D4A; }
@media(max-width:600px){ .ci-summary-bar { grid-template-columns:repeat(2,1fr); } }

.ci-client-list { border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.ci-row { border-bottom:1px solid var(--line-2); }
.ci-row:last-child { border-bottom:none; }
.ci-row-main { display:flex; align-items:center; gap:12px; padding:12px 16px; cursor:pointer; transition:background .15s; }
.ci-row-main:hover { background:var(--surface-2); }
.ci-av { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-weight:600; font-size:12px; color:#fff; flex:none; }
.ci-info { flex:1; min-width:0; }
.ci-info b { display:block; font-size:13.5px; font-weight:600; }
.ci-info span { font-size:11.5px; color:var(--ink-3); }
.ci-score-wrap { display:flex; align-items:center; gap:8px; flex:none; }
.ci-score-bar { width:100px; height:6px; background:var(--line); border-radius:3px; overflow:hidden; flex:none; }
.ci-score-fill { height:100%; border-radius:3px; }
.ci-score-fill.success { background:var(--green); }
.ci-score-fill.saffron { background:#D97706; }
.ci-score-fill.danger { background:#E85D4A; }
.ci-score-fill.gray { background:var(--ink-3); }
.ci-score-num { font-size:12px; font-weight:600; color:var(--ink-2); white-space:nowrap; }
.ci-pending { font-size:12px; color:var(--ink-3); font-style:italic; }
@media(max-width:680px){ .ci-score-bar { display:none; } }

.ci-detail { padding:14px 16px 16px 64px; background:var(--surface-2); }
.ci-detail-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:10px; }
.ci-detail-item { font-size:12px; }
.ci-detail-item span { display:block; color:var(--ink-3); margin-bottom:3px; }
.ci-detail-item b { font-size:13px; color:var(--ink); }
.ci-mini-bar { height:4px; background:var(--line); border-radius:2px; margin:3px 0 4px; overflow:hidden; }
.ci-detail-row { display:flex; justify-content:space-between; padding:6px 0; font-size:12.5px; border-top:1px solid var(--line-2); }
.ci-detail-row span { color:var(--ink-3); }
.ci-detail-row.warn b { color:#D97706; }
.ci-detail-row.danger b { color:#E85D4A; }
@media(max-width:600px){ .ci-detail-grid { grid-template-columns:repeat(2,1fr); } }

/* Client check-in form */
.ci-form-wrap { max-width:520px; }
.ci-form-greeting { font-size:17px; font-weight:700; margin-bottom:4px; }
.ci-form-sub { font-size:13px; color:var(--ink-3); margin-bottom:20px; }
.ci-form-q { margin-bottom:20px; }
.ci-form-label { font-size:13.5px; font-weight:600; margin-bottom:4px; }
.ci-form-help { font-size:12px; color:var(--ink-3); margin-bottom:8px; }
.ci-scale-btns { display:flex; gap:5px; flex-wrap:wrap; }
.ci-scale-btn { width:36px; height:36px; border:1.5px solid var(--line); border-radius:var(--r-sm); background:var(--surface); color:var(--ink-2); font-size:13px; font-weight:500; cursor:pointer; transition:all .15s; }
.ci-scale-btn:hover { border-color:var(--green); color:var(--green); }
.ci-scale-btn.selected { background:var(--green); color:#fff; border-color:var(--green); }
.ci-input { width:100%; padding:9px 11px; border:1.5px solid var(--line); border-radius:var(--r-sm); font-size:13.5px; background:var(--surface); color:var(--ink); box-sizing:border-box; }
.ci-input:focus { outline:none; border-color:var(--green); }
.ci-textarea { width:100%; padding:9px 11px; border:1.5px solid var(--line); border-radius:var(--r-sm); font-size:13.5px; background:var(--surface); color:var(--ink); min-height:80px; resize:vertical; font-family:inherit; box-sizing:border-box; }
.ci-textarea:focus { outline:none; border-color:var(--green); }

.patient-checkin-card { display:flex; align-items:center; gap:14px; background:var(--surface); border:1.5px solid var(--green-mid); border-radius:var(--r-lg); padding:14px 16px; }
.pci-icon { font-size:28px; flex:none; }
.pci-text { flex:1; }
.pci-text b { display:block; font-size:14px; font-weight:600; }
.pci-text span { font-size:12.5px; color:var(--ink-3); }

/* ── Share card modal ──────────────────────────────────────────────────── */
.feat-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:900; padding:16px; }
.share-modal-inner { display:flex; flex-direction:column; align-items:center; width:100%; max-width:360px; }
.share-card { background:linear-gradient(145deg,#1B4332,#2D6A4F); border-radius:20px; padding:32px 28px; color:#fff; width:100%; box-shadow:0 20px 60px rgba(0,0,0,.4); }
.share-card-brand { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.7; margin-bottom:20px; }
.share-card-avatar { width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.2); display:grid; place-items:center; font-size:22px; font-weight:700; margin:0 auto 12px; }
.share-card-name { text-align:center; font-size:20px; font-weight:700; margin-bottom:4px; }
.share-card-goal { text-align:center; font-size:13px; opacity:.75; margin-bottom:24px; }
.share-card-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid rgba(255,255,255,.2); padding-top:20px; }
.share-card-stat { text-align:center; padding:0 8px; }
.share-card-stat + .share-card-stat { border-left:1px solid rgba(255,255,255,.15); }
.share-card-val { font-size:28px; font-weight:700; line-height:1; }
.share-card-val span { font-size:15px; font-weight:400; }
.share-card-lbl { font-size:11px; opacity:.65; margin-top:4px; }
.share-card-dietitian { text-align:center; font-size:12px; opacity:.6; margin-top:20px; padding-top:16px; border-top:1px solid rgba(255,255,255,.15); }
.share-card-hint { color:rgba(255,255,255,.7); font-size:12px; text-align:center; margin-top:14px; font-style:italic; }

/* ── Walk nudge modal ──────────────────────────────────────────────────── */
.walk-modal-box { background:var(--surface); border-radius:var(--r-xl); padding:28px 24px; width:100%; max-width:360px; text-align:center; }
.walk-nudge-icon { font-size:48px; margin-bottom:12px; }
.walk-nudge h3 { font-size:18px; font-weight:700; margin-bottom:8px; }
.walk-nudge p { font-size:13.5px; color:var(--ink-2); line-height:1.5; margin-bottom:20px; }
.walk-nudge-btns { display:flex; flex-direction:column; gap:8px; }
.walk-timer-view { padding:8px 0; }
.walk-ring-wrap { position:relative; display:inline-block; }
.walk-timer-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.walk-timer-num { font-size:36px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--green); }
.walk-timer-label { font-size:12px; color:var(--ink-3); }
.walk-complete { padding:8px 0; }
.walk-complete-icon { font-size:52px; margin-bottom:12px; }
.walk-complete h3 { font-size:20px; font-weight:700; margin-bottom:8px; }
.walk-complete p { font-size:13.5px; color:var(--ink-2); line-height:1.5; margin-bottom:16px; }
.walk-points-badge { display:inline-block; background:var(--green-soft); color:var(--green); border:1px solid var(--green-mid); border-radius:20px; padding:4px 14px; font-size:13px; font-weight:600; margin-bottom:12px; }

/* ── Festival modal ────────────────────────────────────────────────────── */
.festival-modal-box { background:var(--surface); border-radius:var(--r-xl); width:100%; max-width:640px; max-height:90vh; overflow-y:auto; }
.fest-tabs { display:flex; gap:0; border-bottom:1px solid var(--line); }
.fest-tab { flex:1; padding:10px 8px; font-size:12px; font-weight:500; background:none; border:none; cursor:pointer; color:var(--ink-2); border-bottom:2px solid transparent; }
.fest-tab.active { color:var(--green); border-bottom-color:var(--green); font-weight:600; }
.fest-tab:hover { background:var(--surface-2); }
.fest-header { padding:24px 24px 20px; color:#fff; position:relative; }
.fest-close { position:absolute; top:12px; right:12px; background:rgba(255,255,255,.2); border:none; border-radius:50%; width:30px; height:30px; color:#fff; font-size:14px; cursor:pointer; }
.fest-header-icon { font-size:36px; margin-bottom:8px; }
.fest-greeting { font-size:20px; font-weight:700; margin-bottom:4px; }
.fest-subhead { font-size:13px; opacity:.75; }
.fest-body { padding:20px 24px; }
.fest-section-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); margin-bottom:10px; }
.fest-client-row { display:flex; gap:10px; align-items:center; }
.fest-food-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media(max-width:520px){ .fest-food-grid { grid-template-columns:1fr; } }
.fest-food-card { display:flex; gap:10px; align-items:flex-start; padding:12px; border-radius:var(--r-md); border:1.5px solid var(--line); background:var(--surface); }
.fest-food-card.caution { border-color:rgba(232,93,74,.3); background:rgba(232,93,74,.04); }
.fest-food-icon { font-size:22px; flex:none; }
.fest-food-name { font-size:13px; font-weight:600; margin-bottom:2px; }
.fest-food-bn { font-weight:400; color:var(--ink-3); font-size:12px; }
.fest-food-meta { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; align-items:center; }
.fest-food-note { font-size:11px; color:#E85D4A; }

/* ── Family plan ───────────────────────────────────────────────────────── */
.fam-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:24px; }
@media(max-width:640px){ .fam-grid { grid-template-columns:1fr; } }
.fam-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 20px; }
.fam-card-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.fam-icon { font-size:28px; flex:none; }
.fam-name { font-size:15px; font-weight:700; }
.fam-count { font-size:12px; color:var(--ink-3); }
.fam-avatars { display:flex; gap:-4px; margin-bottom:10px; }
.fam-av { width:36px; height:36px; border-radius:50%; background:var(--green-mid); color:#fff; display:grid; place-items:center; font-weight:600; font-size:12px; border:2px solid var(--surface); flex:none; }
.fam-av.small { width:28px; height:28px; font-size:10px; }
.fam-members { margin-bottom:10px; }
.fam-member-row { display:flex; align-items:center; font-size:13px; padding:3px 0; }
.fam-bdt-est { font-size:12.5px; color:var(--ink-2); margin-bottom:12px; }
.fam-bdt-est b { color:var(--green); }
.fam-card-actions { display:flex; gap:8px; }
.fam-unassigned { margin-top:4px; }
.fam-section-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); margin-bottom:12px; }
.fam-unassigned-list { border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.fam-ua-row { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line-2); }
.fam-ua-row:last-child { border-bottom:none; }
.fam-ua-row span { flex:1; font-size:13.5px; }

.grocery-wrap { border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; margin-top:20px; }
.grocery-header { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; background:var(--green); color:#fff; }
.grocery-header b { font-size:14px; }
.grocery-header span { font-size:12px; opacity:.8; }
.grocery-list { padding:12px 16px; }
.grocery-item { display:flex; align-items:center; gap:10px; padding:7px 2px; border-bottom:1px solid var(--line-2); font-size:13.5px; }
.grocery-item:last-child { border-bottom:none; }
.grocery-check { font-size:16px; color:var(--ink-3); flex:none; }
.grocery-name { flex:1; }
.grocery-qty { font-size:12px; color:var(--ink-3); background:var(--surface-2); padding:1px 7px; border-radius:10px; }
.grocery-footer { display:flex; justify-content:space-between; align-items:center; padding:12px 18px; background:var(--surface-2); border-top:1px solid var(--line); font-size:13.5px; }
.grocery-footer b { color:var(--green); font-size:16px; }
.grocery-actions { display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--line); }