/* --- Galeria 3-kolumnowa Flexbox --- */
.galeria-flex-3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 15px;
    margin: 20px 0;
}

.galeria-flex-3 img {
    width: calc(33.333% - 10px);
    height: auto;
    object-fit: cover;
}

/* --- Dostosowanie do urządzeń mobilnych --- */
@media (max-width: 768px) {
    .galeria-flex-3 img {
        width: 100%;
    }
}

/* --- Galeria 2-kolumnowa Flexbox --- */
.galeria-flex-2col {
    display: flex;
    flex-wrap: wrap; /* Pozwala obrazom przechodzić do nowego wiersza */
    gap: 15px;       /* Odstęp 15px między obrazami (pionowo i poziomo) */
    margin: 20px 0;  /* Margines nad i pod galerią */
}

.galeria-flex-2col img {
    /* Oblicza szerokość dla 2 kolumn, uwzględniając odstęp (gap) */
    width: calc((100% - 15px) / 2); 
    height: auto;      /* Zachowuje proporcje obrazka */
    object-fit: cover; /* Gwarantuje, że obrazy o różnych proporcjach wypełnią przestrzeń */
}

/* --- Dostosowanie do urządzeń mobilnych --- */
@media (max-width: 768px) {
    .galeria-flex-2col img {
        width: 100%; /* Na małych ekranach obrazki układają się jeden pod drugim */
    }
}

/* HTML */

/*
<div class="instrument-grid">
    <div class="instrument-card">
        <img src="images/IMG_8340.jpg" alt="Nauka gry na akordeonie">
        <h2>Akordeon</h2>
        <p class="description">Akordeon jest instrumentem należącym do grupy aerofonów. Oznacza to, że dźwięk jest wydawany przez słup powietrza zamknięty w przestrzeni rezonansowej. Nauka gry na akordeonie nie jest trudna – wystarczy mieć nieco słuchu muzycznego i włożyć w naukę trochę pracy. Pasjonaci gry na wielu instrumentach doceniają akordeon za jego rytmiczne i wesołe brzmienie. Prowadzimy również zajęcia nauki gry na akordeonie. Zapraszamy początkujących i zaawansowanych, młodszych i starszych, małych i dużych.</p>
        <p class="slogan">Na przygodę z akordeonem nigdy nie jest za późno.</p>
    </div>
    <div class="instrument-card">
        <img src="images/Flet_poprzeczny_30.jpg" alt="Nauka gry na flecie poprzecznym">
        <h2>Flet poprzeczny</h2>
        <p class="description">Do nauki gry na flecie poprzecznym zapraszamy zarówno osoby początkujące jak i te, które już nabrały biegłości w grze na tym instrumencie. Zajęcia prowadzimy indywidualnie, co sprzyja szybkiemu opanowaniu materiału. Na zajęcia mogą zapisać się dzieci od 7 roku życia, ale zapraszamy też młodzież, dorosłych, jak i seniorów. Program nauczania obejmuje kształtowanie właściwej techniki zadęcia, doskonalenie emisji dźwięku, intonacji, artykulacji i dynamiki, pracę nad poprawną postawą ciała, prawidłowym ułożeniem rąk i prawidłowym oddechem.</p>
        <p class="slogan">Repertuar który proponujemy jest bardzo szeroki, zaczynając od muzyki klasycznej do rozrywkowej.</p>
    </div>
    <div class="instrument-card">
        <img src="images/DSC_4217_30.jpg" alt="Nauka gry na flecie prostym">
        <h2>Flet prosty</h2>
        <p class="description">Jest jednym z najprostszych instrumentów muzycznych. Wywodzi się od ludowej fujarkii i posiada podobną konstrukcję. Grający dmie w ustnik, powietrze w komorze rezonacyjnej zostaje rozdzielone na dwa strumienie. Nauka gry na flecie jest niezwykle ciekawa, obejmuje naukę podstaw gry na tym instrumencie, zapoznanie ze wszystkimi technikami wydobywania dźwięku, opanowanie nazw nut oraz przydatnych terminów muzycznych.</p>
        <p class="slogan">Dzięki świetnym metodom nauczania, zajęcia gry na flecie to sama przyjemność!</p>
    </div>
    <div class="instrument-card">
        <img src="images/Gitara.jpg" alt="Nauka gry na gitarze">
        <h2>Gitara</h2>
        <p class="description">Lekcje gry na gitarze klasycznej, akustycznej, elektrycznej czy ukulele. Program nauczania dostosowujemy indywidualnie do ucznia, niezależnie od tego, w jakim jest wieku, czy stopniu gitarowego zaawansowania. Uczymy gry techniką klasyczną, gry akompaniamentu czy też gry solowej z naciskiem na ten styl, w którym uczeń najlepiej się czuję. Wspólnie poznajemy niezbędną teorię. Nauka polega, przede wszystkim na wspólnym opracowywaniu utworów.</p>
        <p class="slogan">Zapraszamy wszystkich chętnych do zgłębienia się w świat sześciostrunowej muzyki.</p>
    </div>
    <div class="instrument-card">
        <img src="images/Gordonki.JPG" alt="Zajęcia umuzykalniające Gordonki">
        <h2>"Gordonki"</h2>
        <p class="description">Zajęcia umuzykalniające dla niemowląt i małych dzieci do lat 3. To radosne obcowanie z muzyką poprzez zabawy wokalne i ruchowe. Głównym narzędziem pracy prowadzącej jest głos. Na zajęciach prezentowane są melodie w różnych tonalnościach i metrach. Zabawom towarzyszą przyjazne dziecku rekwizyty: chusty, piłki, piórka, pacynki itp. Zajęcia wzbogacają słownik muzyczny dziecka i wspomagają rozwój.</p>
        <p class="slogan">Zdolności muzyczne kształtują się przez pierwsze 9 lat życia. Im młodsze dziecko, tym więcej korzysta.</p>
    </div>
    <div class="instrument-card">
        <img src="images/mozart-clarinet-1344250629-large-article-0.jpg" alt="Nauka gry na klarnecie">
        <h2>Klarnet</h2>
        <p class="description">Jego przodkiem jest instrument szałamai. Charakterystyczną cechą barwy klarnetu jest tzw. stopliwość, czyli łatwość zlewania się z barwą innych instrumentów. Jedną z najbardziej znanych partii klarnetowych jest solo otwierające „Błękitną rapsodię" George'a Gershwina i właśnie jako instrument solowy, klarnet najczęściej jest wykorzystywany przez muzyków gdyż ma ogromne możliwości techniczne.</p>
        <p class="slogan">Chcesz nauczyć się grać na klarnecie? Prowadzimy lekcje na wszystkich poziomach nauczania.</p>
    </div>
    <div class="instrument-card">
        <img src="images/Muzochwilki.JPG" alt="Zajęcia umuzykalniające Muzochwilki">
        <h2>Muzochwilki</h2>
        <p class="description">Zajęcia umuzykalniające dla dzieci w wieku od 3 do 5 lat, które przez śpiew, taniec, grę na instrumentach, aktywne słuchanie muzyki oraz swobodną improwizację, zaspokoją w dziecku naturalną potrzebę ruchu i aktywności. Ćwiczenia i zabawy przy muzyce, tańce ludowe, elementy tańców współczesnych, gra na instrumentach perkusyjnych, to tylko niektóre z elementów zajęć.</p>
        <p class="slogan">Gwarantujemy bardzo dobry kontakt z dziećmi, profesjonalizm i duże doświadczenie.</p>
    </div>
    <div class="instrument-card">
        <img src="images/Nauka_śpiewu.JPG" alt="Nauka śpiewu i emisji głosu">
        <h2>Nauka śpiewu</h2>
        <p class="description">Wciąż wmawiają Ci, że śpiewać mogą tylko wybrańcy? Przyjdź, razem obalimy ten mit! Sprawdzimy Twój głos i dopasujemy odpowiednie ćwiczenia, które sprawią, że śpiew stanie się przyjemny, a skala Twojego głosu się poszerzy. Zastosujemy odpowiednie ćwiczenia emisyjne, dykcyjne, oddechowe, a wszystko po to, by mieć piękny i mocny głos. Sam możesz zdecydować o wyborze piosenek.</p>
        <p class="slogan">Zapewniamy indywidualne podejście do każdego ucznia w miłej atmosferze.</p>
    </div>
    <div class="instrument-card">
        <img src="images/Perkusja.jpg" alt="Nauka gry na perkusji">
        <h2>Perkusja</h2>
        <p class="description">Lekcje gry na perkusji dla wszystkich entuzjastów tego instrumentu. Zajęcia obejmują zarówno naukę podstawowej techniki werblowej, jak i ćwiczenia na całym zestawie perkusyjnym. Na lekcjach uczymy się grać z metronomem, zarówno z nut, jak i ze słuchu. Zapewniamy wszelkie materiały dydaktyczne, a także pomagamy w wyborze i kupnie instrumentu. Początkujący uczniowie poznają budowę zestawu.</p>
        <p class="slogan">Uczniowie bardziej zaawansowani mogą doskonalić dotychczasowy warsztat.</p>
    </div>
    <div class="instrument-card">
        <img src="images/Pianino_i_Keyboard.jpg" alt="Nauka gry na pianinie i keyboardzie">
        <h2>Pianino, keyboard</h2>
        <p class="description">Indywidualne spotkania dla tych, którzy chcą rozpocząć swoją muzyczną przygodę, jak i tych, którzy chcą doskonalić swoje umiejętności. Zajęcia są dostosowane do wieku i możliwości ucznia. Najmłodsi uczą się przez zabawę, metodą beznutową. Na zajęciach ćwiczymy pamięć, koncentrację i poszerzamy muzyczne horyzonty. Wśród bogatej literatury muzycznej, każdy znajdzie coś dla siebie.</p>
        <p class="slogan">Wyznajemy zasadę, że na naukę nigdy nie jest za późno!</p>
    </div>
    <div class="instrument-card">
        <img src="images/94883006_2864370120313153_3340349924712644608_n.jpg" alt="Nauka gry na saksofonie">
        <h2>Saksofon</h2>
        <p class="description">Granie na saksofonie to dość oryginalna umiejętność. Saksofon to instrument, który składa się z dużej metalowej rury o kształcie fajki. Posiada klapy i stroik, podobnie jak klarnet. Wyróżniamy siedem rodzajów saksofonu: kontrabasowy, basowy, tenorowy, barytonowy, altowy, a także dwa sopranowe. Zasady gry na saksofonie raczej opanuje każdy, kto ma słuch muzyczny i odrobinę zacięcia.</p>
        <p class="slogan">Saksofon jest dość popularnym instrumentem, a adepci chętnie go wybierają.</p>
    </div>
    <div class="instrument-card">
        <img src="images/Skrzypce.jpg" alt="Nauka gry na skrzypcach">
        <h2>Skrzypce</h2>
        <p class="description">Skrzypce to niezwykły instrument, którego barwa potrafi wprowadzić w szczególny nastrój. Zapraszamy na zajęcia wszystkich zainteresowanych. Dzięki opracowanym metodom nauki udowadniamy, że gra na skrzypcach to nic trudnego. Kładziemy nacisk na to, by nauka była łatwa i przyjemna, przy czym efekty szybko zauważalne. Naukę od podstaw zaczynamy od poznania budowy instrumentu i prawidłowej postawy.</p>
        <p class="slogan">Chętnie podpowiemy także jak dobrać instrument i pomożemy w jego zakupie.</p>
    </div>
</div>
*/

