/* Liquid Prime practice booking — shared styles for the parent widget and coach dashboard.
   Scoped under .lsl so it never fights Webflow classes. */
.lsl, .lsl * { box-sizing: border-box; }
.lsl {
  --lsl-bg: #ffffff;
  --lsl-surface: #fbf5f3;
  --lsl-surface-2: #f3ecea;
  --lsl-ink: #2a2625;
  --lsl-ink-2: #696564;
  --lsl-ink-3: #858381;
  --lsl-line: #e4dedb;
  --lsl-accent: #00aeef;
  --lsl-accent-ink: #ffffff;
  --lsl-ok: #1a9e5c;
  --lsl-warn: #d98a00;
  --lsl-danger: #d9483b;
  --lsl-radius: 1rem;
  --lsl-radius-sm: .5rem;
  font-family: Lexend, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--lsl-ink);
  font-size: 15px;
  line-height: 1.5;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 16px;
}
.lsl.lsl-dark {
  --lsl-bg: #2a2625;
  --lsl-surface: #342f2e;
  --lsl-surface-2: #3d3736;
  --lsl-ink: #ffffff;
  --lsl-ink-2: #d0d0ce;
  --lsl-ink-3: #a8a4a2;
  --lsl-line: #4a4442;
}
.lsl h1, .lsl h2, .lsl h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.lsl h2 { font-size: 1.5rem; }
.lsl h3 { font-size: 1.1rem; }
.lsl p { margin: 0; }
.lsl .lsl-muted { color: var(--lsl-ink-2); }
.lsl .lsl-small { font-size: .85rem; }
.lsl .lsl-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 600; color: var(--lsl-accent); }
.lsl .lsl-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.lsl .lsl-between { justify-content: space-between; }
.lsl .lsl-stack { display: grid; gap: 12px; }
.lsl .lsl-header { display: grid; gap: 6px; padding: 8px 0 20px; }

/* chips */
.lsl .lsl-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.lsl .lsl-chip {
  border: 1px solid var(--lsl-line); background: var(--lsl-bg); color: var(--lsl-ink);
  border-radius: 999px; padding: 8px 16px; font: inherit; font-weight: 500; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.lsl .lsl-chip:hover { border-color: var(--lsl-ink-3); }
.lsl .lsl-chip[aria-pressed="true"] { background: var(--lsl-ink); color: var(--lsl-bg); border-color: var(--lsl-ink); }
.lsl.lsl-dark .lsl-chip[aria-pressed="true"] { background: var(--lsl-accent); color: #fff; border-color: var(--lsl-accent); }

/* buttons */
.lsl .lsl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--lsl-accent); color: var(--lsl-accent-ink); border: 0; border-radius: 999px;
  padding: 11px 20px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: filter .15s, transform .05s; white-space: nowrap;
}
.lsl .lsl-btn:hover { filter: brightness(1.08); }
.lsl .lsl-btn:active { transform: translateY(1px); }
.lsl .lsl-btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.lsl .lsl-btn.lsl-ghost { background: transparent; color: var(--lsl-ink); border: 1px solid var(--lsl-line); }
.lsl .lsl-btn.lsl-ghost:hover { border-color: var(--lsl-ink-3); filter: none; }
.lsl .lsl-btn.lsl-danger { background: transparent; color: var(--lsl-danger); border: 1px solid var(--lsl-danger); }
.lsl .lsl-btn.lsl-sm { padding: 7px 14px; font-size: .85rem; }
.lsl .lsl-link { background: none; border: 0; padding: 0; font: inherit; color: var(--lsl-accent); cursor: pointer; text-decoration: underline; }

/* day groups & slot cards */
.lsl .lsl-day { display: grid; gap: 10px; margin-top: 22px; }
.lsl .lsl-day-title { display: flex; align-items: baseline; gap: 10px; }
.lsl .lsl-day-title .lsl-dow { font-weight: 600; font-size: 1.05rem; }
.lsl .lsl-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.lsl .lsl-slot {
  position: relative; display: grid; gap: 10px; padding: 16px 18px;
  background: var(--lsl-surface); border: 1px solid var(--lsl-line); border-radius: var(--lsl-radius);
  border-left: 5px solid var(--team, var(--lsl-accent));
}
.lsl .lsl-slot.lsl-closed { opacity: .6; }
.lsl .lsl-slot.lsl-full { opacity: .5; filter: grayscale(1); }
.lsl .lsl-slot .lsl-time { font-weight: 600; font-size: 1.05rem; }
.lsl .lsl-team-tag { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--lsl-ink-2); }
.lsl .lsl-team-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--team, var(--lsl-accent)); }
.lsl .lsl-spots { font-size: .85rem; color: var(--lsl-ink-2); }
.lsl .lsl-spots b { color: var(--lsl-ink); }
.lsl .lsl-spots.lsl-low b { color: var(--lsl-warn); }
.lsl .lsl-spots.lsl-full b { color: var(--lsl-danger); }
.lsl .lsl-meter { height: 6px; border-radius: 3px; background: var(--lsl-line); overflow: hidden; }
.lsl .lsl-meter > i { display: block; height: 100%; background: var(--team, var(--lsl-accent)); }

/* empty / notice / errors */
.lsl .lsl-notice { padding: 14px 16px; border-radius: var(--lsl-radius-sm); background: var(--lsl-surface); border: 1px solid var(--lsl-line); }
.lsl .lsl-notice.lsl-error { border-color: var(--lsl-danger); color: var(--lsl-danger); background: rgba(217,72,59,.06); }
.lsl .lsl-notice.lsl-success { border-color: var(--lsl-ok); background: rgba(26,158,92,.07); }
.lsl .lsl-empty { padding: 40px 16px; text-align: center; color: var(--lsl-ink-2); border: 1px dashed var(--lsl-line); border-radius: var(--lsl-radius); }
.lsl .lsl-skeleton { height: 96px; border-radius: var(--lsl-radius); background: linear-gradient(90deg, var(--lsl-surface) 25%, var(--lsl-line) 50%, var(--lsl-surface) 75%); background-size: 200% 100%; animation: lsl-sh 1.2s infinite; }
@keyframes lsl-sh { to { background-position: -200% 0; } }

