/* =========================================================
   biorytm24.pl — theme.css
   Nowy system wizualny (2026 redesign)
   SAMODZIELNY arkusz stylów — bootstrap.min.css i stary index.css
   zostały CAŁKOWICIE usunięte z head.common (były źródłem
   konfliktów: sprzeczne resety, position:fixed header, stare
   kolory). Ten plik odpowiada teraz za 100% wyglądu strony,
   łącznie z małym zestawem zamienników klas Bootstrapa, których
   nadal używa Chart.class.php (progress, form-control, rounded itd.)
   — patrz sekcja "LEGACY SHIMS" niżej.
   ========================================================= */

:root{
  --bg: #EEF3F0;
  --bg-alt: #E4ECE6;
  --ink: #10221D;
  --ink-soft: #4B5C55;
  --line: #D4DED8;
  --card: #FFFFFF;

  --hero: #0D2622;
  --hero-line: rgba(255,255,255,0.14);
  --hero-text: #EAF3EF;
  --hero-text-soft: #A9C2B9;

  --physical: #D6483F;
  --physical-soft: #FBE4E1;
  --emotional: #2E8368;
  --emotional-soft: #DFF0E7;
  --intellectual: #6E56C7;
  --intellectual-soft: #E9E4F8;
  --amber: #C98A2B;
  --amber-soft: #F6E9D3;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

/* ---------- RESET (zastępuje bootstrap.min.css) ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; }
h1,h2,h3,h4,h5,h6,p,figure{ margin:0; }
ul,ol{ margin:0; padding:0; }
img,svg{ max-width:100%; display:block; }
button,input,textarea,select{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:none; }
table{ border-collapse:collapse; }

body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.4;
}
.site-header{ position: static; background: transparent; }
a{ color: inherit; }
.t24-wrap{ max-width: 1120px; margin: 0 auto; padding: 0 32px; }

/* ---------- NAV ---------- */
.t24-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 32px; max-width:1120px; margin:0 auto; position:relative; z-index:20;
}
.t24-nav-logo{
  font-family:var(--serif); font-weight:600; font-size:21px; letter-spacing:-0.01em;
  display:flex; align-items:center; gap:9px; color:var(--ink);
}
.t24-nav-logo .dot{ width:8px; height:8px; border-radius:50%; background:var(--physical); display:inline-block; }
.t24-nav-links{ display:flex; gap:30px; font-size:14px; font-weight:500; color:var(--ink-soft); list-style:none; margin:0; padding:0; }
.t24-nav-links a{ color:var(--ink-soft); }
.t24-nav-links a:hover, .t24-nav-links a.active{ color:var(--ink); }
.t24-nav-cta{ font-size:13px; font-weight:600; background:var(--ink); color:#fff; padding:10px 18px; border-radius:100px; }
.t24-nav-toggle{ display:none; }

.t24-crumbs{ max-width:1120px; margin:0 auto; padding:0 32px; font-size:13px; color:var(--ink-soft); display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.t24-crumbs a:hover{ color:var(--ink); }
.t24-crumbs span.sep{ color:#B7C4BE; }

/* ---------- AD SLOTS ---------- */
.t24-ad-slot{ max-width:1120px; margin:20px auto 0; padding:0 32px; }
.t24-ad-box{
  border:1.5px dashed #C3CFC9; border-radius:14px; background:#F7FAF8;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:18px; text-align:center; color:#8FA098; font-size:12px; font-family:var(--mono);
  letter-spacing:0.02em; gap:4px;
}
.t24-ad-box .tag{
  font-size:10px; text-transform:uppercase; letter-spacing:0.08em;
  background:#E4ECE6; color:#5C6D66; padding:3px 9px; border-radius:100px; margin-bottom:6px;
}
.t24-ad-h1{ min-height:100px; }
.t24-ad-infeed{ min-height:120px; }
.t24-ad-article{ min-height:250px; }
.t24-ad-anchor{
  position: fixed; bottom:0; left:0; right:0; z-index:900;
  background:#F7FAF8; border-top:1.5px dashed #C3CFC9;
  display:none;
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
}
.t24-ad-anchor .t24-ad-box{ min-height:50px; border-radius:10px; margin:0 auto; max-width:480px; }
.t24-ad-anchor-close{
  position:absolute; top:2px; right:8px; font-family:var(--mono); font-size:14px; color:#8FA098;
  background:none; border:none; cursor:pointer; padding:6px;
}
@media (max-width: 800px){
  .t24-ad-anchor{ display:block; }
  body.t24-has-anchor-ad{ padding-bottom:64px; }
}

/* ---------- HERO ---------- */
.t24-hero{
  background:var(--hero); color:var(--hero-text);
  border-radius:0 0 40px 40px; padding:40px 0 0; position:relative; overflow:hidden;
}
.t24-hero-inner{ max-width:1120px; margin:0 auto; padding:16px 32px 0; position:relative; z-index:2; }
.t24-eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:0.06em; color:var(--hero-text-soft);
  text-transform:uppercase; display:flex; align-items:center; gap:10px; margin-bottom:20px;
}
.t24-eyebrow::before{ content:''; width:16px; height:1px; background:var(--hero-text-soft); }
.t24-hero h1{
  font-family:var(--serif); font-weight:500; font-size:44px; line-height:1.1;
  letter-spacing:-0.01em; max-width:640px; margin:0 0 16px; color:var(--hero-text);
}
.t24-hero h1 em{ font-style:italic; color:#F2B98A; font-weight:400; }
.t24-hero-sub{ font-size:16px; line-height:1.6; color:var(--hero-text-soft); max-width:500px; margin:0 0 30px; }

/* form fields inside hero (dob-form, date-input) */
.t24-hero-form{ display:flex; gap:10px; align-items:end; flex-wrap:wrap; margin-bottom:28px; }
.t24-field{ display:flex; flex-direction:column; gap:8px; }
.t24-field label{ font-family:var(--mono); font-size:11.5px; color:var(--hero-text-soft); text-transform:uppercase; letter-spacing:0.04em; }
.t24-hero-form input[type="text"],
.t24-hero-form select{
  background:rgba(255,255,255,0.08) !important; border:1px solid var(--hero-line) !important;
  color:#fff !important; font-family:var(--mono); font-size:15px; padding:14px 16px;
  border-radius:12px; min-width:150px; height:auto !important;
}
.t24-hero-form input::placeholder{ color:var(--hero-text-soft); opacity:1; }
.t24-hero-form select option{ color:#111; }
.t24-btn-primary{
  background:#F2B98A; color:#231205 !important; font-weight:600; font-size:15px;
  padding:14px 24px; border-radius:12px; border:none; cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:8px;
}
.t24-btn-primary:hover{ background:#f6c99f; color:#231205; }
/* Wariant ciemny (na jasnym tle karty) — .t24-btn-primary ma color:#231205 !important
   (dopasowane do jasnego tła #F2B98A w hero), więc zwykły inline style="color:#fff"
   nigdy go nie przebije. Ten modyfikator ma własny !important i ładuje się PO
   .t24-btn-primary, więc wygrywa przy tej samej specyficzności. */
.t24-btn-dark{ background:var(--ink) !important; color:#fff !important; }
.t24-btn-dark:hover{ background:#1a3a33 !important; color:#fff !important; }
.t24-share-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.t24-share-btn{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:13px; font-weight:600;
  background:var(--card); border:1px solid var(--line); color:var(--ink); padding:10px 16px; border-radius:100px;
}
.t24-share-btn:hover{ background:var(--bg-alt); }
.t24-share-icon{ font-size:14px; }
.t24-share-status{ font-size:13px; color:var(--emotional); font-weight:600; }

/* ---------- KALENDARZ MIESIĘCZNY (dni krytyczne) ---------- */
.t24-calendar-dow{
  display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-bottom:8px;
}
.t24-calendar-dow span{
  text-align:center; font-family:var(--mono); font-size:11px; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:0.03em;
}
.t24-calendar-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.t24-cal-day{
  aspect-ratio:1; background:var(--card); border:1px solid var(--line); border-radius:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.t24-cal-day.t24-cal-empty{ background:transparent; border:none; }
.t24-cal-day.today{ border-color:var(--ink); background:var(--bg-alt); }
.t24-cal-num{ font-family:var(--mono); font-size:13px; color:var(--ink); }
.t24-cal-dots{ display:flex; gap:3px; }
.t24-cal-dots i{ width:6px; height:6px; border-radius:50%; display:inline-block; }
@media (max-width:800px){
  .t24-calendar-dow, .t24-calendar-grid{ gap:5px; }
  .t24-cal-num{ font-size:11px; }
}

/* decorative wave */
.t24-wave-stage{ position:relative; height:170px; margin-top:4px; }
.t24-wave-stage svg{ position:absolute; inset:0; width:100%; height:100%; }
.t24-today-flag{ position:absolute; left:62%; top:8px; bottom:16px; width:1px; background:rgba(255,255,255,0.35); }
.t24-today-flag span{
  position:absolute; top:-22px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:11px; color:var(--hero-text-soft); background:var(--hero); padding:0 8px; white-space:nowrap;
}
.t24-wave-legend{
  display:flex; gap:22px; padding:14px 0 30px; border-top:1px solid var(--hero-line); margin-top:4px;
  font-size:13px; color:var(--hero-text-soft); flex-wrap:wrap;
}
.t24-wave-legend span{ display:flex; align-items:center; gap:7px; }
.t24-wave-legend i{ width:14px; height:2px; display:inline-block; border-radius:2px; }

/* ---------- SECTION / TYPOGRAPHY ---------- */
.t24-section{ max-width:1120px; margin:0 auto; padding:56px 32px; }
/* WAŻNE: .t24-section-narrow ma teraz DOKŁADNIE tę samą szerokość co
   zwykła .t24-section — żadnego dodatkowego ograniczenia szerokości
   dzieci. Wcześniejsza wersja zawężała tekst do 700px/880px wewnątrz
   1120px-owej sekcji, co wyglądało na "urwane w połowie" względem
   sąsiednich pełnoszerokich sekcji (kalendarz, karty). Teraz wszystko
   na stronie ma identyczną szerokość i te same krawędzie. */
.t24-section-narrow{ max-width:1120px; }
.t24-section-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:26px; flex-wrap:wrap; gap:10px; }
.t24-label{ font-family:var(--mono); font-size:12px; letter-spacing:0.06em; color:var(--ink-soft); text-transform:uppercase; }
.t24-section h2{ font-family:var(--serif); font-weight:500; font-size:27px; margin:6px 0 0; letter-spacing:-0.01em; color:var(--ink); }
.t24-prose p{ font-size:15px; line-height:1.75; color:#2C3B36; margin:0 0 16px; }
.t24-prose strong{ color:var(--ink); }
.t24-prose ul{ padding-left:20px; margin:0 0 16px; }
.t24-prose li{ font-size:15px; line-height:1.7; color:#2C3B36; margin-bottom:6px; }
.t24-note{
  background:var(--card); border:1px solid var(--line); border-left:3px solid var(--amber);
  border-radius:0 12px 12px 0; padding:16px 20px; font-size:13.5px; color:var(--ink-soft); line-height:1.6;
}
.t24-note strong{ color:var(--ink); }

/* ---------- SNAPSHOT CARDS ---------- */
.t24-snap-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.t24-snap-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); padding:24px; }
.t24-snap-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; }
.t24-snap-name{ font-size:14px; font-weight:600; }
.t24-snap-pct{ font-family:var(--mono); font-size:24px; font-weight:500; }
.t24-snap-bar{ height:6px; border-radius:4px; background:var(--bg-alt); overflow:hidden; margin-bottom:12px; }
.t24-snap-bar i{ display:block; height:100%; border-radius:4px; }
.t24-snap-desc{ font-size:13px; color:var(--ink-soft); line-height:1.5; }
.c-physical .t24-snap-pct,.c-physical .t24-snap-name{ color:var(--physical); } .c-physical .t24-snap-bar i{ background:var(--physical); }
.c-emotional .t24-snap-pct,.c-emotional .t24-snap-name{ color:var(--emotional); } .c-emotional .t24-snap-bar i{ background:var(--emotional); }
.c-intellectual .t24-snap-pct,.c-intellectual .t24-snap-name{ color:var(--intellectual); } .c-intellectual .t24-snap-bar i{ background:var(--intellectual); }

/* ---------- LEGACY SHIMS ----------
   Chart.class.php (silnik obliczeń biorytmu) generuje HTML z gotowymi
   klasami Bootstrapa (progress, form-control, rounded, shadow-lg, itd.).
   Nie ingerujemy w tę logikę PHP (ryzykowne), więc odtwarzamy tu tylko
   wygląd tych konkretnych klas, które faktycznie są używane —
   bez ciągnięcia całego Bootstrapa. */
.mx-auto{ margin-left:auto; margin-right:auto; }
.d-block{ display:block; }
.text-center{ text-align:center; }
.mb-4{ margin-bottom:1.5rem; }
.rounded{ border-radius:12px; }
.shadow-lg{ box-shadow:none; }
.display-4{ font-size:2.5rem; font-weight:400; line-height:1.1; }
.progress{
  display:flex; height:22px; overflow:hidden; font-size:11px;
  background-color:var(--bg-alt); border-radius:8px;
}
.progress-bar{
  display:flex; flex-direction:column; justify-content:center; text-align:center;
  white-space:nowrap; color:#fff; background-color:var(--emotional);
  font-family:var(--mono); font-weight:600; transition:width .6s ease;
}
.bg-success{ background-color:var(--emotional) !important; }
.bg-warning{ background-color:var(--amber) !important; }
.bg-danger{ background-color:var(--physical) !important; }
.bg-info{ background-color:var(--intellectual) !important; }
.form-control{
  display:block; width:100%; padding:12px 14px; font-size:14px;
  border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink);
}

/* Przycisk "do góry" (to-top.tpl.php) — wcześniej stylowany w usuniętym index.css */
.cd-top{
  display:inline-block; height:44px; width:44px; position:fixed; bottom:24px; right:16px;
  z-index:400; border-radius:50%; background:var(--ink); color:#fff !important;
  text-indent:-9999px; overflow:hidden; opacity:0; visibility:hidden; transition:opacity .25s ease;
}
.cd-top::after{
  content:'↑'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-indent:0; font-size:18px; font-family:var(--sans);
}
.cd-top--show{ opacity:1; visibility:visible; }
.cd-top--fade-out{ opacity:.55; }
@media (max-width:800px){ .cd-top{ bottom:76px; right:12px; } }
body.t24-has-anchor-ad .cd-top{ bottom:88px; }

/* Bootstrap tooltip (data-toggle="tooltip") — minimalna, spójna z motywem wersja */
.tooltip{ font-family:var(--sans); font-size:12px; z-index:1000; }
.tooltip .tooltip-inner{
  background:var(--ink); color:#fff; padding:6px 10px; border-radius:8px; max-width:220px;
}
.tooltip .arrow::before{ border-top-color:var(--ink) !important; }

/* Listy w tekstach prawnych (polityka prywatności) — zwykłe wypunktowanie/numeracja,
   bo globalny reset wyżej usuwa domyślne style list. */
.t24-legal h2{ font-family:var(--serif); font-weight:500; font-size:19px; margin:32px 0 12px; color:var(--ink); }
.t24-legal h2:first-child{ margin-top:0; }
.t24-legal ol{ list-style:decimal; padding-left:22px; margin-bottom:14px; }
.t24-legal ul{ list-style:disc; padding-left:22px; margin-bottom:14px; }
.t24-legal ol ol{ list-style:lower-alpha; }
.t24-legal li{ font-size:14px; line-height:1.7; color:#2C3B36; margin-bottom:6px; }
.t24-legal a{ color:var(--ink); text-decoration:underline; }

/* ---------- CHART CARD (wraps existing #ajax-chart / #ajax-info) ---------- */
.t24-chart-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px;
}
/* KRYTYCZNE: Chart.class.php generuje ikony nawigacji (prev/next/today/tydzień/urodziny)
   jako position:absolute z twardo wpisanymi wartościami top/left/right/bottom w atrybucie
   style (np. "left: 4px"). To bardzo kruche rozwiązanie — każda zmiana wysokości/paddingu
   kontenera je rozjeżdża. Zamiast tego dopasowywać kontener do tych pikseli, CAŁKOWICIE
   neutralizujemy pozycjonowanie absolutne (!important nadpisuje inline style) i układamy
   wszystko jako zwykły, elastyczny rząd (flexbox) — odporne na wszystko, nie do zepsucia. */
#ajax-chart{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  row-gap: 14px;
}
#ajax-chart .chart-nav{
  position: static !important;
  inset: auto !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  font-size: 17px !important;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-alt);
  border-radius: 50%;
  color: var(--ink-soft) !important;
  transition: background .15s ease, color .15s ease;
}
#ajax-chart .chart-nav:hover{
  background: var(--ink);
  color: #fff !important;
}
/* Kolejność w rzędzie: [poprzedni miesiąc] [dziś] [pole daty] [następny miesiąc]
   [poprzedni tydzień] [urodziny] [następny tydzień] — niezależnie od kolejności w PHP. */
/* Kolejność: [poprzedni dzień] [dziś] [następny dzień] razem w jednej linii,
   potem pole daty na własnym wierszu, potem [poprzedni tydzień] [urodziny]
   [następny tydzień] razem, na końcu wykres. */
#ajax-chart .chart-nav[onclick="goToPrevMain()"]{ order: 1; }
#ajax-chart #chart-today{ order: 2; }
#ajax-chart .chart-nav[onclick="goToNextMain()"]{ order: 3; }
#ajax-chart #change-date{ order: 4; flex-basis: 100%; text-align: center; }
#ajax-chart #chart-prev-week{ order: 5; }
#ajax-chart #chart-birthday{ order: 6; }
#ajax-chart #chart-next-week{ order: 7; }
#ajax-chart #main_chart{ order: 8; flex-basis: 100%; margin-top: 8px; }
#ajax-chart input[type="hidden"]{ order: 0; }

#ajax-info{
  position: relative;
}
/* Pole zmiany daty (#change-date) generowane przez Chart.class.php z klasą Bootstrapa
   .form-control — dopasowanie do nowego motywu bez ingerencji w PHP. */
