/* ==========================================================================
   Podstrona rejestracji. Korzysta z tokenów i przycisków landingu, dokłada
   tylko formularz i panel podsumowania.
   ========================================================================== */

.trial-page { background: var(--ink-50); }

.trial {
  position: relative; overflow: hidden;
  background: #1a0740;
  padding: 26px 0 96px;
}
/* To samo płynące tło co w hero landingu */
.trial::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,6,50,0.55) 0%, rgba(20,6,50,0.06) 45%, rgba(20,6,50,0.55) 100%);
}
.trial-inner {
  position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: 56px; align-items: start;
}

/* ===== Belka podstron =====
   Rejestracja i kalendarz nie mają menu. Zostaje powrót na stronę główną,
   przełącznik języka i jedno wyjście w drugą stronę lejka. */
.page-bar { position: relative; z-index: 3; margin-bottom: 54px; }
.page-bar-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.page-back {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  color: rgba(255,255,255,0.6); transition: color 0.22s ease;
}
.page-back:hover { color: var(--white); }
.page-back svg { width: 18px; height: 18px; flex: none; }
.page-back img { width: 30px; height: 30px; border-radius: 9px; }
.page-back span { font-size: 18px; font-weight: 800; letter-spacing: -0.03em; color: var(--white); }
.page-bar-ctas { display: flex; align-items: center; gap: 10px; }
.page-bar .btn { padding: 9px 18px; font-size: 14px; border-radius: 10px; }

/* ===== Lewa kolumna ===== */
.trial-copy { color: var(--white); padding-top: 6px; }
.trial h1 {
  font-size: clamp(32px, 3.4vw, 46px); font-weight: 900; line-height: 1.12;
  color: var(--white); margin-bottom: 16px;
}
.trial h1 .grad {
  background: linear-gradient(120deg, var(--fuchsia-400), #f5d0fe 45%, #c4b5fd);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.trial-sub { font-size: 16.5px; line-height: 1.65; color: rgba(237,233,254,0.85); margin-bottom: 28px; max-width: 560px; }

.trial-list { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; max-width: 560px; }
.trial-list li { display: flex; gap: 12px; font-size: 14.5px; line-height: 1.6; color: rgba(237,233,254,0.8); }
.trial-list svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--fuchsia-400); }
.trial-list b { color: var(--white); font-weight: 600; }

/* Panel w estetyce aplikacji, żeby podstrona nie była samym tekstem */
.trial-panel {
  background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
  border-radius: 14px; padding: 16px 18px; max-width: 560px; margin-bottom: 24px;
}
.tp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tp-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(196,181,253,0.85); flex: 1;
}
.tp-ai {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 11px; font-weight: 700; color: var(--white);
  background: var(--grad-brand); border-radius: 100px; padding: 4px 10px;
}
.tp-ai svg { width: 12px; height: 12px; }
.tp-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-top: 1px solid rgba(255,255,255,0.09); font-size: 13.5px; color: rgba(237,233,254,0.85);
}
.tp-row:first-of-type { border-top: 0; }
.tp-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: rgba(255,255,255,0.28); }
.tp-row.is-done .tp-dot { background: #34c77b; }
.tp-text { flex: 1; }
.tp-time { font-size: 12px; color: rgba(196,181,253,0.7); white-space: nowrap; }

.trial-trust { display: flex; flex-wrap: wrap; gap: 20px; font-size: 12.5px; color: rgba(196,181,253,0.75); }
.trial-trust span { display: inline-flex; align-items: center; gap: 8px; }
.trial-trust svg { width: 15px; height: 15px; flex: none; }

/* ===== Karta formularza ===== */
.trial-formwrap { position: sticky; top: 24px; }
.trial-form, .trial-done {
  background: var(--white); border-radius: 18px; padding: 28px;
  box-shadow: var(--shadow-window);
}
.form-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 6px; }
.form-sub { font-size: 14px; color: var(--ink-600); line-height: 1.6; margin-bottom: 22px; }

.field { margin-bottom: 20px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-label {
  display: block; font-size: 13px; font-weight: 600; color: var(--ink-800); margin-bottom: 9px;
}

.input {
  width: 100%; padding: 11px 14px; border-radius: 10px; font-size: 14.5px;
  color: var(--ink-900); background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--ink-300);
  transition: box-shadow 0.2s ease;
}
.input::placeholder { color: var(--ink-400); }
.input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--violet-500), 0 0 0 4px rgba(139,92,246,0.14); }

/* Wybór jednokrotny w formie kafelków */
.choice-grid { display: grid; gap: 10px; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice-body {
  display: block; padding: 13px 15px 13px 42px; border-radius: 12px;
  box-shadow: inset 0 0 0 1.5px var(--ink-200); transition: box-shadow 0.2s ease, background 0.2s ease;
}
.choice-body::before {
  content: ''; position: absolute; left: 15px; top: 16px;
  width: 16px; height: 16px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--ink-300); transition: box-shadow 0.2s ease;
}
.choice-body b { display: block; font-size: 14px; font-weight: 600; color: var(--ink-900); margin-bottom: 2px; }
.choice-body small { display: block; font-size: 12.5px; color: var(--ink-500); line-height: 1.5; }
.choice:hover .choice-body { box-shadow: inset 0 0 0 1.5px var(--ink-300); }
.choice input:checked + .choice-body {
  background: var(--violet-50); box-shadow: inset 0 0 0 1.5px var(--violet-500);
}
.choice input:checked + .choice-body::before {
  box-shadow: inset 0 0 0 5px var(--violet-600);
}
.choice input:focus-visible + .choice-body { box-shadow: inset 0 0 0 1.5px var(--violet-500), 0 0 0 4px rgba(139,92,246,0.14); }

