/* ============================================================
   KitaBina — APP component library (cool app skin).
   Source of truth: kitabina-design-system.html (the bible).
   Pair with tokens.css. Adopt in admin · member · book · planner.
   Marketing storefront uses components.css instead.
   ============================================================ */

/* ---------- buttons ---------- */
.btn{font-family:var(--body);font-size:13.5px;font-weight:600;height:44px;padding:0 18px;border-radius:var(--r-md);border:1.5px solid transparent;background:var(--surface);color:var(--text);display:inline-flex;align-items:center;gap:7px;cursor:pointer;transition:filter var(--t-fast),background var(--t-fast),border-color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--btn-teal);color:#fff;border-color:var(--btn-teal)}
.btn.primary:hover{background:var(--brand-800);box-shadow:var(--e2);transform:translateY(-1px)}
.btn.secondary{background:var(--surface);color:var(--text);border-color:var(--border-strong)}
.btn.secondary:hover{border-color:var(--brand-400);color:var(--brand-800)}
.btn.ghost{background:transparent;color:var(--muted);border-color:transparent}
.btn.ghost:hover{background:var(--surface-2);color:var(--text)}
.btn.danger{background:var(--surface);color:var(--danger);border-color:var(--danger-bg)}
.btn.danger:hover{background:var(--danger-bg)}
.btn.danger-solid{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn.wood{background:var(--wood-500);color:#fff;border-color:var(--wood-500)}
.btn.wood:hover{background:var(--wood-700)}
.btn[disabled],.btn.dis{opacity:.45;cursor:not-allowed;pointer-events:none}
/* 44px is the minimum reliable touch target. app.css loads AFTER tokens.css on book/profile/admin,
   so it was silently undoing the token bump on the customer checkout. */
.btn.sm{height:40px;padding:0 14px;font-size:12.5px;border-radius:var(--r-sm)}
.btn.lg{height:48px;padding:0 26px;font-size:15px;border-radius:var(--r-lg)}
.btn.pill{border-radius:var(--r-pill)}
.iconbtn{width:38px;height:38px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);color:var(--muted);display:inline-grid;place-items:center;cursor:pointer;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
.iconbtn:hover{background:var(--brand-50);color:var(--brand-700);border-color:var(--brand-100)}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field>label{font-size:12.5px;font-weight:600;color:var(--text)}
.field>label .req{color:var(--danger)}
.inp,select.inp,textarea.inp{font:inherit;font-size:14px;height:44px;padding:0 13px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink);border-radius:var(--r-sm);transition:border-color var(--t-fast),box-shadow var(--t-fast);width:100%}
textarea.inp{height:auto;min-height:96px;padding:11px 13px;resize:vertical}
.inp::placeholder{color:var(--faint)}
.inp:focus{outline:none;border-color:var(--brand-700);box-shadow:0 0 0 3px var(--brand-100)}
.field.err .inp{border-color:var(--danger);background:var(--danger-bg)}
.field.err .msg{font-size:12px;color:var(--danger);font-weight:500}
.field .hint{font-size:12px;color:var(--faint)}
.inp.ro,.inp[readonly]{background:var(--surface-2);color:var(--muted);border-color:var(--border)}
.inp:disabled{opacity:.5;cursor:not-allowed}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7572' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:3px;gap:3px}
.seg button{font:inherit;font-size:13px;font-weight:600;border:none;background:transparent;color:var(--muted);padding:7px 14px;border-radius:var(--r-sm);cursor:pointer;transition:background var(--t-fast),color var(--t-fast)}
.seg button.on{background:var(--brand-700);color:#fff;box-shadow:var(--e1)}
.chk{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13.5px}
.chk input{appearance:none;width:19px;height:19px;border:1.5px solid var(--border-strong);border-radius:var(--r-xs);background:var(--surface);cursor:pointer;display:grid;place-items:center;transition:background var(--t-fast),border-color var(--t-fast)}
.chk input:checked{background:var(--brand-700);border-color:var(--brand-700)}
.chk input:checked::after{content:"";width:5px;height:9px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(43deg) translateY(-1px)}
.tog{position:relative;width:38px;height:22px;display:inline-block;flex:none}
.tog input{opacity:0;width:0;height:0;position:absolute}
.tog .tg{position:absolute;inset:0;background:var(--border-strong);border-radius:var(--r-pill);transition:background var(--t)}
.tog .tg::after{content:"";position:absolute;width:18px;height:18px;left:2px;top:2px;background:#fff;border-radius:50%;box-shadow:var(--e1);transition:transform var(--t) var(--ease)}
.tog input:checked+.tg{background:var(--brand-700)}
.tog input:checked+.tg::after{transform:translateX(16px)}
.select{position:relative;width:100%}
.select-btn{width:100%;height:44px;display:flex;align-items:center;gap:9px;padding:0 12px;border:1.5px solid var(--border);background:var(--surface);border-radius:var(--r-sm);font:inherit;font-size:14px;color:var(--ink);cursor:pointer;transition:border-color var(--t-fast) var(--ease-snap),box-shadow var(--t-fast) var(--ease-snap)}
.select-btn:hover{border-color:var(--brand-300)}
.select.open .select-btn,.select-btn:focus{outline:none;border-color:var(--brand-400);box-shadow:0 0 0 3px var(--brand-50)}
.select-btn .lead{color:var(--brand-700);display:inline-flex;flex:none;font-size:15px}
.select-btn .val{flex:1;text-align:left}
.select-btn .val.ph{color:var(--faint)}
.select-btn .chev{color:var(--muted);flex:none;transition:transform var(--t-snap) var(--ease-snap)}
.select.open .select-btn .chev{transform:rotate(180deg)}
.select-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--e4);padding:5px;z-index:30;opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity var(--t-snap) var(--ease-snap),transform var(--t-snap) var(--ease-snap)}
.select.open .select-menu{opacity:1;transform:translateY(0);pointer-events:auto}
.select-opt{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-sm);font-size:13.5px;color:var(--text);cursor:pointer;transition:background var(--t-fast) var(--ease-snap)}
.select-opt:hover{background:var(--brand-50)}
.select-opt .oi{width:18px;color:var(--brand-700);display:inline-flex;justify-content:center;flex:none}
.select-opt .ck{margin-left:auto;color:var(--brand-700);opacity:0;transform:scale(.6);transition:opacity var(--t-snap) var(--ease-snap),transform var(--t-snap) var(--ease-snap)}
.select-opt.sel{background:var(--brand-50);font-weight:600}
.select-opt.sel .ck{opacity:1;transform:scale(1)}