#change-date{
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  font-family: var(--mono) !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  background: var(--card) !important;
  box-shadow: none !important;
  padding: 10px 14px !important;
  box-sizing: border-box !important;
}
/* Highcharts container — jawny rozmiar niezależny od starej klasy .chart (usuniętej) */
#main_chart{
  height: 480px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}
@media (max-width: 800px){
  #main_chart{ height: 320px; }
  #ajax-chart .chart-nav{ width: 36px; height: 36px; font-size: 15px !important; }
}
/* ---------- #ajax-info: dopasowanie Bootstrapowych progress-barów i ikon do motywu ---------- */
#info h2{ font-family:var(--serif); font-weight:500; font-size:22px; color:var(--ink); margin-bottom:20px; }
#ajax-info p{ font-size:14px; line-height:1.7; color:#2C3B36; margin:0 0 6px; }
#ajax-info p strong u{ text-decoration:none; font-family:var(--serif); font-size:15px; color:var(--ink); font-weight:500; }
#ajax-info .progress{ height:22px; border-radius:8px; background:var(--bg-alt); margin-bottom:14px; overflow:hidden; }
#ajax-info .progress-bar{ font-family:var(--mono); font-size:11px; font-weight:600; }
#ajax-info .bg-success{ background-color: var(--emotional) !important; }
#ajax-info .bg-warning{ background-color: var(--amber) !important; }
#ajax-info .bg-danger{ background-color: var(--physical) !important; }
#ajax-info .bg-info{ background-color: var(--intellectual) !important; }
#info .controls{ color: var(--ink-soft); }
#info .controls i{ color: var(--ink-soft) !important; font-size: 2.25rem !important; }
#info .controls i:hover{ color: var(--ink) !important; }
#ajax-info .fa-smile, #ajax-info .fa-frown, #ajax-info .fa-exclamation-circle,
#ajax-info .fa-level-up-alt, #ajax-info .fa-level-down-alt, #ajax-info .fa-birthday-cake{
  color: var(--emotional);
}

