/* =========================================
   Alap reset
========================================= */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
}

html,
body {
    height: 100%
}

body {

    background-color: #141313;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
}

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

.orange {
    color: #FF1B1C;
}

/* =========================================
   Header alap
========================================= */
#logo-section {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
}

/* =========================================
   NAVBAR
========================================= */
.logo-nav-section {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none;
    box-shadow: none;
}


/* logó blokk */
.logo {
    position: relative;
    z-index: 2;
    /* pseudo-elemek fölé */
}

.logo-img {
    display: block;
    width: 350px;
}

/* Menülista (WP nav és fallback) */
#menu-list {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 18px;

}

#menu-list a {
    position: relative;
    padding: 6px 10px;
    text-decoration: none;
    font-style: italic;
    color: #fff;
}

#menu-list a:hover {
    color: #FF1B1C;
    text-decoration: none;
}

@media (max-width: 768px) {

    /* 1. Navbar és Menü */
    .logo-nav-section {
        flex-direction: column;
        gap: 15px;
        padding: 10px;
    }

    #menu-list {
        justify-content: center;
        font-size: 16px;
    }

    #menu-list a {
        padding: 5px 10px;
    }
}

/* =========================================
   Sections1
========================================= */
#section-1 {
    width: 100%;
}

.section1-tartalom {
    position: relative;
    width: 100%;
}

.section1-tartalom::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(20, 19, 19, 0.5);
}

#section-1 img {
    width: 100%;
    height: auto;
    display: block;
}


.section1-szoveg {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 10%;
    left: 5%;
    /* balra igazítás */
    gap: 20px;
    color: #fff;
    z-index: 2;
}


.section1-szoveg h2 {
    font-size: 35px;
    font-weight: 200;
    max-width: 650px;
    color: #fff;
}

.section1-szoveg p {
    font-size: 30px;
    font-weight: 200;
    color: #FF1B1C;
}

.cta-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    position: relative;
    /* Ez elengedhetetlen a z-indexhez */
    z-index: 10;
    /* Magasabb érték, hogy felülre kerüljön */
}

/* Gomb alapstílusok (maradnak a kerekített formák) */
.cta-container a {
    padding: 15px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.3s ease;
    position: relative;
    z-index: 11;
    cursor: pointer !important;
    /* Kényszerítjük a kattintható kurzort */
}

.btn-reg {
    background-color: #FF1B1C;
    color: #fff;
    border: 2px solid #FF1B1C;
}

.btn-login {
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
}

/* Hover effektek */
.btn-reg:hover {
    background: #d11415;
    border-color: #d11415;
}

.btn-login:hover {
    background: #fff;
    color: #111;
}

/* Modal alapja - Sötétebb háttér */
.modal {
    display: none;
    /* Alapból rejtve */
    position: fixed;
    /* A képernyőhöz rögzítve */
    z-index: 9999;
    /* Minden felett (a menü felett is) */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    /* Ha hosszú a tartalom, lehessen görgetni a modalon belül */
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
}

.modal-content {
    position: relative;
    background-color: #1a1a1a;
    color: #fff;
    margin: 10% auto;
    /* Fentről 10%-ra, középre */
    padding: 30px;
    border: 1px solid #FF1B1C;
    width: 90%;
    max-width: 400px;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(255, 27, 28, 0.2);
}

/* Mezők stílusosítása */
.modal input {
    display: flex;
    flex-direction: column;
    background: #222;
    border: 1px solid #333;
    color: #fff;
    padding: 10px;
    margin: 5px 0;
    transition: border-color 0.3s;
}

.modal input:focus {
    border-color: #FF1B1C;
    outline: none;
}

/* Feliratok (Label) */
.modal label {
    text-align: left;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 10px;
}

/* Elfelejtett jelszó link */
.elfelejtett-jelszo {
    text-align: right;
    margin-bottom: 15px;
}

.elfelejtett-jelszo a {
    color: #ccc;
    font-size: 12px;
    text-decoration: none;
}

