/* === cleaned custom.css generated by assistant ===
   What I changed (best-effort, non-destructive):
   - Consolidated :root variable blocks to the top (if present)
   - Removed `background-image: none;` occurrences that cancelled gradients
   - Removed existing .mobile-sticky-cta blocks and appended a single consolidated one
   - Commented out stray property declarations found outside selectors
   - Removed `!important` tokens (replaced with comments)
   - Collapsed excessive blank lines
   NOTE: This is a heuristic clean. Please review the output before deploying.
*/

.archive-description {
    display: none;
}
@media (max-width: 768px) {
  /* Bardziej specyficzny selektor, aby pokonać inne style */
  body .h5p-dialogcards .h5p-dialogcards-footer .h5p-question-buttons {
    display: flex /* removed !important */;
    flex-wrap: wrap /* removed !important */; /* Zezwala przyciskom na zawijanie */
    justify-content: center /* removed !important */;
    gap: 8px /* removed !important */; /* Odstęp między przyciskami */
  }

  /* Wymuszenie stylu na pojedynczych przyciskach */
  body .h5p-dialogcards .h5p-question-buttons .h5p-button {
    flex-basis: 45% /* removed !important */; /* Każdy przycisk zajmuje ok. połowy szerokości */
    flex-grow: 1 /* removed !important */;
    margin: 5px /* removed !important */; /* Dodaje marginesy dookoła */
  }
}
#rank-math-toc {
  margin-bottom: 24px /* removed !important */;
}
/* --- Ukrywanie wybranych informacji w pakietach kursów Tutor LMS --- */

/* Ta linia ukrywa wiersz z informacją "Materiały do pobrania" */
li:has(.tutor-icon-download) {
    display: none /* removed !important */;
}

/* Ta linia ukrywa wiersz z informacją "Razem zapisanych" (z poprawną klasą ikony) */
li:has(.tutor-icon-mortarboard) {
    display: none /* removed !important */;
}
/* Ta linia ukrywa wiersz z informacją "Czas trwania" */
li:has(.tutor-icon-clock-line) {
    display: none /* removed !important */;
}
/* === GLOBALNY STYL DLA WSZYSTKICH BLOKÓW FAQ RANK MATH === */

/* Główny kontener dla każdego elementu Pytanie+Odpowiedź */
.rank-math-block .rank-math-list-item {
    border: 1px solid #e0e0e0 /* removed !important */;
    border-radius: 8px /* removed !important */;
    margin-bottom: 20px /* removed !important */;
    padding: 25px /* removed !important */;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05) /* removed !important */;
    background-color: #ffffff /* removed !important */;
    transition: box-shadow 0.3s ease /* removed !important */;
}

/* Efekt po najechaniu myszką */
.rank-math-block .rank-math-list-item:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1) /* removed !important */;
}

/* Stylizacja pytania (h4) */
.rank-math-block .rank-math-question {
    font-size: 1.2em /* removed !important */;
    font-weight: 600 /* removed !important */;
    color: #333 /* removed !important */;
    margin-bottom: 15px /* removed !important */;
    padding: 0 /* removed !important */;
}

/* Stylizacja odpowiedzi */
.rank-math-block .rank-math-answer {
    font-size: 1em /* removed !important */;
    line-height: 1.6 /* removed !important */;
    color: #555 /* removed !important */;
}

/* --- EGZAMIN.PL - MASTER TOC STYLE (V3 FINAL) --- */

/* =========================================
   1. STYLIZACJA OGÓLNA (Wygląd)
   ========================================= */

/* Resetowanie stylów list i kontenerów dla obu wtyczek */
.wp-block-rank-math-toc-block nav ul,
.wp-block-rank-math-toc-block nav ol,
.kb-table-of-content-list,
.kb-table-of-contents-list,
.kb-table-of-content-nav ul,
.kb-table-of-contents-nav ul {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0;
    padding: 0;
    background: transparent;
}

/* Wymuszenie braku kropek na samych elementach listy */
.kb-table-of-content-list li,
.kb-table-of-contents-list li {
    list-style: none !important;
    list-style-type: none !important;
}

/* Styl linków - Wymuszamy ładny wygląd na KAŻDYM linku w spisie */
.wp-block-rank-math-toc-block nav a,
.kb-table-of-content-list li a,
.kb-table-of-contents-list li a,
.kb-table-of-contents__entry {
    font-size: 15px /* removed !important */;
    line-height: 1.5 /* removed !important */;
    color: #4A5568 /* removed !important */; /* Ciemny szary */
    display: block;
    border-left: 2px solid #E2E8F0 /* removed !important */; /* Szary pasek */
    padding: 8px 0 8px 15px /* removed !important */;
    margin: 0 /* removed !important */;
    text-decoration: none /* removed !important */;
    transition: all 0.2s ease;
}

/* =========================================
   2. PODŚWIETLENIE (Niebieski Egzamin.pl)
   ========================================= */

/* Aktywny link (Nasza klasa JS + Klasy natywne) */
.active-toc-link,
.wp-block-rank-math-toc-block nav a.active-toc-link,
.kb-table-of-content-list li.is-active a,
.kb-table-of-contents-list li.is-active a,
.kb-table-of-content-list li a.active-toc-link {
    color: #3182CE /* removed !important */;       /* Twój Niebieski */
    border-left: 3px solid #3182CE /* removed !important */; /* Niebieski pasek */
    font-weight: 700 /* removed !important */;
    background-color: #F0F7FF /* removed !important */; /* Bardzo jasny niebieski tła */
    padding-left: 18px /* removed !important */;   /* Lekki ruch w prawo */
}

/* =========================================
   3. LOGIKA DESKTOP (Sticky + Ukrywanie)
   ========================================= */

@media (min-width: 1024px) {

    /* A) WPISY (BLOG) - Sticky Sidebar */
    /* Przyklejamy cały pasek boczny */
    .single-post .sidebar-inner-wrap {
        position: -webkit-sticky /* removed !important */;
        position: sticky /* removed !important */;
        top: 100px /* removed !important */;
        z-index: 10;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    /* Ukrywamy spis w treści wpisu (bo mamy boczny) */
    .single-post .entry-content .wp-block-rank-math-toc-block {
        display: none /* removed !important */;
    }

    /* B) STRONY (PAGES) - Sticky TOC */
    /* Przyklejamy sam spis treści na stronach (np. oferta) */
    .page .wp-block-rank-math-toc-block {
        position: -webkit-sticky /* removed !important */;
        position: sticky /* removed !important */;
        top: 100px /* removed !important */;
        z-index: 10;
        max-height: 85vh;
        overflow-y: auto;
        /* Czysty wygląd w kolumnie */
        background: transparent /* removed !important */;
        border: none /* removed !important */;
        padding: 0 /* removed !important */;
    }
}

/* =========================================
   4. LOGIKA MOBILE (Telefon)
   ========================================= */

@media (max-width: 1023px) {
    
    /* Ukrywamy boczny spis (Kadence) */
    #secondary .widget:has(.kb-table-of-content-nav), 
    .kb-table-of-content-nav,
    .kb-table-of-contents-nav { 
        display: none /* removed !important */; 
    }

    /* Stylujemy spis w treści (Rank Math) żeby był ładny na mobile */
    .wp-block-rank-math-toc-block {
        display: block /* removed !important */;
        background: #F7FAFC /* removed !important */;
        border: 1px solid #E2E8F0 /* removed !important */;
        border-radius: 8px /* removed !important */;
        padding: 20px /* removed !important */;
        margin-bottom: 30px /* removed !important */;
    }
    
    /* Resetujemy style linków dla mobile boxa (żeby nie miały pasków z boku) */
    .wp-block-rank-math-toc-block nav a {
        border-left: none /* removed !important */;
        padding: 5px 0 /* removed !important */;
        border-bottom: 1px solid #eee /* removed !important */;
    }
}

/* =========================================
   5. TYTUŁY
   ========================================= */
.kb-table-of-contents-title {
    font-size: 18px /* removed !important */;
    font-weight: 700 /* removed !important */;
    color: #2D3748 /* removed !important */;
    margin-bottom: 15px /* removed !important */;
    display: block /* removed !important */;
}

/* ============================================================
   EGZAMIN.PL - OPTYMALIZACJA SEO & AI (SNIPPET + STICKY CTA)
   ============================================================ */

/* 1. KONTENER GŁÓWNY SEKCJI (POD H1) */
.egzamin-seo-section {
    background: #ffffff;
    border: 2px solid #2B6CB0;
    border-radius: 16px;
    padding: 25px;
    margin: 25px 0;
    box-shadow: 10px 10px 0px rgba(43, 108, 176, 0.05);
    font-family: sans-serif;
    color: #2d3748; /* Standardowy kolor tekstu */
}

/* 2. NAGŁÓWEK W BOXIE */
.egzamin-seo-section .snippet-header {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.1rem;
    font-weight: 400; /* Niepogrubiony tekst bazowy */
    color: #1a202c;
}

.egzamin-seo-section .snippet-header strong {
    font-weight: 700; /* Pogrubiamy tylko nazwę marki */
}

.egzamin-seo-section .divider {
    color: #2B6CB0;
    opacity: 0.6;
    margin: 0 5px;
}

/* 3. SIATKA FAKTÓW (GRID) */
.egzamin-seo-section .snippet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 25px;
    margin: 0;
}

/* 4. POJEDYNCZE ELEMENTY (DT/DD) */
.egzamin-seo-section .snippet-item {
    border-left: 4px solid #e2e8f0;
    padding-left: 15px;
}

.egzamin-seo-section .snippet-item.highlight {
    border-left-color: #2B6CB0; /* Niebieski akcent dla pierwszego elementu */
}

.egzamin-seo-section dt {
    color: #2B6CB0;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 800; /* Etykiety są wyraźne i grube */
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.egzamin-seo-section dd {
    margin: 0;
    font-weight: 400; /* RESET: tekst opisu NIE jest pogrubiony */
    color: #2d3748;
    line-height: 1.5;
    font-size: 0.95rem;
}

/* 5. KLUCZOWE FRAZY (TYLKO TO BĘDZIE GRUBE) */
.egzamin-seo-section dd strong {
    font-weight: 700;
    color: #1a202c;
}

/* 6. UKRYWANIE NAGŁÓWKA DLA LUDZI (SEO ONLY) */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

/* 7. MOBILE STICKY CTA (NA DOLE EKRANU) */
@media (max-width: 768px) {
    /* Wyższe ciasteczka, żeby nie zasłaniały przycisku */
    #cmplz-cookiebanner-container, .cmplz-cookiebanner { 
        bottom: 80px /* removed !important */; 
    }
}

@keyframes pulseStatus {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(72, 187, 120, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(72, 187, 120, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(72, 187, 120, 0); }
}

/* RESPANSYWNOŚĆ BOXA SEO */
@media (max-width: 600px) {
    .egzamin-seo-section {
        padding: 18px;
        margin: 15px 0;
    }
}

/* ============================================================
   [EGZAMIN.PL] - SEKCJA SMART-GRID (LANDING PAGE BRAMKA)
   Zastosowanie: Strona Główna - Kafelki wyboru kursów
   Optymalizacja: UX / SEO / Mobile-First 2026
   ============================================================ */

.egzamin-landing-grid {
    padding: 80px 20px;
    background: #ffffff;
}

.grid-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.grid-intro {
    text-align: center;
    margin-bottom: 60px;
}

.grid-intro h2 {
    font-size: 2.5rem;
    color: #1a202c;
    letter-spacing: -1px;
}

.grid-intro h2 span {
    color: #2b6cb0;
    display: block;
}

/* KONTENER SIATKI */
.lp-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
}

/* POJEDYNCZY KAFEL (CARD) */
.lp-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.lp-card:hover {
    transform: translateY(-5px);
    border-color: #2b6cb0;
    box-shadow: 0 12px 20px rgba(43, 108, 176, 0.1);
}