/* Stary hack offsetu pod fixed-header (74px) — nieaktualny, nowy nagłówek nie jest
   już position:fixed. Zerujemy, żeby nie zjadał layoutu pod hero/ad-slotem. */
#result, #compatibility, #ket-qua, #ghep-cap{
  height: 0 !important;
  margin-top: 0 !important;
}
.t24-cycle-table{ width:100%; border-collapse:collapse; font-size:14px; }
.t24-cycle-table th{
  text-align:left; font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:0.04em;
  color:var(--ink-soft); padding:0 0 10px; border-bottom:1px solid var(--line); font-weight:500;
}
.t24-cycle-table td{ padding:14px 0; border-bottom:1px solid var(--line); font-size:14px; }
.t24-cycle-table tr:last-child td{ border-bottom:none; }
@media (max-width:700px){
  .t24-cycle-table thead, .t24-cycle-table tr th{ display:none; }
  .t24-cycle-table, .t24-cycle-table tbody, .t24-cycle-table tr, .t24-cycle-table td{ display:block; width:100%; }
  .t24-cycle-table tr{ padding:14px 0; border-bottom:1px solid var(--line); }
  .t24-cycle-table tr:first-child{ display:none; } /* wiersz naglowkowy bez <thead> */
  .t24-cycle-table td{ padding:3px 0; border-bottom:none; }
  .t24-cycle-table td:first-child{ font-weight:600; margin-bottom:2px; }
  .t24-cycle-table td[data-label]::before{
    content:attr(data-label); display:block; font-family:var(--mono); font-size:10px;
    text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); margin-bottom:2px;
  }
}
.t24-cycle-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:9px; }

