/* ═══════════════════════════════════════════════════════
   KLASSIVO BOOKING PAGE  — Nordic Fitness
   Fonts: Barlow Condensed (heads) · DM Sans (body)
═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── Tokens ─────────────────────────────────────────── */
.klby-bp {
    --brand:     var(--klby-brand, #2D6A4F);
    --brand-lt:  color-mix(in srgb, var(--brand) 10%, white);
    --ink:       #1A1A1A;
    --muted:     #7A7A7A;
    --s50:       #FAF9F7;
    --s100:      #F2EFE9;
    --s200:      #E5E0D8;
    --s300:      #CBC2B5;
    --s500:      #8C7B68;
    --s700:      #4A3F33;
    --dark:      #16202C;
    --danger:    #B91C1C;
    --ok:        #15803D;
    --white:     #FFFFFF;
    --r:         5px;
    --sh:        0 2px 14px rgba(0,0,0,.09);
    --ff-h:      'Barlow Condensed', sans-serif;
    --ff-b:      'DM Sans', sans-serif;
    --ease:      cubic-bezier(.4,0,.2,1);

    font-family: var(--ff-b);
    color: var(--ink);
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px 80px;
}
.klby-bp *, .klby-bp *::before, .klby-bp *::after { box-sizing: border-box; }

/* ── Gate ────────────────────────────────────────────── */
.klby-gate { text-align:center; padding:80px 20px; background:var(--white); border-radius:var(--r); box-shadow:var(--sh); }
.klby-gate-icon { font-size:48px; margin-bottom:14px; }
.klby-gate-title { font-family:var(--ff-h); font-size:34px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px; }
.klby-gate-sub { color:var(--muted); margin-bottom:22px; }

/* ── Sections ────────────────────────────────────────── */
.klby-section { margin-bottom:44px; }
.klby-section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:8px; }
.klby-section-title {
    font-family:var(--ff-h); font-size:24px; font-weight:900;
    letter-spacing:.1em; text-transform:uppercase; color:var(--dark);
    display:flex; align-items:center; gap:8px;
}
.klby-section-title::before {
    content:''; width:4px; height:20px; background:var(--brand);
    border-radius:2px; display:inline-block; flex-shrink:0;
}

/* ── Card ────────────────────────────────────────────── */
.klby-card { background:var(--white); border-radius:var(--r); box-shadow:var(--sh); overflow:hidden; }

/* ── Spinner ─────────────────────────────────────────── */
.klby-spinner { display:inline-block; width:20px; height:20px; border:2px solid var(--s200); border-top-color:var(--brand); border-radius:50%; animation:klby-spin .7s linear infinite; vertical-align:middle; }
@keyframes klby-spin { to { transform:rotate(360deg); } }

/* ── Buttons ─────────────────────────────────────────── */
.klby-btn {
    font-family:var(--ff-h); font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
    padding:10px 24px; border:none; border-radius:var(--r); cursor:pointer;
    transition:all .15s var(--ease); line-height:1; display:inline-flex; align-items:center; gap:5px; text-decoration:none;
}
.klby-btn:disabled { opacity:.4; cursor:not-allowed; }
.klby-btn.is-primary { background:var(--brand); color:var(--white); }
.klby-btn.is-primary:not(:disabled):hover { filter:brightness(1.1); transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.2); }
.klby-btn.is-ghost   { background:transparent; color:var(--s700); border:1.5px solid var(--s300); }
.klby-btn.is-ghost:hover { background:var(--s100); }
.klby-btn.is-outline { background:transparent; color:var(--s700); border:1.5px solid var(--s300); }
.klby-btn.is-outline:hover { background:var(--s100); }

/* ── Error/empty helpers ─────────────────────────────── */
.klby-empty-msg, .klby-err-msg { color:var(--muted); font-size:14px; padding:20px; }
.klby-err-msg { color:var(--danger); }