.instrument-grid {
    max-width: 1300px;
    margin: 100px auto;
    font-family: sans-serif;
}

.instrument-card {
    display: grid;
    grid-template-columns: 4fr 5fr 3fr;
    gap: 0 60px;
    align-items: center;
    margin-bottom: 100px;
}

.instrument-card:last-of-type {
    margin-bottom: 0;
}

.instrument-card:nth-child(even) {
    grid-template-columns: 3fr 5fr 4fr;
}

.instrument-card img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 30% 70% 55% 45% / 30% 38% 62% 70%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease-in-out;
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}
.instrument-card:nth-child(even) img {
    grid-column: 3 / 4;
}
.instrument-card:hover img {
    transform: scale(1.04);
    border-radius: 50%;
}

.instrument-card h2 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    align-self: end;
    font-size: 3.5rem;
    font-weight: 700;
    color: #D94336;
    margin: 0;
    line-height: 1.1;
}
.instrument-card:nth-child(even) h2 {
    grid-column: 2 / 3;
}


.instrument-card .description {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    align-self: start;
    font-size: 1.1rem;
    line-height: 2.1;
    color: #333;
    padding-top: 15px;
}
.instrument-card:nth-child(even) .description {
    grid-column: 2 / 3;
}

/* === DEFINICJA ANIMACJI PŁYWANIA === */
@keyframes floatMain {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-5px, -8px) rotate(-1deg); }
}

@keyframes floatAccent {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.2; }
    50% { transform: translate(8px, 5px) rotate(2deg) scale(1.05); opacity: 0.35; }
}

/* === ZWARIOWANA SEKCJA SLOGAN (ANIMOWANA) === */

.instrument-card .slogan {
    grid-column: 3 / 4;
    grid-row: 1 / 3;

    background-color: transparent;
    border-radius: 0;
    box-shadow: none;

    font-size: 1.3rem;
    font-weight: 700;
    font-style: italic;
    line-height: 1.5;
    color: #2a4b85;
    text-shadow: 1px 1px 0px rgba(255,255,255,0.5);

    padding: 60px 40px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

/* Główna niebieska plama - teraz z animacją */
.instrument-card .slogan::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, #f0f5fb 0%, #d4e7f7 100%);
    clip-path: polygon(5% 0%, 95% 10%, 100% 90%, 85% 100%, 0% 95%);
    z-index: -1;
    filter: drop-shadow(5px 5px 15px rgba(52, 91, 154, 0.2));

    /* TU JEST ZMIANA: Dodana animacja w pętli */
    animation: floatMain 6s ease-in-out infinite;
}

