/* 1. Reset i naprawa głównego kontenera nagłówka */
.header .site-grid {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
}

/* 2. Przeniesienie kontenera z marką (logo) na lewą stronę */
.header .navbar-brand {
  grid-column: span 3 !important;
  margin: 0 !important;
  padding: 10px 0 !important;
}

/* 3. Przeniesienie kontenera z menu na prawą stronę */
.header .header-navigation {
  grid-column: span 9 !important;
  margin-left: auto !important;
  display: flex !important;
  justify-content: flex-end !important;
}

/* 4. Wymuszenie równego ułożenia elementów wewnątrz menu */
.header .navbar {
  display: flex !important;
  justify-content: flex-end !important;
  width: 100% !important;
}

/* 5. Korekta wymiarów logotypu */
.header .navbar-brand img {
  max-height: 75px !important;
  width: auto !important;
  display: block !important;
}

/* 6. Pozycjonowanie paska z telefonem (topbar) na samą górę, do prawej */
.container-topbar .topbar-konkret-tel_mail {
  display: inline-flex !important;
  justify-content: center !important;
  padding: 5px 20px !important;
}

/* 7. Wygląd standardowy przycisku */
.przycisk-konkret {
    display: inline-block;
    background-color: #ff6d00;
    border: 1px solid #ff6d00;
    color: #ffffff !important; /* !important gwarantuje, że tekst zawsze będzie biały */
    padding: 8px 20px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Płynna zmiana koloru */
    cursor: pointer;
}

/* 8. Wygląd przycisku po najechaniu myszką */
.przycisk-konkret:hover {
    background-color: #e06000; /* Delikatnie ciemniejszy pomarańczowy */
    border-color: #e06000;
    text-decoration: none;
}

/* 9. Uniwersalne tło, wymiary i centrowanie W PIONIE */
.baner-uniwersalny {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 100px 20px;     /* stałe marginesy */
    display: flex;
    align-items: center;     /* Centrowanie treści ZAWSZE w pionie (góra-dół) */
}

/* 10.Elastyczny boks na treść, który pozwala na zmianę pozycji */
.baner-tresc-elastyczna {
    width: 100%;
    max-width: 600px;
}

/* 1. KONTENER GŁÓWNY SEKCJI */
.oferta-sekcja {
    width: 100%;
    padding: 40px 20px;
    box-sizing: border-box;
}

/* Wstęp (Nagłówek i opis) */
.oferta-wstep {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 40px auto;
}
.oferta-wstep h2 {
    font-size: 2.2rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #333333;
    margin-bottom: 15px;
}
.oferta-wstep p {
    font-size: 1rem;
    color: #666666;
    line-height: 1.6;
}

/* 2. UKŁAD TRZECH KOLUMN (SIATKA FLEXBOX) */
.oferta-wiersz {
    display: flex;
    flex-wrap: wrap;       /* Pozwala kolumnom przejść pod spód na telefonie */
    gap: 20px;             /* Odstępy między kafelkami */
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* Pojedynczy kafelek */
.oferta-kafelek {
    flex: 1;
    min-width: 280px;      /* Minimalna szerokość kafelka przed złamaniem do nowej linii */
    background: #ffffff;
    border: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Efekt najechania myszką na kafelek */
.oferta-kafelek:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

/* Zawartość graficzno-tekstowa wewnątrz kafelka */
.oferta-kafelek-content {
    padding: 30px 20px;
    text-align: center;
    width: 100%;
}
.oferta-kafelek img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}
.oferta-kafelek h3 {
    font-size: 1.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #222222;
    margin: 0;
}

/* Przycisk dolny ("Sprawdź") */
.oferta-kafelek-btn {
    display: block;
    width: 100%;
    padding: 15px 0;
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    text-align: center;
    color: #333333;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: background 0.2s ease, color 0.2s ease;
}
.oferta-kafelek-btn:hover {
    background: #ff6d00;   /* Twój pomarańczowy akcent po najechaniu */
    color: #ffffff;
    text-decoration: none;
}

/* STYLIZACJA AKORDEONU FAQ */
.faq-kontener .accordion-item {
    border: none;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 10px;
}

/* Wygląd zamkniętego pytania */
.faq-kontener .accordion-button {
    background: transparent;
    color: #444444;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.95rem;
    padding: 15px 0;
    box-shadow: none;
}

/* Wygląd otwartego pytania (Złoty/Pomarańczowy baner) */
.faq-kontener .accordion-button:not(.collapsed) {
    background-color: #ff9100; /* Kolor pomarańczowy tła */
    color: #ffffff;            /* Biały tekst */
    padding: 15px 20px;
}

/* Wygląd treści odpowiedzi po rozwinięciu */
.faq-kontener .accordion-body {
    padding: 20px;
    background-color: #ff9100; /* Tło odpowiedzi pasujące do nagłówka */
    color: #ffffff;            /* Biały tekst odpowiedzi */
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Dostosowanie strzałek rozwijania */
.faq-kontener .accordion-button::after {
    filter: grayscale(1);
}
.faq-kontener .accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1); /* Biała strzałka na pomarańczowym tle */
}