.elfelejtett-jelszo a:hover {
    color: #FF1B1C;
}

/* Gombok egységesítése a Hero gombokkal */
.bejelentkezes-gomb,
.regisztracio-gomb,
.emailkuldes-gomb {
    background-color: #FF1B1C !important;
    color: #fff;
    border-radius: 50px !important;
    padding: 12px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Az X gomb pozícionálása */
.close {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 28px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    z-index: 10001;
}

.close:hover {
    color: #FF1B1C;
    /* FitDream pirosra vált hovernél */
}

/* 2. Section 1 (Hero kép és szöveg) */
@media (max-width: 768px) {
    .section1-szoveg {
        top: 5%;
        /* Feljebb toljuk, hogy elférjen */
        width: 90%;
    }

    .section1-szoveg h2 {
        font-size: 24px;
        /* Kisebb betű mobilon */
    }

    .section1-szoveg p {
        font-size: 18px;
    }

}

@media (max-width: 480px) {
    .cta-container {
        flex-direction: column;
        align-items: center;
    }
}

/* =========================================
   BEJELENTKEZETT ÁLLAPOT (DINAMIKUS)
   ========================================= */

/* 1. Üdvözlő szöveg stílusa (amit majd JS-sel szúrunk be) */
.user-welcome-text {
    color: #fff;
    font-weight: 300;
    margin-bottom: 20px;
    text-align: center;
    width: 100%;
    font-size: 1.2rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* 2. Gombok stílusának módosítása, ha be van lépve */
/* A Regisztráció gombból "Foglalásaim" lesz -> maradjon piros */
body.logged-in .btn-reg {
    background-color: #FF1B1C;
    border-color: #FF1B1C;
}

/* A Belépés gombból "Kijelentkezés" lesz -> legyen sötétebb/szürkébb */
body.logged-in .btn-login {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #555;
    color: #ccc;
}

body.logged-in .btn-login:hover {
    background-color: #FF1B1C;
    border-color: #FF1B1C;
    color: #fff;
}

/* Mobilon a vertikális elrendezésnél is jól nézzen ki */
@media (max-width: 480px) {
    body.logged-in .cta-container {
        gap: 10px;
    }
}

/* =========================================
   Óratípusok-section
========================================= */

#oratipusok {
    text-align: center;
    color: #fff;
}

.section-cim {
    margin: 50px 30px;
}

.section-cim h2 {
    font-size: 35px;
    font-weight: 700;
}

.section-cim h3 {
    text-align: center;
    margin: 0 auto;
    font-size: 20px;
    font-style: italic;
    font-weight: 200;

}

#card-section {
    display: flex;
    justify-content: center;
    gap: 50px;
}

.ora-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    padding-bottom: 30px;
    max-width: 350px;
    max-height: 400px;
    border-radius: 50px;
    border: 2px solid #FF1B1C;
    box-shadow: 5px 5px 10px #FF1B1C;
    background-color: #fff;
    transform: scale(1);
    transition: transform 0.5s ease-in-out;

}

.ora-card:hover {
    transform: scale(1.1);
}

.ora-card img {
    border-radius: 50px 50px 0 0;

}

.ora-card h3,
.ora-card p {
    background: none;
    color: #141313;
    padding: 5px;
}

.ora-card h3 {
    font-size: 30px;
    font-weight: 700;
    color: #141313;
    text-align: center;
}

.ora-card p {
    font-size: 20px;
    font-weight: 500;
    color: #141313;
    text-align: center;
}


.orarend-btn a {
    display: inline-block;
    margin: 50px 0;
    background-color: #FF1B1C;
    padding: 10px 12px;
    border-radius: 50px;
    text-decoration: none;
    color: #fff;
    font-size: 20px;
}

/* 3. Óratípusok (Kártyák egymás alá) */
@media (max-width: 768px) {
    #card-section {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .ora-card {
        max-width: 90%;
    }
}

/* =========================================
   Közösségi-section
========================================= */
#kozossegi-section {
    height: 400px;
    position: relative;
}