/* ---------- BIOMET TEASER / CITY CARDS ---------- */
.t24-biomet{ background:var(--bg-alt); border-radius:var(--radius-lg); padding:40px; }
.t24-biomet-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:24px; flex-wrap:wrap; }
.t24-biomet-top p{ font-size:14px; color:var(--ink-soft); max-width:420px; margin:8px 0 0; line-height:1.55; }
.t24-badge{
  font-family:var(--mono); font-size:12px; font-weight:500; background:var(--amber-soft); color:var(--amber);
  padding:7px 12px; border-radius:100px; white-space:nowrap;
}
.t24-city-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.t24-city-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 18px; display:block; }
.t24-city-name{ font-size:14px; font-weight:600; margin-bottom:10px; color:var(--ink); display:flex; justify-content:space-between; align-items:baseline; gap:6px; }
.t24-city-distance{ font-family:var(--mono); font-size:11px; font-weight:500; color:var(--ink-soft); white-space:nowrap; }
.t24-city-row{ display:flex; justify-content:space-between; align-items:center; }
.t24-city-status{ font-size:12px; font-weight:600; padding:4px 9px; border-radius:100px; }
.status-korzystny{ background:var(--emotional-soft); color:var(--emotional); }
.status-obojetny{ background:var(--amber-soft); color:var(--amber); }
.status-niekorzystny{ background:var(--physical-soft); color:var(--physical); }
.t24-city-press{ font-family:var(--mono); font-size:12px; color:var(--ink-soft); }