/* Czerwony akcent - inna animacja dla efektu paralaksy */
.instrument-card .slogan::after {
    content: '';
    position: absolute;
    top: 15px; left: 20px; right: -15px; bottom: -20px;
    background: #D94336;
    opacity: 0.2;
    clip-path: polygon(0% 20%, 100% 0%, 90% 100%, 10% 90%);
    z-index: -2;

    /* TU JEST ZMIANA: Dodana inna animacja */
    animation: floatAccent 7s ease-in-out infinite alternate;
}

/* Dostosowanie dla parzystych */
.instrument-card:nth-child(even) .slogan {
    grid-column: 1 / 2;
}
.instrument-card:nth-child(even) .slogan::before {
    clip-path: polygon(5% 10%, 100% 0%, 95% 95%, 0% 100%, 15% 85%);
}
.instrument-card:nth-child(even) .slogan::after {
    top: 15px; right: 20px; left: -15px; bottom: -20px;
    clip-path: polygon(10% 0%, 90% 20%, 100% 90%, 0% 100%);
}

/* === KONIEC SEKCJI SLOGAN === */


@media (max-width: 1024px) {
    .instrument-card,
    .instrument-card:nth-child(even) {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .instrument-card img,
    .instrument-card:nth-child(even) img {
        width: 100%;
        height: 350px;
        max-width: 450px;
        margin: 0 auto;
    }

    .instrument-card h2,
    .instrument-card:nth-child(even) h2 {
        text-align: center;
        font-size: 2.8rem;
    }

    .instrument-card .description,
    .instrument-card:nth-child(even) .description {
        text-align: justify;
    }

    /* Wersja mobilna - prosta, bez animacji, żeby nie muliła telefonu */
    .instrument-card .slogan,
    .instrument-card:nth-child(even) .slogan {
        width: 100%;
        padding: 30px;
        font-size: 1.2rem;
        font-style: normal;
        background-color: #f0f5fb;
        border-radius: 16px;
        border-bottom: 4px solid #D94336;
    }
    /* Ukrywamy animowane warstwy na mobile */
    .instrument-card .slogan::before,
    .instrument-card .slogan::after,
    .instrument-card:nth-child(even) .slogan::before,
    .instrument-card:nth-child(even) .slogan::after {
        display: none;
    }
}
/* =============================================
   ROCK FESTIWAL - STYL FULL TEXT
   ============================================= */

/* 1. KONTENER GŁÓWNY */
#rock-festiwal-main {
    width: 100%;
    font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
    color: #333;
    line-height: 1.6;
    box-sizing: border-box;
}
#rock-festiwal-main * { box-sizing: border-box; }

/* 2. HERO HEADER */
.rock-hero {
    background: #25408F; /* Głęboki Granat */
    background: linear-gradient(135deg, #1a2f6b 0%, #25408F 100%);
    color: #fff;
    padding: 60px 20px;
    text-align: center;
    border-bottom: 8px solid #C02F34;
    margin-bottom: 30px;
}

.rock-badge {
    background: #C02F34; color: #fff; padding: 8px 20px; border-radius: 4px;
    font-weight: bold; font-size: 14px; letter-spacing: 1px; text-transform: uppercase;
}

.rock-hero h1 {
    font-size: 3rem; margin: 20px 0 10px 0; font-weight: 800;
    text-transform: uppercase; color: #fff !important; line-height: 1.1;
}

.rock-subtitle { font-size: 1.5rem; opacity: 0.9; margin: 0; font-weight: 300; }

/* 3. GRID SYSTEM (Formularz + Kontakt) */
.rock-container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.rock-grid { display: flex; flex-wrap: wrap; gap: 40px; }

/* Kolumny */
.rock-col-form { flex: 2; min-width: 300px; }
.rock-col-info { flex: 1; min-width: 250px; }

/* 4. STYLIZACJA FORMULARZA */
.form-box-header {
    background: #f4f4f4; border-left: 5px solid #C02F34;
    padding: 15px 20px; margin-bottom: 20px;
}
.form-box-header h3 { margin: 0; color: #25408F; font-weight: bold; }
.visforms-wrapper { background: #fff; padding: 10px; }

/* INPUTY VISFORMS */
#rock-festiwal-main input[type="text"],
#rock-festiwal-main input[type="email"],
#rock-festiwal-main input[type="tel"],
#rock-festiwal-main textarea {
    width: 100% !important; padding: 15px !important; margin-bottom: 15px !important;
    border: 2px solid #e1e1e1 !important; border-radius: 4px !important;
    background: #fcfcfc !important; font-size: 16px !important; color: #333 !important;
    display: block !important;
}

#rock-festiwal-main input:focus,
#rock-festiwal-main textarea:focus {
    border-color: #C02F34 !important; background: #fff !important; outline: none !important;
}

#rock-festiwal-main .control-label {
    color: #25408F !important; font-weight: bold !important;
    text-transform: uppercase !important; font-size: 13px !important;
    margin-bottom: 8px !important; display: block !important;
}

/* BUTTON */
#rock-festiwal-main input[type="submit"],
#rock-festiwal-main button.btn-primary {
    width: 100% !important; background-color: #C02F34 !important; color: #fff !important;
    padding: 20px !important; font-size: 22px !important; font-weight: 800 !important;
    text-transform: uppercase !important; border: none !important; border-radius: 4px !important;
    cursor: pointer !important; margin-top: 15px !important; transition: 0.2s !important;
}
#rock-festiwal-main input[type="submit"]:hover { background-color: #25408F !important; }