#kozossegi-section img {
    width: 100%;
}

.reklam-box {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    gap: 30px;
    background: none;
    width: 100%;
    position: absolute;
    top: 35%;
    left: 0;
    transform: translateY(70%);
}

.box {
    background-color: #FF1B1C;
    width: 350px;
    height: 150px;
    border-radius: 50px;
    text-align: center;
}

.box h2 {
    font-size: 25px;
    margin-top: 60px;
    background-color: #FF1B1C;
    color: #fff;
    font-weight: 300;
}

/* --- MOBIL NÉZET (768px alatt) --- */
@media (max-width: 768px) {

    /* Fő konténer: engedjük, hogy a magassága nőjön a dobozokkal */
    #kozossegi-section {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #kozossegi-section img {
        width: 100%;
        height: auto;
    }

    .reklam-box {
        position: static;
        /* Megszüntetjük a lebegést */
        transform: none;
        /* Kikapcsoljuk az eltolást */
        flex-direction: column;
        align-items: center;
        margin-top: -50px;
        /* Kicsit rátoljuk a képre, ha jól mutat */
    }

    .box {
        width: 90%;
        height: auto;
        padding: 20px;
    }

    .box h2 {
        margin-top: 0;
        font-size: 20px;
    }


    /* A dobozok tárolója: levesszük az abszolút pozíciót */
    .reklam-box {
        position: relative;
        /* Így már nem lebeg, hanem követi az imázst */
        top: 0;
        transform: translateY(-30px);
        /* Csak egy pici átfedés marad a képpel */
        flex-direction: column;
        /* Egymás alá kerülnek */
        gap: 15px;
        width: 100%;
        align-items: center;
    }

    /* Egyedi dobozok: fix szélesség helyett rugalmas méret */
    .box {
        width: 85%;
        /* A képernyő 85%-át tölti ki */
        max-width: 350px;
        /* De ne legyen nagyobb az eredetinél */
        height: 100px;
        /* Mobilon alacsonyabb is elég */
        border-radius: 30px;
        /* Kicsit finomabb kerekítés */
    }

    .box h2 {
        margin-top: 35px;
        /* Középre igazítás a kisebb magassághoz */
        font-size: 18px;
    }
}

/* =========================================
   Esti órarend-section
========================================= */
.orarend-section {
    color: #fff;
    text-align: center;
    margin-top: 50px;
    padding: 60px 20px;
    font-family: sans-serif;
}

.orarend-section h2 {
    font-size: 28px;
    margin-bottom: 40px;
    letter-spacing: 1px;
}

.napok-grid {
    display: flex;
    justify-content: center;
    gap: 10px;
    /* Távolság az oszlopok között */
    flex-wrap: wrap;
    /* Mobilbarát: ha nem fér el, törik */
    margin-bottom: 40px;
}

.nap-oszlop {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 120px;
}

.nap-oszlop h3 {
    font-size: 14px;
    margin-bottom: 10px;
    font-weight: bold;
}

.ora-doboz {
    border: 1px solid #FF1B1C;
    /* A képen látható piros keret */
    padding: 15px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 80px;
    /* Egységes magasság */
}

.idopont {
    font-size: 14px;
    margin-bottom: 5px;
}

.ora-nev {
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
}

/* A piros gomb stílusa */
.btn-piros {
    display: inline-block;
    background-color: #FF1B1C;
    color: white;
    padding: 12px 30px;
    text-decoration: none;
    font-size: 20px;
    border-radius: 50px;
}


/* --- MOBIL ÉS TABLET NÉZET --- */

/* TABLET: 768px szélesség alatt (pl. iPad) */
@media (max-width: 992px) {
    .nap-oszlop {
        flex: 0 0 30%;
        /* 3 oszlop egymás mellett */
        max-width: none;
    }
}