/* Wariacja dla kursów priorytetowych */
.lp-card.premium {
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.lp-card-body {
    padding: 30px;
}

/* Etykiety nad tytułami */
.lp-tag {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    color: #2b6cb0;
    background: rgba(43, 108, 176, 0.1);
    padding: 4px 10px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.lp-card h3 {
    margin: 15px 0 10px 0;
    font-size: 1.5rem;
    color: #1a202c;
}

.lp-card p {
    color: #4a5568;
    margin: 0;
    font-size: 1rem;
}

/* Stopka kafli z przyciskiem akcji */
.lp-card-footer {
    padding: 20px 30px;
    background: rgba(0,0,0,0.02);
    border-top: 1px solid #e2e8f0;
    font-weight: 700;
    color: #2b6cb0;
    font-size: 0.9rem;
    transition: background 0.2s;
}

.lp-card:hover .lp-card-footer {
    background: #2b6cb0;
    color: #ffffff;
}

/* DOPASOWANIE MOBILNE */
@media (max-width: 768px) {
    .grid-intro h2 { font-size: 1.8rem; }
    .lp-grid-container { grid-template-columns: 1fr; }
}

/* --- KONIEC SEKCJI SMART-GRID --- */

/* --- CSS STOPKA EGZAMIN.PL (WERSJA FINALNA Z POPRAWKAMI) --- */

.footer-2026-container {
    /* BREAKOUT - Tło na całą szerokość ekranu */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    
    /* Wygląd tła */
    background-color: #111111;
    color: #cccccc;
    font-family: system-ui, -apple-system, sans-serif;
    padding-top: 60px;
    padding-bottom: 30px;
    border-top: 3px solid #e60000;
    box-sizing: border-box;
}

.footer-2026-inner {
    max-width: 1240px; 
    margin: 0 auto;
    padding: 0 20px;
    
    display: grid;
    /* 4 kolumny dopasowujące się automatycznie */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
}

/* --- NAGŁÓWKI (SPÓJNE) --- */
.footer-col h3 {
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 20px;
    margin-top: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.footer-brand p {
    font-size: 14px;
    line-height: 1.6;
    color: #aaaaaa;
    margin: 0;
}

/* --- LINKI --- */
.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-col ul li {
    margin-bottom: 10px;
}
.footer-col a {
    color: #aaaaaa;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 15px;
}
.footer-col a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Wyróżniony link */
.highlight-link {
    color: #fff /* removed !important */;
    font-weight: bold;
}
.mt-high {
    margin-top: 15px;
}

/* --- DANE FIRMY --- */
.footer-trust address {
    font-style: normal;
    line-height: 1.6;
    margin-bottom: 20px;
    font-size: 14px;
    color: #ccc;
}
.contact-link {
    color: #fff /* removed !important */;
    font-weight: 600;
}

/* --- PŁATNOŚCI (WYŚRODKOWANE) --- */
.footer-payments {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #333;
    text-align: center; /* Klucz do wyśrodkowania napisów i kontenerów */
}

.payment-label {
    font-size: 12px;
    color: #888;
    margin-bottom: 10px;
    display: block;
}

/* Mollie - centrowanie obrazka blokowego */
.payment-logo-main {
    display: block;
    margin: 0 auto 15px auto; /* Auto margin po bokach centruje obrazek */
    opacity: 0.9;
}

/* Kontener ikon - centrowanie flexboxem */
.payment-icons-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center; /* To ustawia ikony na środku */
    align-items: center;
}

.payment-icons-row img {
    background: #fff;
    border-radius: 4px;
    padding: 4px;
    height: 32px;
    width: auto;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* --- DOLNY PASEK --- */
.footer-2026-bottom {
    max-width: 1240px;
    margin: 50px auto 0;
    padding: 20px 20px 0;
    border-top: 1px solid #222;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    font-size: 13px;
    color: #666;
}

.legal-links a {
    color: #777;
    margin-left: 20px;
    text-decoration: none;
}
.legal-links a:hover {
    color: #aaa;
}

/* --- MOBILE + CTA FIX --- */
@media (max-width: 768px) {
    .footer-2026-bottom {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    .legal-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    .legal-links a {
        margin: 0 5px;
    }
    
    /* TU JEST FIX NA PRZYCISK CTA */
    /* Dodajemy duży padding na dole kontenera, żeby treść "odjechała" w górę */
    .footer-2026-container {
        padding-bottom: 100px /* removed !important */; 
    }
    
    body { overflow-x: hidden; }
}


/* =======================================================
   NAPRAWA LISTY Ranking miasta - METODA "NIEWIDZIALNEGO TEKSTU"
   ======================================================= */

    
    /* Reszta stylów wyglądu */
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    margin-top: 15px;
    margin-bottom: 30px;
    position: relative;
    z-index: 10;
}

/* --- STYLE DLA WNĘTRZA TABELKI (Żeby na pewno wyglądała dobrze) --- */

/* Ciemny pasek rankingu */
.main-rank-badge {
    background: #2d3748;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.rank-label { 
    font-size: 0.75rem /* removed !important */; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    opacity: 0.9; 
    font-weight: 600;
    color: #fff /* removed !important */;
}
.rank-value { 
    font-size: 1.6rem /* removed !important */; 
    font-weight: 800; 
    color: #fff /* removed !important */;
}

/* Kafelki */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}
.stat-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}
.stat-card.total { background: #ebf8ff; border-color: #bee3f8; }
.stat-label { 
    display: block; 
    font-size: 0.65rem /* removed !important */; 
    color: #718096 /* removed !important */; 
    text-transform: uppercase; 
    font-weight: 700; 
    margin-bottom: 5px; 
}
.stat-num { 
    display: block; 
    font-size: 1.1rem /* removed !important */; 
    font-weight: 700; 
    color: #2d3748 /* removed !important */; 
}

/* Przycisk */
.archive-btn-wrapper { text-align: right; margin-top: 20px; }
.rank-btn {
    display: inline-block;
    padding: 10px 24px;
    background: #3182ce;
    color: #fff /* removed !important */;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none /* removed !important */;
    font-size: 0.9rem /* removed !important */;
}

/* RWD */
@media (max-width: 768px) {
    .stats-grid { grid-template-columns: 1fr 1fr; }
}

/* Kontener panelu WYSZUKIWARKA REGIONOW */
.search-box-container {
    background: #ffffff;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    margin-bottom: 30px;
}

.search-header {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.1rem;
    color: #2d3748;
    font-weight: 700;
}

/* Pola tekstowe i przycisk */
.text-search-form {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
}

.search-input {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    font-size: 0.9rem;
}

.search-btn {
    padding: 10px 15px;
    background: #3182ce;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}
.search-btn:hover { background: #2b6cb0; }

/* Separator "LUB" */
.search-divider {
    text-align: center;
    border-bottom: 1px solid #e2e8f0;
    line-height: 0.1em;
    margin: 20px 0;
}
.search-divider span {
    background: #fff;
    padding: 0 10px;
    color: #718096;
    font-size: 0.75rem;
    font-weight: 700;
}

/* Dropdowny */
.select-wrapper {
    margin-bottom: 15px;
}

.select-wrapper label {
    display: block;
    font-size: 0.8rem;
    color: #4a5568;
    margin-bottom: 5px;
    font-weight: 600;
}

.select-wrapper select {
    width: 100%;
    padding: 10px;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    background-color: #f7fafc;
    color: #2d3748;
}

/* --- SIATKA WOJEWÓDZTW (LANDING PAGE) --- */

.province-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 kolumny na komputerze */
    gap: 20px;
    margin: 40px 0;
}

.province-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 25px;
    text-decoration: none /* removed !important */;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    position: relative;
    overflow: hidden;
}

/* Efekt Hover (Unoszenie) */
.province-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(49, 130, 206, 0.15);
    border-color: #3182ce;
}

/* Ikona i Tytuł */
.card-icon {
    font-size: 2rem;
    margin-bottom: 15px;
    display: block;
}

.card-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #2d3748;
    margin: 0 0 5px 0;
}

.card-count {
    font-size: 0.85rem;
    color: #718096;
    font-weight: 600;
}

/* Strzałka na dole */
.card-arrow {
    margin-top: 20px;
    align-self: flex-end;
    font-weight: 800;
    color: #3182ce;
    opacity: 0; /* Ukryta domyślnie */
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.province-card:hover .card-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Kolorowy pasek na górze kafla (ozdobnik) */
.province-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3182ce, #63b3ed);
    opacity: 0;
    transition: opacity 0.3s;
}

.province-card:hover::before {
    opacity: 1;
}

/* Responsywność (Tablet i Telefon) */
@media (max-width: 1024px) {
    .province-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .province-grid { grid-template-columns: 1fr; } /* 1 kolumna na telefonie */
    .province-card { flex-direction: row; align-items: center; padding: 15px; }
    .card-icon { margin-bottom: 0; margin-right: 15px; font-size: 1.5rem; }
    .card-arrow { margin-top: 0; opacity: 1; transform: none; }
}

/* ==================================================
   EGZAMIN.PL - NOWOCZESNA STRONA GŁÓWNA 2026 (UPDATED)
   Optymalizacja UX, Mobile-First i RAG
   ================================================== */