/* 5. KARTY INFORMACYJNE */
.info-card {
    background: #f9f9f9; padding: 20px; border-radius: 8px;
    border: 1px solid #eee; margin-bottom: 20px;
}
.info-card h4 {
    color: #C02F34; font-weight: bold; margin-top: 0;
    border-bottom: 1px solid #ddd; padding-bottom: 10px;
}
.contact-highlight { background: #25408F; color: #fff; }
.contact-highlight h4 { color: #fff; border-color: rgba(255,255,255,0.3); }

/* 6. PEŁNY REGULAMIN (STYLISTYKA DOKUMENTU) */
.rock-regulamin {
    max-width: 1000px; margin: 50px auto 0 auto; padding: 0 15px;
}
.reg-title {
    text-align: center; color: #333; font-size: 28px;
    margin-bottom: 40px; text-transform: uppercase; letter-spacing: 2px;
}
.reg-item {
    margin-bottom: 30px; border-bottom: 1px solid #eee; padding-bottom: 20px;
}
.reg-item h4 {
    color: #C02F34; font-size: 20px; font-weight: bold;
    margin-bottom: 15px; text-transform: uppercase;
}
.reg-content p { margin-bottom: 10px; font-size: 16px; }

/* Listy w regulaminie */
.sub-list, .dot-list { margin: 10px 0 15px 20px; }
.sub-list li { list-style: none; margin-bottom: 5px; } /* Dla punktów 1) 2) */
.dot-list li { margin-bottom: 5px; } /* Dla myślników */

/* 7. JOOMLA READ MORE FIX */
.readmore a, a.readmore {
    background: #C02F34 !important; color: #fff !important; padding: 10px 20px !important;
    text-transform: uppercase !important; font-weight: bold !important;
    display: inline-block !important; margin-top: 20px !important;
}

.rock-hero > div:first-child {
    margin-bottom: 35px; /* Większy odstęp między zdjęciem a tekstem */
    display: flex;
    justify-content: center; /* Wyśrodkowanie poziome zdjęcia */
}

.rock-hero img {
    max-width: 90%;      /* Responsywność - na mobile nie wyjdzie poza ekran */
    height: auto;        /* Zachowanie proporcji */
    max-height: 500px;   /* Ograniczenie wysokości na dużych ekranach, żeby nie był gigantyczny */
    object-fit: cover;   /* Ładne dopasowanie w kadrze */
    display: block;

    /* --- STYLIZACJA --- */
    border: 5px solid #fff;  /* Wyrazista biała ramka wewnętrzna */
    border-radius: 12px;     /* Zaokrąglone rogi */

    /* Magia cieni: pierwszy to głęboki cień pod spodem, drugi to czerwona poświata dookoła */
    box-shadow:
            0 15px 35px rgba(0,0,0,0.4), /* Cień głębi */
            0 0 0 6px #C02F34;           /* Czerwony "pierścień" zewnętrzny */

    /* Lekki, zawadiacki obrót dla dynamiki */
    transform: rotate(-2deg);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Sprężysta animacja */
}

.rock-hero img:hover {
    transform: rotate(0deg) scale(1.03); /* Wyprostowanie i lekkie powiększenie */
    box-shadow:
            0 25px 50px rgba(0,0,0,0.5), /* Cień się pogłębia */
            0 0 0 8px #C02F34;           /* Czerwony pierścień robi się grubszy */
    cursor: pointer;
}

@media (max-width: 768px) {
    .rock-hero-content[style*="text-align: left;"] {
        text-align: center !important;
    }
}

/* MOBILE */
@media (max-width: 768px) {
    .rock-hero h1 { font-size: 1.8rem; }
    .rock-grid { flex-direction: column; }
}
/* =======================================================
   VISFORMS - STYL PREMIUM ROCK UI (MODERN)
   ======================================================= */

/* 1. KONTENER FORMULARZA - TŁO KARTY */
.visforms-wrapper {
    background: #ffffff;
    padding: 30px;
    border-radius: 12px;
    /* Głęboki, miękki cień dający efekt uniesienia */
    box-shadow: 0 15px 35px rgba(37, 64, 143, 0.15);
    border: 1px solid rgba(37, 64, 143, 0.1);
    position: relative;
    overflow: hidden;
}

/* Ozdobny pasek na górze formularza */
.visforms-wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 6px;
    background: linear-gradient(90deg, #25408F 0%, #C02F34 100%);
}

/* 2. ETYKIETY (LABELS) - Nowoczesne i czytelne */
.visforms-wrapper .control-label,
.visforms-wrapper label {
    color: #4a5568;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    display: block;
    transition: color 0.3s;
}

/* Jak jesteśmy w polu, etykieta zmienia kolor na granat */
.visforms-wrapper .control-group:focus-within .control-label {
    color: #25408F;
}

/* Gwiazdka */
.visforms-wrapper .required { color: #C02F34; font-size: 14px; margin-left: 2px; }

/* 3. INPUTY - STYL "MATERIAL DESIGN" + MODERN */
.visforms-wrapper input[type="text"],
.visforms-wrapper input[type="email"],
.visforms-wrapper input[type="number"],
.visforms-wrapper input[type="tel"],
.visforms-wrapper input[type="url"],
.visforms-wrapper textarea,
.visforms-wrapper select {
    width: 100% !important;
    padding: 16px 20px !important;
    background-color: #f7f9fc !important; /* Bardzo jasny błękit/szary */
    border: 2px solid transparent !important; /* Ukryta ramka */
    border-bottom: 2px solid #e2e8f0 !important; /* Tylko dolna linia widoczna */
    border-radius: 8px !important;
    font-size: 16px !important;
    color: #2d3748 !important;
    font-weight: 500 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
}

/* EFEKT PO KLIKNIĘCIU (FOCUS) */
.visforms-wrapper input:focus,
.visforms-wrapper textarea:focus,
.visforms-wrapper select:focus {
    background-color: #fff !important;
    border-color: #C02F34 !important; /* Dolna linia robi się czerwona */
    box-shadow: 0 10px 20px -5px rgba(192, 47, 52, 0.15) !important; /* Czerwona poświata pod spodem */
    transform: translateY(-2px); /* Lekkie uniesienie pola */
}

/* Textarea */
.visforms-wrapper textarea {
    min-height: 140px;
    line-height: 1.6;
}

/* 4. UPLOAD PLIKÓW - Wygląda jak strefa drop */
.visforms-wrapper input[type="file"] {
    background-color: #fff !important;
    border: 2px dashed #cbd5e0 !important;
    padding: 20px !important;
    text-align: center !important;
    cursor: pointer !important;
    color: #4a5568 !important;
    transition: 0.3s;
}

.visforms-wrapper input[type="file"]:hover {
    border-color: #25408F !important;
    background-color: #f0f4ff !important;
}

/* 5. CHECKBOX (Regulamin) - Wyróżniony Box */
.visforms-wrapper .checkbox {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #C02F34; /* Czerwony akcent */
    padding: 20px;
    border-radius: 6px;
    margin-top: 25px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    transition: transform 0.2s;
}

.visforms-wrapper .checkbox:hover {
    transform: translateX(5px); /* Lekki ruch w prawo po najechaniu */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.visforms-wrapper input[type="checkbox"] {
    width: 24px !important;
    height: 24px !important;
    margin-right: 15px !important;
    cursor: pointer !important;
    accent-color: #C02F34;
}

/* 6. PRZYCISK SUBMIT - RAKIETA */
.visforms-wrapper input[type="submit"],
.visforms-wrapper button.btn-primary {
    display: block !important;
    width: 100% !important;
    /* Gradient Czerwono-Ciemnoczerwony */
    background: linear-gradient(135deg, #C02F34 0%, #901a1e 100%) !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    padding: 22px !important;
    border: none !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    margin-top: 10px !important;
    box-shadow: 0 10px 25px rgba(192, 47, 52, 0.4) !important; /* Mocny cień */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; /* Sprężysta animacja */
    position: relative;
    overflow: hidden;
}

/* Efekt Hover na przycisku */
.visforms-wrapper input[type="submit"]:hover {
    transform: translateY(-5px) scale(1.02) !important; /* Unosi się i powiększa */
    box-shadow: 0 20px 30px rgba(37, 64, 143, 0.5) !important; /* Cień zmienia się na granatowy */
    background: linear-gradient(135deg, #25408F 0%, #1a2f6b 100%) !important; /* Zmiana koloru na Granat */
}

/* 7. MAŁE POPRAWKI TYPOGRAFII */
.visforms-wrapper span.small,
.visforms-wrapper .help-block {
    font-size: 11px;
    color: #a0aec0;
    margin-top: 5px;
    font-style: normal;
}
/* =================================================================
   AGENCY ARCHITECT - MODULAR GRID SYSTEM
   ================================================================= */

.agency-architect-wrapper {
    /* Używamy fontu strony (inherit), resetujemy resztę */
    font-family: inherit;
    color: #111;
    background-color: #F4F4F4; /* Jasnoszare tło architektoniczne */
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 40px;
    box-sizing: border-box;
}
.agency-architect-wrapper * { box-sizing: border-box; }

/* --- 1. HERO SECTION --- */
.arch-hero {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 60px;
}

.arch-hero-text { flex: 1; }

.arch-meta {
    font-size: 11px; font-weight: 700; letter-spacing: 3px;
    text-transform: uppercase; color: #888; display: block; margin-bottom: 20px;
    border-left: 3px solid #C00000; padding-left: 15px;
}

.arch-title {
    font-size: 4rem; line-height: 1; font-weight: 800; margin: 0 0 30px 0;
    letter-spacing: -2px; color: #000;
}
.text-accent { color: #C00000; font-style: italic; font-weight: 400; }

.arch-separator { width: 80px; height: 6px; background: #C00000; margin-bottom: 30px; }

.arch-lead { font-size: 1.25rem; line-height: 1.6; color: #444; max-width: 90%; }

.arch-hero-img { flex: 0 0 400px; }
.arch-hero-img img {
    width: 100%; height: auto; display: block;
    box-shadow: 20px 20px 0 #E0E0E0; /* Twardy cień architektoniczny */
}

/* --- 2. GRID SYSTEM (12 Columns) --- */
.arch-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* 12 równych kolumn */
    gap: 30px; /* Odstępy */
    grid-auto-rows: minmax(250px, auto); /* Minimalna wysokość kafelka */
}

/* Klasy szerokości kafelków */
.span-4 { grid-column: span 4; }  /* 1/3 szerokości */
.span-6 { grid-column: span 6; }  /* 1/2 szerokości */
.span-8 { grid-column: span 8; }  /* 2/3 szerokości */
.span-12 { grid-column: span 12; } /* Pełna szerokość */

/* --- 3. DESIGN KAFELKÓW (CARD) --- */
.arch-card {
    background: #fff;
    padding: 40px;
    border: 1px solid #E5E5E5;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s ease;
}
.arch-card:hover { transform: translateY(-5px); border-color: #C00000; }

.card-label {
    font-size: 10px; font-weight: 700; letter-spacing: 1px; color: #aaa;
    text-transform: uppercase; margin-bottom: 20px;
}

.arch-card h3 {
    margin-top: 0; font-size: 1.8rem; font-weight: 700; margin-bottom: 25px;
    color: #111;
}

/* Stylizacja List i Treści */
.card-content-columns {
    display: flex; gap: 40px;
}
.arch-list { list-style: none; padding: 0; margin: 0; flex: 1; }
.arch-list li {
    margin-bottom: 15px; position: relative; padding-left: 20px; font-size: 1.05rem;
}
.arch-list li::before {
    content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px;
    background: #C00000;
}

/* Karta Wyróżniona (Czerwona) */
.highlight-card {
    background: #C00000; color: #fff; border: none;
}
.timeline-vertical { list-style: none; padding: 0; margin: 0; }
.timeline-vertical li {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.2); padding: 15px 0;
}
.timeline-vertical li:last-child { border: none; }
.t-date { font-size: 1.5rem; font-weight: 800; color: #fff; }
.t-desc { font-size: 0.9rem; opacity: 0.8; text-align: right; }

/* Karta Zasady */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { margin-bottom: 15px; border-bottom: 1px dashed #eee; padding-bottom: 10px; }
.check-list strong { color: #C00000; margin-right: 5px; text-transform: uppercase; font-size: 0.8rem; }

/* Karta Kategorie */
.categories-flex { display: flex; gap: 15px; margin-bottom: 25px; }
.cat-pill {
    background: #F8F8F8; padding: 15px 25px; border-radius: 4px; font-weight: 700;
    border: 1px solid #eee; flex: 1; text-align: center;
}
.age-groups {
    background: #FFF5F5; padding: 15px; border-left: 4px solid #C00000; font-size: 0.9rem;
}

/* Karta Split (Ocena/Nagrody) */
.card-split { display: flex; align-items: center; gap: 60px; }
.split-left { flex: 1; }
.split-right { flex: 0 0 300px; }

.prize-badge {
    background: #111; color: #fff; padding: 30px; text-align: center;
    display: flex; align-items: center; gap: 20px;
}
.prize-icon { font-size: 3rem; }
.prize-badge strong { display: block; color: #D4AF37; font-size: 1.2rem; margin-bottom: 5px; }

/* --- 4. FORMULARZ I KONTAKT --- */
.contact-section { background: #fff; border-top: 5px solid #C00000; }
.contact-header { text-align: center; margin-bottom: 40px; }
.contact-header h2 { font-size: 2.5rem; margin-bottom: 20px; }

.contact-methods {
    display: flex; justify-content: center; gap: 30px; font-size: 1.2rem;
    margin-bottom: 15px;
}
.contact-methods a { color: #C00000; text-decoration: none; font-weight: 700; }
.deadline-alert {
    color: #fff; background: #C00000; display: inline-block; padding: 5px 15px;
    font-size: 0.9rem; font-weight: 700; border-radius: 4px;
}

.visforms-architect {
    max-width: 700px; margin: 0 auto;
    background: #FAFAFA; padding: 40px; border: 1px solid #eee;
}

.legal-footer { text-align: center; margin-top: 30px; font-size: 0.9rem; color: #888; }

/* --- RESPONSYWNOŚĆ --- */
/* --- RESPONSYWNOŚĆ: ZMIANY DLA MOBILE (MAX 900PX) --- */
@media (max-width: 900px) {
    /* Ogólne */
    .agency-architect-wrapper {
        padding: 30px 20px; /* Mniejsze marginesy na krawędziach */
    }

    /* 1. SEKCJA HERO */
    .arch-hero {
        flex-direction: column-reverse; /* Obrazek na dole */
        gap: 30px;
        margin-bottom: 40px; /* Mniejszy margines na dole sekcji */
    }

    .arch-meta {
        margin-bottom: 10px; /* Mniejszy odstęp */
    }

    .arch-title {
        font-size: 2.5rem; /* Zmniejszony rozmiar nagłówka */
        line-height: 1.2;
        margin: 0 0 20px 0;
    }

    .arch-separator {
        width: 60px; /* Mniejsza separacja */
        margin-bottom: 20px;
    }

    .arch-lead {
        font-size: 1.1rem; /* Zmniejszony rozmiar tekstu wprowadzającego */
        max-width: 100%;
    }

    .arch-hero-img {
        flex: auto;
        width: 100%;
    }
    .arch-hero-img img {
        box-shadow: 10px 10px 0 #E0E0E0; /* Mniejszy cień na mobilnym */
    }

    /* 2. SYSTEM GRID */
    .arch-grid {
        grid-template-columns: 1fr; /* Wszystko w 1 kolumnie na mobile */
        gap: 20px; /* Mniejsze odstępy */
        grid-auto-rows: minmax(auto, auto); /* Usuwamy minimalną wysokość, pozwalamy na naturalne dopasowanie */
    }
    /* Klasy szerokości kafelków - upewnienie się, że zajmują pełną szerokość */
    .span-4, .span-6, .span-8, .span-12 {
        grid-column: span 1;
    }

    /* 3. DESIGN KAFELKÓW (CARD) */
    .arch-card {
        padding: 30px 25px; /* Mniejszy padding w kafelkach */
    }
    .arch-card h3 {
        font-size: 1.5rem; /* Mniejszy nagłówek w kafelkach */
        margin-bottom: 15px;
    }

    /* Stylizacja List i Treści */
    .card-content-columns {
        flex-direction: column;
        gap: 20px; /* Zmniejszony odstęp między kolumnami w kafelku */
    }
    .arch-list li {
        font-size: 1rem; /* Poprawa czytelności */
    }

    /* Karta Wyróżniona (Czerwona) - Poprawa odstępów */
    .timeline-vertical li {
        padding: 10px 0;
    }
    .t-date {
        font-size: 1.2rem;
    }
    .t-desc {
        font-size: 0.8rem;
    }

    /* Karta Kategorie */
    .categories-flex {
        flex-direction: column; /* Kategorie pionowo, jedna pod drugą */
        gap: 10px;
    }
    .cat-pill {
        padding: 10px 15px; /* Mniejszy padding pigułek */
    }

    /* Karta Split (Ocena/Nagrody) */
    .card-split {
        flex-direction: column;
        gap: 30px;
    }
    .split-right {
        width: 100%;
        flex: auto;
    }
    .prize-badge {
        padding: 20px;
        flex-direction: column; /* Ikona i tekst wertykalnie */
        gap: 10px;
    }

    /* 4. FORMULARZ I KONTAKT */
    .contact-header h2 {
        font-size: 2rem;
    }
    .contact-methods {
        flex-direction: column; /* Kontakt wertykalnie */
        text-align: center;
        gap: 10px;
    }
    .contact-methods a {
        font-size: 1.1rem;
    }
    .visforms-architect {
        padding: 30px 20px;
    }
}

/* --- GALA AWARDS 2025: FINAL RESPONSIVE --- */

:root {
    /* Kolory szlachetne */
    --gala-gold: #C5A059;
    --gala-silver: #A0A0A0;
    --gala-bronze: #CD7F32;
    --gala-navy: #1B2631; /* Ciemny granat dla tekstów */
    --bg-light: #F4F7F6;
}

/* Kontener główny */
.gala-wrapper {
    font-family: inherit; /* Dziedziczy Twoją czcionkę ze strony */
    background-color: var(--bg-light);
    color: #333;
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 15px;
    line-height: 1.5;
}

/* --- INTRO & JURY --- */
.gala-intro {
    text-align: center;
    margin-bottom: 40px;
}

.gala-intro p {
    font-size: 1.1em;
    color: #555;
    max-width: 700px;
    margin: 0 auto;
}

.jury-container {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    margin-bottom: 50px;
    border-top: 4px solid var(--gala-navy);
}

.jury-title {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    color: var(--gala-navy);
    margin-bottom: 15px;
    font-size: 0.9em;
}

.jury-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 15px;
    font-size: 0.95em;
    font-weight: 500;
}

.jury-member:not(:last-child)::after {
    content: '•';
    margin-left: 15px;
    color: #ccc;
}

/* --- KARTA KATEGORII --- */
.podium-card {
    background: #fff;
    border-radius: 16px;
    margin-bottom: 40px;
    padding: 30px 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    text-align: center;
}

.cat-eyebrow {
    display: block;
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 1px;
    color: #888;
    margin-bottom: 8px;
}

.cat-headline {
    font-size: 1.4em;
    font-weight: 700;
    color: var(--gala-navy);
    margin: 0 0 30px 0;
    line-height: 1.3;
}

/* --- STAGE (PODIUM DESKTOP) --- */
.podium-stage {
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Wyrównanie do dołu */
    gap: 15px;
    margin-bottom: 30px;
    padding-bottom: 0;
    min-height: 220px;
}

/* Elementy podium */
.podium-place {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

/* Kolejność na PC: 2 - 1 - 3 */
.place-1 { order: 2; width: 34%; z-index: 2; }
.place-2 { order: 1; }
.place-3 { order: 3; }

/* Blok graficzny (słupek) */
.podium-block {
    width: 100%;
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    font-size: 1.3em;
    margin-top: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Wysokości i kolory słupków na PC */
.place-1 .podium-block {
    height: 140px;
    background: linear-gradient(135deg, var(--gala-gold), #b08d4b);
}
.place-2 .podium-block {
    height: 100px;
    background: linear-gradient(135deg, var(--gala-silver), #8e8e8e);
}
.place-3 .podium-block {
    height: 70px;
    background: linear-gradient(135deg, var(--gala-bronze), #a86628);
}

/* Puste miejsca na PC */
.place-empty .podium-block {
    background: #f0f0f0;
    color: #ccc;
    box-shadow: none;
    font-size: 1em;
}
.place-empty .winner-name { color: #aaa; font-style: italic; font-weight: 400; }

/* Nazwisko na PC */
.winner-name {
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 1em;
    line-height: 1.3;
    min-height: 3em;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.place-1 .winner-name { font-size: 1.15em; color: #000; }

/* Wyróżnienia */
.distinctions-area {
    background: #fcfcfc;
    border: 1px dashed #e0e0e0;
    padding: 15px;
    border-radius: 8px;
    font-size: 0.95em;
    color: #555;
    display: inline-block;
    width: 80%;
}

.dist-label {
    text-transform: uppercase;
    font-size: 0.75em;
    font-weight: 700;
    color: var(--gala-navy);
    display: block;
    margin-bottom: 5px;
}

/* --- MOBILE MAGIC (MAX-WIDTH 768px) --- */
@media (max-width: 768px) {

    .podium-stage {
        flex-direction: column; /* Układ pionowy */
        align-items: stretch;
        gap: 15px;
        min-height: auto;
    }

    .podium-place {
        width: 100%;
        flex-direction: row; /* Imię obok numerka */
        align-items: center;
        text-align: left;
        background: #fff;
        padding: 15px;
        border-radius: 12px;
        justify-content: flex-start;
        border: 1px solid #eee; /* Domyślne obramowanie */
    }

    /* --- KOLOROWE OBRAMOWANIA NA MOBILE --- */

    /* 1 Miejsce - Złote */
    .place-1 {
        order: 1;
        border: 2px solid var(--gala-gold);
        background: #fffbf5; /* Lekko złote tło */
    }

    /* 2 Miejsce - Srebrne */
    .place-2 {
        order: 2;
        border: 2px solid var(--gala-silver);
    }

    /* 3 Miejsce - Brązowe */
    .place-3 {
        order: 3;
        border: 2px solid var(--gala-bronze);
    }

    /* Puste miejsce - neutralne (nadpisuje kolory) */
    .place-empty {
        border: 1px dashed #eee !important;
        background: #fafafa !important;
    }

    /* Zamiana słupka w kółeczko (Badge) */
    .podium-block {
        width: 40px;
        height: 40px !important;
        border-radius: 50%;
        margin-top: 0;
        margin-right: 15px;
        flex-shrink: 0;
        font-size: 1em;
    }

    /* Nazwisko na mobile */
    .winner-name {
        margin-bottom: 0;
        min-height: auto;
        display: block;
        text-align: left;
        width: 100%;
    }

    .place-1 .winner-name { font-size: 1.1em; }

    .distinctions-area { width: 100%; }
    .jury-member { display: block; margin-bottom: 5px; }
    .jury-member:not(:last-child)::after { content: ''; }
}

/* --- GŁÓWNY KONTENER --- */
.music-reg-wrapper {
    max-width: 1100px;
    margin: 40px auto;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif; /* Bardziej szkolny font */
}

.music-split-card {
    display: flex;
    flex-direction: row;
    background-color: #ffffff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(14, 43, 86, 0.15); /* Cień w kolorze granatu */
    border: 1px solid #eee;
}

/* --- LEWA STRONA (WIZUALNA - Granat z logo) --- */
.visual-side {
    flex: 1;
    /* Ten GRANAT bierzemy z paska "w Nowym Tomyślu" na logo */
    background-color: #0e2b56;
    color: #fff;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify_content: center;
    align-items: center;
    text-align: center;
    position: relative;
}

/* Ozdobna fala na styku (opcjonalne, nawiązuje do ulotki) */
.visual-side::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 10px;
    background: linear-gradient(to bottom, #d4af37, #f0e68c); /* Złota linia */
}

.flyer-img {
    max-width: 90%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4); /* Mocniejszy cień żeby ulotka "wyskoczyła" z tła */
    margin-bottom: 25px;
    border: 2px solid #fff; /* Biała ramka wokół ulotki dla elegancji */
}

.visual-text-content h2 {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #fff;
    font-weight: 700;
}

.visual-text-content p {
    font-size: 1rem;
    color: #e0e0e0; /* Lekko szary biały */
    margin-bottom: 25px;
    line-height: 1.5;
}

/* Przycisk "OFERTA" - Biały na granacie */
.btn-offer-outline {
    display: inline-block;
    padding: 10px 25px;
    border: 2px solid #ffffff;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 50px;
    transition: all 0.3s ease;
    background: transparent;
}

.btn-offer-outline:hover {
    background-color: #ffffff;
    color: #0e2b56; /* Tekst zmienia się na granatowy */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

/* --- PRAWA STRONA (FORMULARZ) --- */
.form-side {
    flex: 1.2;
    background-color: #ffffff;
    padding: 40px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.form-header h3 {
    font-size: 1.8rem;
    /* Ta CZERWIEŃ z tła ulotki */
    color: #ce2029;
    margin-bottom: 5px;
    font-weight: 800;
    text-transform: uppercase;
}

.form-header p {
    color: #666;
    margin-bottom: 25px;
    font-size: 0.95rem;
}

/* --- STYLIZACJA VISFORMS (klasa: visforms-school) --- */

/* Pola tekstowe */
.visforms-school input[type="text"],
.visforms-school input[type="email"],
.visforms-school input[type="tel"],
.visforms-school textarea,
.visforms-school select {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e1e1e1;
    border-radius: 6px; /* Lekko zaokrąglone, przyjazne */
    background-color: #fcfcfc;
    font-size: 15px;
    margin-bottom: 15px;
    transition: all 0.3s;
}

/* Aktywne pole - Czerwona ramka (jak ulotka) */
.visforms-school input:focus,
.visforms-school select:focus,
.visforms-school textarea:focus {
    outline: none;
    border-color: #ce2029; /* Ogniskowa czerwień */
    box-shadow: 0 0 0 3px rgba(206, 32, 41, 0.1); /* Czerwona poświata */
    background-color: #fff;
}

/* Labele (Etykiety) */
.visforms-school label {
    font-weight: 700;
    color: #0e2b56; /* Granatowy tekst */
    font-size: 0.85rem;
    margin-bottom: 5px;
    display: block;
}

/* Przycisk WYŚLIJ - Czerwony "Landrynek" */
.visforms-school button[type="submit"],
.visforms-school .btn-primary {
    width: 100%;
    padding: 15px;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    color: #ffffff;
    background-color: #ce2029; /* Czerwień z ulotki */
    border: none;
    border-radius: 50px;
    cursor: pointer;
    margin-top: 15px;
    transition: transform 0.2s, background 0.3s;
    box-shadow: 0 4px 10px rgba(206, 32, 41, 0.3);
}

.visforms-school button[type="submit"]:hover {
    background-color: #b01820; /* Ciemniejsza czerwień */
    transform: translateY(-2px);
}

/* --- RESPONSYWNOŚĆ --- */
@media (max-width: 900px) {
    .music-split-card {
        flex-direction: column;
    }
    .visual-side::after {
        width: 100%; height: 5px; /* Fala na dole zamiast z boku */
        top: auto; bottom: 0; left: 0;
    }
}
/* --- Styl dla formularza zapisów (CSS Class: formularz-zapisy) --- */

/* Główny kontener - wyróżnienie z tła */
.formularz-zapisy {
    background: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Miękki, nowoczesny cień */
    border: 1px solid #eaeaea;
    max-width: 550px; /* Optymalna szerokość do czytania */
    margin: 20px auto;
}

/* Pola formularza - duże i wygodne */
.formularz-zapisy input[type="text"],
.formularz-zapisy input[type="email"],
.formularz-zapisy input[type="tel"],
.formularz-zapisy select {
    width: 100%;
    padding: 15px; /* Wyższe pola są łatwiejsze do kliknięcia */
    margin-bottom: 20px;
    border: 2px solid #f0f0f0;
    border-radius: 8px;
    font-size: 16px;
    background-color: #fafafa;
    transition: all 0.3s ease;
}

/* Aktywne pole - podświetlenie */
.formularz-zapisy input:focus,
.formularz-zapisy select:focus {
    border-color: #000000; /* TUTAJ ZMIEŃ KOLOR na swój główny */
    background-color: #fff;
    outline: none;
    box-shadow: 0 0 0 4px rgba(0,0,0,0.05);
}

/* Etykiety (Labele) - czytelne nad polami */
.formularz-zapisy .control-label label {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    color: #555;
    margin-bottom: 8px;
    display: block;
}

/* Przycisk CTA (Call to Action) - najważniejszy element */
.formularz-zapisy button[type="submit"],
.formularz-zapisy .btn-primary {
    width: 100%;
    padding: 18px;
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    background-color: #000000; /* TUTAJ ZMIEŃ KOLOR na swój główny */
    border: none;
    border-radius: 50px; /* Zaokrąglony przycisk "pastylka" */
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 10px;
}

/* Efekt najechania na przycisk */
.formularz-zapisy button[type="submit"]:hover,
.formularz-zapisy .btn-primary:hover {
    transform: translateY(-2px); /* Lekkie uniesienie */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    opacity: 0.9;
}

/* Ukrycie zbędnych gwiazdek wymaganych pól (opcjonalne, dla czystości) */
.formularz-zapisy .icon-star {
    color: #e74c3c;
    font-size: 8px;
    vertical-align: top;
}
/* --- STYL PRZYCISKU SUBMIT (Dla klasy formularz-zapisy) --- */

.formularz-zapisy button[type="submit"],
.formularz-zapisy .btn-primary,
.formularz-zapisy input[type="submit"] {
    /* Wygląd podstawowy - Czerwień z ulotki */
    background-color: #ce2029;
    color: #ffffff;

    /* Wielkość i kształt */
    width: 100%;
    padding: 16px 30px;
    border: none;
    border-radius: 50px; /* "Pastylka" - nowocześnie i przyjaźnie */

    /* Tekst */
    font-size: 18px;
    font-weight: 800; /* Gruby tekst */
    text-transform: uppercase;
    letter-spacing: 1px;

    /* Efekty */
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(206, 32, 41, 0.4); /* Czerwona poświata */
    transition: all 0.3s ease; /* Płynna animacja */
    margin-top: 20px;
}

/* --- EFEKT PO NAJECHANIU MYSZKĄ (HOVER) --- */
.formularz-zapisy button[type="submit"]:hover,
.formularz-zapisy .btn-primary:hover,
.formularz-zapisy input[type="submit"]:hover {
    /* Zmiana na Granat (z logo) */
    background-color: #0e2b56;

    /* Lekkie uniesienie przycisku */
    transform: translateY(-3px);

    /* Cień staje się ciemniejszy */
    box-shadow: 0 8px 20px rgba(14, 43, 86, 0.3);
}

/* Opcjonalnie: Efekt kliknięcia (Active) */
.formularz-zapisy button[type="submit"]:active,
.formularz-zapisy .btn-primary:active {
    transform: translateY(1px); /* Wciśnięcie */
    box-shadow: 0 2px 10px rgba(14, 43, 86, 0.3);
}
/* --- CSS POPUPU I PRZYCISKU (Zaktualizowany) --- */

/* 1. POPUP STARTOWY (MODAL) */
.popup-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(14, 43, 86, 0.95);
    z-index: 10000;
    display: flex; justify-content: center; align-items: center;
    transition: opacity 0.3s ease;
}

.popup-box {
    background: #ffffff;
    width: 90%; max-width: 550px;
    padding: 40px;
    border-radius: 15px;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    border-top: 8px solid #ce2029;
    color: #333;
}

/* Reset stylów wewnątrz popupu */
.popup-box h2, .popup-box h3, .popup-box p { color: initial; text-align: center; }

.popup-close {
    position: absolute; top: 10px; right: 20px;
    font-size: 35px; color: #aaa; cursor: pointer;
}
.popup-close:hover { color: #ce2029; }

.popup-content h2 { font-size: 32px; color: #0e2b56; margin: 0 0 20px 0; font-weight: 800; }
.popup-content p { font-size: 16px; color: #555; margin-bottom: 30px; }
.popup-content h3 { text-transform: uppercase; color: #999; font-size: 14px; margin-bottom: 5px; }

.popup-cta-btn {
    display: block; width: 100%; padding: 16px;
    background-color: #ce2029; color: #fff !important;
    font-size: 18px; font-weight: bold; text-transform: uppercase; text-decoration: none;
    border-radius: 50px; margin-bottom: 10px;
    box-shadow: 0 10px 20px rgba(206, 32, 41, 0.2);
}
.popup-footer { font-size: 11px !important; color: #bbb !important; margin: 0 !important; }


/* 2. PRZYCISK W ROGU (STICKY) */
.sticky-wrapper {
    position: fixed;
    bottom: 30px;
    left: 30px;       /* Desktop: Lewa strona */
    z-index: 9999;
    display: none;    /* Domyślnie ukryty, JS go pokaże */
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
    /* Ważne: Flex column żeby elementy układały się pionowo, ale position absolute dla dymka jest pewniejsze */
}

.sticky-wrapper.show-sticky {
    display: block !important;
    opacity: 1;
    transform: translateY(0);
}

.mega-sticky-btn {
    display: flex; align-items: center; justify-content: center;
    background-color: #ce2029;
    color: #fff !important;
    text-decoration: none !important;
    padding: 12px 25px; border-radius: 50px;
    font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 0.5px;
    box-shadow: 0 8px 20px rgba(206, 32, 41, 0.4);
    border: 2px solid #fff;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.mega-sticky-btn:hover {
    background-color: #ce2029; opacity: 0.9; transform: scale(1.05);
}

/* 3. DYMEK (Pozycjonowanie nad przyciskiem) */
.sticky-bubble {
    position: absolute;
    bottom: 100%;       /* 100% wysokości od dołu = siedzi idealnie NA przycisku */
    margin-bottom: 15px; /* Odstęp od przycisku */
    left: 0;            /* Wyrównanie do lewej krawędzi przycisku */

    background: #fff; color: #000 !important;
    padding: 15px; border-radius: 12px; width: 220px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15); font-size: 13px;
    border-left: 5px solid #0e2b56;

    opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.4s;
    pointer-events: none;
}

.sticky-bubble.visible {
    opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

.close-bubble { position: absolute; top: 5px; right: 8px; font-size: 16px; cursor: pointer; color: #999; }
.bubble-arrow {
    position: absolute; bottom: -8px; left: 20px;
    width: 0; height: 0;
    border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #fff;
}

/* --- RESPONSYWNOŚĆ (MOBILE) --- */
@media (max-width: 600px) {
    .sticky-wrapper {
        left: 20px !important;   /* WYMUSZAMY LEWĄ STRONĘ NA MOBILE */
        bottom: 20px !important;
        transform: translateY(20px); /* Reset transformacji (tylko pionowa animacja) */
        width: auto;
    }

    .sticky-wrapper.show-sticky {
        transform: translateY(0); /* Tylko wjazd od dołu */
    }

    .sticky-bubble {
        width: 200px; /* Trochę węższy dymek na telefonie */
    }

    .popup-box { width: 95%; padding: 25px; }
    .popup-content h2 { font-size: 26px; }
}