/* ============================================================
   KLINIKA BIKO — POMARAŃCZOWY AKCENT NA CAŁEJ STRONIE
   ============================================================
   Wczytywany PO design.css i quiz.css. Podmienia tylko to, co ma być
   pomarańczowe — reszta strony zostaje bez zmian.

   ŹRÓDŁO KOLORU: reklamy/grafiki/2026-09-16/aktywnosc-kolor.css
     --orange:      #e2621f   (akcent: zakreślacz, pieczątka, kropka)
     --orange-soft: #f6a06a   (jasny, wyłącznie na ciemnym tle)
   Do tego #9c3a00 — ten sam odcień 43,7° w OKLCH, tylko ciemniejszy,
   używany tam, gdzie pomarańcz musi być tekstem albo tłem przycisku.

   ZASADA: pomarańcz = działanie i akcent. Teal zostaje tam, gdzie był:
   ikony, bloki merytoryczne, pasek u góry, ciemne sekcje. Nie zamieniamy
   jednego koloru na drugi, tylko dokładamy drugi.

   KONTRASTY (WCAG AA, policzone w OKLCH):
     biel na #9c3a00 (przyciski) .................... 6,96  ✓
     #9c3a00 jako tekst na bieli .................... 6,96  ✓
     #9c3a00 jako tekst na beżu #f7f2ea ............. 6,24  ✓
     #e2621f jako plama pod czarnym tekstem ......... 5,62  ✓
     #e2621f jako element interfejsu na bieli ....... 3,50  ✓ (próg 3,0)
     #f6a06a na ciemnej zieleni #1f4650 ............. 4,95  ✓
   #e2621f NIE jest używany jako tekst ani jako tło przycisku — tam ma 3,50,
   czyli poniżej progu 4,5 dla tekstu.

   ⚠ #e2621f dzieli od czerwieni ostrzeżeń #b42318 tylko 14,2°. Dlatego
   pomarańcz nie pojawia się przy komunikatach błędów, a same błędy
   niosą znak ⚠ obok koloru (WCAG 1.4.1).
   ============================================================ */

:root {
    --pom:       #e2621f;
    --pom-ink:   #9c3a00;
    --pom-soft:  #f6a06a;
}

/* ---------- 1. PRZYCISKI ----------
   Decyzja Mateusza 17.09: przyciski zostaja w kolorze, w jakim byly — czarne.
   Pomaranczowe CTA zostalo wycofane. Gdyby kiedys wracalo, wystarczy tu dopisac
   regule na .btn--primary, .quiz-start-btn, .quiz-btn-next, .results-sticky-btn,
   .co-cta i .co-paybtn z tlem #9c3a00 (biel na nim ma 6,96 — kontrast przechodzi). */

/* ---------- 2. ETYKIETY NAD NAGŁÓWKAMI ----------
   Wzorzec z grafiki: „● RADA, KTÓRĄ SŁYSZY KAŻDA PACJENTKA" */
.eyebrow,
.quiz-start-eyebrow {
    color: var(--pom-ink) !important;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
.eyebrow::before,
.quiz-start-eyebrow::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--pom);
    flex: none;
}
.quiz-start-eyebrow i { color: var(--pom-ink) !important; }

/* Na ciemnym tle etykieta musi być jasna */
.cta-band .eyebrow,
.dark .eyebrow { color: var(--pom-soft) !important; }
.cta-band .eyebrow::before { background: var(--pom-soft); }

/* ---------- 3. ZAKREŚLACZ POD SŁOWEM ----------
   Wzorzec z grafiki: „ruszaj się [więcej.]". Tekst wraca do czerni,
   bo czerń na pomarańczu ma 5,62, a sam pomarańcz jako litera tylko 3,50. */
h1 em, h2 em, h3 em, .lead em {
    position: relative;
    display: inline-block;
    font-style: normal;
    color: var(--ink) !important;
    z-index: 0;
}
h1 em::before, h2 em::before, h3 em::before, .lead em::before {
    content: "";
    position: absolute;
    left: -.1em; right: -.1em;
    bottom: .04em;
    height: .32em;
    background: var(--pom);
    opacity: .95;
    transform: rotate(-1.1deg);
    border-radius: 3px;
    z-index: -1;
}
/* W ciemnej sekcji zakreślacz byłby ciężki — tam sam kolor tekstu */
.cta-band h1 em, .cta-band h2 em, .cta-band h3 em {
    color: var(--pom-soft) !important;
}
.cta-band h1 em::before, .cta-band h2 em::before, .cta-band h3 em::before { display: none; }

/* ---------- 4. PLAKIETKI PRZY CENNIKU ----------
   Wzorzec pieczątki „MIT”: obwódka i tekst, bez wypełnienia. */
.plan__badge {
    background: transparent !important;
    color: var(--pom-ink) !important;
    border: 2px solid var(--pom) !important;
    border-radius: 6px !important;
    transform: translate(-50%, -50%) rotate(-1.5deg);
    box-shadow: 0 0 0 4px var(--surface);
}
.plan--featured .plan__badge {
    color: var(--pom-soft) !important;
    border-color: var(--pom-soft) !important;
    background: var(--green-deep) !important;
    box-shadow: 0 0 0 4px var(--green-deep);
}

/* ---------- 5. DROBNE AKCENTY ---------- */
.co-variant-badge { background: var(--pom-ink) !important; }
.quiz-progress-fill { background: var(--pom) !important; }
.results-sticky-cta .price span:first-child { color: var(--ink); }

/* Czego pomarańcz NIE dotyka: ikony „w cenie", paski zaufania, ciemne
   sekcje, skala BMI i wszystkie komunikaty. Zostają w tealu i w czerwieni. */