/* ---------- pills / badges ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:.2px;padding:3px 9px;border-radius:var(--r-pill);line-height:1.4}
.pill.success{background:var(--success-bg);color:var(--success)} .pill.warn{background:var(--warning-bg);color:var(--warning)}
.pill.danger{background:var(--danger-bg);color:var(--danger)} .pill.info{background:var(--info-bg);color:var(--info)}
.pill.purple{background:var(--purple-bg);color:var(--purple)} .pill.neutral{background:var(--neutral-bg);color:var(--neutral)}
.pill.brand{background:var(--brand-50);color:var(--brand-800)} .pill.wood{background:var(--wood-50);color:var(--wood-700)}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.outline{background:transparent;border:1px solid var(--border-strong);color:var(--muted);font-weight:600}

/* ---------- cards: kpi / content / promo / option ---------- */
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--sp-5);box-shadow:var(--e1)}
.kpi.hl{background:var(--brand-50);border-color:var(--brand-100)}
.kpi .ic{width:34px;height:34px;border-radius:var(--r-sm);background:var(--brand-50);color:var(--brand-700);display:grid;place-items:center;margin-bottom:10px;font-size:16px}
.kpi .lab{font-size:12.5px;color:var(--muted)}
.kpi .num{font-family:var(--disp);font-size:30px;font-weight:700;color:var(--ink);line-height:1.1;margin:2px 0}
.kpi .trend{font-size:11.5px;font-weight:700}.kpi .trend.up{color:var(--success)}.kpi .trend.down{color:var(--danger)}
.ccard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--e1)}
.ccard .ch{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
.ccard .ch h3{font-size:15px;flex:1}
.ccard .cb{padding:16px}
.promo{background:linear-gradient(160deg,var(--brand-50),var(--brand-100));border:1px solid var(--brand-100);border-radius:var(--r-xl);padding:var(--sp-5)}
.promo b{font-family:var(--disp);font-size:15px;color:var(--brand-900)}
.promo p{font-size:12.5px;color:var(--brand-800);margin:6px 0 12px}
.opt{border:1.5px solid var(--border);background:var(--surface);border-radius:var(--r-lg);padding:14px 16px;cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast)}
.opt:hover{border-color:var(--brand-400)}
.opt.sel{border-color:var(--brand-700);background:var(--brand-50)}
.opt.full{opacity:.45;cursor:not-allowed}