/* MOBIL: 600px szélesség alatt (Telefonok) */
@media (max-width: 600px) {
    .napok-grid {
        gap: 20px;
        /* Több hely a napok között függőlegesen */
    }

    .nap-oszlop {
        flex: 0 0 100%;
        /* Egy nap kitölti a teljes szélességet */
        max-width: 280px;
        /* De ne legyen batár nagy, maradjon esztétikus */
    }

    .ora-doboz {
        height: 70px;
        /* Mobilon lehet kicsit alacsonyabb */
    }

    .orarend-section h2 {
        font-size: 20px;
        /* Kisebb cím mobilon */
    }
}

/* =========================================
   Hírlevél section
========================================= */


#hirlevel {
    margin-top: 50px;
    padding-top: 50px;
    padding-bottom: 50px;
}

.hirlevel-tartalom {
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

#hirlevel img {
    width: 100%;
    height: auto;
    display: block;
}


.hirlevel-szoveg h2,
.hirlevel-szoveg h3 {
    color: #fff;
    max-width: 650px;
    text-align: left;
}

.hirlevel-szoveg h2 {
    margin-bottom: 20px;
    font-size: 35px;
}

.hirlevel-szoveg h3 {
    margin-bottom: 20px;
    font-size: 30px;
}

.hirlevel-input-kontener {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.hirlevel-input {
    color: #fff;
    font-size: 20px;
    display: inline-block;
}

.hirlevel-input input {
    background: none;
    border: none;
    color: #fff;
    padding: 5px;
    font-size: 16px;
}

.hirlevel-btn {
    background-color: #FF1B1C;
    padding: 10px 12px;
    border: none;
    border-radius: 50px;
    text-decoration: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

.hr-line-hirlevel {
    width: 250px;
    height: 1px;
    background-color: #fff;
    border: none;
}

/* 5. Hírlevél */
@media (max-width: 768px) {
    .hirlevel-tartalom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 30px;
    }

    .hirlevel-szoveg h2,
    .hirlevel-szoveg h3 {
        text-align: center;
        font-size: 22px;
    }
}

/* =========================================
   ÚJ, MODERNIZÁLT ÓRAREND (GRID)
========================================= */
.kovetkezo-heti-orarend {
    text-align: right;
    margin-bottom: 20px;
}

.vissza-heti-orarend {
    text-align: left;
    margin-bottom: 20px;
}

.kovetkezo-heti-orarend a, .vissza-heti-orarend a {
    background-color: #FF1B1C; /* A FitDream pirosas-narancsa */
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background 0.3s;
}


.kovetkezo-heti-orarend a:hover, .vissza-heti-orarend a:hover {
    background-color: #000;
    color: #fff;
}
#modern-orarend {
    background-color: #333;
    padding: 50px 20px;
    border-radius: 8px;
    color: #fff;
}

#modern-orarend h2 {
    text-align: center;
    margin-bottom: 20px;
}

.orarend-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* Csak 3 sorunk van: Fejléc, Délelőtt, Vonal, Délután */
    grid-template-rows: auto auto auto auto;
    gap: 15px;
    align-items: start;
    /* Ez fontos: az órák felülre tapadnak, nincs lyuk! */
}

.nap-1 {
    grid-column: 1;
}

.nap-2 {
    grid-column: 2;
}

.nap-3 {
    grid-column: 3;
}

.nap-4 {
    grid-column: 4;
}

.nap-5 {
    grid-column: 5;
}

.nap-6 {
    grid-column: 6;
}

.nap-7 {
    grid-column: 7;
}

.grid-header {
    background-color: #FF1B1C;
    color: white;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    border-radius: 5px;
    text-transform: uppercase;
    font-size: 14px;
    grid-row: 1;

}

