/*
  KWIZOO REFRESH — v1
  Krok 1 z planu redesignu: bezpieczny, wizualny refresh nakladany NA WIERZCH
  istniejacych stylow, bez ruszania logiki gry, WooCommerce, panelu szkoly itd.

  Jak to dziala:
  - Ten plik jest ladowany jako OSTATNI <link> w <head>, wiec te same
    selektory co w oryginalnych <style> nadpisuja sie same, bez !important.
  - Nic tu nie zmienia struktury HTML ani JS. Zero ryzyka dla dzialania quizu,
    multiplayera, WooCommerce, panelu nauczyciela.
  - Kolory marki (roz #ED93B1, ciemna zielen #5DCAA5) zostaja, zmienia sie
    hierarchia i konsystencja, nie paleta.
*/

/* ============================================================
   1. HERO: usuwamy mocny gradient, zostaje spokojne, cieple tlo
   Adresuje: "wyglada AI-generated" — gradient za hero to najbardziej
   rozpoznawalny element generycznych landing page'y SaaS.
   ============================================================ */
.hero{
  background: #FBFAF7 !important;
}

/* Odznaka nad naglowkiem: mniej dominujaca, mniejszy kontrast z H1 */
.hero-badge{
  background: transparent !important;
  border: 1px solid #E8E6DF !important;
  color: #5F5E5A !important;
  font-weight: 600 !important;
  padding: 6px 16px !important;
}

/* ============================================================
   2. HIERARCHIA PRZYCISKOW: jeden dominujacy kolor akcji.
   Problem z oryginalu: btn-primary (roz, solid) i btn-secondary
   (czarny, solid) konkuruja o uwage jako dwa rownorzedne CTA.
   Rozwiazanie: drugi przycisk staje sie "ghost" (obrys), nie wypelnienie.
   ============================================================ */
.btn-secondary{
  background: transparent !important;
  color: #2C2C2A !important;
  border: 1.5px solid #D3D1C7 !important;
  box-shadow: none !important;
}
.btn-secondary:hover{
  background: #F8F7F4 !important;
  border-color: #2C2C2A !important;
}

.btn-primary{
  box-shadow: 0 4px 14px rgba(237,147,177,.28) !important;
}
.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(237,147,177,.38) !important;
}

/* ============================================================
   3. KARTY: spojna glebia zamiast plaskich, pastelowych wypelnien.
   Bialo tlo + cienki border + delikatny cien, konsystentnie wszedzie.
   ============================================================ */
.feature-card,
.vs-card,
.price-card{
  background: #fff !important;
  border: 1px solid #EDEBE3 !important;
  box-shadow: 0 2px 10px rgba(44,44,42,.04) !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}
.feature-card:hover,
.vs-card:hover,
.price-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(44,44,42,.08) !important;
}

/* Wyroznione karty cennika (jesli maja klase premium/highlight) zachowuja
   delikatny rozowy akcent, nie pelne pastelowe tlo */
.price-card.featured,
.price-card.highlight{
  border-color: #ED93B1 !important;
  box-shadow: 0 10px 30px rgba(237,147,177,.18) !important;
}

/* ============================================================
   4. NAWIGACJA: spojne przyciski w naglowku (dwie rozne wersje klas
   w roznych plikach: nav-cta w template-kwizoo.php, kwiz-nav-cta w header.php)
   ============================================================ */
.nav-cta,
.kwiz-nav-cta{
  border-radius: 999px !important;
  font-weight: 800 !important;
  transition: transform .15s ease, background .15s ease !important;
}
.nav-cta:hover,
.kwiz-nav-cta:hover{
  transform: translateY(-1px);
}

/* ============================================================
   5. DROBNE PORZADKI TYPOGRAFICZNE
   ============================================================ */
.hero h1{
  letter-spacing: -.02em !important;
}

/* ============================================================
   6. EKRAN "CO DZIS CWICZYMY" (subject-btn, subject-mix, game-card):
   te karty juz maja cien w oryginale, wiec tu tylko drobne ujednolicenie
   grubosci obramowania przy stanie active/hover, zeby pasowalo do
   pozostalych kart na stronie.
   ============================================================ */
.subject-btn{
  border-color: #F1EFE8 !important;
}
.subject-btn:hover{
  box-shadow: 0 10px 26px rgba(44,44,42,.10) !important;
}

.back-btn{
  border-radius: 999px !important;
}

.game-card{
  border: 1px solid #EDEBE3 !important;
}

/* ============================================================
   KONIEC v1. Nastepne kandydaci do v2 (wymagaja decyzji, nie tylko CSS):
   - ciemny/czarny pasek nawigacji: wymaga jasnej wersji logo (obecne
     logo ma ciemny tekst, na czarnym tle bedzie niewidoczne)
   - przeniesienie trzeciego przycisku hero ("Graj z klasa") z hero do
     sekcji o multiplayerze — to juz zmiana HTML, nie CSS, male ryzyko
     ale wymaga edycji template-kwizoo.php w linii ok. 680-700
   ============================================================ */