/* ---------- data table ---------- */
.dtable{width:100%;border-collapse:collapse;font-size:13px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden}
.dtable th{background:var(--surface-2);text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);font-weight:700;padding:11px 14px;position:sticky;top:0;z-index:1}
.dtable td{padding:14px;border-top:1px solid var(--border);vertical-align:middle}
.dtable tbody tr{transition:background var(--t-fast)}
.dtable tbody tr:hover{background:var(--brand-50)}
.dtable .av{width:26px;height:26px;border-radius:50%;background:var(--brand-700);color:#fff;display:inline-grid;place-items:center;font-size:11px;font-weight:700;font-family:var(--disp);margin-right:8px;vertical-align:middle}
.dtoolbar{display:flex;align-items:center;gap:8px;padding:12px 14px;border:1px solid var(--border);border-bottom:none;border-radius:var(--r-xl) var(--r-xl) 0 0;background:var(--surface);flex-wrap:wrap}
.dtoolbar + .dtable{border-radius:0 0 var(--r-xl) var(--r-xl);border-top:none}
.dfoot{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid var(--border);border-top:none;border-radius:0 0 var(--r-xl) var(--r-xl);background:var(--surface);font-size:12px;color:var(--muted)}
.dtable.has-foot{border-radius:var(--r-xl) var(--r-xl) 0 0}

/* ---------- tabs / chips / crumb / pager ---------- */
.tabs{position:relative;display:flex;gap:2px;border-bottom:1px solid var(--border)}
.tabs button{font:inherit;font-size:13.5px;font-weight:600;color:var(--muted);background:none;border:none;padding:10px 14px;cursor:pointer;margin-bottom:-1px;transition:color var(--t-snap) var(--ease-snap)}
.tabs button.on{color:var(--brand-700)}
.tab-ink{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--brand-700);border-radius:2px;pointer-events:none;transition:transform var(--t-snap) var(--ease-snap),width var(--t-snap) var(--ease-snap)}
.chipf{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);padding:6px 12px;cursor:pointer;transition:all var(--t-fast)}
.chipf:hover{border-color:var(--brand-300)}
.chipf.on{background:var(--brand-700);color:#fff;border-color:var(--brand-700)}
.crumb{font-size:12.5px;color:var(--faint)}.crumb b{color:var(--text)}
.pager{display:inline-flex;gap:4px}
.pager a{min-width:30px;height:30px;display:grid;place-items:center;border-radius:var(--r-sm);font-size:12.5px;color:var(--muted);border:1px solid transparent;cursor:pointer}
.pager a.on{background:var(--brand-700);color:#fff}.pager a:hover:not(.on){background:var(--surface-2)}

/* ---------- avatar / toast / empty / skeleton ---------- */
.av{border-radius:50%;background:var(--brand-700);color:#fff;display:inline-grid;place-items:center;font-weight:700;font-family:var(--disp)}
.avstack{display:inline-flex}.avstack .av{border:2px solid var(--surface);margin-left:-8px}.avstack .av:first-child{margin-left:0}
.toast{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;font-size:13px;font-weight:600;padding:11px 16px;border-radius:var(--r-md);box-shadow:var(--e4)}
.toast.ok{background:var(--success)}.toast.err{background:var(--danger)}
.skel{background:linear-gradient(90deg,var(--viz-track) 25%,#e3e9e7 37%,var(--viz-track) 63%);background-size:400% 100%;animation:shimmer 1.4s linear infinite;border-radius:var(--r-sm)}

/* ---------- modal — sleek blur-in (backdrop blurs, dialog fades up) ---------- */
.modal{position:relative;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--e4);width:min(520px,100%);overflow:hidden}
.modal .mh{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border)}.modal .mh h3{font-size:16px;flex:1}.modal .mh .x{color:var(--faint);cursor:pointer;font-size:18px;border:none;background:none}
.modal .mb{padding:18px 20px;font-size:13px;color:var(--muted)}
.modal .mf{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--border)}
.ov{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;background:rgba(20,28,26,0);backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);opacity:0;pointer-events:none;transition:opacity var(--t-slow) var(--ease-snap),background var(--t-slow) var(--ease-snap),backdrop-filter var(--t-slow) var(--ease-snap),-webkit-backdrop-filter var(--t-slow) var(--ease-snap)}
.ov.show{opacity:1;pointer-events:auto;background:rgba(20,28,26,.30);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.ov .modal{transform:translateY(10px);opacity:0;transition:opacity var(--t-slow) var(--ease-snap),transform var(--t-slow) var(--ease-snap)}
.ov.show .modal{transform:translateY(0);opacity:1}

/* ---------- stepper ---------- */
.stp{display:flex;flex-direction:column;gap:0}
.stp .st{display:flex;gap:12px;padding-bottom:22px;position:relative}
.stp .st::before{content:"";position:absolute;left:13px;top:28px;bottom:0;width:2px;background:var(--border)}
.stp .st:last-child::before{display:none}
.stp .st .no{width:28px;height:28px;border-radius:50%;border:2px solid var(--border);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--faint);background:var(--surface);flex:none;z-index:1}
.stp .st.done .no{background:var(--brand-700);border-color:var(--brand-700);color:#fff}
.stp .st.active .no{border-color:var(--brand-700);color:var(--brand-700)}
.stp .st.done::before{background:var(--brand-700)}
.stp .st .lb{font-size:13.5px;font-weight:600;padding-top:4px}.stp .st.active .lb{color:var(--brand-800)}

/* ---------- motion library ---------- */
.anim-pop{animation:pop .45s var(--ease)}
.anim-shake{animation:shake .36s}
.anim-pulse{animation:pulse 1.4s infinite}
.anim-rise{animation:rise .6s var(--ease)}
.anim-slide{animation:slidein .4s var(--ease-flow)}
.stagger > *{opacity:0;animation:rise .42s var(--ease-snap) forwards}
.stagger > *:nth-child(1){animation-delay:.02s}.stagger > *:nth-child(2){animation-delay:.06s}
.stagger > *:nth-child(3){animation-delay:.10s}.stagger > *:nth-child(4){animation-delay:.14s}
.stagger > *:nth-child(5){animation-delay:.18s}.stagger > *:nth-child(6){animation-delay:.22s}
.stagger > *:nth-child(7){animation-delay:.26s}.stagger > *:nth-child(8){animation-delay:.30s}
@keyframes pop{0%{transform:scale(.2)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes slidein{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:translateX(0)}}
@keyframes shimmer{to{background-position:-200% 0}}
.spin{width:22px;height:22px;border:2.5px solid var(--brand-100);border-top-color:var(--brand-700);border-radius:50%;animation:rot .7s linear infinite;display:inline-block;vertical-align:middle}
@keyframes rot{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.stagger > *{opacity:1}}

/* ---------- iconography (line, currentColor) ---------- */
.ic-line{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}