/* Motyw "szklo": gradientowe tlo, matowe panele, godziny w wysuwanym panelu
   na dole. Definiuje zmienne --kw-*, ktorymi steruje sie base.css. */

:root {
  --kw-bg: #0A0716;
  --kw-surface: rgba(255,255,255,.09);
  --kw-fg: #F4F1FF;
  --kw-fg-soft: #A9A2C6;
  --kw-line: rgba(255,255,255,.16);
  --kw-accent: #A78BFA;
  --kw-accent-fg: #16102B;
  --kw-danger: #FB7185;
  --kw-danger-fg: #22101A;
  --kw-radius: 20px;
  --kw-font: 'Sora', sans-serif;
  --kw-font-head: 'Sora', sans-serif;
  --kw-font-mono: 'DM Mono', monospace;
  --kw-shadow: 0 8px 40px rgba(0,0,0,.32);
}

body { background: var(--kw-bg); overflow-x: hidden; }

/* --- gradientowe tlo --- */

.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.aurora i {
  position: absolute; display: block; border-radius: 50%; filter: blur(90px); opacity: .55;
}
.aurora i:nth-child(1) { width: 520px; height: 520px; background: #7C3AED; top: -140px; left: -90px; animation: float1 18s ease-in-out infinite; }
.aurora i:nth-child(2) { width: 460px; height: 460px; background: #DB2777; top: 22%; right: -130px; animation: float2 22s ease-in-out infinite; }
.aurora i:nth-child(3) { width: 500px; height: 500px; background: #0EA5E9; bottom: -190px; left: 26%; animation: float3 26s ease-in-out infinite; }
@keyframes float1 { 50% { transform: translate(60px, 70px) scale(1.12); } }
@keyframes float2 { 50% { transform: translate(-70px, 50px) scale(.9); } }
@keyframes float3 { 50% { transform: translate(40px, -60px) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .aurora i { animation: none; } }

.wrap { max-width: 700px; margin: 0 auto; padding: 34px 20px 120px; }

/* --- naglowek --- */

.top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.eyebrow {
  font-family: var(--kw-font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--kw-accent); margin-bottom: 6px;
}
h1 { font-size: 30px; font-weight: 600; letter-spacing: -.02em; margin: 0; }

.tabs {
  display: flex; gap: 3px; padding: 4px; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid var(--kw-line);
  backdrop-filter: blur(12px);
}
.tabs button {
  font: 500 12.5px var(--kw-font); padding: 7px 15px; border: none;
  background: transparent; color: var(--kw-fg-soft); border-radius: 999px; cursor: pointer;
  transition: all .15s ease;
}
.tabs button.active { background: rgba(255,255,255,.9); color: #1A1430; font-weight: 600; }
.tabs button:hover:not(.active) { color: var(--kw-fg); }

/* --- szklana karta --- */

.glass {
  background: rgba(255,255,255,.08);
  border: 1px solid var(--kw-line);
  border-radius: 26px;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: var(--kw-shadow), inset 0 1px 0 rgba(255,255,255,.16);
  padding: 24px;
}

.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.cal-head .m { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.cal-head .m span { color: var(--kw-fg-soft); font-weight: 400; }
.cal-head div { display: flex; gap: 6px; }
.cal-head button {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1;
  border: 1px solid var(--kw-line); background: rgba(255,255,255,.07); color: var(--kw-fg);
  transition: all .15s ease;
}
.cal-head button:hover:not(:disabled) { background: rgba(255,255,255,.18); }
.cal-head button:disabled { opacity: .3; cursor: not-allowed; }

.dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 8px; }
.dow span {
  text-align: center; font-family: var(--kw-font-mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--kw-fg-soft);
}
.grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }

.cell {
  position: relative; aspect-ratio: 1; border-radius: 14px; cursor: pointer;
  border: 1px solid transparent; background: rgba(255,255,255,.05);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 14px; font-weight: 500; transition: all .16s ease;
}
.cell:hover:not(.off) { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.cell.off { opacity: .22; cursor: not-allowed; background: transparent; }
.cell.today { border-color: var(--kw-accent); }
.cell.sel { background: rgba(255,255,255,.94); color: #1A1430; font-weight: 600; }
.cell .pip { width: 4px; height: 4px; border-radius: 50%; background: var(--kw-accent); }
.cell.sel .pip { background: #7C3AED; }
.cell.none .pip { background: var(--kw-fg-soft); opacity: .5; }

.legend {
  display: flex; gap: 8px 16px; justify-content: center; flex-wrap: wrap;
  margin-top: 18px; font-size: 11.5px; color: var(--kw-fg-soft);
}
/* Te same wymiary i kolory co .cell .pip - legenda ma pokazywac dokladnie to,
   co widac w siatce, wiec obie reguly trzymamy obok siebie. */
.legend .legend-pip {
  display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--kw-accent); vertical-align: middle; margin-right: 6px;
}
/* odpowiednik .cell.none .pip */
.legend .legend-pip.none { background: var(--kw-fg-soft); opacity: .5; }

/* --- krok 1: wybor uslugi --- */

.step-badge {
  font-family: var(--kw-font-mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--kw-accent); margin: 0 0 8px;
}
.step-title { font-size: 21px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 6px; }
.step-lead { font-size: 13.5px; line-height: 1.55; color: var(--kw-fg-soft); margin: 0 0 20px; }

.svc-list { display: flex; flex-direction: column; gap: 9px; }
.svc {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px;
  width: 100%; text-align: left; cursor: pointer;
  padding: 15px 18px; border-radius: 16px;
  border: 1px solid var(--kw-line); background: rgba(255,255,255,.06); color: var(--kw-fg);
  font-family: var(--kw-font); transition: all .16s ease;
}
.svc:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.svc-name { font-size: 15px; font-weight: 600; }
.svc-time {
  font-family: var(--kw-font-mono); font-size: 12.5px; color: var(--kw-accent);
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--kw-line);
  white-space: nowrap;
}
.svc-go { font-size: 20px; color: var(--kw-fg-soft); line-height: 1; }

/* --- pasek wybranej uslugi nad kalendarzem --- */

.chosen {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 13px 18px; margin-bottom: 16px; border-radius: 16px;
  border: 1px solid var(--kw-line); background: rgba(255,255,255,.07);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.chosen-label {
  display: block; font-family: var(--kw-font-mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--kw-fg-soft); margin-bottom: 2px;
}
.chosen-name { font-size: 14.5px; font-weight: 600; }
.chosen-name em { font-style: normal; font-weight: 400; color: var(--kw-fg-soft); }
.chosen-change {
  font: 600 12.5px var(--kw-font); padding: 7px 15px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--kw-line); background: transparent; color: var(--kw-fg);
  transition: all .15s ease;
}
.chosen-change:hover { background: rgba(255,255,255,.16); }

/* --- wysuwany panel z godzinami --- */

.sheet-bg {
  position: fixed; inset: 0; z-index: 55; background: rgba(6,4,14,.55);
  animation: fade .2s ease;
}
@keyframes fade { from { opacity: 0; } }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 56;
  /* Przewija sie sama lista godzin (.pills), a nie caly panel - dzieki temu
     naglowek z krzyzykiem i przycisk na dole zostaja na swoim miejscu. */
  max-height: 82vh; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 22px 22px calc(22px + env(safe-area-inset-bottom));
  border-radius: 26px 26px 0 0;
  background: rgba(24,18,44,.82);
  border-top: 1px solid var(--kw-line);
  backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
  box-shadow: 0 -18px 50px rgba(0,0,0,.45);
  animation: rise .26s cubic-bezier(.22,.9,.3,1);
}
@keyframes rise { from { transform: translateY(100%); } }
@media (min-width: 720px) { .sheet { left: 50%; right: auto; width: 660px; transform: translateX(-50%); }
  @keyframes rise { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } } }

.sheet-grab { width: 40px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.28); margin: -6px auto 16px; flex: none; }
/* padding-right robi miejsce na krzyzyk, zeby data go nie podchodzila */
.sheet h3 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 2px; padding-right: 44px; flex: none; }
.sheet .sub { font-size: 12.5px; color: var(--kw-fg-soft); margin: 0 0 18px; padding-right: 44px; flex: none; }

.sheet-x {
  position: absolute; top: 16px; right: 18px; z-index: 1;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  border: 1px solid var(--kw-line); background: rgba(255,255,255,.07); color: var(--kw-fg);
  /* Znak "×" w tym kroju siedzi wizualnie wyzej niz srodek swojego pola,
     wiec padding od gory spycha go o ok. 2px w dol, do srodka okregu. */
  font-family: var(--kw-font); font-size: 21px; line-height: 1; padding: 1px 0 0;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.sheet-x:hover { background: rgba(255,255,255,.2); }
.sheet-x:active { transform: scale(.92); }

/* Lista godzin. min-height:0 jest konieczne, zeby element flex w ogole mogl sie
   skurczyc i zaczac przewijac, zamiast rozpychac panel. */
.pills {
  display: flex; flex-direction: column;
  overflow-y: auto; min-height: 0; padding: 2px;
}

/* Jedna godzina zegarowa = jeden blok. Osobna siatka na blok gwarantuje, ze
   terminy z roznych godzin nigdy nie znajda sie w tym samym wierszu.
   Kafelki sa waskie, bo przy siatce co 10 minut jest ich duzo. */
.hour-block {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px; padding: 11px 0;
}
.hour-block:first-child { padding-top: 0; }
.hour-block:last-child { padding-bottom: 0; }
/* Subtelna kreska rozdzielajaca kolejne godziny. */
.hour-block + .hour-block { border-top: 1px solid rgba(255,255,255,.09); }
.pill {
  padding: 13px 8px; border-radius: 14px; cursor: pointer; text-align: center;
  border: 1px solid var(--kw-line); background: rgba(255,255,255,.07); color: var(--kw-fg);
  font: 500 13.5px var(--kw-font-mono); transition: all .15s ease;
}
.pill:hover:not(:disabled) { background: rgba(255,255,255,.9); color: #1A1430; border-color: transparent; }
.pill:disabled { opacity: .3; cursor: not-allowed; text-decoration: line-through; }
.pill small { display: block; font-family: var(--kw-font); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; margin-top: 3px; opacity: .75; }

.sheet-close {
  display: block; width: 100%; margin-top: 18px; padding: 12px; flex: none;
  border-radius: 14px; cursor: pointer; font: 600 13px var(--kw-font);
  border: 1px solid var(--kw-line); background: transparent; color: var(--kw-fg-soft);
}
.sheet-close:hover { color: var(--kw-fg); background: rgba(255,255,255,.07); }

/* panele wspoldzielone (odwolanie, panel admina) tez maja byc szklane */
.kw-panel { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.kw-input { background: rgba(255,255,255,.07); }
.kw-modal { background: rgba(28,21,50,.94); backdrop-filter: blur(22px); }