/* SEKTA O NAS (LEWA KOLUMNA) */
.o-nas-prawa img {
    width: 100%;
    height: auto;
    margin-bottom: 25px;
    
}
.o-nas-prawa h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}
.o-nas-prawa p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
}
.podpis-foto {
    max-width: 200px;
    margin-top: 15px;
    display: block;
}

/* STYLIZACJA NATYWNEGO AKORDEONU HTML */
.natywny-akordeon {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-item {
    border-bottom: 1px solid #e0e0e0;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Wygląd pytania przed kliknięciem */
.faq-pytanie {
    padding: 15px 0;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.95rem;
    color: #444444;
    cursor: pointer;
    list-style: none; /* Ukrywa domyślny czarny trójkącik przeglądarki */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-pytanie::-webkit-details-marker {
    display: none; /* Ukrywa trójkącik w przeglądarkach Safari/Chrome */
}

/* Własna strzałka */
.faq-pytanie .strzalka {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
    color: #888;
}

/* WYGLĄD PO KLIKNIĘCIU (Gdy znacznik <details> dostaje status [open]) */
.faq-item[open] .faq-pytanie {
    background-color: #ff9100; /* Twój pomarańczowy kolor */
    color: #ffffff;
    padding: 15px 20px;
}

.faq-item[open] .strzalka {
    transform: rotate(180deg); /* Obrócenie strzałki do góry */
    color: #ffffff;
}

/* Wygląd rozwiniętej odpowiedzi */
.faq-odpowiedz {
    padding: 20px;
    background-color: #ff9100; /* Pomarańczowe tło odpowiedzi */
    color: #ffffff;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Całkowite zamrożenie wyglądu linków w topbarze - brak zmian koloru i podkreśleń */
.topbar-konkret-tel_mail a, 
.topbar-konkret-tel_mail a:link, 
.topbar-konkret-tel_mail a:visited, 
.topbar-konkret-tel_mail a:hover, 
.topbar-konkret-tel_mail a:active, 
.topbar-konkret-tel_mail a:focus {
    color: #ff6d00 !important;
    text-decoration: none !important;
    outline: none !important;
    border-bottom: 0px none transparent !important;
    box-shadow: none !important;
}

/* SPECJALNA REGUŁA DLA TELEFONÓW (Ekran poniżej 768px) */
@media (max-width: 767px) {
    /* Układa telefon i mail jeden pod drugim i centruje na ekranie */
    .topbar-konkret-tel_mail {
        flex-direction: column !important;
        align-items: center !important; /* Centruje elementy w pionowej kolumnie */
        justify-content: center !important;
        text-align: center !important; /* Centruje sam tekst */
        gap: 8px !important;
        width: 100% !important;
    }
    
    /* Centrowanie dla kodu HTML z inline-flex / nowrap */
    .topbar-konkret-tel_mail-rwd,
    div[style*="white-space: nowrap"] {
        white-space: normal !important; 
        flex-direction: column !important;
        align-items: center !important; /* Centruje linki w pionie */
        justify-content: center !important;
        text-align: center !important;
        gap: 8px !important;
    }
}