/* forms */
.lsl .lsl-field { display: grid; gap: 6px; }
.lsl .lsl-field label { font-size: .85rem; font-weight: 500; color: var(--lsl-ink-2); }
.lsl input[type=text], .lsl input[type=email], .lsl input[type=tel], .lsl input[type=number], .lsl input[type=date],
.lsl input[type=time], .lsl input[type=datetime-local], .lsl input[type=password], .lsl select, .lsl textarea {
  width: 100%; font: inherit; color: var(--lsl-ink); background: var(--lsl-bg);
  border: 1px solid var(--lsl-line); border-radius: var(--lsl-radius-sm); padding: 10px 12px; outline: none;
}
.lsl input:focus, .lsl select:focus, .lsl textarea:focus { border-color: var(--lsl-accent); box-shadow: 0 0 0 3px rgba(0,174,239,.18); }
.lsl textarea { min-height: 72px; resize: vertical; }
.lsl .lsl-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .lsl .lsl-grid-2 { grid-template-columns: 1fr; } }

/* modal */
.lsl-modal-backdrop { position: fixed; inset: 0; background: rgba(20,16,15,.55); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 9999; }
.lsl-modal { width: 100%; max-width: 520px; max-height: 92vh; overflow: auto; background: var(--lsl-bg, #fff); color: var(--lsl-ink, #2a2625); border-radius: var(--lsl-radius, 1rem); padding: 24px; display: grid; gap: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.lsl-modal .lsl-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.lsl-modal .lsl-x { background: none; border: 0; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--lsl-ink-3); padding: 4px; }
.lsl .lsl-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.4rem; letter-spacing: .25em; font-weight: 700; padding: 10px 14px; background: var(--lsl-surface); border-radius: var(--lsl-radius-sm); display: inline-block; }

/* my bookings list */
.lsl .lsl-mine { display: grid; gap: 8px; }
.lsl .lsl-mine-item { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--lsl-line); border-radius: var(--lsl-radius-sm); background: var(--lsl-bg); border-left: 4px solid var(--team, var(--lsl-accent)); }
.lsl .lsl-status { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; padding: 3px 8px; border-radius: 999px; background: var(--lsl-surface); color: var(--lsl-ink-2); }
.lsl .lsl-status.lsl-cancelled { color: var(--lsl-danger); }

/* ---------- coach dashboard ---------- */
.lsl .lsl-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--lsl-line); margin-bottom: 20px; overflow-x: auto; }
.lsl .lsl-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; font: inherit; font-weight: 500; color: var(--lsl-ink-2); cursor: pointer; white-space: nowrap; }
.lsl .lsl-tab[aria-selected="true"] { color: var(--lsl-ink); border-bottom-color: var(--lsl-accent); }
.lsl .lsl-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.lsl .lsl-toolbar select, .lsl .lsl-toolbar input { width: auto; }
.lsl .lsl-card { background: var(--lsl-surface); border: 1px solid var(--lsl-line); border-radius: var(--lsl-radius); padding: 18px; display: grid; gap: 12px; }
.lsl .lsl-card.lsl-cancelled-slot { opacity: .7; border-style: dashed; }
.lsl table.lsl-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.lsl table.lsl-table th, .lsl table.lsl-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--lsl-line); vertical-align: middle; }
.lsl table.lsl-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--lsl-ink-3); font-weight: 600; }
.lsl table.lsl-table tr:last-child td { border-bottom: 0; }
.lsl .lsl-att { display: inline-flex; border: 1px solid var(--lsl-line); border-radius: 999px; overflow: hidden; }
.lsl .lsl-att button { background: none; border: 0; padding: 4px 10px; font: inherit; font-size: .8rem; cursor: pointer; color: var(--lsl-ink-2); }
.lsl .lsl-att button[aria-pressed="true"].lsl-yes { background: var(--lsl-ok); color: #fff; }
.lsl .lsl-att button[aria-pressed="true"].lsl-no { background: var(--lsl-danger); color: #fff; }
.lsl .lsl-icon-btn { background: none; border: 0; cursor: pointer; color: var(--lsl-ink-3); font: inherit; padding: 4px 6px; border-radius: 6px; }
.lsl .lsl-icon-btn:hover { background: var(--lsl-line); color: var(--lsl-ink); }
.lsl .lsl-login { max-width: 420px; margin: 40px auto; display: grid; gap: 16px; padding: 28px; border: 1px solid var(--lsl-line); border-radius: var(--lsl-radius); background: var(--lsl-surface); }
.lsl .lsl-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.lsl .lsl-kpi { padding: 14px 16px; border-radius: var(--lsl-radius-sm); background: var(--lsl-surface); border: 1px solid var(--lsl-line); }
.lsl .lsl-kpi b { display: block; font-size: 1.5rem; font-weight: 600; }
.lsl .lsl-kpi span { font-size: .8rem; color: var(--lsl-ink-2); }
@media print {
  .lsl .lsl-tabs, .lsl .lsl-toolbar, .lsl .lsl-btn, .lsl .lsl-att, .lsl .lsl-icon-btn, .lsl-no-print { display: none !important; }
  .lsl .lsl-card { break-inside: avoid; border: 1px solid #ccc; }
}