.napi-blokk {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.zona-0630{
    grid-row:2;
}
.zona-delelott {
    grid-row: 3;
}
.zona-separator {
    grid-row: 4;
    grid-column: 1 / span 7;
    margin: 20px 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #FF1B1C, transparent);
    align-self: center;
    box-shadow: 0 0 10px rgba(255, 27, 28, 0.4);

}
.zona-delutan {
    grid-row: 5;
}
.zona-1915{
    grid-row:6;
}
.ora-elem {
    position: relative;
    overflow: hidden;
    background-color: #222;
    padding: 15px 10px 30px 10px;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
    position: relative;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-left: 3px solid #444;
}
.elmarad-szalag {
    display: none; /* Alapból rejtve van */
    position: absolute;
    top: 23px;
    left: -30px;
    width: 150px;
    background-color: #FF1B1C; /* Sárga */
    color: #fff;              /* Fekete szöveg */
    font-weight: bold;
    text-align: center;
    padding: 5px 0;
    
    /* EZ FORGATJA EL: */
    transform: rotate(-30deg);
    
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    z-index: 10;
}
/* Ha az óra-elem megkapja az 'elmarad' osztályt, mutassuk a szalagot */
.ora-elem.elmarad .elmarad-szalag {
	display: block;
}

.ora-elem.elmarad {
    overflow: visible;
}

/*Ha elmarad, az óra többi része legyen kicsit szürkébb */
.ora-elem.elmarad {
    opacity: 0.7;
    pointer-events: none; /* Ne lehessen rákattintani a foglaláshoz */
}

.ora-elem-ures {
    width:150px;
    height: 108px;
    background-color: #333;
    padding: 15px 10px 30px 10px;
    transition: transform 0.2s, background-color 0.2s;
    position: relative;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ora-elem:hover {
    transform: scale(1.03);
    background-color: rgba(255, 27, 28, 0.1);
    border-color: #FF1B1C;
}

.ora-elem.kiemelt {
    border-left: 3px solid #FF1B1C;
    background-color: #2a2a2a;
}

.idopont {
    font-size: 12px;
    color: #FF1B1C;
    font-weight: bold;
}

.ora-nev {
    font-size: 15px;
    font-weight: bold;
    margin: 5px 0;
    text-align: center;
}

.edzo {
    font-size: 12px;
    opacity: 0.7;
}

.helyek {
    display: none;
    font-size: 11px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
    color: #aaa;
}

.bejelentkezes-info {
    max-width: 900px;
    margin: 40px auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 20px;
}

.info-block {
    background: #2a2a2a;
    border: 1px solid #444;
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    transition: border-color 0.3s ease;
}

.info-block:hover {
    border-color: #FF1B1C;
}

.info-block h3 {
    color: #FF1B1C;
    margin-bottom: 15px;
    font-size: 20px;
}

.tel-link {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2em;
    display: inline-block;
    margin-top: 5px;
}

.info-zaro {
    grid-column: span 2;
    /* Átéri mindkét oszlopot */
    text-align: center;
    font-style: italic;
    font-size: 20px;
    margin-top: 20px;
    padding-bottom: 20px;
    color: #ccc;
}

/* --- MOBIL NÉZET OPTIMALIZÁLÁS --- */
@media (max-width: 1000px) {
    .orarend-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    
    /* Hétfő (1-es csoport) */
    .nap-1 {
        order: 10;
    }

    /* Kedd (2-es csoport) */
    .nap-2 {
        order: 20;
    }

    /* Szerda (3-as csoport) */
    .nap-3 {
        order: 30;
    }

    /* Csütörtök (4-es csoport) */
    .nap-4 {
        order: 40;
    }

    /* Péntek (5-es csoport) */
    .nap-5 {
        order: 50;
    }

    /* Szombat (6-es csoport) */
    .nap-6 {
        order: 60;
    }

    /* Vasárnap (7-es csoport) */
    .nap-7 {
        order: 70;
    }


    .grid-header {
        grid-column: 1 !important;
        grid-row: auto !important;
        margin-top: 25px;
        width: 100%;
        box-sizing: border-box;
        border-radius: 5px;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .grid-header.nap-1 {
        margin-top: 0;
    }

    .napi-blokk {
        grid-column: 1 !important;
        grid-row: auto !important;
        padding: 5px 0;
        width: 100%;
    }

    .zona-separator {
        display: none;
    }

    .ora-elem {
        margin-bottom: 10px;
        padding: 20px 15px 35px 15px;
        
    }
    .ora-elem-ures {
        display:none;
        margin-bottom: 10px;
        padding: 20px 15px 35px 15px;
        
    }

    .grid-header.nap-1 {
        margin-top: 10px;
    }
}

/* =========================================
   Edzőink-Oldal 
========================================= */

#edzoink-hero {
    text-align: center;
    margin: 40px 0;
    padding: 0 20px;
}

#edzoink-lista {
    max-width: 1200px;
    width: 95%;
    margin: 0 auto 60px auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* --- BRAUN RÓBERT (KIEMELT KÁRTYA) --- */
.kiemelt-edzo {
    display: flex;
    flex-direction: row;
    background-color: #333;
    padding: 40px;
    border-radius: 20px;
    gap: 40px;
    align-items: flex-start;
    color: #fff;
}

.edzo-kep-kontener {
    flex: 0 0 350px;
}

.edzo-kep-kontener img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    object-fit: cover;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.edzo-szoveg-kontener {
    flex: 1;
    text-align: left;
}

.edzo-szoveg-kontener p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 15px;
    opacity: 0.95;
}

.edzo-nev {
    font-size: 32px;
    color: #fff;
    font-style: italic;
    margin-bottom: 20px;
    border-bottom: 2px solid #FF1B1C;
    display: inline-block;
}

.vonal-elvalaszto {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 30px 0;
    width: 100%;
}

/* --- TÖBBI EDZŐ (RÁCS ELRENDEZÉS) --- */
.edzo-szoveg-kontener p {
    color: #fff;
}

.tobb-edzo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.tobb-edzo-grid .kis-card:last-child:nth-child(odd) {
    grid-column: span 2;
    max-width: 500px;
    margin: 0 auto;
}

.kis-card {
    background-color: #333;
    padding: 30px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.kis-card .titulus {
    color: #FF1B1C;
    font-weight: bold;
    margin-bottom: 10px;
    font-style: italic;
}

.kis-card img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 15px;
}

.kis-card h3 {
    font-size: 22px;
    margin-bottom: 5px;
    color: #FF1B1C;
}

.kis-card p {
    font-size: 15px;
    line-height: 1.5;
    text-align: justify;
}

/* --- GOMB ÉS LINKEK --- */
.sajatoldal-btn {
    margin-top: 25px;
}

.sajatoldal-btn a {
    display: inline-block;
    background-color: #FF1B1C;
    color: white;
    padding: 14px 30px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px;
}

.sajatoldal-link {
    text-decoration: none;
}

/* --- MOBILBARÁT BEÁLLÍTÁSOK (768px alatt) --- */
@media (max-width: 768px) {
    .kiemelt-edzo {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }

    .edzo-kep-kontener {
        flex: 0 0 auto;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    .edzo-szoveg-kontener {
        text-align: center;
    }

    /* MOBIL NÉZET */
    @media (max-width: 768px) {
        .tobb-edzo-grid {
            grid-template-columns: 1fr;
        }

        .tobb-edzo-grid .kis-card:last-child:nth-child(odd) {
            grid-column: span 1;
        }
    }
}

/* =========================================
   Árak-oldal
========================================= */
#arak-section {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 30px;
}

.hr-line-arak {
    margin: 20px auto;
    width: 50%;
    height: 5px;
    color: #fff;
}

/* =========================================
   Árak-táblázat
========================================= */

.arak-table {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    width: 60%;
    background-color: #333;
    padding: 20px;
    margin: 40px auto;
    border-radius: 8px;
}

.arak-table table {
    text-align: left;
    border-collapse: collapse;
    width: 100%;
    max-width: 600px;
    margin-bottom: 30px;
}

.arak-table th {
    font-size: 20px;
    color: #FF1B1C;
    font-style: italic;
    padding-bottom: 10px;
}

.arak-table th,
.arak-table td {
    padding: 12px 20px;
    border-bottom: 1px solid #555;
}

.arak-table p {
    margin-top: 10px;
    font-size: 0.9em;
    opacity: 0.8;
}

/* Mobil beállítás (768px alatt) */
@media (max-width: 768px) {
    .arak-table {
        width: 95%;
        padding: 10px;
    }

    .arak-table table {
        font-size: 14px;
    }

    .arak-table th,
    .arak-table td {
        padding: 10px 5px;
    }
}

/* =========================================
   Massage-section 
========================================= */
#massage-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 30px 10px;
}