/* ---------- USE CASE / EXPLAIN CARDS ---------- */
.t24-use-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.t24-use-grid-4{ grid-template-columns:repeat(4,1fr); }
.t24-use-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); padding:22px; display:block; text-decoration:none; color:inherit; transition:border-color .15s ease; }
.t24-use-card:hover{ border-color:var(--ink); }
.t24-use-card .t24-icon{
  width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:14px; margin-bottom:14px;
}
.t24-use-card h3{ font-family:var(--serif); font-size:16.5px; font-weight:500; margin:0 0 8px; color:var(--ink); }
.t24-use-card p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin:0; }

.t24-explain-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.t24-explain-item{ padding-top:18px; border-top:1px solid var(--line); }
.t24-explain-num{ font-family:var(--mono); font-size:12px; color:var(--ink-soft); margin-bottom:10px; }
.t24-explain-item h3{ font-family:var(--serif); font-size:18px; font-weight:500; margin:0 0 8px; color:var(--ink); }
.t24-explain-item p{ font-size:14px; color:var(--ink-soft); line-height:1.6; margin:0; }

/* ---------- FAQ ---------- */
.t24-faq-item{ border-top:1px solid var(--line); padding:18px 0; }
.t24-faq-item:last-child{ border-bottom:1px solid var(--line); }
.t24-faq-q{
  font-size:15px; font-weight:600; margin:0; display:flex; justify-content:space-between;
  align-items:center; gap:12px; cursor:pointer; color:var(--ink); list-style:none;
}
.t24-faq-q::-webkit-details-marker{ display:none; }
.t24-faq-q .t24-faq-icon{ font-family:var(--mono); color:var(--ink-soft); font-weight:400; flex-shrink:0; }
.t24-faq-a{ font-size:14px; color:var(--ink-soft); line-height:1.7; margin:10px 0 0; }

