/* =============================================================
   Statystyka24 — style wtyczki
   Plik: assets/css/stat24.css
   Wszystkie style tutaj — żadnych <style> tagów w JS
   ============================================================= */

/* ── Reset i kontener ─────────────────────────────────────── */
.stat24-root {
  --s24-bg:      #070d1b;
  --s24-bg2:     #111827;
  --s24-accent:  #6366f1;
  --s24-accent2: #8b5cf6;
  --s24-red:     #f43f5e;
  --s24-green:   #10b981;
  --s24-amber:   #f59e0b;
  --s24-t1:      #f1f5f9;
  --s24-t2:      #94a3b8;
  --s24-t3:      #475569;

  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
.stat24-root *, .stat24-root *::before, .stat24-root *::after {
  box-sizing: border-box;
}

/* ── Główny wrapper ───────────────────────────────────────── */
.s24 {
  background: var(--s24-bg);
  color: var(--s24-t1);
  min-height: 40vh;
  padding: 0;
}

/* ── Przyciski ────────────────────────────────────────────── */
.s24-btn {
  border: none;
  cursor: pointer;
  font-weight: 700;
  border-radius: 10px;
  font-size: 14px;
  transition: filter .15s, transform .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.s24-btn:hover  { filter: brightness(1.12); }
.s24-btn:active { transform: scale(.97); }
.s24-btn:disabled { opacity: .4; cursor: not-allowed; }

.s24-btn-primary {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  padding: 10px 22px;
  box-shadow: 0 4px 14px rgba(99,102,241,.35);
}
.s24-btn-success {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  padding: 9px 18px;
}
.s24-btn-ghost {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09) !important;
  color: var(--s24-t2);
  padding: 8px 14px;
}
.s24-btn-danger {
  background: rgba(244,63,94,.15);
  border: 1px solid rgba(244,63,94,.3) !important;
  color: #f87171;
  padding: 6px 14px;
}

/* ── Karty ────────────────────────────────────────────────── */
.s24-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 18px;
  transition: transform .2s, box-shadow .2s;
}
.s24-card:hover {
  transform: translateY(-2px);
}
.s24-block {
  background: rgba(12,18,36,.8);
  border: 1px solid rgba(99,102,241,.25);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 14px;
}

/* ── Formularze ───────────────────────────────────────────── */
.s24 input,
.s24 select,
.s24 textarea {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--s24-t1);
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 13px;
  outline: none;
  width: 100%;
  font-family: inherit;
}
.s24 input:focus,
.s24 select:focus,
.s24 textarea:focus {
  border-color: var(--s24-accent);
  box-shadow: 0 0 0 2px rgba(99,102,241,.2);
}
.s24 textarea { resize: vertical; font-family: 'Courier New', monospace; }
.s24 select option { background: #1e293b; color: #f1f5f9; }

/* ── Tabele ───────────────────────────────────────────────── */
.s24 table { border-collapse: collapse; width: 100%; }
.s24 th {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; padding: 7px 12px; text-align: left;
}
.s24 td { padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.04); font-size: 13px; }