.massage-header,
.orarend-header,
.kapcsolat-header,
.galeria-header,
.edzoink-header,
.arak-header {
    color: #fff;
    text-align: center;
}

.massage-header h2,
.orarend-header h2,
.kapcsolat-header h2,
.galeria-header h2,
.edzoink-header h2,
.arak-header h2 {
    font-size: 35px;
    margin-bottom: 0;
}

.massage-header h1,
.orarend-header h1,
.kapcsolat-header h1,
.galeria-header h1,
.edzoink-header h1,
.arak-header h1 {
    font-size: 30px;
    font-style: italic;
    font-weight: 200;
    margin-top: 10px;
    color: #fff;
}

.hr-line {
    margin: 20px auto;
    width: 50%;
    height: 1px;
    background-color: #fff;
    border: none;
}

.massage-tartalom {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    background-color: #333;
    padding: 40px 20px;
    margin: 20px auto;
    border-radius: 8px;
    max-width: 900px;
    width: 100%;
}

.tartalom-1 {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: justify;
    gap: 40px;
    max-width: 800px;
    width: 100%;
}

.tartalom-1 p {
    flex: 1;
    font-size: 16px;
    line-height: 1.6;
}

.tartalom-1 img {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    object-fit: cover;
}

.tartalom-2,
.tartalom-3,
.tartalom-4,
.tartalom-5 {
    display: flex;
    flex-direction: column;
    text-align: justify;
    width: 100%;
    max-width: 700px;
    padding-top: 20px;
    font-size: 16px;
    gap: 15px;
}