/* ---------- RELATED / CITY LINKS ---------- */
.t24-related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.t24-related-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); padding:20px; display:flex; flex-direction:column; gap:6px; }
.t24-related-card .rk{ font-family:var(--mono); font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em; }
.t24-related-card .rt{ font-family:var(--serif); font-size:16px; font-weight:500; color:var(--ink); }

.t24-city-links{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.t24-city-link{
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px;
  display:flex; justify-content:space-between; align-items:center; font-size:13.5px; font-weight:500; color:var(--ink);
}
.t24-city-link .st{ width:8px; height:8px; border-radius:50%; }

/* ---------- CITY PAGE: STATUS HERO ---------- */
.t24-status-row{ display:grid; grid-template-columns:1.1fr 2fr; gap:16px; }
.t24-status-main{
  background:rgba(255,255,255,0.06); border:1px solid var(--hero-line); border-radius:16px;
  padding:22px; display:flex; flex-direction:column; justify-content:center; gap:10px;
}
.t24-status-pill{
  display:inline-flex; align-self:flex-start; align-items:center; gap:7px;
  font-size:13px; font-weight:600; padding:7px 14px; border-radius:100px;
}
.t24-status-pill.korzystny{ background:var(--emotional-soft); color:var(--emotional); }
.t24-status-pill.obojetny{ background:var(--amber-soft); color:var(--amber); }
.t24-status-pill.niekorzystny{ background:var(--physical-soft); color:var(--physical); }
.t24-status-pill i{ width:8px; height:8px; border-radius:50%; background:currentColor; }
.t24-status-desc{ font-size:14px; color:var(--hero-text-soft); line-height:1.5; margin:0; }
.t24-metric-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.t24-metric{ background:rgba(255,255,255,0.06); border:1px solid var(--hero-line); border-radius:14px; padding:16px; }
.t24-metric-label{ font-size:11.5px; color:var(--hero-text-soft); margin-bottom:8px; text-transform:uppercase; letter-spacing:0.04em; }
.t24-metric-value{ font-family:var(--mono); font-size:20px; font-weight:500; color:var(--hero-text); }
.t24-metric-trend{ font-size:11.5px; color:var(--hero-text-soft); margin-top:4px; }
.t24-updated{ font-family:var(--mono); font-size:12.5px; color:var(--hero-text-soft); margin:0 0 22px; }

/* ---------- MAP CARD ---------- */
.t24-map-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px; display:grid; grid-template-columns:1fr 260px; gap:28px; }
.t24-map-svg-wrap svg{ width:100%; height:auto; display:block; }
.t24-map-legend{ display:flex; flex-direction:column; gap:14px; justify-content:center; }
.t24-legend-row{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-soft); }
.t24-legend-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* ---------- REGION CARD (lista sąsiednich miast zamiast mapy — patrz komentarz przy usuniętej funkcji biomet_poland_outline_path) ---------- */
.t24-region-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px; }
.t24-region-current{
  display:flex; align-items:center; gap:10px; font-size:15px; margin-bottom:20px;
  padding-bottom:16px; border-bottom:1px solid var(--line);
}
.t24-region-current strong{ font-family:var(--serif); font-weight:500; font-size:17px; }
.t24-region-current .t24-city-press{ margin-left:auto; }
.t24-region-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:800px){ .t24-region-grid{ grid-template-columns:repeat(2,1fr); } }