/* --- Kontenery --- */
.container-standard { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.container-narrow { max-width: 1000px; margin: 0 auto; padding: 0 20px; }
.section-title { text-align: center; margin-bottom: 40px; font-size: 2rem; color: #0f172a; }

/* ROZWIĄZANIE PROBLEMU: Przycisk obrysowy dopasowany do jasnego tła */
.btn-outline-blue {
    display: inline-block;
    color: #3b82f6 /* removed !important */; 
    background-color: transparent /* removed !important */;
    border: 2px solid #3b82f6 /* removed !important */;
    padding: 12px 28px;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    text-align: center;
}
.btn-outline-blue:hover {
    background-color: #3b82f6 /* removed !important */;
    color: #ffffff /* removed !important */;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    transform: translateY(-2px);
}

/* ========================================================= */
/* --- 1. HERO SECTION (Globalna struktura FULL WIDTH) ----- */
/* ========================================================= */

.master-hero-section {
    /* ROZCIĄGNIĘCIE NA CAŁY EKRAN */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    
    /* Domyślne, eleganckie ciemne tło dla wszystkich podstron */
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    padding: 70px 20px;
    border-bottom: 4px solid #3b82f6;
    overflow: hidden;
}

@media (min-width: 768px) {
    .master-hero-section { padding: 100px 20px; }
}

/* Nakładka domyślna (pusta, używana tylko jak jest zdjęcie) */
.master-hero-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
}

/* Kontener Flexbox */
.master-hero-container {
    position: relative; z-index: 2; max-width: 1200px; margin: 0 auto;
    display: flex; flex-wrap: wrap; gap: 40px; align-items: center; justify-content: space-between;
}

/* ========================================================= */
/* --- 2. GLOBALNE KOLORY TEKSTÓW I ELEMENTÓW (Czytelność) - */
/* ========================================================= */

.master-hero-text { flex: 1 1 500px; color: #f8fafc; }
.master-hero-h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.1; font-weight: 800; margin-bottom: 20px; color: #ffffff; }
.master-hero-desc { font-size: 1.15rem; line-height: 1.6; color: #cbd5e1; margin-bottom: 30px; max-width: 600px; }
.highlight-ai { color: #60a5fa; text-shadow: 0 0 20px rgba(96,165,250,0.3); }

/* Domyślny Tag */
.master-hero-tag {
    background-color: rgba(59, 130, 246, 0.2); border: 1px solid #3b82f6; color: #93c5fd;
    padding: 6px 16px; border-radius: 50px; font-weight: bold; text-transform: uppercase; 
    font-size: 0.85rem; letter-spacing: 1px; display: inline-block; margin-bottom: 20px;
}

/* Domyślna szklana ramka po prawej (Glassmorphism) */
.master-hero-info-box {
    flex: 1 1 300px; max-width: 450px; width: 100%;
    background: rgba(30, 41, 59, 0.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 25px; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}
.info-box-title { display: block; font-size: 1.3rem; color: #f8fafc; margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 15px; font-weight: 700; }
.info-box-item { color: #cbd5e1; font-size: 1rem; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; justify-content: space-between; align-items: center; }
.info-box-item:last-child { border-bottom: none; padding-bottom: 0; }
.info-box-item span { color: #93c5fd; font-weight: 600; text-align: right; }

/* Domyślne przyciski (aby chronić podstrony przed brakiem stylów) */
.master-hero-btn, .btn-primary-pro, .btn-primary-lex, .btn-primary-blue {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 28px; border-radius: 8px; font-weight: bold; text-decoration: none; 
    transition: 0.3s; background-color: #3b82f6; color: #ffffff; border: none;
}
.master-hero-btn:hover, .btn-primary-pro:hover, .btn-primary-lex:hover, .btn-primary-blue:hover {
    background-color: #2563eb;
}
.btn-secondary-pro, .btn-secondary-lex {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 28px; border-radius: 8px; font-weight: bold; text-decoration: none; 
    transition: 0.3s; background-color: #ffffff; color: #3b82f6 /* removed !important */; border: 2px solid #3b82f6;
}

/* ========================================================= */
/* --- 3. SPECYFICZNY WYGLĄD: STRONA GŁÓWNA (Ze zdjęciem) -- */
/* ========================================================= */

#sekcja-hero-2026 {
    background-image: url('https://egzamin.pl/wp-content/uploads/2025/06/egzamin6257.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#sekcja-hero-2026 .master-hero-overlay {
    background: linear-gradient(135deg, rgba(15,23,42,0.95) 0%, rgba(30,41,59,0.7) 100%);
}

/* ========================================================= */
/* --- 4. SPECYFICZNY WYGLĄD: MATURA I ÓSMOKLASISTA (Navy) - */
/* ========================================================= */

#hero-osmoklasisty, .matura-hero-theme, .prawo-hero-theme {
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
}

/* Tag dla motywu Navy (Jasno-niebieski) */
#hero-osmoklasisty .master-hero-tag, 
.matura-hero-theme .master-hero-tag, 
.prawo-hero-theme .master-hero-tag {
    color: #90cdf4;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
}

/* Przycisk i szklana ramka dla motywu Navy */
#hero-osmoklasisty .master-hero-btn, 
.matura-hero-theme .master-hero-btn, 
.prawo-hero-theme .master-hero-btn {
    background-color: #3182ce;
}
#hero-osmoklasisty .master-hero-info-box,
.matura-hero-theme .master-hero-info-box,
.prawo-hero-theme .master-hero-info-box {
    background: rgba(255, 255, 255, 0.05);
}

/* ========================================================================= */
/* --- PONIŻEJ STYLI BEZ ZMIAN (Globalne sekcje: FAQ, Karty, Statystyki) --- */
/* ========================================================================= */

/* --- 2. SNIPPETY AI --- */
.egzamin-seo-section { padding: 50px 0; background-color: #f1f5f9; }
.snippet-header { text-align: center; color: #64748b; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 30px; }
.snippet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.snippet-item { background: #ffffff; padding: 25px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.03); border-left: 4px solid #3b82f6; }
.snippet-item dt { font-size: 1.2rem; color: #0f172a; font-weight: bold; margin-bottom: 10px; }
.snippet-item dd { color: #475569; margin: 0; line-height: 1.6; }

/* --- 3. KARTY KURSÓW (Grid) --- */
.egzamin-landing-grid { padding: 60px 0; background-color: #ffffff; }
.grid-intro { text-align: center; margin-bottom: 40px; }
.grid-intro h2 { font-size: 2rem; color: #0f172a; }
.highlight-blue { color: #3b82f6; }

/* Zabezpieczenie przed wychodzeniem kart na małych ekranach */
.lp-grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 25px; }

.lp-card { background: #f8fafc; border-radius: 12px; border: 1px solid #e2e8f0; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; }
.lp-card.premium { background: #ffffff; border: 2px solid #3b82f6; box-shadow: 0 10px 25px rgba(59,130,246,0.1); }
.lp-card:hover { transform: translateY(-3px); }
.lp-card-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }
.lp-card-body { padding: 25px; flex: 1; }
.lp-tag { padding: 4px 12px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; text-transform: uppercase; display: inline-block; }
.lp-tag.default { background: #dbeafe; color: #1e40af; }
.lp-tag.special { background: #3b82f6; color: #ffffff; }
.lp-card h3 { font-size: 1.4rem; color: #0f172a; margin: 15px 0 10px 0; }
.lp-card p { color: #475569; line-height: 1.5; margin: 0; }
.lp-card-footer { background: #f1f5f9; padding: 15px 25px; font-weight: bold; color: #3b82f6; border-top: 1px solid #e2e8f0; }
.premium .lp-card-footer { background: #eff6ff; color: #2563eb; border-top-color: #bfdbfe; }

/* --- 4. ŚRODOWISKO IT --- */
.interactive-learning-section { padding: 60px 0; background-color: #0f172a; }
#interactive-it-title { color: #f8fafc; text-align: center; margin-bottom: 30px; }
.python-lesson-container { background: #1e293b; padding: 25px; border-radius: 12px; border: 1px solid #334155; color: #cbd5e1; }
.python-lesson-container h3 { color: #60a5fa; margin-top: 0; font-size: 1.3rem; margin-bottom: 10px; }
.python-lesson-container pre { background: #000; padding: 15px; border-radius: 8px; overflow-x: auto; border: 1px solid #334155; margin: 15px 0; }
.py-keyword { color: #569cd6; } .py-func { color: #dcdcaa; } .py-comment { color: #6a9955; } .py-num { color: #b5cea8; } .py-str { color: #ce9178; }

/* --- 5. STATYSTYKI --- */
.trust-signals-section { padding: 60px 0; background-color: #ffffff; border-bottom: 1px solid #e2e8f0; }
.trust-header { text-align: center; margin-bottom: 40px; }
.trust-header .btn-outline-blue { margin-top: 15px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; text-align: center; }
.stat-item strong { display: block; font-size: 2.5rem; color: #3b82f6; font-weight: 800; line-height: 1; }
.stat-item span { color: #475569; display: block; margin-top: 8px; font-size: 0.95rem; }

/* --- 6. JAK TO DZIAŁA (Nowe Ikony SVG) --- */
.how-it-works-section { padding: 60px 0; background-color: #f8fafc; }
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px; }
.step-card { background: #fff; padding: 25px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); }
.modern-icon { display: block; margin-bottom: 15px; width: 40px; height: 40px; color: #3b82f6; }
.modern-icon svg { width: 100%; height: 100%; }
.step-card h3 { margin-top: 0; font-size: 1.2rem; color: #0f172a; }
.step-card p { color: #475569; line-height: 1.6; margin-top: 10px; }

/* --- 7. FEATURES --- */
.features-section { padding: 60px 0; background-color: #ffffff; }
.features-header { text-align: center; margin-bottom: 50px; }
.features-header p { color: #3b82f6; font-size: 1.2rem; font-weight: bold; }
.feature-row { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; margin-bottom: 60px; }
.feature-row.reverse { flex-direction: row-reverse; }
.feature-text { flex: 1; min-width: 280px; }
.feature-text h3 { font-size: 1.6rem; color: #0f172a; margin-bottom: 15px; }
.feature-text p { color: #475569; line-height: 1.6; }
.feature-image { flex: 1; min-width: 280px; margin: 0; }
.feature-image img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }

/* --- 8 & 9. FAQ i TABELA --- */
.seo-faq-article { padding: 60px 0; background-color: #ffffff; }
.faq-container { margin-bottom: 50px; }
.faq-details { margin-bottom: 15px; background: #f8fafc; padding: 18px; border-radius: 8px; border: 1px solid #e2e8f0; }
.faq-details summary { font-weight: bold; cursor: pointer; font-size: 1.05em; color: #0f172a; outline: none; }
.faq-answer p { margin-top: 12px; color: #475569; line-height: 1.6; }

.table-responsive-wrapper { overflow-x: auto; width: 100%; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); background-color: #fff; }
.comparison-table { width: 100%; min-width: 600px; border-collapse: collapse; }
.comparison-table th { padding: 15px; border-bottom: 2px solid #334155; text-align: left; background-color: #0f172a; color: #fff; }
.comparison-table th.highlight-col { background-color: #3b82f6; border-bottom-color: #3b82f6; }
.comparison-table td { padding: 15px; border-bottom: 1px solid #e2e8f0; color: #475569; }
.comparison-table tr:nth-child(odd) td { background-color: #f8fafc; }
.comparison-table td.highlight-cell { font-weight: bold; background-color: #eff6ff /* removed !important */; color: #1e3a8a; border-left: 4px solid #3b82f6; }

/* --- 10. MOBILNE CTA PŁYWAJĄCE --- */
.cta-left-content { display: flex; flex-direction: column; }
.ai-status { display: flex; align-items: center; gap: 6px; }
.status-dot { width: 8px; height: 8px; background-color: #10b981; border-radius: 50%; box-shadow: 0 0 8px #10b981; }
.status-text { color: #10b981; font-size: 0.7rem; text-transform: uppercase; font-weight: bold; }
.cta-main-title { color: #fff; font-size: 0.95rem; }
.cta-button { background: #3b82f6; color: #fff; padding: 8px 18px; border-radius: 30px; font-weight: bold; text-decoration: none; font-size: 0.9rem; transition: background 0.3s; white-space: nowrap; }
.cta-button:hover { background: #2563eb; }

/* Optymalizacja CTA na małe ekrany */
@media (max-width: 480px) {
    .status-text { display: none; } 
    .cta-main-title { font-size: 0.85rem; }
    .cta-button { padding: 8px 14px; font-size: 0.8rem; }
}
/* ========================================================= */
/* --- STYLE UX DLA STRONY MATURALNEJ (Ciemniejszy motyw) -- */
/* ========================================================= */

.matura-hero-theme {
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
}

/* FIX KONTRASTU - Wymuszona biel na głównym nagłówku */
.matura-hero-theme .master-hero-h1 {
    color: #ffffff /* removed !important */;
}

/* Jasno-niebieski i wyraźny tag u góry */
.matura-hero-theme .master-hero-tag {
    color: #90cdf4 /* removed !important */;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Tekst pod nagłówkiem */
.matura-hero-theme .master-hero-desc {
    color: #e2e8f0;
}

/* Kolorystyka maturalnego przycisku w hero */
.btn-primary-navy {
    background-color: #3182ce;
    color: #fff;
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
}

.btn-primary-navy:hover {
    background-color: #2b6cb0;
}

/* ========================================================= */
/* --- MOBILE STICKY CTA (Belka sprzedażowa na dół ekranu) - */
/* ========================================================= */

@media (max-width: 768px) {
    @keyframes pulse {
        0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(72, 187, 120, 0.7); }
        70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(72, 187, 120, 0); }
        100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(72, 187, 120, 0); }
    }
    
    /* Poprawka kolizyjna dla paska z ciasteczkami na urządzeniach mobilnych */
    #cmplz-cookiebanner-container, 
    .cmplz-cookiebanner { 
        bottom: 80px /* removed !important */; 
    }
}
/* Pływający pasek na urządzeniach mobilnych */
@media (max-width: 768px) {
    @keyframes pulse {
        0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(72, 187, 120, 0.7); }
        70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(72, 187, 120, 0); }
        100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(72, 187, 120, 0); }
    }

    #cmplz-cookiebanner-container, .cmplz-cookiebanner { bottom: 80px /* removed !important */; }
}
/* ========================================================= */
/* --- STYLE UX DLA PRAWA JAZDY (Motyw Dokumentu PJ) ------- */
/* ========================================================= */

/* Tło inspirowane oficjalnym prawem jazdy (bordo/róż wpadający w szosowy granat) */
.prawo-jazdy-hero-theme {
    background: linear-gradient(135deg, #8B3A62 0%, #2C3E50 100%);
}

/* Wymuszenie bieli na nagłówkach i tekstach w hero dla idealnego kontrastu */
.prawo-jazdy-hero-theme .master-hero-h1,
.prawo-jazdy-hero-theme .master-hero-desc {
    color: #ffffff /* removed !important */;
}

/* Ozdobny tag (nowoczesny róż/biel) na samej górze */
.prawo-jazdy-hero-theme .master-hero-tag {
    color: #ffdce6 /* removed !important */;
    background-color: rgba(255, 255, 255, 0.15);
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Kolorystyka głównego przycisku w hero */
.btn-primary-driving {
    background-color: #C04B76 /* removed !important */; /* Energiczny różowawy akcent */
    color: #ffffff /* removed !important */;
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
    border: none /* removed !important */;
}

.btn-primary-driving:hover {
    background-color: #9b375d /* removed !important */;
}

/* Przycisk secondary (odwrócony) */
.btn-secondary-driving {
    color: #8B3A62 /* removed !important */; 
    border-color: #8B3A62 /* removed !important */;
}

.btn-secondary-driving:hover {
    background-color: #f7fafc /* removed !important */;
}
/* ========================================================= */
/* --- STYLE UX DLA PRAWO (Motyw Prawniczy / Prestige) ----- */
/* ========================================================= */

/* Eleganckie tło dla branży prawniczej (Głęboki granat wpadający w grafit) */
.prawo-hero-theme {
    background: linear-gradient(135deg, #1A365D 0%, #2D3748 100%);
    position: relative;
    overflow: hidden;
}

/* Wymuszenie bieli dla doskonałego kontrastu czytelności */
.prawo-hero-theme .master-hero-h1,
.prawo-hero-theme .master-hero-desc {
    color: #ffffff /* removed !important */;
}

/* Ozdobny tag na samej górze w stylistyce złotego prestiżu */
.prawo-hero-theme .master-hero-tag {
    color: #F6E05E /* removed !important */; /* Złoty akcent */
    background-color: rgba(255, 255, 255, 0.1);
    padding: 4px 12px;
    border-radius: 4px; /* Ostrzejsze kąty dla większej formalności */
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Główny przycisk nawiązujący do wagi Temidy (Złoto / Mosiądz) */
.btn-primary-lex {
    background-color: #D4AF37 /* removed !important */; /* Złoty Mosiądz */
    color: #1A365D /* removed !important */; /* Granatowy tekst */
    padding: 12px 24px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    border: 2px solid #D4AF37 /* removed !important */;
}

.btn-primary-lex:hover {
    background-color: #b8962e /* removed !important */;
    border-color: #b8962e /* removed !important */;
}

/* Przycisk secondary (przezroczysty z obwódką) */
.btn-secondary-lex {
    color: #ffffff /* removed !important */; 
    background-color: transparent /* removed !important */;
    border: 2px solid #ffffff /* removed !important */;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.btn-secondary-lex:hover {
    background-color: rgba(255, 255, 255, 0.1) /* removed !important */;
}

/* Subtelny sznyt dla informacji bocznych w Hero */
.prawo-hero-theme .master-hero-info-box {
    border-top: 4px solid #D4AF37;
    border-radius: 4px;
}
/* ========================================================= */
/* --- STYLE UX DLA PROGRAMOWANIA (Motyw Cyber IDE) -------- */
/* ========================================================= */

/* Ciemne tło nawiązujące do edytorów kodu (VS Code, WebStorm) */
.programowanie-hero-theme {
    background: #0f172a; /* Slate 900 */
    background-image: radial-gradient(circle at top right, rgba(56, 189, 248, 0.1), transparent 50%),
                      radial-gradient(circle at bottom left, rgba(16, 185, 129, 0.05), transparent 50%);
}

/* Jasny tekst i neonowe akcenty dla perfekcyjnej czytelności */
.programowanie-hero-theme .master-hero-h1 {
    color: #f8fafc /* removed !important */;
}

.programowanie-hero-theme .master-hero-h1 span {
    color: #38bdf8 /* removed !important */; /* Neon Cyan */
    text-shadow: 0 0 20px rgba(56, 189, 248, 0.3);
}

.programowanie-hero-theme .master-hero-desc {
    color: #cbd5e1 /* removed !important */;
}

/* Ozdobny tag IT */
.programowanie-hero-theme .master-hero-tag {
    color: #10b981 /* removed !important */; /* Terminal Green */
    background-color: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 6px 14px;
    border-radius: 4px;
    font-weight: 700;
    font-family: 'Courier New', Courier, monospace; /* Monospace dla akcentu IT */
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Przycisk Główny (Neon Cyan) */
.btn-primary-code {
    background-color: #38bdf8 /* removed !important */;
    color: #0f172a /* removed !important */; 
    padding: 14px 28px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 800;
    transition: all 0.3s ease;
    border: none /* removed !important */;
    box-shadow: 0 4px 15px rgba(56, 189, 248, 0.3);
}

.btn-primary-code:hover {
    background-color: #0ea5e9 /* removed !important */;
    box-shadow: 0 6px 20px rgba(56, 189, 248, 0.5);
    transform: translateY(-2px);
}

/* Przycisk Dodatkowy (Transparent with Border) */
.btn-secondary-code {
    color: #38bdf8 /* removed !important */; 
    background-color: transparent /* removed !important */;
    border: 2px solid #38bdf8 /* removed !important */;
    border-radius: 6px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.btn-secondary-code:hover {
    background-color: rgba(56, 189, 248, 0.1) /* removed !important */;
}

/* Boczny panel informacyjny */
.programowanie-hero-theme .master-hero-info-box {
    background: rgba(30, 41, 59, 0.8); /* Półprzezroczysty Slate 800 */
    border: 1px solid #334155;
    border-top: 4px solid #38bdf8;
    color: #e2e8f0;
}

.programowanie-hero-theme .info-box-title {
    color: #f8fafc;
    border-bottom: 1px solid #334155;
}

.programowanie-hero-theme .info-box-item {
    border-bottom: 1px solid #334155;
}

.programowanie-hero-theme .info-box-item span {
    color: #38bdf8;
    font-weight: 600;
}
/* ========================================================= */
/* --- STYLE UX DLA JĘZYKÓW (Motyw Academic AI) ------------ */
/* ========================================================= */

/* Głęboki granat wpadający w akademicki "Navy", z turkusową poświatą */
.jezyki-hero-theme {
    background: #0f172a; /* Slate 900 */
    background-image: linear-gradient(to right, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.8)), 
                      url('https://egzamin.pl/wp-content/uploads/2025/06/lines.png'); /* Subtelne linie w tle */
    background-size: cover;
    background-position: center;
    position: relative;
    border-bottom: 4px solid #06b6d4; /* Turkusowe podkreślenie */
}

/* Ozdobny tag nad nagłówkiem */
.jezyki-hero-theme .master-hero-tag {
    color: #f8fafc /* removed !important */; 
    background-color: #06b6d4; /* Turkus */
    padding: 6px 16px;
    border-radius: 20px; /* Zaokrąglony kształt (badge) */
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 15px;
}

/* Przycisk Główny (Turkusowy Academic) */
.btn-primary-lang {
    background-color: #06b6d4 /* removed !important */;
    color: #ffffff /* removed !important */; 
    padding: 14px 28px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
    border: none /* removed !important */;
    box-shadow: 0 4px 10px rgba(6, 182, 212, 0.3);
}

.btn-primary-lang:hover {
    background-color: #0891b2 /* removed !important */; /* Ciemniejszy turkus */
    box-shadow: 0 6px 15px rgba(6, 182, 212, 0.5);
    transform: translateY(-2px);
}

/* Przycisk Dodatkowy (Transparent z jasną obwódką) */
.btn-secondary-lang {
    color: #f8fafc /* removed !important */; 
    background-color: transparent /* removed !important */;
    border: 2px solid #94a3b8 /* removed !important */;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-align: center;
    line-height: 24px; /* Wyrównanie z btn-primary */
}

.btn-secondary-lang:hover {
    background-color: rgba(248, 250, 252, 0.1) /* removed !important */;
    border-color: #f8fafc /* removed !important */;
}

/* Boczny panel informacyjny (Lekko rozjaśnione szkło / Glassmorphism) */
.jezyki-hero-theme .master-hero-info-box {
    background: rgba(30, 41, 59, 0.6); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

.jezyki-hero-theme .info-box-title {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.jezyki-hero-theme .info-box-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
/* ========================================================= */
/* --- STYLE UX DLA KOREPETYCJI (Motyw Edu-Assist AI) ------ */
/* ========================================================= */

/* Energetyczny, edukacyjny fiolet wpadający w Indigo */
.korepetycje-hero-theme {
    background: #1e1b4b; /* Bardzo głęboki fiolet (Indigo 950) */
    background-image: radial-gradient(circle at top left, rgba(79, 70, 229, 0.2), transparent 50%),
                      radial-gradient(circle at bottom right, rgba(167, 139, 250, 0.1), transparent 50%);
    position: relative;
    border-bottom: 4px solid #4f46e5;
}

/* Ozdobny tag (Badge) */
.korepetycje-hero-theme .master-hero-tag {
    color: #f8fafc /* removed !important */; 
    background-color: #4f46e5; /* Indigo 600 */
    padding: 6px 16px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 15px;
}

/* Przycisk Główny (Indigo Solid) */
.btn-primary-edu {
    background-color: #4f46e5 /* removed !important */;
    color: #ffffff /* removed !important */; 
    padding: 14px 28px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
    border: none /* removed !important */;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.3);
}

.btn-primary-edu:hover {
    background-color: #4338ca /* removed !important */; /* Ciemniejsze Indigo */
    box-shadow: 0 6px 15px rgba(79, 70, 229, 0.5);
    transform: translateY(-2px);
}

/* Przycisk Dodatkowy (Biały obrys) */
.btn-secondary-edu {
    color: #f8fafc /* removed !important */; 
    background-color: transparent /* removed !important */;
    border: 2px solid #a78bfa /* removed !important */;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-align: center;
    line-height: 24px;
}

.btn-secondary-edu:hover {
    background-color: rgba(167, 139, 250, 0.1) /* removed !important */;
    border-color: #f8fafc /* removed !important */;
}

/* Boczny panel informacyjny (Glassmorphism z tintem fioletu) */
.korepetycje-hero-theme .master-hero-info-box {
    background: rgba(30, 27, 75, 0.6); /* Indigo 900 z przezroczystością */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(167, 139, 250, 0.2);
    border-radius: 12px;
}

.korepetycje-hero-theme .info-box-title {
    border-bottom: 1px solid rgba(167, 139, 250, 0.2);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.korepetycje-hero-theme .info-box-item {
    border-bottom: 1px solid rgba(167, 139, 250, 0.1);
}

/* Animacja pulsacji dla przycisku Sticky (dla zielonej kropki) */
@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

/* Ukrywanie Sticky CTA na desktopie */
@media (min-width: 769px) {
    }
/* ========================================================= */
/* --- STYLE UX DLA EGZAMINÓW ZAWODOWYCH (Motyw Pro AI) ---- */
/* ========================================================= */

/* Głęboki techniczny Slate z bursztynowym światłem */
.zawodowe-hero-theme {
    background: #0f172a; /* Slate 900 */
    background-image: radial-gradient(circle at top right, rgba(245, 158, 11, 0.15), transparent 40%),
                      radial-gradient(circle at bottom left, rgba(30, 41, 59, 0.8), transparent 50%);
    position: relative;
    border-bottom: 4px solid #f59e0b; /* Bursztynowy akcent (Amber 500) */
}

/* Ozdobny tag nad H1 */
.zawodowe-hero-theme .master-hero-tag {
    color: #0f172a /* removed !important */; 
    background-color: #f59e0b; /* Amber 500 */
    padding: 6px 16px;
    border-radius: 4px; /* Ostrzejsze krawędzie - bardziej "profesjonalnie/urzędowo" */
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 15px;
}

/* Przycisk Główny (Solid Amber) */
.btn-primary-pro {
    background-color: #f59e0b /* removed !important */;
    color: #0f172a /* removed !important */; 
    padding: 14px 28px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 800;
    transition: all 0.3s ease;
    border: none /* removed !important */;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);
}

.btn-primary-pro:hover {
    background-color: #d97706 /* removed !important */; /* Ciemniejszy Amber 600 */
    box-shadow: 0 6px 15px rgba(245, 158, 11, 0.5);
    transform: translateY(-2px);
}

/* Przycisk Dodatkowy (Transparent) */
.btn-secondary-pro {
    color: #f8fafc /* removed !important */; 
    background-color: transparent /* removed !important */;
    border: 2px solid #cbd5e1 /* removed !important */;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-align: center;
    line-height: 24px;
}

.btn-secondary-pro:hover {
    background-color: rgba(248, 250, 252, 0.1) /* removed !important */;
    border-color: #f59e0b /* removed !important */; /* Podświetla się na bursztynowo */
    color: #f59e0b /* removed !important */;
}

/* Boczny panel informacyjny (Techniczny Glass) */
.zawodowe-hero-theme .master-hero-info-box {
    background: rgba(30, 41, 59, 0.7); /* Slate 800 */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(245, 158, 11, 0.2); /* Lekka bursztynowa ramka */
    border-radius: 8px;
}

.zawodowe-hero-theme .info-box-title {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.zawodowe-hero-theme .info-box-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
/* WYMUSZENIE TŁA DLA EGZAMINU ÓSMOKLASISTY */
body #hero-osmoklasisty.master-hero-section {
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%) /* removed !important */;
}


/* Consolidated mobile-sticky-cta (place at end of file) */
.mobile-sticky-cta {
  display: none;
}

@media (max-width: 768px) {
  .mobile-sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(90deg,#1a202c,#2d3748);
    padding: 12px 16px;
    z-index: 9999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 -8px 20px rgba(0,0,0,0.15);
    box-sizing: border-box;
  }
  .mobile-sticky-cta .cta-text { display:flex; flex-direction:column; gap:6px; color:#fff; }
  .mobile-sticky-cta .pulse-dot { width:8px; height:8px; background:#48bb78; border-radius:50%; display:inline-block; }
  .mobile-sticky-cta .main-cta-label { color:#fff; font-weight:700; font-size:14px; }
  .mobile-sticky-cta .cta-button { background:#fff; color:#1a202c; padding:10px 14px; border-radius:8px; font-weight:700; text-decoration:none; }
}

@media (max-width: 480px) {
  .mobile-sticky-cta { padding: 10px 12px; }
  .mobile-sticky-cta .cta-button { padding: 8px 12px; font-size: 0.9rem; }
}
/* NAGŁOWEK WPISY 
/* 1. Odstępy i wyrównanie całego nagłówka */
.single-post .entry-header {
    text-align: left !important;
    padding-bottom: 20px;
    margin-bottom: 30px;
    background-color: transparent !important; 
}

/* 2. Styl tagu kategorii (Wygląd sekcji wiadomości / kategoria Premium) */
.single-post .entry-taxonomies a {
    background-color: #1a4a7b; /* Zmień na ciemnoniebieski lub kolor Twojej marki */
    color: #ffffff !important;
    padding: 4px 12px;
    text-transform: uppercase;
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 2px;
    display: inline-block;
    margin-bottom: 15px;
    text-decoration: none;
}

/* 3. Typografia Głównego Tytułu */
.single-post .entry-title {
    /* Opcjonalnie: Użyj czcionki szeryfowej, np. Georgia, dla klasycznego wyglądu gazety, 
       lub zostaw bezszeryfową dla nowoczesnego portalu */
    font-family: "Georgia", serif; 
    font-size: 2.8em;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 20px 0;
    color: #111111;
}

/* 4. Styl Meta Autora i Daty (Linie redakcyjne pod tytułem) */
.single-post .entry-meta {
    font-size: 0.9em;
    color: #555555;
    border-top: 2px solid #000000; /* Mocna linia redakcyjna u góry */
    border-bottom: 1px solid #e2e2e2; /* Subtelna linia na dole */
    padding: 12px 0;
    display: flex;
    align-items: center;
    gap: 15px; /* Odstęp między autorem a datą */
}

/* Ukrycie domyślnych separatorów Kadence, jeśli przeszkadzają */
.single-post .entry-meta .meta-separator {
    display: none; 
}
/* Styl wpisów na blogu */
.pjb-art {
  --clr-primary: #1a3a6b;
  --clr-accent:  #e8401a;
  --clr-light:   #f4f7fb;
  --clr-border:  #dde3ed;
  --clr-text:    #1f2937;
  --clr-muted:   #4b5563;
  --radius:      10px;
  --shadow:      0 2px 12px rgba(26,58,107,.10);
  --font-body:   Georgia, serif;
  --font-ui:     'Segoe UI', system-ui, sans-serif;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--clr-text);
}

/* ─── SECTIONS ─────────────────────────── */
.pjb-art section { margin-bottom: 3rem; }

/* ─── HEADINGS ──────────────────────────── */
.pjb-art h2 {
  font-family: var(--font-ui);
  font-size: clamp(1.25rem, 2.8vw, 1.65rem);
  font-weight: 700;
  color: var(--clr-primary);
  border-bottom: 2px solid var(--clr-border);
  padding-bottom: .5rem;
  margin: 2.4rem 0 .9rem;
}
.pjb-art h3 {
  font-family: var(--font-ui);
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  font-weight: 700;
  color: #1f2937;
  margin: 1.8rem 0 .6rem;
}

/* ─── ANSWER-FIRST LEAD ─────────────────── */
.pjb-art .answer-lead {
  background: linear-gradient(90deg, rgba(26,58,107,.06) 0%, transparent 100%);
  border-left: 3px solid var(--clr-primary);
  padding: .75rem 1rem .75rem 1.1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 1.1rem;
  font-size: 1rem;
  color: var(--clr-text);
}

/* ─── PARAGRAPHS ────────────────────────── */
.pjb-art p { margin-bottom: 1rem; }

/* ─── LISTS ─────────────────────────────── */
.pjb-art ul,
.pjb-art ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
.pjb-art ul li,
.pjb-art ol li { margin-bottom: .4rem; }
.pjb-art ul { list-style: none; padding-left: 0; }
.pjb-art ul li { padding-left: 1.4rem; position: relative; }
.pjb-art ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--clr-accent);
  font-weight: 700;
  font-size: .85em;
  top: .1em;
}

/* ─── STEP LIST ─────────────────────────── */
.pjb-art .steps { counter-reset: step; padding-left: 0; list-style: none; }
.pjb-art .steps li {
  counter-increment: step;
  padding: .9rem 1rem .9rem 3.6rem;
  background: var(--clr-light);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  margin-bottom: .7rem;
  position: relative;
}
.pjb-art .steps li::before {
  content: counter(step);
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: var(--clr-primary);
  color: #fff;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: .9rem;
  font-weight: 700;
}

/* ─── INFO / WARNING / SUCCESS BOXES ───── */
.pjb-art .info-box {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-left: 4px solid #3b82f6;
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  margin: 1.4rem 0;
  font-family: var(--font-ui);
  font-size: .95rem;
}
.pjb-art .info-box strong { color: #1d4ed8; }

.pjb-art .warning-box {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-left: 4px solid var(--clr-accent);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  margin: 1.4rem 0;
  font-family: var(--font-ui);
  font-size: .95rem;
}
.pjb-art .warning-box strong { color: var(--clr-accent); }

.pjb-art .success-box {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-left: 4px solid #16a34a;
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  margin: 1.4rem 0;
  font-family: var(--font-ui);
  font-size: .95rem;
}
.pjb-art .success-box strong { color: #166534; }

/* ─── TABLES ─────────────────────────────── */
.pjb-art .table-wrap {
  overflow-x: auto;
  margin: 1.4rem 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.pjb-art table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: .93rem;
  min-width: 420px;
}
.pjb-art thead tr { background: var(--clr-primary); color: #fff; }
.pjb-art thead th {
  padding: .8rem 1rem;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}
.pjb-art tbody tr:nth-child(even) { background: var(--clr-light); }
.pjb-art tbody tr:hover { background: #e8eef8; }
.pjb-art tbody td {
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--clr-border);
  vertical-align: top;
}
.pjb-art tbody td:first-child { font-weight: 600; color: var(--clr-primary); }

/* ─── IMAGES ─────────────────────────────── */
.pjb-art .article-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
  margin: 1.6rem 0;
  box-shadow: var(--shadow);
  object-fit: cover;
}
.pjb-art .img-caption {
  font-family: var(--font-ui);
  font-size: .82rem;
  color: var(--clr-muted);
  text-align: center;
  margin-top: -.8rem;
  margin-bottom: 1.4rem;
}

/* ─── COST CARDS ──────────────────────────── */
.pjb-art .cost-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin: 1.4rem 0;
}
.pjb-art .cost-card {
  background: var(--clr-light);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  text-align: center;
}
.pjb-art .cost-card .label {
  font-family: var(--font-ui);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--clr-muted);
  margin-bottom: .4rem;
}
.pjb-art .cost-card .amount {
  font-family: var(--font-ui);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--clr-primary);
}
.pjb-art .cost-card .note {
  font-family: var(--font-ui);
  font-size: .78rem;
  color: var(--clr-muted);
  margin-top: .3rem;
}

/* ─── MISC ────────────────────────────────── */
.pjb-art mark {
  background: #fef9c3;
  color: inherit;
  padding: .05em .25em;
  border-radius: 3px;
}
.pjb-art dfn {
  font-style: normal;
  font-weight: 600;
  color: var(--clr-primary);
}

/* ─── RESPONSIVE ──────────────────────────── */
@media (max-width: 600px) {
  .pjb-art h2 { margin-top: 1.8rem; }
  .pjb-art .cost-grid { grid-template-columns: 1fr 1fr; }
  .pjb-art .steps li { padding-left: 3.2rem; }
}
@media (max-width: 400px) {
  .pjb-art .cost-grid { grid-template-columns: 1fr; }
}
/* ============================================================
   EGZAMIN.PL - MOBILNY SPIS TREŚCI (Natywny Akordeon)
   ============================================================ */

/* 1. UKRYWANIE NA DESKTOPIE (zgodnie z breakpointem 1024px) */
@media (min-width: 1024px) {
    .hide-on-desktop {
        display: none !important;
    }
}

/* 2. STYLIZACJA NA URZĄDZENIACH MOBILNYCH */
@media (max-width: 1023px) {
    .mobile-toc-custom {
        margin: 0 0 30px 0;
        font-family: system-ui, -apple-system, sans-serif;
    }
    
    /* Kontener akordeonu */
    .mobile-toc-custom details {
        background: #F7FAFC; /* Tło zgodne ze spisem Rank Math */
        border: 1px solid #E2E8F0; /* Szara ramka */
        border-radius: 8px; /* Zaokrąglenie Egzamin.pl */
        padding: 0;
        overflow: hidden;
    }
    
    /* Pasek klikalny (nagłówek akordeonu) */
    .mobile-toc-custom summary {
        font-size: 16px;
        font-weight: 700;
        color: #2D3748;
        padding: 18px 20px;
        cursor: pointer;
        list-style: none; /* Ukrywa domyślną strzałkę przeglądarki */
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #ffffff;
    }
    
    /* Niestandardowa, niebieska strzałka zgodna z marką */
    .mobile-toc-custom summary::after {
        content: "";
        width: 10px;
        height: 10px;
        border-right: 2px solid #3182CE;
        border-bottom: 2px solid #3182CE;
        transform: translateY(-25%) rotate(45deg);
        transition: transform 0.3s ease;
    }
    
    /* Animacja strzałki po rozwinięciu */
    .mobile-toc-custom details[open] summary::after {
        transform: translateY(25%) rotate(225deg);
    }
    
    /* Ukrycie natywnej strzałki w przeglądarkach bazujących na WebKit */
    .mobile-toc-custom summary::-webkit-details-marker {
        display: none;
    }
    
    /* Kontener listy linków (pojawia się po kliknięciu) */
    .mobile-toc-custom ul {
        list-style: none;
        margin: 0;
        padding: 10px 20px 20px 20px;
        border-top: 1px solid #E2E8F0;
    }
    
    /* Wygląd linków (spójny z bocznym spisem na Egzamin.pl) */
    .mobile-toc-custom ul li a {
        display: block;
        font-size: 15px;
        line-height: 1.5;
        color: #4A5568;
        text-decoration: none;
        padding: 10px 0 10px 15px;
        border-left: 2px solid #E2E8F0; /* Szary pasek z boku */
        border-bottom: 1px solid #edf2f7; /* Delikatny separator */
        transition: all 0.2s ease;
    }
    
    /* Ostatni element bez dolnego separatora */
    .mobile-toc-custom ul li:last-child a {
        border-bottom: none;
    }
    
    /* Zagnieżdżone listy (np. podnagłówki) */
    .mobile-toc-custom ul ul {
        padding: 0 0 0 15px;
        border-top: none;
    }
}

/* ============================================================
   EGZAMIN.PL — UNIFIED SEO/AI CSS (v1.0)
   ============================================================
   Jeden plik na WSZYSTKIE strony. Dodaj na końcu custom.css.
   Zastępuje WSZYSTKIE wcześniej dodane fragmenty:
   - DODAJ-DO-CUSTOM-CSS.css (strona główna)
   - DODAJ-CSS-EGZAMINY-SZKOLNE.css
   - DODAJ-CSS-OSMOKLASISTY.css
   - POPRAWKI-DO-CUSTOM-CSS.css
   
   USUŃ tamte fragmenty z custom.css i wklej TYLKO ten plik.
   ============================================================ */


/* ═══════════════════════════════════════════════════════════════
   1. ELEMENTY GLOBALNE (na każdej stronie)
   ═══════════════════════════════════════════════════════════════ */

/* --- Data aktualizacji pod H1 --- */
.data-aktualizacji {
    font-size: 0.85rem;
    color: #718096;
    margin-bottom: 10px;
}

/* --- Linki w hero info-box (dziedziczenie koloru) --- */
.info-box-item a {
    color: inherit;
}

/* --- Intro pod H2 (tekst centrowany, 800px, szary) --- */
.section-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px auto;
    color: #475569;
}

/* --- Steps grid jako <ol> (reset domyślnego stylu listy) --- */
ol.steps-grid {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --- Caption tabeli porównawczej --- */
.comparison-table .table-caption,
.comparison-table caption {
    padding: 10px;
    font-weight: bold;
}


/* ═══════════════════════════════════════════════════════════════
   2. SEKCJA EKSPERTA — E-E-A-T (każda strona)
   ═══════════════════════════════════════════════════════════════ */

.expert-section {
    padding: 40px 0;
    max-width: 900px;
    margin: 0 auto;
}

.expert-section .section-title {
    margin-bottom: 25px;
}

.expert-container {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    max-width: 700px;
    margin: 0 auto;
}

.expert-photo {
    border-radius: 50%;
    flex-shrink: 0;
}

.expert-bio {
    text-align: left;
}

.expert-role {
    color: #64748b;
    font-size: 0.95rem;
    margin-top: -5px;
    margin-bottom: 10px;
}

.expert-link {
    display: inline-block;
    margin-top: 10px;
    font-weight: 600;
}

@media (max-width: 640px) {
    .expert-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .expert-bio {
        text-align: center;
    }
}


/* ═══════════════════════════════════════════════════════════════
   3. FAQ SECTION (każda strona z FAQ)
   ═══════════════════════════════════════════════════════════════ */

.faq-section {
    padding: 60px 0;
    background-color: #ffffff;
}


/* ═══════════════════════════════════════════════════════════════
   4. HUB NAVIGATION — pogrupowane linki (każda pillar page)
   ═══════════════════════════════════════════════════════════════ */

.hub-section {
    padding: 40px 0;
    background-color: var(--global-palette9, #f9f9f9);
}

.hub-navigation {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.hub-group h3 {
    font-size: 1.05rem;
    margin-bottom: 10px;
    color: #1e293b;
}

.hub-group ul {
    padding-left: 20px;
    line-height: 2;
    list-style: disc;
    margin: 0;
}

.hub-group ul li {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .hub-navigation {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   5. CTA FINAL — dark aside na końcu strony
   ═══════════════════════════════════════════════════════════════ */

.cta-final {
    padding: 60px 20px;
    text-align: center;
    background: radial-gradient(ellipse at center bottom, #1a202c 0%, #0f1318 100%);
}

.cta-final h2 {
    color: #ffffff;
    margin-bottom: 20px;
}

.cta-final p {
    color: #cbd5e0;
    max-width: 750px;
    margin: 0 auto 30px auto;
}

.cta-final .master-hero-btn.btn-primary-blue {
    font-size: 1.2rem;
    padding: 15px 30px;
}


/* ═══════════════════════════════════════════════════════════════
   6. CTA MID-PAGE — jasne aside po social proof
   ═══════════════════════════════════════════════════════════════ */

.mid-cta-section {
    padding: 50px 20px;
    text-align: center;
    background: linear-gradient(135deg, #ebf8ff 0%, #f0f4ff 100%);
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.mid-cta-text {
    max-width: 700px;
    margin: 0 auto 25px auto;
    font-size: 1.1rem;
    color: #334155;
}

.mid-cta-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Fix: przyciski na jasnym tle (override motywu zawodowe-hero) */
.mid-cta-section .btn-primary-pro {
    background-color: #3b82f6;
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.mid-cta-section .btn-primary-pro:hover {
    background-color: #2563eb;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    transform: translateY(-2px);
}

.mid-cta-section .btn-secondary-pro {
    color: #3b82f6;
    background-color: #ffffff;
    border: 2px solid #3b82f6;
}

.mid-cta-section .btn-secondary-pro:hover {
    background-color: #eff6ff;
    color: #2563eb;
    border-color: #2563eb;
}

@media (max-width: 640px) {
    .mid-cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    .mid-cta-buttons a {
        width: 100%;
        max-width: 320px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   7. TESTYMONIALE (każda strona z opiniami)
   ═══════════════════════════════════════════════════════════════ */

.testimonials-section {
    padding: 60px 20px;
    background-color: #f8fafc;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    max-width: 1000px;
    margin: 0 auto;
}

.testimonial-card {
    background: #ffffff;
    padding: 25px 30px;
    border-left: 4px solid #3182ce;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin: 0;
}

.testimonial-card p {
    font-style: italic;
    color: #334155;
    line-height: 1.7;
    margin: 0 0 15px 0;
}

.testimonial-card footer {
    font-weight: 600;
    color: #64748b;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
}


/* ═══════════════════════════════════════════════════════════════
   8. LAYOUT DWUKOLUMNOWY (opisy egzaminów: E8, matura, itp.)
   ═══════════════════════════════════════════════════════════════ */

.exam-detail-section {
    padding: 40px 0;
    max-width: 1000px;
    margin: 0 auto;
}

.exam-detail-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
    margin-top: 30px;
}

.exam-detail-layout.reverse {
    flex-direction: row-reverse;
}

.exam-detail-layout .content-column {
    flex: 1;
    min-width: 300px;
}

.exam-detail-layout .content-column .master-hero-btn {
    display: inline-block;
    margin-top: 15px;
}

.exam-detail-layout .image-column {
    flex: 1;
    min-width: 300px;
    text-align: center;
    margin: 0;
}

.exam-detail-layout .image-column img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .exam-detail-layout,
    .exam-detail-layout.reverse {
        flex-direction: column;
    }
}


/* ═══════════════════════════════════════════════════════════════
   9. SEKCJE SPECJALNE (porównanie, karta treściowa, ranking)
   ═══════════════════════════════════════════════════════════════ */

/* --- Sekcja z tabelą porównawczą --- */
.comparison-section {
    padding: 40px 0;
    max-width: 1000px;
    margin: 0 auto;
}

/* --- HR separator między sekcjami --- */
.section-divider {
    border: 0;
    height: 1px;
    background: #eaeaea;
    margin: 40px 0;
}

/* --- Karta treściowa (tekst w białym boxie na szarym tle) --- */
.content-card-section {
    padding: 40px 0;
    background-color: var(--global-palette9, #f9f9f9);
}

.content-card {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.content-card h2 {
    color: #2d3748;
    margin-top: 0;
}

.content-card ul {
    padding-left: 20px;
    color: #4a5568;
    line-height: 1.8;
    margin-top: 20px;
}

/* --- Baner rankingu / promowany link --- */
.ranking-banner {
    background: #f4f5f7;
    padding: 40px 20px;
    text-align: center;
    border-radius: 8px;
    max-width: 900px;
    margin: 0 auto 60px auto;
}

.ranking-banner h2 {
    margin-top: 0;
    color: #2d3748;
}

.ranking-banner p {
    color: #4a5568;
    margin-bottom: 20px;
}

/* --- Lista cech na kartach kursów --- */
.lp-card-features {
    padding-left: 20px;
    font-size: 0.9rem;
    color: #4a5568;
    margin-bottom: 15px;
}

.lp-card-features li {
    margin-bottom: 4px;
}


/* ═══════════════════════════════════════════════════════════════
   10. SOCIAL PROOF LAYOUT (tekst + obraz obok siebie)
   ═══════════════════════════════════════════════════════════════ */

.social-proof-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
    margin-bottom: 40px;
}

.social-proof-text {
    flex: 1;
    min-width: 300px;
    text-align: left;
}

.social-proof-image {
    flex: 1;
    min-width: 300px;
    margin: 0;
}

.social-proof-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .social-proof-layout {
        flex-direction: column;
    }
}


/* ═══════════════════════════════════════════════════════════════
   11. PRZYCISK NAVY (dla motywu matura/E8 hero)
   ═══════════════════════════════════════════════════════════════ */

.btn-primary-navy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: bold;
    text-decoration: none;
    transition: 0.3s;
    background-color: #3182ce;
    color: #ffffff;
    border: none;
}

.btn-primary-navy:hover {
    background-color: #2563eb;
}


/* ═══════════════════════════════════════════════════════════════
   12. GROUPED COURSE CATALOG (korepetycje, egzaminy zawodowe)
   ═══════════════════════════════════════════════════════════════ */

/* --- Grupa przedmiotów (np. "Nauki ścisłe", "Języki obce") --- */
.course-category-group {
    margin-bottom: 50px;
}

.course-category-title {
    color: #4f46e5;
    border-bottom: 2px solid #c7d2fe;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* --- Opis na karcie kursu (krótki akapit) --- */
.lp-card-desc {
    font-size: 0.9rem;
    color: #4a5568;
    margin-bottom: 15px;
}

/* --- Cena na karcie kursu (np. prawo jazdy, korepetycje) --- */
.lp-card-price {
    font-weight: bold;
    color: #0f172a;
    margin-top: 10px;
    font-size: 1rem;
}

/* --- Obraz wewnątrz content-card (np. sekcja wymagań maturalnych) --- */
.content-card-figure {
    text-align: center;
    margin: 30px 0;
}

.content-card-figure img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
/* ═══════════════════════════════════════════════════════════════
   EGZAMIN.PL — DODATKI CSS dla strony E8 v3 (MINIMALNE)
   Dopisz na końcu custom.css. Dotyczy TYLKO nowych elementów,
   których nie pokrywają istniejące style.
   ═══════════════════════════════════════════════════════════════ */


/* --- 1. TRUST METRICS BAR (pasek liczbowy pod hero) --- */
.trust-metrics-section {
    background: #f0f4ff;
    border-bottom: 1px solid #e2e8f0;
    padding: 30px 20px;
}

.trust-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    list-style: none;
    padding: 0;
    text-align: center;
}

.trust-metric-item {
    padding: 10px;
}

.trust-metric-value {
    display: block;
    font-size: 1.8rem;
    font-weight: 800;
    color: #2b6cb0;
    line-height: 1.2;
}

.trust-metric-label {
    display: block;
    font-size: 0.85rem;
    color: #475569;
    margin-top: 5px;
}

@media (max-width: 600px) {
    .trust-metrics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
    .trust-metric-value {
        font-size: 1.4rem;
    }
}


/* --- 2. COURSE CONTENTS GRID (co zawiera kurs — 3 kolumny) --- */
.course-contents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.course-content-block h3 {
    font-size: 1.15rem;
    color: #2b6cb0;
    margin-top: 0;
    margin-bottom: 12px;
}

.course-content-list {
    padding-left: 20px;
    font-size: 0.9rem;
    color: #4a5568;
    line-height: 1.6;
}

.course-content-list li {
    margin-bottom: 6px;
}

@media (max-width: 768px) {
    .course-contents-grid {
        grid-template-columns: 1fr;
    }
}


/* --- 3. STEPS LIST (jak zacząć — 4 kroki) --- */
.steps-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: step-counter;
}

.step-item {
    counter-increment: step-counter;
    position: relative;
    padding: 20px 20px 20px 65px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 12px;
}

.step-item::before {
    content: counter(step-counter);
    position: absolute;
    left: 18px;
    top: 20px;
    background: #3182ce;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.step-label {
    font-size: 1rem;
    color: #1a202c;
}

.step-item p {
    margin: 5px 0 0 0;
    font-size: 0.9rem;
    color: #4a5568;
}


/* --- 4. CARD ACTIONS (przyciski na kartach kursów) --- */
.lp-card-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.lp-card-actions .btn-secondary-outline {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    color: #3182ce;
    background: transparent;
    border: 1px solid #3182ce;
    transition: 0.3s;
}

.lp-card-actions .btn-secondary-outline:hover {
    background: #ebf8ff;
}


/* --- 5. FAQ DETAILS/SUMMARY (akordeon pytań) --- */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-details {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.3s;
}

.faq-details:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.faq-details summary {
    padding: 18px 50px 18px 20px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    color: #1a202c;
    list-style: none;
    position: relative;
    line-height: 1.4;
}

.faq-details summary::-webkit-details-marker {
    display: none;
}

.faq-details summary::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid #3182ce;
    border-bottom: 2px solid #3182ce;
    transform: translateY(-60%) rotate(45deg);
    transition: transform 0.3s;
}

.faq-details[open] summary::after {
    transform: translateY(-30%) rotate(225deg);
}

.faq-answer {
    padding: 0 20px 20px 20px;
    color: #4a5568;
    line-height: 1.6;
    font-size: 0.95rem;
}

.faq-answer p {
    margin: 0;
}


/* --- 6. CTA FINAL — wieloprzyciski --- */
.cta-final-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .cta-final-buttons {
        flex-direction: column;
        align-items: center;
    }
    .cta-final-buttons a {
        width: 100%;
        max-width: 300px;
    }
}

/* Fix: przyciski secondary w dark CTA */
.cta-final .btn-secondary-pro {
    color: #cbd5e0;
    background: transparent;
    border: 1px solid #cbd5e0;
}

.cta-final .btn-secondary-pro:hover {
    color: #fff;
    border-color: #fff;
    background: rgba(255,255,255,0.1);
}


/* --- 7. PRICE na kartach kursów (rozszerzenie .lp-card-price) --- */
.lp-card-price .price-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: #2b6cb0;
}

.lp-card-price .price-note {
    font-size: 0.8rem;
    font-weight: 400;
    color: #64748b;
    margin-left: 5px;
}


/* --- 8. INFO-BOX SOURCE (źródło w hero info box) --- */
.info-box-source {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.info-box-source a {
    color: #93c5fd;
    text-decoration: underline;
}


/* --- 9. COMPARISON TABLE — pełna stylizacja --- */

/* Kontener responsywny — scroll poziomy na mobile */
.table-responsive-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 20px 0;
}

/* Bazowa tabela */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.93rem;
    min-width: 600px; /* wymusza scroll na małych ekranach */
}

/* Nagłówki kolumn (thead) */
.comparison-table thead th {
    background-color: #1e293b;
    color: #ffffff;
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    border-bottom: 2px solid #3182ce;
}

/* FIX: Nagłówki WIERSZY (tbody th) — jasne tło, ciemny tekst */
.comparison-table tbody th {
    background-color: #f1f5f9;
    color: #1e293b;
    font-weight: 600;
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}

/* Zwykłe komórki */
.comparison-table tbody td {
    padding: 12px 15px;
    border-bottom: 1px solid #e2e8f0;
    color: #334155;
    vertical-align: top;
}

/* Zebra-striping */
.comparison-table tbody tr:nth-child(even) td,
.comparison-table tbody tr:nth-child(even) th {
    background-color: #f8fafc;
}

/* Podświetlenie kolumny Egzamin.pl */
.comparison-table .highlight-col {
    background-color: #ebf8ff;
}

.comparison-table .highlight-cell {
    background-color: #ebf8ff;
    font-weight: 600;
    color: #1e293b;
}

.comparison-table .improvement-cell {
    color: #16a34a;
    font-weight: 700;
}

/* Caption */
.comparison-table caption,
.table-caption {
    caption-side: top;
    text-align: left;
    padding: 10px 15px;
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 600;
}

/* Responsywność tabel na mobile */
@media (max-width: 768px) {
    .comparison-table {
        font-size: 0.82rem;
    }
    .comparison-table thead th,
    .comparison-table tbody th,
    .comparison-table tbody td {
        padding: 10px 10px;
    }
    .comparison-table tbody th {
        white-space: normal;
        min-width: 110px;
    }
}


/* --- 10. MOBILE STICKY CTA --- */
.mobile-sticky-cta {
    display: none;
}

@media (max-width: 768px) {
    .mobile-sticky-cta {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        background: #ffffff;
        border-top: 1px solid #e2e8f0;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
        padding: 10px 15px;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .mobile-sticky-cta .cta-text {
        flex: 1;
        min-width: 0;
    }

    .mobile-sticky-cta .status-indicator {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 2px;
    }

    .mobile-sticky-cta .pulse-dot {
        width: 8px;
        height: 8px;
        background: #16a34a;
        border-radius: 50%;
        animation: pulse 2s infinite;
    }

    .mobile-sticky-cta .status-label {
        font-size: 0.7rem;
        font-weight: 700;
        color: #16a34a;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .mobile-sticky-cta .main-cta-label {
        display: block;
        font-size: 0.85rem;
        font-weight: 700;
        color: #1a202c;
    }

    .mobile-sticky-cta .cta-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 20px;
        background: #3182ce;
        color: #ffffff;
        border-radius: 6px;
        font-weight: 700;
        font-size: 0.85rem;
        text-decoration: none;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .mobile-sticky-cta .cta-button:hover {
        background: #2b6cb0;
    }
}


/* --- 11. BTN TERTIARY (link-style w hero) --- */
.btn-tertiary-pro {
    display: inline-flex;
    align-items: center;
    padding: 12px 20px;
    font-weight: 600;
    font-size: 0.9rem;
    color: #93c5fd;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.3s;
    background: none;
    border: none;
}

.btn-tertiary-pro:hover {
    color: #ffffff;
}


/* --- 12. SUPPORTING CONTENT section (lżejszy styl) --- */
.supporting-content {
    border-color: #cbd5e0;
    background: #f9fafb;
}

.supporting-content h3 {
    font-size: 1.3rem;
    color: #1e293b;
    margin-top: 35px;
    margin-bottom: 15px;
}


/* --- 13. SPIS TREŚCI — zwinięty akordeon (desktop + mobile) --- */
.page-toc {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.page-toc details {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    margin: 20px 0;
}

.page-toc summary {
    padding: 16px 50px 16px 20px;
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    cursor: pointer;
    list-style: none;
    position: relative;
    background: #ffffff;
    transition: background 0.2s;
}

.page-toc summary:hover {
    background: #f0f4ff;
}

.page-toc summary::-webkit-details-marker {
    display: none;
}

.page-toc summary::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid #3182ce;
    border-bottom: 2px solid #3182ce;
    transform: translateY(-60%) rotate(45deg);
    transition: transform 0.3s;
}

.page-toc details[open] summary::after {
    transform: translateY(-30%) rotate(225deg);
}

.page-toc ul {
    list-style: none;
    margin: 0;
    padding: 10px 20px 20px 20px;
    border-top: 1px solid #e2e8f0;
    columns: 2;
    column-gap: 20px;
}

.page-toc ul li {
    break-inside: avoid;
    margin-bottom: 0;
}

.page-toc ul li a {
    display: block;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #4a5568;
    text-decoration: none;
    padding: 8px 0 8px 14px;
    border-left: 2px solid #e2e8f0;
    transition: all 0.2s;
}

.page-toc ul li a:hover {
    color: #3182ce;
    border-left-color: #3182ce;
    background: #f0f7ff;
}

@media (max-width: 768px) {
    .page-toc ul {
        columns: 1;
    }
    .page-toc {
        padding: 0 15px;
    }
}


/* --- 14. FIGURE / FIGCAPTION (zdjęcia SEO w treści) --- */
.content-card figure,
.course-content-block figure {
    margin: 25px 0;
    text-align: center;
}

.content-card figure img,
.course-content-block figure img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: block;
    margin: 0 auto;
}

.content-card figcaption,
.course-content-block figcaption {
    font-size: 0.82rem;
    color: #64748b;
    margin-top: 8px;
    text-align: center;
    font-style: normal;
}
/* --- 15. QUIZ TUTOR LMS — media ograniczone do ~40vh (v2, fix playera) --- */

/* ZDJĘCIA — prosty <img>, bez warstw */
html body [class*="tutor-quiz"] img,
html body [class*="quiz-question"] img {
    max-width: 100% !important;
    max-height: 40vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 12px auto !important;
    border-radius: 8px !important;
}

/* FILMY — stylujemy TYLKO zewnętrzny kontener playera.
   Wewnętrznych warstw (.mejs-overlay, .mejs-poster, <video>) NIE ruszamy,
   bo player używa position: absolute i nadpisanie tego rozbija layout. */
html body [class*="tutor-quiz"] .wp-video,
html body [class*="tutor-quiz"] .wp-video-shortcode,
html body [class*="tutor-quiz"] .mejs-container,
html body [class*="quiz-question"] .wp-video,
html body [class*="quiz-question"] .wp-video-shortcode,
html body [class*="quiz-question"] .mejs-container {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 40vh !important;
    height: 40vh !important;
    margin: 12px auto !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* Samo <video> wewnątrz playera — dopasowane do kontenera,
   ale BEZ nadpisywania position/display, żeby nie rozbić warstw */
html body [class*="tutor-quiz"] .mejs-container video,
html body [class*="quiz-question"] .mejs-container video {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    background: #000 !important;
}

/* Kontener z proporcją od MediaElement — musi wypełnić rodzica */
html body [class*="tutor-quiz"] .mejs-layers,
html body [class*="tutor-quiz"] .mejs-overlay,
html body [class*="tutor-quiz"] .mejs-poster,
html body [class*="quiz-question"] .mejs-layers,
html body [class*="quiz-question"] .mejs-overlay,
html body [class*="quiz-question"] .mejs-poster {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
}

/* Gołe <video> (bez playera WP, gdyby gdzieś było) */
html body [class*="tutor-quiz"] > video,
html body [class*="quiz-question"] > video {
    max-width: 100% !important;
    max-height: 40vh !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    margin: 12px auto !important;
    background: #000 !important;
    border-radius: 8px !important;
}

/* Mobile */
@media (max-width: 600px) {
    html body [class*="tutor-quiz"] img,
    html body [class*="quiz-question"] img {
        max-height: 35vh !important;
    }

    html body [class*="tutor-quiz"] .wp-video,
    html body [class*="tutor-quiz"] .mejs-container,
    html body [class*="quiz-question"] .wp-video,
    html body [class*="quiz-question"] .mejs-container {
        max-height: 35vh !important;
        height: 35vh !important;
    }
}

/* Telefon w poziomie */
@media (max-height: 500px) and (orientation: landscape) {
    html body [class*="tutor-quiz"] img,
    html body [class*="tutor-quiz"] .wp-video,
    html body [class*="tutor-quiz"] .mejs-container,
    html body [class*="quiz-question"] img,
    html body [class*="quiz-question"] .wp-video,
    html body [class*="quiz-question"] .mejs-container {
        max-height: 55vh !important;
        height: 55vh !important;
    }
}

/* Ukrycie śmieci z Google Translate */
#gtx-trans,
.gtx-trans-icon {
    display: none !important;
}
/* ============================================================
   RANKING FIRM — egzamin.pl
   Wszystkie style frontu (ranking, panel firmy, podstrona firmy)
   ============================================================ */

/* ===== WRAPPER ===== */
.rf-wrap {
    max-width: 900px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ===== TOOLBAR (wyszukiwarka + filtry) ===== */
.rf-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
    align-items: center;
}
.rf-search-form {
    display: flex;
    flex: 1;
    min-width: 200px;
}
.rf-search-input {
    flex: 1;
    padding: 10px 14px;
    border: 2px solid #e2e8f0;
    border-radius: 8px 0 0 8px;
    font-size: 15px;
    outline: none;
    transition: border-color .2s;
}
.rf-search-input:focus { border-color: #3b82f6; }
.rf-search-btn {
    padding: 10px 20px;
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 0 8px 8px 0;
    font-size: 15px;
    cursor: pointer;
}
.rf-search-btn:hover { background: #2563eb; }
.rf-filters { display: flex; gap: 8px; }
.rf-select {
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    cursor: pointer;
}

/* ===== KARTY RANKINGU ===== */
.rf-list { display: flex; flex-direction: column; gap: 12px; }
.rf-card {
    position: relative;
    display: flex;
    gap: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow .2s, transform .15s;
}
.rf-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    transform: translateY(-1px);
}

/* Wyróżniona (top 3) — złote akcenty, cień, delikatny gradient */
.rf-card--featured {
    border: 2px solid #fbbf24;
    box-shadow: 0 4px 20px rgba(251, 191, 36, .15);
    background: linear-gradient(135deg, #fffbeb 0%, #ffffff 45%);
}
.rf-card--featured:hover {
    box-shadow: 0 8px 28px rgba(251, 191, 36, .25);
}

/* Wstążka z odznaką (prawy górny róg karty) */
.rf-badge-ribbon {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.rf-badge-ribbon--featured {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.1);
}
.rf-badge-ribbon--verified {
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
}

/* Legacy — zostawione dla kompatybilności */
.rf-card--top { border-color: #fbbf24; }
.rf-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    font-size: 20px;
    font-weight: 800;
    color: #94a3b8;
    background: #f8fafc;
}
.rf-rank--gold {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #b45309;
}
.rf-card__body { flex: 1; padding: 16px 20px; min-width: 0; }
.rf-card__header { display: flex; gap: 14px; align-items: flex-start; }

.rf-logo {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    background: #f1f5f9;
}
.rf-logo img { width: 100%; height: 100%; object-fit: cover; }
.rf-logo--ph { display: flex; align-items: center; justify-content: center; }
.rf-logo--ph span { font-size: 26px; font-weight: 700; color: #64748b; }

.rf-card__title-block { flex: 1; min-width: 0; }
.rf-name { margin: 0 0 4px; font-size: 17px; font-weight: 700; color: #1e293b; }
.rf-name a { color: inherit; text-decoration: none; }
.rf-name a:hover { color: #3b82f6; }
.rf-meta { display: block; font-size: 13px; color: #64748b; line-height: 1.5; }
.rf-meta a { color: #3b82f6; text-decoration: none; }
.rf-desc { margin: 10px 0 0; font-size: 14px; color: #475569; line-height: 1.5; }

/* ===== KÓŁKO KOMPLETNOŚCI ===== */
.rf-completeness {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
}
.rf-circle { width: 48px; height: 48px; transform: rotate(-90deg); }
.rf-circle__bg { fill: none; stroke: #e2e8f0; stroke-width: 3; }
.rf-circle__fg {
    fill: none;
    stroke: #22c55e;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray .6s ease;
}
.rf-circle__text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 11px;
    font-weight: 700;
    color: #334155;
}

/* ===== STOPKA KARTY (linki + przycisk claim) ===== */
.rf-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    flex-wrap: wrap;
    gap: 8px;
}
.rf-links { display: flex; gap: 6px; flex-wrap: wrap; }
.rf-pill {
    display: inline-flex;
    padding: 5px 12px;
    background: #f1f5f9;
    border-radius: 20px;
    font-size: 13px;
    color: #334155;
    text-decoration: none;
    transition: background .15s;
}
.rf-pill:hover { background: #e2e8f0; }
.rf-claim-btn {
    padding: 7px 16px;
    background: #3b82f6;
    color: #fff !important;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s;
}
.rf-claim-btn:hover { background: #2563eb; }
.rf-claim-btn--own { background: #22c55e; }
.rf-claim-btn--own:hover { background: #16a34a; }

/* ===== PAGINACJA ===== */
.rf-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 32px;
    flex-wrap: wrap;
}
.rf-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #334155;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all .15s;
}
.rf-page:hover { background: #f1f5f9; border-color: #cbd5e1; }
.rf-page--current {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
    cursor: default;
}
.rf-page--current:hover { background: #3b82f6; }
.rf-page--nav { font-weight: 500; }
.rf-page--dots {
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: default;
    min-width: 24px;
    padding: 0 4px;
}
.rf-page--dots:hover { background: transparent; }

/* ===== PANEL FIRMY (claim + edycja) ===== */
.rf-panel-msg,
.rf-panel-claim,
.rf-panel-edit {
    max-width: 640px;
    margin: 0 auto;
    padding: 30px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}
.rf-panel-msg h3,
.rf-panel-claim h3 { margin-top: 0; }
.rf-panel-header { margin-bottom: 24px; }
.rf-panel-completion {
    padding: 10px 16px;
    background: #f0fdf4;
    border-radius: 8px;
    font-size: 14px;
    color: #166534;
    margin-top: 8px;
}
.rf-edit-form { display: flex; flex-direction: column; gap: 16px; }
.rf-field label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: #334155;
    margin-bottom: 6px;
}
.rf-field input,
.rf-field textarea,
.rf-field select {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 15px;
    transition: border-color .2s;
    box-sizing: border-box;
}
.rf-field input:focus,
.rf-field textarea:focus { border-color: #3b82f6; outline: none; }
.rf-current-logo { margin-bottom: 8px; }
.rf-current-logo img { border-radius: 8px; }
.rf-success {
    padding: 12px 16px;
    background: #dcfce7;
    color: #166534;
    border-radius: 8px;
    font-weight: 600;
    margin-bottom: 16px;
}
.rf-btn-primary {
    display: inline-block;
    padding: 12px 28px;
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.rf-btn-primary:hover { background: #2563eb; }
.rf-btn-secondary {
    display: inline-block;
    padding: 12px 28px;
    background: #f1f5f9;
    color: #334155;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.rf-empty {
    text-align: center;
    padding: 40px;
    color: #94a3b8;
    font-size: 16px;
}

/* ===== PODSTRONA POJEDYNCZEJ FIRMY ===== */
.rf-single { max-width: 780px; margin: 0 auto; padding: 0 16px; }
.rf-breadcrumb {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 24px;
    padding: 12px 0;
    border-bottom: 1px solid #e2e8f0;
}
.rf-breadcrumb a { color: #3b82f6; text-decoration: none; }
.rf-breadcrumb a:hover { text-decoration: underline; }
.rf-single__header {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 32px;
}
.rf-single__logo-wrap { flex-shrink: 0; }
.rf-single__logo {
    width: 100px;
    height: 100px;
    border-radius: 14px;
    overflow: hidden;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rf-single__logo img { width: 100%; height: 100%; object-fit: cover; }
.rf-single__logo span { font-size: 40px; font-weight: 700; color: #64748b; }
.rf-single__name {
    margin: 0 0 4px;
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
}
.rf-single__subtitle {
    margin: 0 0 10px;
    font-size: 15px;
    color: #64748b;
}
.rf-single__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
}
.rf-single__badge--verified {
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
}
.rf-single__completeness { font-size: 13px; color: #64748b; }
.rf-progress-bar {
    width: 200px;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    margin-top: 6px;
}
.rf-progress-bar__fill {
    height: 100%;
    background: #22c55e;
    border-radius: 3px;
    transition: width .6s;
}
.rf-single__section { margin-bottom: 28px; }
.rf-single__section h2 {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f1f5f9;
}
.rf-single__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.rf-single__detail {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 10px;
    font-size: 14px;
    color: #334155;
    line-height: 1.5;
}
.rf-single__detail a { color: #3b82f6; text-decoration: none; }
.rf-single__icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.rf-single__socials { display: flex; gap: 8px; }
.rf-single__cta {
    text-align: center;
    padding: 32px;
    background: #f8fafc;
    border-radius: 12px;
    margin-top: 24px;
}
.rf-single__cta p { margin: 0 0 12px; font-size: 15px; color: #64748b; }

/* ============================================================
   FORMULARZ LOGOWANIA + REJESTRACJI (frontowy)
   ============================================================ */
.rf-auth {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}
.rf-auth__box {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 32px 28px;
    box-shadow: 0 4px 24px rgba(0,0,0,.04);
}
.rf-auth__title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
}
.rf-auth__subtitle {
    margin: 0 0 20px;
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
}
.rf-auth__tabs {
    display: flex;
    gap: 4px;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 10px;
    margin-bottom: 20px;
}
.rf-auth__tab {
    flex: 1;
    background: transparent;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all .15s;
}
.rf-auth__tab:hover { color: #0f172a; }
.rf-auth__tab--active {
    background: #fff;
    color: #3b82f6;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.rf-auth__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.rf-auth__error {
    padding: 10px 14px;
    background: #fee2e2;
    color: #991b1b;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 14px;
}
.rf-auth__help {
    text-align: center;
    margin: 12px 0 0;
    font-size: 13px;
}
.rf-auth__help a {
    color: #3b82f6;
    text-decoration: none;
}
.rf-auth__help a:hover { text-decoration: underline; }
.rf-hidden { display: none !important; }

/* Sekcja "Działamy także w" na karcie firmy */
.rf-branches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.rf-branch-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all .15s;
}
.rf-branch-tag:hover {
    background: #dbeafe;
    border-color: #93c5fd;
    transform: translateY(-1px);
}

/* Lista miast w panelu firmy */
.rf-cities-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.rf-city-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: #f1f5f9;
    color: #334155;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}
.rf-city-chip--main {
    background: #fef3c7;
    color: #92400e;
    font-weight: 700;
    border: 1px solid #fcd34d;
}
.rf-city-chip small {
    font-size: 11px;
    opacity: 0.8;
}
@media (max-width: 640px) {
    .rf-toolbar { flex-direction: column; }
    .rf-card__body { position: relative; padding-top: 44px; }
    .rf-card__header { flex-wrap: wrap; }
    .rf-completeness { position: absolute; top: 50px; right: 16px; }
    .rf-badge-ribbon { top: 8px; right: 8px; font-size: 11px; padding: 4px 10px; }
    .rf-card__footer { flex-direction: column; align-items: flex-start; }
    .rf-single__header { flex-direction: column; align-items: center; text-align: center; }
    .rf-single__name { font-size: 22px; }
    .rf-single__grid { grid-template-columns: 1fr; }
    .rf-progress-bar { margin: 6px auto 0; }
}

/* ============================================================
   LANDINGI: /ranking/, /szkola-jazdy/, /szkola-jazdy/gdansk/
   ============================================================ */

/* Header landingu */
.rf-landing-header {
    text-align: center;
    margin-bottom: 32px;
    padding: 32px 0 16px;
}
.rf-landing-header h1 {
    font-size: 32px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 12px;
    line-height: 1.2;
}
.rf-landing-desc {
    font-size: 16px;
    color: #64748b;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Sekcje */
.rf-cities-section,
.rf-top-section {
    margin-bottom: 40px;
}
.rf-cities-section h2,
.rf-top-section h2 {
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 20px;
}

/* Grid kategorii (na /ranking/) */
.rf-cats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.rf-cat-card {
    display: block;
    padding: 24px;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all .2s;
}
.rf-cat-card:hover {
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(59, 130, 246, .12);
}
.rf-cat-card__name {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px;
}
.rf-cat-card__count {
    display: inline-block;
    padding: 4px 10px;
    background: #eff6ff;
    color: #2563eb;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}
.rf-cat-card__desc {
    margin: 12px 0 0;
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
}

/* Grid miast (na /szkola-jazdy/) */
.rf-cities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.rf-city-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: all .15s;
    text-align: center;
}
.rf-city-card:hover {
    background: #eff6ff;
    border-color: #3b82f6;
    transform: translateY(-1px);
}
.rf-city-card__name {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
}
.rf-city-card__count {
    font-size: 12px;
    color: #64748b;
}

@media (max-width: 640px) {
    .rf-landing-header { padding: 16px 0; }
    .rf-landing-header h1 { font-size: 24px; }
    .rf-cats-grid { grid-template-columns: 1fr; }
    .rf-cities-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ============================================================
   EGZAMIN.PL — Kokpit Mobile Banner v4
   Zastępuje WSZYSTKIE poprzednie wersje .ez-*
   Usuń stare bloki .ez-banner / .ez-card / .ez-bar, wklej to.
   ============================================================ */

.ez-bar {
  background: #fff;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  margin: 0 0 24px;
  box-shadow: var(--shadow);
  font-family: var(--font-ui);
  color: var(--clr-text);
  overflow: hidden;
}
.ez-bar * { box-sizing: border-box; }

/* ---- Rząd 1: dwa tryby ---- */
.ez-bar__top {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--clr-border);
  font-size: 13px;
  line-height: 1.4;
}
.ez-bar__mode {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  color: var(--clr-muted);
}
.ez-bar__mode:first-child {
  border-right: 1px solid var(--clr-border);
}
.ez-bar__mode svg {
  flex-shrink: 0;
  color: var(--clr-primary);
}
.ez-bar__mode strong {
  color: var(--clr-text);
  font-weight: 700;
}
.ez-bar__here {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 100px;
  background: #dcfce7;
  color: #166534;
  white-space: nowrap;
}

/* ---- Rząd 2: QR + URL + PIN + przycisk ---- */
.ez-bar__bottom {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
}
.ez-bar__qr {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--clr-border);
  border-radius: 6px;
}
.ez-bar__qr svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ez-bar__info {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}
.ez-bar__url {
  font-size: 22px;
  font-weight: 800;
  color: var(--clr-primary);
  letter-spacing: -0.02em;
}
.ez-bar__pin {
  font-size: 14px;
  color: var(--clr-muted);
  padding: 3px 10px;
  background: var(--clr-light);
  border: 1px solid var(--clr-border);
  border-radius: 6px;
  white-space: nowrap;
}
.ez-bar__pin strong {
  color: var(--clr-text);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.ez-bar__btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  background: #3b82f6;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.ez-bar__btn:hover,
.ez-bar__btn:focus {
  background: #2563eb;
  color: #fff;
  text-decoration: none;
}

/* ---- Ukryj stare elementy gdyby zostały w HTML ---- */
.ez-banner { display: none; }

/* ---- Responsywność ---- */
@media (max-width: 700px) {
  .ez-bar__top {
    flex-direction: column;
    gap: 0;
  }
  .ez-bar__mode:first-child {
    border-right: none;
    border-bottom: 1px solid var(--clr-border);
  }
  .ez-bar__bottom {
    flex-wrap: wrap;
    gap: 12px;
  }
  .ez-bar__url { font-size: 18px; }
  .ez-bar__info { gap: 10px; }
}