.tartalom-4 img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 10px 0;
}

.massage-lista {
    padding-left: 20px;
}

.massage-lista li {
    margin-bottom: 8px;
}

.massage-btns {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 40px 0;
}

.massage-btn-arak a,
.massage-btn-jelentkezes a {
    display: inline-block;
    background-color: #FF1B1C;
    color: white;
    padding: 14px 25px;
    text-decoration: none;
    font-size: 16px;
    border-radius: 50px;
    transition: 0.3s ease;
}

.massage-btn-arak a:hover,
.massage-btn-jelentkezes a:hover {
    background-color: #d11516;
    transform: translateY(-2px);
}

/* --- MOBIL ÉS TABLET NÉZET --- */

@media (max-width: 768px) {

    .massage-header h2 {
        font-size: 28px;
    }

    .massage-header h3 {
        font-size: 24px;
    }

    .hr-line {
        width: 80%;
    }


    .tartalom-1 {
        flex-direction: column-reverse;
        text-align: center;
        gap: 20px;
    }

    .tartalom-1 p {
        width: 100%;
    }

    .tartalom-1 img {
        width: 200px;
        height: 200px;
    }

    .massage-btns {
        flex-direction: column;
        gap: 15px;
        width: 100%;
    }

    .massage-btn-arak a,
    .massage-btn-jelentkezes a {
        width: 100%;
        text-align: center;
    }

    .tartalom-2,
    .tartalom-3,
    .tartalom-4,
    .tartalom-5 {
        text-align: left;
        padding: 10px;
    }
}


/* =========================================
   Galéria-section
========================================= */
.galeria-uzenet {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px auto;
    font-style: italic;
    color: #ccc;
    font-size: 18px;
}

.galeria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding-bottom: 50px;
}

.galeria-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    height: 250px;
    border: 1px solid #333;
}

.galeria-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.5s ease;
    filter: grayscale(40%);
    /* Kicsit komolyabb, sötétebb hatás alapból */
}

.galeria-item:hover img {
    transform: scale(1.1);
    filter: grayscale(0%);
    filter: brightness(1.1);
}