.t24-widget-embed-layout{
  padding:28px; display:grid; grid-template-columns:1fr 380px; gap:32px; align-items:start;
}
@media (max-width:800px){
  .t24-widget-embed-layout{ grid-template-columns:1fr; }
}
.t24-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:600px){ .t24-form-row{ grid-template-columns:1fr; } }

/* ---------- FORECAST STRIP ---------- */
.t24-forecast-strip{ display:grid; grid-template-columns:repeat(7,1fr); gap:10px; }
.t24-fc-day{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 8px; text-align:center; }
.t24-fc-day.today{ border-color:var(--emotional); background:var(--emotional-soft); }
.t24-fc-dname{ font-size:11.5px; color:var(--ink-soft); margin-bottom:8px; text-transform:uppercase; letter-spacing:0.03em; }
.t24-fc-dot{ width:10px; height:10px; border-radius:50%; margin:0 auto 8px; }
.t24-fc-temp{ font-family:var(--mono); font-size:13px; font-weight:500; }

/* ---------- SYMPTOM CARDS ---------- */
.t24-symptom-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.t24-symptom-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); padding:22px; }
.t24-symptom-card .n{ font-family:var(--mono); font-size:12px; color:var(--ink-soft); margin-bottom:10px; }
.t24-symptom-card h3{ font-family:var(--serif); font-size:16.5px; font-weight:500; margin:0 0 8px; color:var(--ink); }
.t24-symptom-card p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin:0; }

/* ---------- STATE / INTERPRETATION CARDS (partnerski) ---------- */
.t24-state-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.t24-state-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); padding:22px; }
.t24-state-range{ font-family:var(--mono); font-size:12px; color:var(--ink-soft); margin-bottom:10px; }
.t24-state-card h3{ font-family:var(--serif); font-size:17px; font-weight:500; margin:0 0 8px; color:var(--ink); }
.t24-state-card p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin:0; }
.t24-state-card.hi{ border-top:3px solid var(--emotional); }
.t24-state-card.mid{ border-top:3px solid var(--amber); }
.t24-state-card.lo{ border-top:3px solid var(--physical); }