/* Wielkość zespołu */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.pill span {
  display: inline-block; padding: 9px 16px; border-radius: 100px; font-size: 13.5px; font-weight: 600;
  color: var(--ink-700); box-shadow: inset 0 0 0 1.5px var(--ink-200); transition: 0.2s ease;
}
.pill:hover span { box-shadow: inset 0 0 0 1.5px var(--ink-300); }
.pill input:checked + span { background: var(--violet-600); color: var(--white); box-shadow: none; }
.pill input:focus-visible + span { box-shadow: inset 0 0 0 1.5px var(--violet-500), 0 0 0 4px rgba(139,92,246,0.14); }

.field-error { display: none; font-size: 12.5px; color: #d1344b; margin-top: 7px; }
.field.has-error .field-error { display: block; }
.field.has-error .input { box-shadow: inset 0 0 0 1.5px #e4899a; }

.form-submit { width: 100%; margin-top: 4px; }
.form-note { font-size: 12px; color: var(--ink-500); line-height: 1.6; margin-top: 14px; text-align: center; }
.form-note a { color: var(--violet-600); text-decoration: none; }
.form-note a:hover { text-decoration: underline; }
/* Komunikat, gdy wysyłka nie doszła. Zgłoszenie nie może zniknąć po cichu. */
.form-fail {
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  background: #fdf2f4; box-shadow: inset 0 0 0 1.5px #f0c3cc;
  font-size: 13px; line-height: 1.55; color: #8d2438;
}
.form-fail a { color: #8d2438; font-weight: 600; }
.form-submit:disabled { opacity: 0.7; cursor: progress; }

/* ===== Potwierdzenie ===== */
.done-mark {
  width: 52px; height: 52px; border-radius: 16px; margin-bottom: 18px;
  background: var(--grad-brand); color: var(--white);
  display: flex; align-items: center; justify-content: center;
}
.done-mark svg { width: 26px; height: 26px; }
.done-title { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
.done-lead { font-size: 15px; line-height: 1.65; color: var(--ink-600); margin-bottom: 22px; }
.done-lead b { color: var(--ink-900); font-weight: 600; }
.done-card { background: var(--ink-50); border-radius: 14px; padding: 18px; margin-bottom: 22px; }
.done-kicker {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-500); margin-bottom: 12px;
}
.done-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.done-list li {
  position: relative; padding-left: 26px; font-size: 13.5px; line-height: 1.55; color: var(--ink-700);
}
.done-list li::before {
  content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--violet-100); box-shadow: inset 0 0 0 4px var(--violet-600);
}
/* Kroki rejestracji: numeracja w kolorze marki, bez kropek z przeglądarki */
.done-steps { list-style: none; counter-reset: krok; display: flex; flex-direction: column; gap: 12px; }
.done-steps li {
  counter-increment: krok; position: relative; padding-left: 34px;
  font-size: 13.5px; line-height: 1.6; color: var(--ink-600);
}
.done-steps li::before {
  content: counter(krok); position: absolute; left: 0; top: -1px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--grad-brand); color: var(--white);
  font-size: 12px; font-weight: 700; line-height: 24px; text-align: center;
}
.done-steps b { color: var(--ink-900); font-weight: 600; }

.done-extra { font-size: 13px; line-height: 1.65; color: var(--ink-600); margin: -8px 0 22px; }
.done-extra a { color: var(--violet-600); font-weight: 600; text-decoration: none; }
.done-extra a:hover { text-decoration: underline; }
.done-warn { color: #8d2438; }
.done-warn a { color: #8d2438; }

.done-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.done-ctas .btn { flex: 1; }

@media (max-width: 1024px) {
  .trial { padding: 22px 0 72px; }
  .trial-inner { grid-template-columns: 1fr; gap: 40px; }
  .trial-formwrap { position: static; }
  .trial-copy { order: 2; }
  .trial-formwrap { order: 1; }
}
@media (max-width: 600px) {
  .trial-inner, .page-bar-inner { padding: 0 20px; }
  .page-bar { margin-bottom: 38px; }
  .page-back span { display: none; }
  .trial-form, .trial-done { padding: 22px 18px; }
  .field-row { grid-template-columns: 1fr; gap: 20px; }
  .done-ctas .btn { flex: none; width: 100%; }
}

/* ==========================================================================
   Podstrona z kalendarzem
   ========================================================================== */
.book-inner { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
.book .trial-sub, .book .trial-list { max-width: none; }

.book-card {
  background: var(--white); border-radius: 18px; box-shadow: var(--shadow-window);
  padding: 20px 20px 16px;
}
.book-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.book-title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.book-tz { font-size: 12.5px; color: var(--ink-500); }
/* Kalendarz Google renderuje się we własnej ramce, my dajemy tylko kadr */
.book-embed {
  display: block; width: 100%; height: 720px; border: 0;
  border-radius: 12px; background: var(--ink-50);
}
.book-note { font-size: 12px; color: var(--ink-500); text-align: center; margin-top: 12px; }
.book-note a { color: var(--violet-600); font-weight: 600; text-decoration: none; }
.book-note a:hover { text-decoration: underline; }
.book-alt { font-size: 13.5px; line-height: 1.6; color: rgba(237,233,254,0.8); margin-bottom: 22px; }
.book-alt a { color: #f5d0fe; font-weight: 600; text-decoration: none; }
.book-alt a:hover { text-decoration: underline; }

@media (max-width: 1024px) {
  .book-inner { grid-template-columns: 1fr; }
  .book-card { order: 1; }
  .book .trial-copy { order: 2; }
}
@media (max-width: 600px) {
  .book-card { padding: 16px 14px 12px; }
  .book-embed { height: 680px; }
}