.galeria-link {
    cursor: zoom-in;
    display: block;
    height: 100%;
}

/* Biztosítjuk, hogy a galéria nagyítása minden felett legyen */
#baguetteBox-overlay {
    z-index: 99999 !important;
}

/* Kicsit növeljük a bezáró gomb láthatóságát */
#baguetteBox-overlay .full-image figcaption {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Mobilon 1 oszlop */
@media (max-width: 600px) {
    .galeria-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   Kapcsolat-oldal
========================================= */
.kapcsolat-oldal {
    padding-bottom: 60px;
}

#kapcsolat-hero {
    text-align: center;
    padding: 60px 0 40px;
}

.kapcsolat-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    /* Adatok és térkép aránya */
    gap: 40px;
    align-items: stretch;
}

.info-kartya {
    background-color: #222;
    padding: 25px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    border-left: 4px solid #FF1B1C;
    transition: transform 0.3s ease;
}

.info-kartya:hover {
    transform: translateX(10px);
}

.kartya-ikon img {
    width: 35px;
    height: 35px;
}

.kartya-szoveg h3 {
    margin: 0;
    font-size: 18px;
    color: #FF1B1C;
}

.kartya-szoveg p,
.kartya-szoveg a {
    margin: 5px 0 0;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
}

.nyitvatartas-doboz {
    background-color: #1a1a1a;
    padding: 30px;
    border-radius: 15px;
    border: 1px solid #333;
}

.nyitvatartas-doboz h3 {
    text-align: center;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.nyitva-lista {
    list-style: none;
    padding: 0;
}

.nyitva-lista li {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #333;
    color: #fff;
}

.nyitva-lista li span {
    opacity: 0.8;
}

.nyitva-lista li strong {
    color: #FF1B1C;
}

.parkolas-info {
    text-align: center;
    font-size: 14px;
    margin-top: 20px;
    color: #888;
}

.kapcsolat-terkep-kontener {
    border-radius: 20px;
    overflow: hidden;
    min-height: 450px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.kapcsolat-terkep-kontener iframe {
    filter: grayscale(1) invert(0.9) contrast(1.2);
}

/* MOBIL NÉZET */
@media (max-width: 992px) {
    .kapcsolat-grid {
        grid-template-columns: 1fr;
    }

    .kapcsolat-terkep-kontener {
        height: 350px;
    }
}

/* =========================================
   Footer-section
========================================= */

#footer {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    padding: 50px 0;
    margin-top: 50px;
}

.footer-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.contact-info a {
    text-decoration: none;
    color: #fff;
}

.contact-info a img {
    width: 30px;
    height: auto;
}

.footer-line {
    width: 2px;
    height: 200px;
    background-color: #fff;
    border: none;
}

.footer-menu {
    font-size: 20px;
}

.footer-menu ul {
    list-style: none;
    padding: 0;
}

.footer-menu li {
    margin-bottom: 5px;
}

.footer-menu li a {
    text-decoration: none;
    color: #fff;
}

.footer-menu li a:hover {
    color: #FF1B1C;
    text-decoration: none;
}

.footer-social {
    text-align: center;
    padding: 20px 0;
    color: #fff;
}

.footer-social p {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 20px;
    margin-bottom: 15px;
    opacity: 0.8;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding-top: 20px;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background-color: #333;
    color: white;
    border-radius: 50%;
    text-decoration: none;
    font-size: 20px;
    transition: all 0.3s ease;
}

.social-icons img {
    width: 45px;
    height: 45px;
}

.social-icons a:hover {
    background-color: #FF1B1C;
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(255, 27, 28, 0.4);
}

@media (max-width: 768px) {

    #footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 40px;
    }

    .footer-line {
        width: 80%;
        height: 1px;
    }
}
.orarend-naptar-kozep {
    max-width: 800px;
    margin: 0 auto;
    display: block;
    text-align: center;
}

.orarend-naptar-kozep iframe {
    display: block;
    margin: 0 auto;
}