/* ---------- PARTNERSKI: rhythm bars (compat.js hooks preserved) ---------- */
.t24-compat-card{
  background:rgba(255,255,255,0.06); border:1px solid var(--hero-line); border-radius:16px; padding:24px;
}
.t24-compat-card .rhythm{ margin-bottom:18px; }
.t24-compat-card .rhythm:last-child{ margin-bottom:0; }
.t24-compat-card .rhythm h3{
  font-size:13px; font-weight:600; color:var(--hero-text-soft); margin:0 0 8px; text-transform:none;
  display:flex; justify-content:space-between; align-items:center;
}
.t24-compat-card .rhythm.physical h3{ color:#F0A79E; }
.t24-compat-card .rhythm.emotional h3{ color:#9BD8C1; }
.t24-compat-card .rhythm.intellectual h3{ color:#C7B8EF; }
.t24-compat-card .rhythm.average h3{ color:var(--hero-text); font-weight:700; }
.t24-compat-card .percent{
  font-family:var(--mono); font-size:13px; color:var(--hero-text);
}
.t24-compat-card .percentage{ height:8px; background:rgba(255,255,255,0.1); border-radius:4px; overflow:hidden; clear:both; }
.t24-compat-card .percentage-bar{ height:100%; border-radius:4px; width:100%; transition:width .4s ease; background:var(--hero-text-soft); float:left; }
.t24-compat-card .rhythm.physical .percentage-bar{ background:var(--physical); }
.t24-compat-card .rhythm.emotional .percentage-bar{ background:var(--emotional); }
.t24-compat-card .rhythm.intellectual .percentage-bar{ background:var(--intellectual); }
.t24-compat-card .rhythm.average .percentage-bar{ background:#F2B98A; }

.t24-date-select{ display:flex; flex-direction:column; gap:8px; }
.t24-date-select .t24-select-row{ display:flex; gap:8px; }
.t24-date-select select{
  background:rgba(255,255,255,0.08); border:1px solid var(--hero-line); color:#fff;
  font-family:var(--mono); font-size:14px; padding:12px 10px; border-radius:10px; flex:1; min-width:0;
}
.t24-date-select select option{ color:#111; }
.t24-pair-form{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:8px; }

/* ---------- FOOTER ---------- */
.t24-footer{ border-top:1px solid var(--line); padding:44px 0 24px; margin-top:20px; }
.t24-foot-links{
  display:grid; grid-template-columns:repeat(4,1fr); gap:28px;
  padding-bottom:32px; margin-bottom:24px; border-bottom:1px solid var(--line);
}
.t24-foot-col{ display:flex; flex-direction:column; gap:10px; }
.t24-foot-col-title{
  font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--ink-soft); margin-bottom:2px;
}
.t24-foot-col a{ font-size:13.5px; color:var(--ink-soft); }
.t24-foot-col a:hover{ color:var(--ink); }
.t24-foot-inner{ display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--ink-soft); flex-wrap:wrap; gap:10px; }
@media (max-width:800px){
  .t24-foot-links{ grid-template-columns:repeat(2,1fr); gap:24px; }
}
.t24-sources{ font-size:12.5px; color:var(--ink-soft); padding-left:18px; }
.t24-sources li{ margin-bottom:4px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
  .t24-status-row{ grid-template-columns:1fr; }
  .t24-map-card{ grid-template-columns:1fr; }
  .t24-pair-form{ grid-template-columns:1fr; }
}
@media (max-width: 800px){
  .t24-nav-links{ display:none; }
  .t24-hero h1{ font-size:30px; }
  .t24-snap-grid, .t24-explain-grid, .t24-use-grid, .t24-symptom-grid, .t24-state-grid, .t24-related-grid{ grid-template-columns:1fr; }
  .t24-city-grid{ grid-template-columns:repeat(2,1fr); }
  .t24-metric-grid{ grid-template-columns:repeat(2,1fr); }
  .t24-city-links{ grid-template-columns:repeat(2,1fr); }
  .t24-forecast-strip{ grid-template-columns:repeat(4,1fr); row-gap:10px; }
  .t24-section{ padding:40px 20px; }
  .t24-hero-inner, .t24-nav, .t24-crumbs, .t24-ad-slot{ padding-left:20px; padding-right:20px; }
}