/* ═══════════════════════════════════════════════════════
   1. TIMETABLE
═══════════════════════════════════════════════════════ */
.klby-tt-nav { display:flex; align-items:center; gap:10px; }
.klby-tt-nav-btn {
    width:32px; height:32px; border-radius:50%; border:1.5px solid var(--s200);
    background:var(--white); font-size:15px; cursor:pointer; color:var(--ink);
    display:flex; align-items:center; justify-content:center;
    transition:all .14s; box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.klby-tt-nav-btn:hover { background:var(--dark); color:var(--white); border-color:var(--dark); }
.klby-tt-nav-label {
    font-family:var(--ff-h); font-size:15px; font-weight:700; letter-spacing:.05em;
    text-transform:uppercase; color:var(--dark); min-width:190px; text-align:center;
}

.klby-tt-legend { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:10px; font-size:12px; color:var(--muted); }
.klby-leg { display:flex; align-items:center; gap:5px; }
.klby-leg::before { content:''; width:10px; height:10px; border-radius:2px; flex-shrink:0; }
.klby-leg-ok::before     { background:#D1FAE5; border:1.5px solid #059669; }
.klby-leg-warn::before   { background:#FEF3C7; border:1.5px solid #D97706; }
.klby-leg-full::before   { background:#FEE2E2; border:1.5px solid #DC2626; }
.klby-leg-mine::before   { background:#EEF2FF; border:1.5px solid #6366F1; }
.klby-leg-closed::before { background:repeating-linear-gradient(45deg,#e5e0d8,#e5e0d8 2px,#faf9f7 2px,#faf9f7 6px); border:1.5px solid #cbc2b5; }

.klby-tt-loading { display:flex; align-items:center; justify-content:center; padding:60px; }

/* Grid — built by JS */
.klby-tt-grid { display:grid; min-width:520px; }

.klby-tt-hcell {
    background:var(--dark); color:var(--white); text-align:center;
    padding:11px 5px 9px; font-family:var(--ff-h); font-weight:700;
    letter-spacing:.06em; text-transform:uppercase; font-size:10px;
    border-right:1px solid rgba(255,255,255,.06);
}
.klby-tt-hcell:last-child { border-right:none; }
.klby-tt-hcell.is-today { background:var(--brand); }
.klby-tt-hcell.is-past  { opacity:.6; }
.klby-tt-hcell--label { background:var(--s700); }
.klby-tt-num { display:block; font-size:20px; font-weight:900; line-height:1; }
.klby-tt-day { display:block; font-size:9px; margin-top:1px; }
.klby-tt-mon { display:block; font-size:9px; opacity:.6; }

.klby-tt-tcell {
    background:var(--s100); padding:7px 7px 7px 4px; text-align:right;
    font-family:var(--ff-h); font-size:10px; font-weight:700; color:var(--s500);
    letter-spacing:.04em; border-top:1px solid var(--s200); border-right:1px solid var(--s200);
}
.klby-tt-scell {
    background:var(--white); border-top:1px solid var(--s100); border-right:1px solid var(--s100);
    padding:4px 3px; min-height:52px; display:flex; flex-direction:column; gap:3px;
}
.klby-tt-scell:last-child { border-right:none; }
.klby-tt-scell.is-closed {
    background:repeating-linear-gradient(45deg,var(--s50),var(--s50) 4px,var(--s100) 4px,var(--s100) 8px);
}
.klby-tt-scell.is-today-col { background:#FFFEF7; }
.klby-tt-scell.is-past-col  { background:var(--s50); }
.klby-tt-empty { grid-column:1/-1; padding:32px; text-align:center; color:var(--muted); font-size:14px; }

/* Pills */
.klby-tt-pill {
    border-radius:3px; padding:5px 6px; font-size:9px; font-weight:700;
    font-family:var(--ff-h); letter-spacing:.04em; text-transform:uppercase;
    cursor:pointer; border:none; text-align:left; width:100%; line-height:1.25;
    display:block; transition:all .13s var(--ease);
    border-left:3px solid transparent; position:relative;
}
.klby-tt-pill:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 3px 8px rgba(0,0,0,.18); z-index:2; }
.klby-tt-pill:disabled { cursor:default; }
.klby-pill-check { position:absolute; top:3px; right:4px; font-size:8px; }
.klby-pill-name  { display:block; line-height:1.2; }
.klby-pill-time  { display:block; font-family:var(--ff-b); font-size:8px; font-weight:400; opacity:.8; margin-top:1px; }
.klby-tt-pill.is-ok   { background:#D1FAE5; color:#065F46; border-left-color:#059669; }
.klby-tt-pill.is-warn { background:#FEF3C7; color:#78350F; border-left-color:#D97706; }
.klby-tt-pill.is-full { background:#FEE2E2; color:#7F1D1D; border-left-color:#DC2626; opacity:.65; }
.klby-tt-pill.is-mine { background:#EEF2FF; color:#312E81; border-left-color:#6366F1; }

/* ═══════════════════════════════════════════════════════
   2. WIZARD
═══════════════════════════════════════════════════════ */
.klby-bal-pill {
    display:flex; align-items:baseline; gap:4px;
    padding:5px 16px; background:var(--dark); border-radius:100px; color:var(--white);
}
.klby-bal-pill-num  { font-family:var(--ff-h); font-size:22px; font-weight:900; line-height:1; }
.klby-bal-pill-unit { font-size:11px; opacity:.65; letter-spacing:.04em; }

.klby-wizard { overflow:hidden; }

/* Step tabs */
.klby-wsteps { display:flex; background:var(--s100); border-bottom:2px solid var(--s200); }
.klby-wstep  {
    flex:1; padding:13px 8px 11px; display:flex; flex-direction:column;
    align-items:center; gap:4px; border-right:1px solid var(--s200);
}
.klby-wstep:last-child { border-right:none; }
.klby-wstep-num {
    width:22px; height:22px; border-radius:50%; border:2px solid var(--s300);
    background:var(--white); color:var(--muted); font-family:var(--ff-h);
    font-size:11px; font-weight:800; display:flex; align-items:center;
    justify-content:center; transition:all .14s;
}
.klby-wstep-lbl { font-family:var(--ff-h); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); text-align:center; }
.klby-wstep.is-active { background:var(--white); }
.klby-wstep.is-active .klby-wstep-num { background:var(--brand); color:var(--white); border-color:var(--brand); }
.klby-wstep.is-active .klby-wstep-lbl { color:var(--brand); }
.klby-wstep.is-done   .klby-wstep-num { background:var(--dark); color:var(--white); border-color:var(--dark); }
.klby-wstep.is-done   .klby-wstep-lbl { color:var(--dark); }

/* Panels */
.klby-wpanel { padding:26px 28px; }
.klby-panel-hint { color:var(--muted); font-size:14px; margin-bottom:16px; }

/* Service grid */
.klby-svc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-bottom:22px; }
.klby-svc-card {
    border:2px solid var(--s200); border-radius:var(--r); padding:14px 12px;
    background:var(--white); cursor:pointer; text-align:left; display:flex;
    flex-direction:column; gap:5px; transition:all .14s var(--ease);
}
.klby-svc-card:hover { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-lt); }
.klby-svc-card.is-selected { border-color:var(--brand); background:var(--brand-lt); }
.klby-svc-dot  { width:10px; height:10px; border-radius:50%; }
.klby-svc-name { font-family:var(--ff-h); font-size:15px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); line-height:1.2; }
.klby-svc-desc { font-size:12px; color:var(--muted); line-height:1.4; }

.klby-panel-footer { display:flex; justify-content:space-between; align-items:center; padding-top:18px; border-top:1px solid var(--s100); margin-top:8px; }

/* Instance list */
.klby-s2-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.klby-s2-svc    { font-family:var(--ff-h); font-size:17px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--dark); }
.klby-s2-hint   { font-size:12px; color:var(--muted); }
.klby-inst-list { display:flex; flex-direction:column; gap:6px; max-height:360px; overflow-y:auto; margin-bottom:18px; }
.klby-inst-list::-webkit-scrollbar { width:4px; }
.klby-inst-list::-webkit-scrollbar-track { background:var(--s100); }
.klby-inst-list::-webkit-scrollbar-thumb { background:var(--s300); border-radius:2px; }
.klby-inst-loading, .klby-inst-empty { text-align:center; padding:30px; color:var(--muted); }

.klby-inst-row {
    display:flex; align-items:center; gap:10px; padding:11px 14px;
    border:1.5px solid var(--s200); border-radius:var(--r); cursor:pointer;
    transition:all .13s var(--ease); background:var(--white); flex-wrap:wrap;
}
.klby-inst-row:hover:not(.is-disabled) { border-color:var(--brand); background:var(--brand-lt); }
.klby-inst-row.is-selected { border-color:var(--brand); background:var(--brand-lt); }
.klby-inst-row.is-disabled { opacity:.5; cursor:not-allowed; }
.klby-inst-dot  { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.klby-inst-date { font-family:var(--ff-h); font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--dark); min-width:90px; }
.klby-inst-time { font-size:14px; font-weight:600; color:var(--ink); flex:1; min-width:100px; }
.klby-inst-tag  { font-family:var(--ff-h); font-size:11px; font-weight:700; padding:3px 10px; border-radius:100px; letter-spacing:.04em; white-space:nowrap; }
.tag-ok   { background:#D1FAE5; color:#065F46; }
.tag-warn { background:#FEF3C7; color:#78350F; }
.tag-full { background:#FEE2E2; color:#7F1D1D; }
.tag-mine { background:#EEF2FF; color:#312E81; }

/* Overview */
.klby-overview { background:var(--s50); border-radius:var(--r); border-left:4px solid var(--brand); overflow:hidden; margin-bottom:18px; }
.klby-ov-row   { display:flex; align-items:baseline; gap:14px; padding:11px 18px; border-bottom:1px solid var(--s200); }
.klby-ov-row:last-child { border-bottom:none; }
.klby-ov-lbl   { font-family:var(--ff-h); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); min-width:100px; }
.klby-ov-val   { font-size:14px; font-weight:600; color:var(--ink); }
.klby-access-chip { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:100px; font-family:var(--ff-h); font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; background:#F3F4F6; color:var(--ink); }
.klby-access-chip.is-hours  { background:#FEF3C7; color:#92400E; }
.klby-access-chip.is-sub    { background:#D1FAE5; color:#065F46; }
.klby-access-chip.is-token  { background:#EDE9FE; color:#4C1D95; }
.klby-access-chip.is-denied { background:#FEE2E2; color:#7F1D1D; }

.klby-wizard-msg { padding:10px 14px; border-radius:var(--r); font-size:13px; margin-top:8px; }
.klby-wizard-msg.is-error { background:#FEE2E2; color:#7F1D1D; }
.klby-wizard-msg.is-warn  { background:#FEF3C7; color:#78350F; }

/* Confirmed */
.klby-confirmed { text-align:center; padding:48px 24px; animation:klby-pop .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes klby-pop { from{transform:scale(.85);opacity:0} to{transform:scale(1);opacity:1} }
.klby-confirmed-icon { width:68px; height:68px; border-radius:50%; background:#D1FAE5; color:#065F46; font-size:34px; font-weight:900; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; border:3px solid #059669; }
.klby-confirmed-title { font-family:var(--ff-h); font-size:32px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); margin-bottom:10px; }
.klby-confirmed-detail { color:var(--muted); font-size:15px; margin-bottom:26px; line-height:1.6; }

/* ═══════════════════════════════════════════════════════
   3. MY APPOINTMENTS
═══════════════════════════════════════════════════════ */
.klby-appt-table { width:100%; border-collapse:collapse; }
.klby-appt-table thead th {
    font-family:var(--ff-h); font-size:10px; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; color:var(--muted); padding:11px 14px;
    border-bottom:2px solid var(--s200); text-align:left; background:var(--s50);
}
.klby-appt-table tbody tr { border-bottom:1px solid var(--s100); transition:background .12s; }
.klby-appt-table tbody tr:last-child { border-bottom:none; }
.klby-appt-table tbody tr:hover { background:var(--s50); }
.klby-appt-table td { padding:13px 14px; font-size:13px; vertical-align:middle; }
.klby-td-course { display:flex; align-items:center; gap:7px; font-weight:600; }
.klby-appt-dot  { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.klby-td-inst   { color:var(--muted); }
.klby-td-date   { font-weight:600; white-space:nowrap; }
.klby-td-time   { white-space:nowrap; }
.klby-muted     { color:var(--muted); }
.klby-empty-cell { text-align:center; padding:36px 14px !important; color:var(--muted); }

.klby-status-chip { display:inline-block; padding:3px 9px; border-radius:100px; font-family:var(--ff-h); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.klby-status-chip.is-booked   { background:#EEF2FF; color:#3730A3; }
.klby-status-chip.is-attended { background:#D1FAE5; color:#065F46; }
.klby-status-chip.is-cancelled{ background:#F3F4F6; color:#6B7280; }
.klby-status-chip.is-no_show  { background:#FEE2E2; color:#7F1D1D; }

.klby-cancel-btn { font-family:var(--ff-h); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 11px; background:transparent; border:1.5px solid var(--s300); border-radius:var(--r); color:var(--s700); cursor:pointer; transition:all .13s; }
.klby-cancel-btn:hover { border-color:var(--danger); color:var(--danger); background:#FEF2F2; }
.klby-cancel-btn:disabled { opacity:.4; cursor:not-allowed; }

/* ═══════════════════════════════════════════════════════
   4. LEDGER
═══════════════════════════════════════════════════════ */
.klby-bal-hero {
    background:var(--dark); border-radius:var(--r); padding:22px 26px;
    margin-bottom:14px; display:flex; align-items:center;
    justify-content:space-between; flex-wrap:wrap; gap:14px; color:var(--white);
}
.klby-bal-hero-label { font-family:var(--ff-h); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.6; margin-bottom:3px; }
.klby-bal-hero-num   { font-family:var(--ff-h); font-size:48px; font-weight:900; letter-spacing:-.02em; line-height:1; display:flex; align-items:baseline; gap:8px; }
.klby-bal-hero-unit  { font-size:18px; font-weight:400; opacity:.6; }
.klby-bal-hero-right .klby-section-title { color:var(--white); }
.klby-bal-hero-right .klby-section-title::before { background:rgba(255,255,255,.4); }

.klby-ledger-table { width:100%; border-collapse:collapse; font-size:13px; }
.klby-ledger-table thead th {
    font-family:var(--ff-h); font-size:10px; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; color:var(--muted); padding:11px 14px;
    border-bottom:2px solid var(--s200); text-align:left; background:var(--s50);
}
.klby-led-r { text-align:right; }
.klby-ledger-table tbody tr { border-bottom:1px solid var(--s100); transition:background .12s; }
.klby-ledger-table tbody tr:last-child { border-bottom:none; }
.klby-ledger-table tbody tr:hover { background:var(--s50); }
.klby-ledger-table td { padding:10px 14px; vertical-align:middle; }
.klby-led-date { color:var(--muted); white-space:nowrap; }
.klby-led-desc { color:var(--ink); }
.klby-led-amt  { font-family:var(--ff-h); font-size:15px; font-weight:800; text-align:right; white-space:nowrap; }
.klby-led-amt.is-credit { color:var(--ok); }
.klby-led-amt.is-debit  { color:var(--danger); }
.klby-load-more-wrap { padding:14px; text-align:center; border-top:1px solid var(--s100); }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width:680px) {
    .klby-bp { padding:0 10px 60px; }
    .klby-section-title { font-size:20px; }
    .klby-tt-nav-label { min-width:120px; font-size:12px; }
    .klby-wpanel { padding:18px 14px; }
    .klby-svc-grid { grid-template-columns:repeat(2,1fr); }
    .klby-wstep-lbl { display:none; }
    .klby-appt-table thead { display:none; }
    .klby-appt-table tbody tr { display:flex; flex-direction:column; padding:12px 14px; gap:3px; border-bottom:2px solid var(--s200); }
    .klby-appt-table td { padding:2px 0; }
    .klby-bal-hero-num { font-size:36px; }
}