/* ── Odznaki ──────────────────────────────────────────────── */
.s24-tag {
  display: inline-block; padding: 2px 9px;
  border-radius: 20px; font-size: 11px; font-weight: 700;
}
.s24-tag-free    { background: rgba(16,185,129,.13);  color: #34d399; }
.s24-tag-pop     { background: rgba(245,158,11,.13);  color: #fbbf24; }
.s24-tag-premium { background: rgba(244,63,94,.13);   color: #f87171; }
.s24-tag-accent  { background: rgba(99,102,241,.13);  color: #a5b4fc; }

/* ── Komunikaty ───────────────────────────────────────────── */
.s24-notice {
  border-radius: 10px; padding: 12px 16px; font-size: 13px; margin-bottom: 12px;
}
.s24-notice-success { background: rgba(16,185,129,.08);  border: 1px solid rgba(16,185,129,.3);  color: #34d399; }
.s24-notice-warning { background: rgba(245,158,11,.08);  border: 1px solid rgba(245,158,11,.3);  color: #fbbf24; }
.s24-notice-error   { background: rgba(244,63,94,.08);   border: 1px solid rgba(244,63,94,.3);   color: #f87171; }
.s24-notice-info    { background: rgba(99,102,241,.08);  border: 1px solid rgba(99,102,241,.3);  color: #a5b4fc; }

/* ── Siatka kart produktów ────────────────────────────────── */
.s24-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.s24-bundle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

/* ── Nagłówek sekcji ──────────────────────────────────────── */
.s24-section-title {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1.5px; margin: 20px 0 8px;
}

/* ── Karta produktu ───────────────────────────────────────── */
.s24-product-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px; padding: 18px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  display: flex; flex-direction: column;
}
.s24-product-card:hover {
  transform: translateY(-2px);
}
.s24-product-card.owned {
  border-color: rgba(16,185,129,.35);
}

/* ── Modal overlay ────────────────────────────────────────── */
.s24-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,.78);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.s24-modal {
  background: linear-gradient(135deg, #0f1829, #1a1040);
  border: 1px solid rgba(99,102,241,.4);
  border-radius: 20px; width: 100%; max-width: 460px;
  box-shadow: 0 30px 80px rgba(0,0,0,.65);
  overflow: hidden; position: relative;
}
.s24-modal-bar {
  height: 4px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6, #f43f5e);
}
.s24-modal-body {
  padding: 26px; position: relative;
}
.s24-modal-close {
  position: absolute; top: 12px; right: 12px;
  background: rgba(255,255,255,.07); border: none;
  color: #94a3b8; width: 30px; height: 30px;
  border-radius: 8px; cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.s24-modal-close:hover { background: rgba(255,255,255,.14); }

/* ── Wybór opcji (bez konta / z kontem) ───────────────────── */
.s24-option {
  flex: 1; padding: 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  transition: background .15s, border-color .15s;
}
.s24-option.active {
  background: rgba(99,102,241,.15);
  border-color: rgba(99,102,241,.5);
}
.s24-option-title { font-weight: 700; font-size: 13px; color: #f1f5f9; }
.s24-option-sub   { font-size: 11px; color: #64748b; margin-top: 2px; }

/* ── Spinner ──────────────────────────────────────────────── */
.s24-spinner {
  width: 52px; height: 52px; border-radius: 50%;
  border: 3px solid rgba(99,102,241,.2);
  border-top-color: #6366f1;
  margin: 0 auto 20px;
  animation: s24spin .8s linear infinite;
}

/* ── Animacje ─────────────────────────────────────────────── */
@keyframes s24spin {
  to { transform: rotate(360deg); }
}
@keyframes s24fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.s24-anim { animation: s24fade .3s ease; }

/* ── Analizator ───────────────────────────────────────────── */
.s24-analyzer { padding: 24px; max-width: 1040px; margin: 0 auto; }
.s24-nav {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.s24-logo { font-size: 20px; font-weight: 800; }
.s24-logo span { color: #6366f1; }

/* ── Tabs ─────────────────────────────────────────────────── */
.s24-tabs { display: flex; gap: 6px; margin-bottom: 24px; flex-wrap: wrap; }

/* ── Responsywność ────────────────────────────────────────── */
@media (max-width: 600px) {
  .s24-product-grid  { grid-template-columns: 1fr; }
  .s24-bundle-grid   { grid-template-columns: 1fr; }
  .s24-modal         { max-width: 100%; border-radius: 14px; }
  .s24-analyzer      { padding: 16px; }
}

/* ── Mobile — rozszerzone ─────────────────────────────────── */
@media (max-width: 480px) {
  /* Główny wrapper */
  .s24 { padding: 16px 12px !important; }
  .s24-analyzer { padding: 12px !important; }

  /* Przyciski — pełna szerokość na małych ekranach */
  .s24-btn {
    font-size: 13px !important;
    padding: 10px 14px !important;
  }

  /* Tabs — zawijaj i zmniejsz */
  .s24-tabs { gap: 4px !important; margin-bottom: 16px !important; }
  .s24-tabs button { font-size: 11px !important; padding: 6px 10px !important; }

  /* Karty produktów */
  .s24-product-card { padding: 14px !important; }
  .s24-product-card h3 { font-size: 13px !important; }

  /* Modal — pełna szerokość */
  .s24-modal {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 14px 14px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
  }

  /* Inputy i textarea */
  .s24-input, .s24-textarea, input[type=text], input[type=number], textarea {
    font-size: 16px !important; /* zapobiega zoom na iOS */
    padding: 10px 12px !important;
  }

  /* Tabela danych — scroll poziomy */
  .s24-table-wrap, .s24-data-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Wyniki — pełna szerokość */
  .s24-result-card, .s24-result-box {
    padding: 14px !important;
  }

  /* Nagłówek analizatora */
  .s24-logo { font-size: 14px !important; }

  /* Step indicators */
  .s24-steps { flex-direction: column !important; gap: 8px !important; }

  /* Grid 2-kolumnowy → 1 kolumna */
  [style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(2"] {
    grid-template-columns: 1fr !important;
  }

  /* Flex row → column dla małych elementów */
  .s24-row-mobile { flex-direction: column !important; }

  /* Tekst — nie wychodź poza kontener */
  .stat24-root * {
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Wyniki APA */
  .s24-apa-text, .s24-apa-box {
    font-size: 12px !important;
    padding: 10px !important;
    word-break: break-all !important;
  }
}

/* Zapobiegaj wychodzeniu elementów poza ekran globalnie */
.stat24-root {
  overflow-x: hidden;
  max-width: 100%;
}

/* Tabele wyników — zawsze scroll poziomy */
.s24-result-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* iOS — zapobiega zoom przy focus na input */
@media (max-width: 768px) {
  .stat24-root input[type="text"],
  .stat24-root input[type="number"],
  .stat24-root input[type="email"],
  .stat24-root select,
  .stat24-root textarea {
    font-size: 16px !important;
  }
}