/* BETŰTÍPUSOK BEHÚZÁSA (Google Fonts). Ezt a sort kötelező a fájl legtetején tartani! */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&family=Roboto:wght@400;500;700&display=swap');

/* GLOBÁLIS ARCULATI VÁLTOZÓK (Fontok és Színek) */
:root {
    /* Szöveges betűtípus */
    --cassiopeia-font-family-body: 'Roboto', sans-serif !important;

    /* Címsorok betűtípusa */
    --cassiopeia-font-family-headings: 'Montserrat', sans-serif !important;
    
    /* A fő arculati színek */
    --body-color: #334155 !important; 
    --color-primary: #8dc73f;
    --text-color-primary: #40463b;
    --text-color-link-mainmenu-active: #8dc73f; 
    --text-color-link-mainmenu-primary: #777777;
    --text-color-link-mainmenu-hover: #8dc73f; 
    --text-color-bottom: #ffffff; 
    --cassiopeia-color-link: #939598; 
    --bg-color-bottom: #373737;
    --bg-color-button: transparent;
}

/* =========================================================
   GLOBÁLIS OLDALSZÉLESSÉG KORLÁTOZÁSA (Cassiopeia felülírás)
   ========================================================= */

/* 1. A megtalált Cassiopeia Grid szabály felülírása */
/*@supports (display: grid) {
    .site-grid > [class^="container-"], 
    .site-grid > [class*=" container-"] {
        max-width: 1140px !important; /* Ide írd be a kívánt szélességet (pl. 1140px vagy 1200px) */ /*
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* 2. A fejléc (header), a lábléc (footer) és a fő rács (site-grid) egységesítése */ /*
header.header,
footer.footer,
.site-grid {
    max-width: 1140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
} */

body {
    /* 2. Biztonsági háló a normál szövegeknek (bekezdések, listák) */
    color: #40463b !important; 
    background-color: #ffffff !important;
}

/* 3. A CÍMSOROK (Főcímek, alcímek) FORMÁZÁSA
      A címek egy tónussal sötétebbek színűek. */
h1, h2, h3, h4, h5, h6 {
    /* color: #40463b !important; /* Mély, határozott sötétkék-szürke */
    font-weight: 700 !important;
}

/* 4. A cikkeken belüli normál bekezdések finomhangolása */
p {
    line-height: 1.6 !important; /* Kicsit szellősebb sorköz a jobb olvashatóságért */
    margin-bottom: 0.25rem !important;
}

/* LOGÓ MÉRETEZÉSE (Asztali PC, Laptop, Tablet nézet) */
header.header .brand-logo img {
    height: 70px !important; /* Itt tudod megadni a kívánt magasságot */
    width: auto !important;  /* Ez a varázsszó garantálja, hogy a kép ne nyúljon meg, megtartsa az eredeti arányait */
    max-width: 100% !important; /* Biztonsági korlát */
    transition: height 0.3s ease; /* Finom animáció, ha átméretezi magát a böngésző */
}
/* LOGÓ MÉRETEZÉSE (Mobil nézet: 768 pixeles képernyőszélesség alatt) */
@media (max-width: 768px) {
    header.header .brand-logo img {
        height: 45px !important; /* Mobilon kisebb magasság, hogy maradjon hely a menü gombnak */
    }
}

/* Főmenü linkjeinek alapállapota */
header.header .container-nav a,
header.header .container-nav .nav-link {
    color: var(--text-color-link-mainmenu-primary) !important;
    font-weight: 300 !important;
    font-size: 1.1rem !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
}
/* Főmenü linkjei egérráhúzáskor */
header.header .container-nav a:hover,
header.header .container-nav .nav-link:hover {
    color: var(--text-color-link-mainmenu-hover) !important;
}
/* Az aktív (éppen nyitva lévő) oldal menüpontjának kiemelése */
header.header .container-nav li.active > a,
header.header .container-nav .nav-link.active {
    color: var(--text-color-link-mainmenu-active) !important;
}


/* LOGIN IKON FORMÁZÁSA */
/* Alapállapot (Átlátszó háttér, vékony keret, sötét ikon) */
.login-icon-btn {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    background-color: transparent !important; /* Teljesen átlátszó háttér */
    /* border: 1px solid #777777;  /* Vékony, diszkrét szürke keret */
    color: var(--text-color-link-mainmenu-primary); /* A menüvel harmonizáló ikon szín */
    text-decoration: none !important;
    transition: all 0.3s ease; /* Finom, animált átmenet */
}
/* Egérráhúzáskor (Hover állapot) */
.login-icon-btn:hover {
    background-color: transparent !important; /* A háttér átlátszó marad! */
    border-color: var(--text-color-link-mainmenu-active); /* A keret felveszi az arculati zöld színt */
    color: var(--text-color-link-mainmenu-active); /* Az ikon is átvált az arculati zöld színre */
}

/* ============================================================================================================================
   VÉGLEGES FEJLÉC: Logó, Menü, Kereső, Gomb egy sorban
   ============================================================================================================================ */

/* 1. Fő konténer (A logó és a jobb oldali blokk egymás mellé tétele) */
header.header {
    position: sticky !important;
    top: 0 !important; /* A képernyő legtetejéhez ragasztja */
    z-index: 9999 !important; /* Biztosítja, hogy minden (bannerek, térkép, videó) felett maradjon */
    background-color: #ffffff !important; /* Fehér háttér, hogy görgetéskor ne látszódjon át alatta a tartalom */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important; /* Adunk neki egy finom, elegáns árnyékot, ami kiemeli a térből */

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: max(20px, calc((100% - 1320px) / 2)) !important;
    padding-right: max(20px, calc((100% - 1320px) / 2)) !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    border-bottom: 3px solid #8dc73f !important;
    background-image: none !important;
}

/* 2. Logó doboza */
header.header .navbar-brand,
header.header .container-header {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. A Menü és a Kereső KÖZÖS konténerének sortörés-tiltása */
header.header .container-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* EZ A KULCS: Szigorúan tiltjuk a sortörést */
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 4. A Bootstrap navbar (menü) szélességének letiltása */
header.header .container-nav .navbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: auto !important; /* Elvesszük a 100%-os szélességet */
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* A menüpontokat tartalmazó belső lista igazítása */
header.header .container-nav .navbar-collapse {
    flex-basis: auto !important;
    flex-grow: 0 !important;
}

/* 5. A Kereső és Login gomb tartója */
header.header .container-nav .container-search {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 5px !important; /* Távolság a keresőmező és a belépés gomb között */
    margin: 0 0 0 5px !important;
    padding: 0 !important;
}

/* LOGIN IKON: Szövegszerkesztő által betett <p> tag javítása */
header.header .container-search .mod-custom p {
    margin-bottom: 0 !important; /* Eltünteti a zavaró 1rem alsó margót */
    margin-top: 0 !important;    /* Biztonság kedvéért a felsőt is nullázzuk */
    display: flex !important;    /* Ez biztosítja, hogy a <p> ne tegye tönkre a Flexbox elrendezést */
    align-items: center !important;
}

/* A modulok finomhangolása a kereső dobozban */
header.header .container-nav .container-search > div {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

/* Keresőmező vizuális formázása */
header.header .container-nav .container-search input {
    border-radius: 12px !important; /* Itt tudod állítani a kerekítést */
    border: 1px solid #ced4da !important; /* Itt pedig a színt és a vastagságot */
    padding: 6px 15px !important;
    margin: 0 !important;
    outline: none !important; /* Eltünteti a kék keretet, amikor belekattintasz */
}

/* Fókusz állapot: amikor a felhasználó belekattint a keresőbe, hogy gépeljen */
header.header .container-nav .container-search input:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 5px rgba(0, 80, 136, 0.3) !important; /* Egy finom kék ragyogás */
}



/* =========================================================
   ASZTALI NÉZET: Főmenü, almenü 
   ========================================================= */

@media (min-width: 992px) {
    
    /* "Megöljük" az összes belső Bootstrap doboz gyári keretezését */
    header.header .container-nav,
    header.header .navbar,
    header.header .navbar-collapse {
        position: static !important; /* Ez a kulcs! Így a menü nem ragad be a jobb térfélre. */
    }

    /* A menülista (ul) kifeszítése a fejléc legtetejétől a legaljáig */
    header.header ul.metismenu {
        position: absolute !important;
        left: 50% !important;
        
        /* A VARÁZSLAT ITT TÖRTÉNIK: Tetejétől az aljáig feszítjük! */
        top: 0 !important;             
        bottom: 0 !important;          
        height: 100% !important;
        
        transform: translateX(-50%) !important; /* Csak vízszintesen húzzuk középre */
        margin: 0 !important;
        padding: 0 !important;
        
        display: flex !important;
        align-items: stretch !important; /* Kényszerítjük a belső dobozokat, hogy nyúljanak le */
    }

    /* A menüpontok (li) magasságának átvétele */
    header.header ul.metismenu > li {
        height: 100% !important;
        display: flex !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* A gombok (a, button) kifeszítése ÉS a szöveg függőleges középre zárása */
    header.header ul.metismenu > li > button,
    header.header ul.metismenu > li > a,
    header.header ul.metismenu > li > span {
        height: 100% !important;
        display: flex !important;
        align-items: center !important; /* Ez tartja meg a szöveget esztétikusan a fejléc közepén! */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }


      /* FŐMENÜ ÉS ALMENÜ: A NYÍL JAVÍTÁSA */
    /* 1. Teljesen lenullázzuk a gyári rajzokat (before és after) */
    header.header .metismenu-item .mm-toggler::before,
    header.header .metismenu-item .mm-toggler::after {
        content: none !important; 
        border: none !important;
        background: none !important;
        width: auto !important;
        height: auto !important;
        transform: none !important; 
    }
    /* FŐMENÜ ÉS ALMENÜ: A NYÍL JAVÍTÁSA */
    /* 2. Újraépítjük a Font Awesome ikont, KIKÉNYSZERÍTETT SZÍNNEL! */
    header.header .metismenu-item .mm-toggler::after {
        content: "\f107" !important; /* Vékony lefelé nyíl */
        font-family: "Font Awesome 6 Free" !important;
        font-weight: 700 !important;
        
        display: inline-block !important;
        margin-left: 6px !important;
        font-size: 0.9rem !important; 
        
        /* A VARÁZSLAT: Fix szín, ami felülírja az átlátszó gombot! */
        color: #1e293b !important; /* Elegáns sötétszürke/kék */
        opacity: 1 !important; 
        visibility: visible !important;
        
        vertical-align: middle !important;
        transition: transform 0.3s ease !important;
    }

    /* =========================================================
       MEGA MENÜ (MINDEN EGYBEN - 3 OSZLOPOS RÁCS)
       ========================================================= */

    /* 1. FŐ TARTÓELEM: Visszaadjuk a pozicionálási "horgonyt" a gombnak */
    header.header .container-nav ul.metismenu > li.parent:has(button[aria-label="Termékek"], button[aria-label="Szakterületeink"]) {
        position: relative !important; /* STATIC HELYETT RELATIVE LETT! */
    }

    /* 2. A NAGY FEHÉR DOBOZ (CSS Grid alkalmazása) */
    header.header .container-nav ul.metismenu > li.parent:has(button[aria-label="Termékek"], button[aria-label="Szakterületeink"]) > ul {
        position: absolute !important;
        left: 50% !important; 
        transform: translateX(-50%) !important; /* Eltoljuk középre */
        
        /* Fix 1100px helyett pontosan a szövegekhez igazítja a doboz teljes szélességét */
        width: max-content !important; 
        max-width: 95vw !important; /* Biztonsági korlát */
        top: 100% !important; /* Közvetlenül a gomb alatt nyílik meg */
        
        background: #ededed !important;
        border: none !important;
        border-radius: 12px !important;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.20) !important;
        
        padding: 20px 20px !important; 
        margin: 0 !important;
        
        display: none !important; 
        
        /* 3 oszlopos rács */
        grid-template-columns: max-content max-content max-content !important;
        gap: 50px !important; 
    }

    /* A nagy doboz megjelenítése egérráhúzáskor (block helyett rácsként nyílik meg!) */
    header.header .container-nav ul.metismenu > li.parent:has(button[aria-label="Termékek"], button[aria-label="Szakterületeink"]):hover > ul {
        display: grid !important; 
    }

    /* =========================================================
       OSZLOPOK ÉS FEJLÉCEK (LEVEL 2)
       ========================================================= */

    /* Az oszlopok maguk (Rackszekrények, Optika, Réz) */
    header.header .container-nav ul.metismenu li:has(button[aria-label="Termékek"], button[aria-label="Szakterületeink"]) li.level-2 {
        display: block !important; /* <--- KULCS: Szigorú blokk elrendezés (egymás alá) */
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Az oszlopok CÍMSORAI (Vastagon kiemelve) */
    header.header .container-nav ul.metismenu li:has(button[aria-label="Termékek"], button[aria-label="Szakterületeink"]) li.level-2 > a {
        display: block !important; /* <--- EZ HIÁNYZOTT! Garantálja, hogy a lista alátörjön */
        width: 100% !important;
        font-size: 1.00rem !important;
        font-weight: 500 !important;
        color: #1e293b !important; 
        /* border-bottom: 2px solid #e2e8f0 !important; */
        padding: 0 0 2px 0 !important;
        margin-bottom: 5px !important;
        text-transform: uppercase !important; 
        /* letter-spacing: 0.5px !important; */
        background: transparent !important;
    }
    
    /* Fejléc hover (rámutatás) - picit kizöldül */
    header.header .container-nav ul.metismenu li:has(button[aria-label="Termékek"], button[aria-label="Szakterületeink"]) li.level-2 > a:hover {
        color: var(--color-primary) !important;
    }

    /* =========================================================
       BELSŐ LISTÁK ÉS KATTINTHATÓ PONTOK (LEVEL 3)
       ========================================================= */

    /* Kiszabadítjuk a belső listákat a rejtett fogságukból! */
    header.header .container-nav ul.metismenu li:has(button[aria-label="Termékek"], button[aria-label="Szakterületeink"]) li.level-2 > ul {
        position: static !important;
        display: block !important; /* <--- Ez garantálja, hogy a Level 2 címsor alatt indul! */
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* A termék linkek tartódoboza */
    header.header .container-nav ul.metismenu li:has(button[aria-label="Termékek"], button[aria-label="Szakterületeink"]) li.level-3 {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Maguk a kattintható termék linkek (pl. Állószekrények, Patch kábelek) */
    header.header .container-nav ul.metismenu li:has(button[aria-label="Termékek"], button[aria-label="Szakterületeink"]) li.level-3 > a {
        display: block !important;
        width: 100% !important;
        padding: 2px 5px !important;
        font-size: 0.90rem !important;
        font-weight: 300 !important;
        color: #475569 !important;
        background: transparent !important;
        border-radius: 2px !important;
        transition: all 0.2s ease !important;
        text-decoration: none !important;
    }

    /* Hover: Ha ráhúzod az egeret egy konkrét termékcsoportra */
    header.header .container-nav ul.metismenu li:has(button[aria-label="Termékek"], button[aria-label="Szakterületeink"]) li.level-3 > a:hover {
        color: var(--color-primary) !important;
        /* background-color: #f8fafc !important; */ 
        padding-left: 10px !important; 
        padding-right: 0px !important; 
    }


    /* =========================================================
       FELESLEGES NYILAK (TOGGLEREK) ELTÜNTETÉSE CSAK BELÜL
       ========================================================= */
       
    /* Mivel minden látszik, asztali nézetben az almenükben semmi szükség a kis lenyitó nyilakra.
       A "> ul" biztosítja, hogy a főmenü (Termékek) nyila érintetlen maradjon! */
    header.header .container-nav ul.metismenu li:has(button[aria-label="Termékek"], button[aria-label="Szakterületeink"]) > ul .mm-toggler,
    header.header .container-nav ul.metismenu li:has(button[aria-label="Termékek"], button[aria-label="Szakterületeink"]) > ul li.parent > a::after {
        display: none !important;
    }


    /* =========================================================
       E. NORMÁL (NEM MEGA) ALMENÜK ASZTALI NÉZETE (Hover effektus)
       ========================================================= */
       
    /* 1. A szülő elem (pl. Szakterületeink) kinevezése horgonypontnak */
    /* A :not trükkel kizárjuk a Termékek menüt, hogy annak a dizájnja ne sérüljön! */
    header.header .container-nav ul.metismenu > li.parent:not(:has(button[aria-label="Termékek"], button[aria-label="Szakterületeink"])) {
        position: relative !important;
    }

    /* 2. A legördülő kis doboz alapformázása és elrejtése */
    header.header .container-nav ul.metismenu > li.parent:not(:has(button[aria-label="Termékek"], button[aria-label="Szakterületeink"])) > ul {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: max-content !important; 
        max-width: 95vw !important; /* Biztonsági korlát, hogy kisebb laptopon se lógjon ki a képernyőről */
        background-color: #ffffffe0 !important;
        border-radius: 0px !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
        padding: 0 !important;
        margin: 0 !important;
        display: none !important; /* Alapból elrejtve */
        z-index: 1000 !important;
    }

    /* 3. A VARÁZSLAT: Megjelenítés azonnal, amint ráhúzod az egeret (Hover) */
    header.header .container-nav ul.metismenu > li.parent:not(:has(button[aria-label="Termékek"], button[aria-label="Szakterületeink"])):hover > ul {
        display: block !important;
    }

    /* 4. A normál almenü belső linkjeinek esztétikája */
    header.header .container-nav ul.metismenu > li.parent:not(:has(button[aria-label="Termékek"], button[aria-label="Szakterületeink"])) > ul > li > a,
    header.header .container-nav ul.metismenu > li.parent:not(:has(button[aria-label="Termékek"], button[aria-label="Szakterületeink"])) > ul > li > span {
        display: block !important;
        margin: 0px !important;
        padding: 10px 15px !important;
        color: #334155 !important;
        font-size: 1.00rem !important;
        font-weight: 400 !important;
        text-decoration: none !important;
        background: transparent !important;
        transition: all 0.2s ease !important;
        width: 100% !important;
    }

    header.header .container-nav ul.metismenu > li.parent:not(:has(button[aria-label="Termékek"], button[aria-label="Szakterületeink"])) > ul > li {
        margin: 0px !important;
        padding: 0px !important;
    }

    /* 5. Hover effektus a lenyíló kis menü belső linkjein */
    header.header .container-nav ul.metismenu > li.parent:not(:has(button[aria-label="Termékek"], button[aria-label="Szakterületeink"])) > ul > li > a:hover {
        background-color: var(--color-primary) !important;
        color: #ffffff !important;
       /* padding-left: 25px !important; /* Nagyon finom, modern elmozdulás jobbra rámutatáskor */
    }

    /* 6. A gyári nyíl "gombját" letiltjuk, hogy ne akadályozza az egérráhúzást */
    header.header .container-nav ul.metismenu > li.parent:not(:has(button[aria-label="Termékek"], button[aria-label="Szakterületeink"])) > .mm-toggler {
        pointer-events: none !important; /* A nyíl látszik, de a kattintás átmegy rajta a linkre */
    }



} /* VÉGE A MENÜ ASZTALI NÉZET FORMÁZÁSNAK */

/* =========================================================
   D. MOBIL MENÜ OPTIMALIZÁLÁS (Kisebb mint 992px)
   ========================================================= */

@media (max-width: 991.98px) {

    /* --- 1. A FŐMENÜ KISZABADÍTÁSA A GOMB FOGSÁGÁBÓL --- */
    
    header.header {
        position: relative !important; /* Ő lesz a nagy, faltól falig érő horgony */
    }

/* --- 6. A FŐ HAMBURGER GOMB (Toggler) LÁTHATÓVÁ TÉTELE --- */
    
    header.header .navbar-toggler {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 45px !important;
        height: 45px !important;
        padding: 0 !important;
        margin-right: 0px !important; /* Távolság a mellette lévő keresőtől */
        background-color: transparent !important;
        border: none !important; /* 2px solid var(--color-primary) !important; /* Vastagabb, határozott Calexpert zöld keret 
        border-radius: 8px !important;*/
        color: var(--color-primary) !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }

    /* A gomb belsejében lévő ikon (három vonal) méretének megnövelése */
    header.header .navbar-toggler .icon-menu {
        font-size: 1.8rem !important; /* Jó nagy és határozott ikon */
        line-height: 1 !important;
    }

    /* Ha véletlenül a Bootstrap gyári SVG ikonját használja a sablonod */
    header.header .navbar-toggler .navbar-toggler-icon {
        width: 1.5em !important;
        height: 1.5em !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(141, 199, 63, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    /* Aktív (nyitott) állapot és Hover (rámutatás) effektus */
    header.header .navbar-toggler:hover,
    header.header .navbar-toggler[aria-expanded="true"] {
        background-color: var(--color-primary) !important; /* Zöldre vált a háttér */
        color: #ffffff !important; /* Fehér lesz az ikon */
    }
    
    /* A Bootstrap SVG ikon fehérre színezése aktív állapotban */
    header.header .navbar-toggler:hover .navbar-toggler-icon,
    header.header .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }



    /* A VARÁZSSZÓ: Semlegesítjük a pozíciókat, de VISSZAADJUK a Flexbox (egy soros) elrendezést a tartónak! */
    header.header .container-nav {
        position: static !important; 
        display: flex !important; /* Visszaállítjuk a Flexboxot */
        flex-direction: row !important; /* Szigorúan egymás mellé (egy sorba) */
        flex-wrap: nowrap !important; /* Tilos a sortörés */
        align-items: center !important;
    }

    header.header .navbar {
        position: static !important; 
        margin: 0 !important;
        padding: 0 !important;
    }

    /* A lenyíló tartalom kifeszítése a fejléc széleihez */
    header.header .container-nav .navbar-collapse,
    header.header .container-nav .navbar-collapse.collapsing {
        position: absolute !important;
        top: 100% !important; /* A fejléc legaljáról indul */
        
        left: 0 !important; /* Pontosan a fejléc bal szélétől indul */
        width: 100% !important; /* A fejléc teljes szélességét felveszi */
        margin: 0 !important;
        
        background-color: #ffffff !important;
        z-index: 9999 !important; 
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15) !important;
        
        max-height: calc(100vh - 75px) !important; 
        overflow-y: auto !important; 
        overflow-x: hidden !important;
        padding: 0 !important;
    }

    /* A főmenü listájának alapállapotba hozása */
    header.header .container-nav ul.metismenu {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* --- 2. ALMENÜK KISZABADÍTÁSA ÉS LETOLÁSA --- */
    
    header.header .container-nav ul.metismenu li {
        position: relative !important; 
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Az almenük normál dokumentum áramlásba helyezése, 
       hogy kinyitáskor letolják az alattuk lévőket */
    header.header .container-nav ul.metismenu ul {
        position: static !important; 
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    /* --- 3. ÁLTALÁNOS LINK (SZÖVEG) DIZÁJN --- */
    
    header.header .container-nav ul.metismenu a {
        display: block !important;
        padding: 12px 15px !important;
        border-bottom: 1px solid #e2e8f0 !important; 
        color: #1e293b !important;
        text-decoration: none !important;
        line-height: 1.4 !important;
    }

    /* --- 4. LÉPCSŐZETES HIERARCHIA (Színek és behúzások) --- */
    
    /* Level 2 */
    header.header .container-nav ul.metismenu li.level-2 > a {
        padding-left: 20px !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        background-color: #f8fafc !important; 
    }

    /* Level 3 */
    header.header .container-nav ul.metismenu li.level-3 > a {
        padding-left: 40px !important; 
        font-size: 0.95rem !important;
        font-weight: 500 !important;
        background-color: #f1f5f9 !important; 
    }

    /* Level 4 */
    header.header .container-nav ul.metismenu li.level-4 > a {
        padding-left: 60px !important; 
        font-size: 0.90rem !important;
        font-weight: 400 !important;
        color: #475569 !important;
        background-color: #e2e8f0 !important; 
    }

    /* --- 5. A LENYITÓ NYILAK (Togglerek) ÉRINTŐZÓNÁJA --- */
    
    /* Ne csússzon be a szöveg a nyíl alá */
    header.header .container-nav ul.metismenu li.parent > a {
        padding-right: 60px !important; 
    }

    /* A gomb átalakítása fix magasságú érintőzónává */
    header.header .container-nav ul.metismenu .mm-toggler {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        
        height: 48px !important; /* Fix magasság, így nem takarja ki a kinyíló almenüt! */
        width: 55px !important; 
        background: transparent !important;
        border: none !important;
        border-left: 1px solid rgba(0, 0, 0, 0.05) !important; 
        color: var(--color-primary) !important; 
        font-size: 1.1rem !important;
        cursor: pointer !important;
        z-index: 10 !important;
    }

    /* Amikor ki van nyitva egy almenü */
    header.header .container-nav ul.metismenu .mm-toggler[aria-expanded="true"] {
        background-color: var(--color-primary) !important;
        color: #ffffff !important; 
    }

} /* VÉGE A MENÜ MOBIL NÉZET FORMÁZÁSNAK */

/* ============================================================================================================================
    MENÜ VÉGE
   ============================================================================================================================ */



/* ============================================================================================================================
   KEZDŐLAP: FOLYAMATÁBRA (Ökoszisztéma Infografika)
   ============================================================================================================================ */

/* A befogadó doboz (Flexbox) */
.workflow-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
}

/* Egyetlen lépés (Kártya) */
.workflow-step {
    flex: 1 !important;
    position: relative !important;
}

/* Maga a kártya stílusa */
.workflow-card {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 35px 25px 25px 25px !important; /* Felül nagyobb hely a sorszámnak */
    text-align: center !important;
    border: 1px solid #e2e8f0 !important;
    border-top: 4px solid var(--color-primary) !important; /* Zöld hangsúly a tetején */
    transition: all 0.3s ease !important;
    position: relative !important;
}

.workflow-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 30px rgba(0,0,0,0.08) !important;
}

/* A lebegő sorszám (1, 2, 3) */
.step-badge {
    position: absolute !important;
    top: -15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 30px !important;
    height: 30px !important;
    background: var(--color-primary) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
}

/* Az ikon stílusa */
.workflow-icon {
    font-size: 2.2rem !important;
    color: #1e293b !important;
    margin-bottom: 15px !important;
}

/* A szövegek formázása */
.workflow-card h4 {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 10px !important;
}

.workflow-card p {
    font-size: 0.9rem !important;
    color: #64748b !important;
    line-height: 1.5 !important;
    margin-bottom: 15px !important;
}

/* Kártya alján lévő link */
.workflow-link {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: var(--color-primary) !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: color 0.2s ease !important;
}

.workflow-link i {
    margin-left: 5px !important;
    font-size: 0.8rem !important;
}

.workflow-link:hover {
    color: #1e293b !important;
    text-decoration: none !important;
}

/* NYILAK formázása */
.workflow-arrow {
    padding: 0 20px !important;
    font-size: 1.8rem !important;
    color: #cbd5e1 !important; /* Finom halványszürke */
}

/* Alapértelmezetten a lefelé mutató nyíl rejtett */
.mobile-arrow {
    display: none !important;
}

/* MOBILOS NÉZET (992px alatt egymás alá ugranak a kártyák és a nyilak) */
@media (max-width: 992px) {
    .workflow-container {
        flex-direction: column !important;
    }
    
    .workflow-step {
        width: 100% !important;
        max-width: 400px !important;
    }
    
    .workflow-arrow {
        padding: 20px 0 !important;
    }
    
    /* Nyilak cseréje mobilon */
    .desktop-arrow {
        display: none !important;
    }
    .mobile-arrow {
        display: block !important;
    }
}

/* ============================================================================================================================
   KEZDŐLAP: FOLYAMATÁBRA (Ökoszisztéma Infografika) VÉGE
   ============================================================================================================================ */



/* ============================================================================================================================
    KATEGÓRIA OLDALAK (Termékek / Szakterületek 3 hasábos rács)
   ============================================================================================================================ */

/* Minimalista bevezető (Banner helyett) */
.minimal-page-intro {
    max-width: 800px !important;
    margin: 5px auto 70px auto !important;
    padding: 0 20px !important;
}

.minimal-page-intro .page-title {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
    margin-bottom: 32px !important;
}

.minimal-page-intro .lead-text {
    font-size: 1.15rem !important;
    color: #64748b !important;
    line-height: 1.7 !important;
}

/* A 3 hasábos Grid rács */
.category-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 45px !important;
    margin-bottom: 100px !important;
}

/* Mobilos nézet (Egymás alá kerülnek) */
@media (max-width: 992px) {
    .category-cards-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Maga a Kártya */
.category-card {
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    overflow: hidden !important; /* Levágja a képek sarkát kerekre */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
}

.category-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
}

/* A kártya felső (képes) része */
.card-image-wrapper {
    position: relative !important;
    height: 240px !important;
    overflow: hidden !important;
}

.card-image-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s ease !important;
}

/* Kép finom nagyítása rámutatáskor */
.category-card:hover .card-image-wrapper img {
    transform: scale(1.05) !important;
}

/* A sötétítő átmenet (Hogy a fehér szöveg olvasható legyen a képen) */
.card-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.7),  rgba(15, 23, 42, 0.2)) !important;
    z-index: 1 !important;
}

/* A cím és a gomb a képen */
.card-title-layer {
    position: absolute !important;
    bottom: 25px !important;
    left: 25px !important;
    right: 25px !important;
    z-index: 2 !important;
}

.card-title-layer h3 {
    color: #ffffff !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin: 0 0 10px 0 !important;
}

/* KÁRTYA GOMB HOVER EFFEKTUS (Fehér helyett Arculati szín) */
.card-title-layer .btn-outline-light:hover,
.card-title-layer .btn-outline-light:focus,
.card-title-layer .btn-outline-light:active {
    background-color: var(--color-primary) !important; /* Behozza a Calexpert zöld/fő színét */
    border-color: var(--color-primary) !important;     /* A keret is felveszi a fő színt */
    color: #ffffff !important;                         /* A szöveg szép fehér marad */
}

/* A kártya alsó (szöveges) része */
.card-body {
    padding: 30px 25px !important;
    flex-grow: 1 !important;
    background-color: #f8f9fa !important;
}

.card-body p {
    color: #475569 !important;
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* ============================================================================================================================
    KATEGÓRIA OLDALAK (Termékek / Szakterületek 3 hasábos rács) VÉGE
   ============================================================================================================================ */



/* ============================================================================================================================
   FŐOLDAL: SZOLGÁLTATÁS KÁRTYÁK RÁCSRENDSZERE
   ============================================================================================================================ */

/* A 3 hasábos Grid konténer */
.calexpert-features-grid {
    display: grid !important;
    gap: 30px !important;
    grid-template-columns: 1fr !important; /* Mobilon 1 oszlop */
    /* margin-bottom: 50px !important; */
}

@media (min-width: 768px) {
    .calexpert-features-grid { grid-template-columns: repeat(3, 1fr) !important; } /* Asztalon 3 oszlop */
}

/* Maguk a kártyák */
.feature-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 35px 25px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; /* Egyforma magasság kikényszerítése */
}

/* Hover (rámutatás) effektus */
.feature-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08) !important;
    border-color: var(--color-primary) !important;
}

/* Az ikonok tartódoboza a kártya tetején */
.feature-card .icon-box {
    width: 60px !important;
    height: 60px !important;
    background-color: #f8fafc !important; /* Finom szürke kör */
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
    transition: all 0.3s ease !important;
}

.feature-card:hover .icon-box {
    background-color: var(--color-primary) !important; /* Rámutatásra kizöldül */
}

/* Maga a FontAwesome ikon */
.feature-card .icon-box i {
    font-size: 1.8rem !important;
    color: var(--color-primary) !important;
    transition: all 0.3s ease !important;
}

.feature-card:hover .icon-box i {
    color: #ffffff !important; /* Rámutatásra kifehéredik az ikon */
}

/* Kártya címsor és bevezető szöveg */
.feature-card h3 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 10px !important;
}

.feature-card p {
    font-size: 0.95rem !important;
    color: #64748b !important;
    margin-bottom: 20px !important;
}

/* Eltüntetjük az aláhúzást a kártyáról ÉS annak minden belső eleméről (*) */
a.feature-card,
a.feature-card:hover,
a.feature-card:focus,
a.feature-card *,
a.feature-card:hover * {
    text-decoration: none !important;
}

/* Eltüntetjük az alapértelmezett kék színt */
a.feature-card {
    color: inherit !important;
}

/* Biztosítjuk, hogy a link-kártyákon belül a címek feketék maradjanak */
a.feature-card h3 {
    color: #1e293b !important;
}

/* =========================================================
   FŐOLDAL: SZOFTVERFEJLESZTÉS KIEMELT SÁV
   ========================================================= */

.calexpert-software-banner {
    background: linear-gradient(135deg, #494949 0%, #60695f 100%) !important; /* Elegáns sötétkék/szürke átmenet */
    border-radius: 12px !important;
    padding: 50px 40px !important;
    margin-top: 40px !important;
    margin-bottom: 60px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

@media (min-width: 992px) {
    .calexpert-software-banner {
        flex-direction: row !important; /* Asztalon egymás mellé kerül a szöveg és az ikon */
        align-items: center !important;
    }
}

.calexpert-software-banner .software-content {
    flex: 1 !important;
}

.calexpert-software-banner .software-visual {
    flex: 0 0 auto !important;
    text-align: center !important;
    display: none !important; /* Mobilon elrejtjük a nagy ikont, hogy ne foglaljon helyet */
}

@media (min-width: 992px) {
    .calexpert-software-banner .software-visual {
        display: block !important;
        padding-left: 40px !important;
        border-left: 1px solid rgba(255,255,255,0.1) !important;
    }
}

/* Szoftveres szövegek formázása (Sötét háttéren világos szöveg) */
.calexpert-software-banner h2 {
    color: #ffffff !important;
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
}

.calexpert-software-banner h2 i {
    color: var(--color-primary) !important; /* A cím melletti kis ikon arculati színű */
    margin-right: 10px !important;
}

.calexpert-software-banner .lead {
    color: #cbd5e1 !important;
    font-size: 1.1rem !important;
    margin-bottom: 25px !important;
}

/* A korábban megírt zöld pipás lista felülírása világosra, hogy olvasható legyen a sötét háttéren */
.calexpert-software-banner .custom-check-list li {
    color: #f8fafc !important;
    font-size: 0.95rem !important;
    margin-bottom: 10px !important;
}

/* A nagy díszítő ikon a jobb oldalon */
.calexpert-software-banner .software-visual i {
    font-size: 8rem !important;
    color: rgba(255, 255, 255, 0.05) !important; /* Nagyon halvány, vízjel-szerű nagy ikon */
}





/* ============================================================================================================================
   KATALÓGUS DIZÁJN (4 OSZLOP)
   ============================================================================================================================ */

/* 1. A RÁCSRENDSZER (CSS GRID) BEÁLLÍTÁSA */
/* Modern, golyóálló módszer a 4 oszlop kikényszerítésére */
.com-content-category-blog .blog-items {
    display: grid !important;
    gap: 50px !important; /* Távolság a kártyák között */
    margin-bottom: 60px !important;
}

/* A hivatalos H1 főcímének formázása */
.com-content-category-blog h1 {
    text-align: center !important;
    color: var(--color-primary) !important;
    font-size: 2.5rem !important;
    font-weight: 500 !important;
    margin-top: 30px !important;
    margin-bottom: 40px !important;
    /* text-transform: uppercase !important; */
}

/* Mobil nézet: 1 oszlop (alapértelmezett) */
.com-content-category-blog .blog-items { grid-template-columns: repeat(1, 1fr) !important; }

/* Tablet nézet: 2 oszlop */
@media (min-width: 768px) {
    .com-content-category-blog .blog-items { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Asztali nézet: 4 oszlop */
@media (min-width: 992px) {
    .com-content-category-blog .blog-items { grid-template-columns: repeat(4, 1fr) !important; }
}

/* 2. A TERMÉKKÁRTYÁK ALAPSTÍLUSA */
.blog-items .blog-item {
    position: relative !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease-in-out !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; /* Minden kártya egyforma magas lesz a sorban */
    overflow: hidden !important; 
    margin: 0 !important; /* Felülírjuk a Joomla gyári margóit */
}

/* Lebegő (hover) effektus egérráhúzáskor */
.blog-items .blog-item:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1) !important;
    border-color: var(--color-primary) !important;
}

/* 3. A KÉPEK FORMÁZÁSA (A 'left' osztály semlegesítése ÉS a képek beillesztése) */
.blog-items .blog-item figure.item-image {
    margin: 0 !important;
    float: none !important; 
    width: 100% !important;
    border-bottom: 1px solid #e2e8f0 !important;
    overflow: hidden !important;
    background-color: #ffffff !important; /* Fehér háttér, hogy a kép körüli üres tér beolvadjon */
}

.blog-items .blog-item figure.item-image img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4/3 !important; 
    
    /* A VARÁZSSZÓ: 'contain' biztosítja, hogy a teljes rack szekrény látszódjon levágás nélkül */
    object-fit: contain !important; 
    
    /* Egy kis elegáns belső térköz, hogy a gép ne érjen teljesen hozzá a kártya széléhez */
    padding: 15px !important; 
    box-sizing: border-box !important;
    
    transition: transform 0.5s ease !important;
}

.blog-items .blog-item:hover figure.item-image img {
    transform: scale(1.05) !important; 
}

/* 4. SZÖVEGES TARTALOM ÉS CÍMSOROK */
.blog-items .blog-item .item-content {
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important; /* Kitölti a maradék helyet, lefelé tolva a gombot */
    background-color: #f8f9fa !important;
}

.blog-items .blog-item .item-content .page-header {
    margin: 0 0 15px 0 !important;
}

.blog-items .blog-item .item-content h2 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.blog-items .blog-item .item-content h2 a {
    color: #1e293b !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}

.blog-items .blog-item .item-content h2 a:hover {
    color: var(--color-primary) !important; 
}

/* A TELJES KÁRTYA KATTINTHATÓVÁ TÉTELE */
.blog-items .blog-item .item-content h2 a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
}

/* Eltüntetjük a felesleges üres bekezdéseket (<p>&nbsp;</p>) a gomb felett */
.blog-items .blog-item .item-content p:empty {
    display: none !important;
}

/* 5. A GOMB ("Read more") CALEXPERT STÍLUSOSÍTÁSA */
.blog-items .blog-item .readmore {
    display: none !important;
    /* margin-top: auto !important; Automatikusan a kártya legaljára tolja a gombot! 
    margin-bottom: 0 !important; */
}

/*
.blog-items .blog-item .readmore a.btn {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    background: transparent !important;
    color: #4b5057 !important;
    border: 1px solid var(--color-primary) !important;
    border-radius: 6px !important;
    margin-top: 10px !important;
    padding: 5px 15px !important;
    font-size: 0.9rem;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.blog-items .blog-item .readmore a.btn:hover {
    background: var(--color-primary) !important;
    color: #ffffff !important;
}
*/

/* Eltüntetjük az alapértelmezett chevron (nyíl) ikont a gombból, hogy letisztultabb legyen */
.blog-items .blog-item .readmore a.btn .icon-chevron-right {
    display: none !important;
}

/* ============================================================================================================================
   KATALÓGUS DIZÁJN (4 OSZLOP) VÉGE
   ============================================================================================================================ */



/* ============================================================================================================================
   TERMÉK RÉSZLETEZŐ OLDAL (HTML SABLON FORMÁZÁSA)
   ============================================================================================================================ */

/* A termékoldalak hivatalos H1 főcímének formázása */
.page-header h1 {
    text-align: center !important;
    color: var(--color-primary) !important;
    font-size: 2.0rem !important;
    font-weight: 600 !important;
    margin-top: 20px !important;
    margin-bottom: 40px !important;
    /* text-transform: uppercase !important; */
}

/* Fő konténer */
.calexpert-product-layout {
    font-size: 1rem;
    color: #334155;
}

/* Fő címsor formázás a termékoldalon */
.calexpert-product-layout .product-title {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
    /* border-bottom: 2px solid #e2e8f0 !important; */
}

/* Általános címsor formázás a termékoldalon */
.calexpert-product-layout .section-title {
    font-size: 1.2rem !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
    /* border-bottom: 2px solid #e2e8f0 !important; */
}

/* 1. FELSŐ RÉSZ: Képek és Leírás (Grid) */
.product-top-grid {
    display: grid !important;
    gap: 40px !important;
    grid-template-columns: 1fr !important; /* Mobilon 1 hasáb */
    margin-bottom: 50px !important;
}

@media (min-width: 992px) {
    .product-top-grid {
        grid-template-columns: 1fr 1fr !important; /* Asztalon 50-50% (2 hasáb) */
        align-items: start !important;
    }
}

.product-description {
    padding-top: 20px !important;
}

/* =========================================================
   KÉPGALÉRIA ÉS LAPOZÓ FORMÁZÁSA
   ========================================================= */

/* Főkép kerete és viselkedése */
.product-gallery .main-image {
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin: 0 !important;
    background-color: #ffffff !important;
    text-align: center;
    overflow: hidden !important;
}

.product-gallery .main-image img {
    max-width: 100% !important;
    height: auto !important;
    max-height: 200px !important; /* Ne legyen indokolatlanul magas */
    object-fit: contain !important;
    /* border-radius: 12px !important; */
}

/* Nagyító effektus (Hover overlay) a főképen */
.product-gallery .zoom-overlay {
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255, 255, 255, 0.6) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    cursor: zoom-in !important;
}

.product-gallery .main-image a:hover .zoom-overlay {
    opacity: 1 !important;
}

.product-gallery .zoom-overlay span {
    font-size: 3rem !important;
    color: var(--color-primary) !important; /* Arculati kék vagy zöld nagyító */
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.2)) !important;
}

/* Kisképek (Gombok) formázása */
.product-gallery .thumbnail-row {
    gap: 10px !important;
    margin-top: 5px !important;
}

/* A Bootstrap gomb stílusának lenullázása, hogy képként viselkedjen */
.product-gallery .thumbnail-row .nav-link {
    padding: 0 !important;
    background: transparent !important;
    border: 2px solid transparent !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    opacity: 0.6 !important;
    transition: all 0.2s ease !important;
}

.product-gallery .thumbnail-row .nav-link img {
    width: 70px !important;
    height: 70px !important;
    object-fit: cover !important;
    background-color: #ffffff !important;
    pointer-events: none !important; /* A VARÁZSSZÓ: A kép átengedi a kattintást az alatta lévő gombnak! */
}

/* Az aktív vagy hoverelt kiskép kiemelése */
.product-gallery .thumbnail-row .nav-link:hover,
.product-gallery .thumbnail-row .nav-link.active {
    opacity: 1 !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
}

/* Teljes képernyős (Modal) ablak elsötétítése */
.modal-backdrop.show {
    opacity: 0.85 !important; /* Finom, sötét, elegáns háttér */
}

/* =========================================================
   TERMÉKOLDAL GYORSLINKEK (Faltól falig horgonysáv)
   ========================================================= */

/* A sima (kúszó) görgetés bekapcsolása az egész weboldalon */
html {
    scroll-behavior: smooth !important;
}

/* A gyorslinkek fő doboza */
.calexpert-quick-links {
    /* A VARÁZSLAT: Képernyő teljes szélességének elérése a dobozolt (boxed) cikkből */
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw !important;
    
    background-color: #f8fafc !important; /* Nagyon finom halványszürke */
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    
    /* Vékony, elegáns megjelenés (kb. 35-40px teljes magasság) */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 60px !important;
}

/* A belső tartalom (linkek) középre igazítása */
.calexpert-quick-links .quick-links-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 40px !important; /* Távolság a linkek között */
    padding: 10px 15px !important;
}

/* Maguk a linkek stílusozása */
.calexpert-quick-links a {
    color: #64748b !important; /* Sötétszürke */
    font-size: 0.85rem !important; /* Kicsi, diszkrét betűméret */
    font-weight: 600 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    letter-spacing: 1px !important;
    transition: color 0.3s ease !important;
}

.calexpert-quick-links a:hover {
    color: var(--color-primary) !important; /* Rámutatáskor arculati szín (kék/zöld) */
}

/* MOBIL NÉZET: Kisebb betűk és térköz, ha pici a képernyő */
@media (max-width: 768px) {
    .calexpert-quick-links .quick-links-inner {
        gap: 15px !important;
    }
    .calexpert-quick-links a {
        font-size: 0.75rem !important;
    }
}

/* =========================================================
   GÖRGETÉSI KORREKCIÓ (Scroll Margin)
   ========================================================= */
/* Amikor a böngésző az adott szekcióhoz ugrik, ez biztosítja, 
   hogy a cím ne tapadjon rá teljesen a képernyő tetejére, 
   hanem maradjon felette egy kis elegáns térköz (vagy ne takarja ki a fix menü). */
.calexpert-product-layout .product-section,
.calexpert-product-layout .product-lists-container {
    scroll-margin-top: 120px !important; 
}

/* 2. LISTÁK (Jellemzők, Előnyök) */
.product-lists-container {
    margin-bottom: 60px !important;
}

.calexpert-product-layout .product-section {
    margin-bottom: 60px !important;
}

/* Egyedi pipás (check) lista */
.custom-check-list,
.custom-arrow-list {
    list-style: none !important;
    padding-left: 15px !important;
}

.custom-check-list li,
.custom-arrow-list li {
    position: relative !important;
    padding-left: 30px !important;
    margin-bottom: 2px !important;
    line-height: 1.5 !important;
}

/* Check (Pipa) ikon beillesztése Font Awesome segítségével */
.custom-check-list li::before {
    content: "\f00c" !important; 
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    position: absolute !important;
    left: 0 !important;
    top: 2px !important;
    color: var(--color-primary) !important; 
}

/* Arrow (Nyíl) ikon az alkalmazásokhoz */
.custom-arrow-list li::before {
    content: "\f105" !important; 
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    position: absolute !important;
    left: 0 !important;
    top: 2px !important;
    color: var(--color-primary) !important; 
}

/* =========================================================
   3. TÁBLÁZATOK (Specifikációk és Változatok - RÁCSOS NÉZET)
   ========================================================= */

.calexpert-table {
    border-collapse: collapse !important; /* Összeolvasztja a kereteket, így nem lesznek dupla vonalak */
    /* border-radius: 8px !important; */
    overflow: hidden !important; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03) !important;
    border: 1px solid #cbd5e1 !important; /* Külső főkeret */
    margin-bottom: 0 !important;
}

/* Minden létező cellának adunk egy 1px-es keretet */
.calexpert-table th, 
.calexpert-table td {
    border: 1px solid #cbd5e1 !important; /* Finom szürkés-kék rácsvonal */
}

/* Zöld fejléc, fehér betűkkel */
.calexpert-table thead th {
    background-color: #8dc73f !important; /* Calexpert Zöld */
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 12px 15px !important; 
    text-transform: uppercase !important; 
    font-size: 0.85rem !important;
    letter-spacing: 0.5px !important;
    
    /* A zöld fejlécen belüli rácsvonalakat egy picit sötétebb zöldre állítjuk, 
       hogy ne a szürke törje meg a szép zöld blokkot */
    border-color: #7cb535 !important; 
}

/* Kompaktabb cellák a táblázat törzsében */
.calexpert-table tbody td {
    padding: 8px 15px !important; 
    vertical-align: middle !important;
    color: #334155 !important;
    font-size: 0.95rem !important;
}

/* Zebra csíkozás (Minden második sor finom szürke háttere) */
.calexpert-table tbody tr:nth-of-type(odd) {
    background-color: #f8fafc !important; 
}

/* Finom hover (rámutatás) effektus */
.calexpert-table tbody tr:hover td {
    background-color: #f1f5f9 !important;
    color: #005088 !important;
    transition: all 0.2s ease !important;
}

/* =========================================================
   5. ADATLAP LETÖLTÉS (Egyszerűsített link)
   ========================================================= */

.calexpert-simple-download {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: var(--text-color-primary) !important;
    text-decoration: underline !important;
    padding: 10px 20px !important;
    transition: all 0.2s ease !important;
}

/* A PDF ikon méretezése és színezése (Javított Font Awesome osztály) */
.calexpert-simple-download .fa-file-pdf {
    font-size: 1.5rem !important;
    color: #e11d48 !important; /* Modern, kellemes piros */
    margin-right: 12px !important;
    transition: transform 0.2s ease !important;
}

/* Rámutatás (Hover) effektus */
.calexpert-simple-download:hover {
    color: #8dc73f !important; /* Rámutatáskor a Calexpert zöldjére vált */
    text-decoration: underline !important;
}

/* Az ikon egy hajszálnyit megugrik, amikor az egér a link fölé ér 
.calexpert-simple-download:hover .fa-file-pdf {
    transform: scale(1.15) !important;
} */


/* =========================================================
   KAPCSOLÓDÓ KÁRTYÁK KÉPPEL
   ========================================================= */

/* A külső csomagolás eltüntetése */
.main-bottom.card {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-top: 10px !important;
    margin-bottom: 40px !important;
}

.main-bottom .card-header {
    background-color: transparent !important;
    border-bottom: none !important;
    padding: 0 0 20px 0 !important;
    font-size: 1.2rem !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    position: relative !important;
}

/* .main-bottom .card-header::after {
    content: "" !important;
    display: block !important;
    width: 60px !important;
    height: 3px !important;
    background-color: #8dc73f !important;
    margin-top: 15px !important;
} */

.main-bottom .card-body { padding: 30px 0 !important; }

/* 4 hasábos rács */
.mod-relateditems.related-grid {
    display: grid !important;
    gap: 20px !important;
    grid-template-columns: repeat(1, 1fr) !important;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
    list-style: none !important; 
}

@media (min-width: 576px) { .mod-relateditems.related-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (min-width: 992px) { .mod-relateditems.related-grid { grid-template-columns: repeat(6, 1fr) !important; } }

/* Maga a Kártya */
.mod-relateditems li.calexpert-related-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.3s ease !important;
    padding: 0 !important; 
}

/* Kép doboz */
.calexpert-related-card .card-image-wrapper {
    background-color: #ffffff !important;
    padding: 20px !important;
    text-align: center !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.calexpert-related-card .card-image-wrapper img {
    max-width: 100% !important;
    height: 140px !important;
    object-fit: contain !important;
    transition: transform 0.3s ease !important;
}

/* Szöveg doboz */
.calexpert-related-card .card-content-wrapper {
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.calexpert-related-card .card-content-wrapper h4 {
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    margin-bottom: 10px !important;
    line-height: 1.3 !important;
}

.calexpert-related-card .card-content-wrapper h4 a {
    color: #1e293b !important;
    text-decoration: none !important;
}

.calexpert-related-card .card-content-wrapper p {
    font-size: 0.85rem !important;
    color: #64748b !important; 
    margin-bottom: 0 !important;
    line-height: 1.5 !important;
    display: none !important; /* <--- EZ A VARÁZSSZÓ ELTÜNTETI A SZÖVEGET */
}

/* A link ráfeszítése az egész kártyára */
.calexpert-related-card .card-content-wrapper h4 a::after {
    content: "" !important;
    position: absolute !important;
    top: 0; right: 0; bottom: 0; left: 0 !important;
    z-index: 10 !important;
}

/* Hover (Rámutatás) effektek */
.calexpert-related-card:hover {
    cursor: pointer !important;
    border-color: var(--color-primary) !important; 
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
    transform: translateY(-4px) !important;
}

.calexpert-related-card:hover .card-image-wrapper img {
    transform: scale(1.06) !important;
}
.calexpert-related-card:hover .card-content-wrapper h4 a {
    color: var(--color-primary) !important;
}

/* ============================================================================================================================
   TERMÉK RÉSZLETEZŐ OLDAL (HTML SABLON FORMÁZÁSA) VÉGE
   ============================================================================================================================ */



/* ============================================================================================================================
   VIDEÓS HERO BANNER (FŐOLDAL, SZOFVERFEJLESZTÉS)
   ============================================================================================================================ */

/* Biztosítjuk, hogy a videó ne lógjon ki a dobozból */
.service-hero.video-hero {
    background: #1e293b !important; /* Egy sötétkék alap, amíg a videó betölt */
    overflow: hidden !important; 
}

/* 1. réteg (Legalul): A videó teljes kitöltéssel */
.hero-bg-video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Torzítás nélkül kifeszíti a videót, akárcsak a képeket */
    z-index: -2 !important; /* A legalsó rétegre toljuk */
}

/* 2. réteg (Középen): A sötétítő fólia */
.hero-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(rgba(30, 41, 59, 0.8), rgba(30, 41, 59, 0.8)) !important;
    z-index: -1 !important; /* A videó fölött, de a szöveg alatt */
}

/* 3. réteg (Legfelül): A szöveg maradt az 1-es szinten, de biztos ami biztos újra megerősítjük */
.service-hero.video-hero .service-hero-content {
    position: relative !important;
    z-index: 1 !important;
}

/* ============================================================================================================================
   VIDEÓS HERO BANNER (FŐOLDAL, SZOFVERFEJLESZTÉS) VÉGE
   ============================================================================================================================ */



/* ============================================================================================================================
   SZOLGÁLTATÁS ALOLDAL (ÁLTALÁNOS DIZÁJN)
   ============================================================================================================================ */

/* Fő burkoló elem */
.calexpert-service-page {
    font-size: 1.05rem !important;
    color: #334155 !important;
    line-height: 1.6 !important;
}

/* Szekciók térközei */
.calexpert-service-page .service-section {
    padding: 80px 0px 80px 0px !important;
}
.calexpert-service-page .bg-light-gray {
    background-color: #edf1f5 !important; /* f8fafc */
    
    /* Faltól falig nyújtjuk a szürke hátteret */
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: calc(50vw - 50% + 15px) !important;
    padding-right: calc(50vw - 50% + 15px) !important;
}


/* =========================================================
   SZOLGÁLTATÁS HERO BANNER
   ========================================================= */

/* A morzsamenü marad a gyári, középre zárt helyén, csak legfelülre (z-index) hozzuk */
body:has(.service-hero) .container-breadcrumb,
body:has(.service-hero) nav.mod-breadcrumbs__wrapper {
    position: relative !important; /* <--- absolute helyett relative! ETTŐL ÁLL HELYRE A POZÍCIÓ! */
    z-index: 10 !important; 
    height: 0 !important; /* <--- EZ A VARÁZSLAT: Nem tolja le a bannert mobilon sem! */
    min-height: 0 !important;
    margin: 0 !important;
    padding-top: 15px !important; /* Egy pici térköz, hogy ne tapadjon rá a menü vonalára */
    padding-bottom: 0 !important;
    overflow: visible !important; /* A 0 magasság ellenére a szöveg látható marad */
}

/* A szöveg CSAK ezeken az oldalakon legyen fehér */
body:has(.service-hero) .mod-breadcrumbs__item a.pathway,
body:has(.service-hero) .mod-breadcrumbs__item a.pathway span,
body:has(.service-hero) .mod-breadcrumbs__item.active span,
body:has(.service-hero) .mod-breadcrumbs__item + .mod-breadcrumbs__item::before {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important; 
}

.service-hero {
    position: relative !important;
    z-index: 1 !important; 
    
    /* Töröltük a -65px margót, mert a morzsamenü már nem tolja le! */
    margin-top: -15px !important; 
    
    /* A VARÁZSLAT 1: Fix, egyforma magasság minden oldalon */
    min-height: 560px !important; /* Ezt írd át bátran, ha magasabb/alacsonyabb bannert szeretnél! */
    
    /* A VARÁZSLAT 2: Flexbox a belső tartalom automatikus középre húzásához */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Függőlegesen mindig középen tartja a szöveget */
    align-items: center !important;     /* Vízszintesen középre zár */
    
    /* Belső térközök: már csak azért kellenek, hogy a szöveg mobilon se csússzon ki a szélére */
    padding-top: 60px !important; 
    padding-bottom: 40px !important;
    
    /* A korábbi háttér és szélesség beállítások: */
    background-size: cover !important;
    background-position: center center !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    text-align: center !important;
    margin-bottom: 10px !important;
}

.service-hero-content {
    max-width: 820px !important;
    margin: 0 auto !important;
}

.service-hero h1 {
    color: #ffffff !important;
    font-size: 2.0rem !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    margin-bottom: 30px !important;
}

.service-hero .lead {
    color: #cbd5e1 !important;
    font-size: 1.2rem !important;
    margin-top: 20px !important;
    margin-bottom: 50px !important;
}

/* Általános címsor formázás a termékoldalon */
.calexpert-service-page .section-title {
    /* font-size: 1.2rem !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    margin-bottom: 10px !important; */
    padding-bottom: 20px !important;
    /* border-bottom: 2px solid #e2e8f0 !important; */
}


/* =========================================================
   KÉTHASÁBOS SZEKCIÓ (Szöveg és Kép)
   ========================================================= */
.service-two-col {
    display: grid !important;
    gap: 60px !important;
    grid-template-columns: 1fr !important;
    align-items: center !important;
}

@media (min-width: 992px) {
    .service-two-col {
        grid-template-columns: 1fr 1fr !important; /* Asztalon 50-50% */
    }
    /* Arányok beállítása */
    .service-two-col.ratio-60-40 { grid-template-columns: 3fr 2fr !important; }
    .service-two-col.ratio-40-60 { grid-template-columns: 2fr 3fr !important; }
    .service-two-col.ratio-66-33 { grid-template-columns: 2fr 1fr !important; }
    .service-two-col.ratio-33-66 { grid-template-columns: 1fr 2fr !important; }
    .service-two-col.ratio-70-30 { grid-template-columns: 7fr 3fr !important; }
    .service-two-col.ratio-30-70 { grid-template-columns: 3fr 7fr !important; }
    .service-two-col.ratio-80-20 { grid-template-columns: 4fr 1fr !important; }
    .service-two-col.ratio-20-80 { grid-template-columns: 1fr 4fr !important; }
}


.service-section.mw900 {
    max-width: 900px !important;
}

.service-section .lead,
.service-section .custom-arrow-list li {
    font-size: 1.1rem !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}

.service-section .rounded-image {
    width: 100% !important;
    border-radius: 12px !important;
    object-fit: cover !important;
}

/* .service-section .col-text p {
    padding: 10px 0 !important;
} */


/* =========================================================
   EGYHASÁBOS KIEMELT SZEKCIÓ 
   ========================================================= */

/* 1. Az egyhasábos doboz méretezése és középre zárása */
.single-column-highlight {
    max-width: 1080px !important; /* Optimális olvasási szélesség */
    margin: 0 auto !important; /* Középre rendezi az egész blokkot */
    padding: 0 15px !important; /* Mobilon ad egy kis oldalsó margót */
}

/* 2. A színátmenetes címsor (Zöldből a világos szürkébe/fehérbe) */
.highlight-heading-box {
    /* A var(--color-primary) helyett használhatsz fix zöld kódot is, ha az jobban tetszik (pl. #10b981) */
    background: linear-gradient(to right, var(--color-primary) 0%, #f8fafc 100%) !important;
    padding: 10px 30px !important;
    /* border-left: 6px solid #1e293b !important; /* Sötétkék bal oldali él a technikai hatásért */
    border-radius: 4px !important;
    margin-bottom: 25px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
}

.highlight-heading-box h2 {
    margin: 0 !important;
    color: #1e293b !important; /* Sötétkék/fekete szöveg, hogy a zöld és a fehér háttéren is jól olvasható maradjon */
    font-size: 1.5rem !important;
    font-weight: 600 !important;
}

/* 3. A szöveges tartalom alapstílusa */
.single-column-content p {
    font-size: 1.05rem !important;
    line-height: 1.8 !important;
    color: #475569 !important;
    margin-bottom: 20px !important;
}

/* 4. A Sorkizárt + Elválasztó (Justify) osztály */
.text-justify {
    text-align: justify !important;
    /* A "fehér folyók" elleni védelem: automatikus szóelválasztás */
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
    hyphens: auto !important; 
}

/* =========================================================
   FOLYAMAT LÉPÉSEI (TIMELINE)
   ========================================================= */
.process-timeline {
    display: grid !important;
    gap: 30px !important;
    grid-template-columns: 1fr !important;
    margin-top: 40px !important;
}

@media (min-width: 768px) {
    .process-timeline {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (min-width: 992px) {
    .process-timeline {
        grid-template-columns: repeat(4, 1fr) !important; /* 5 lépés egymás mellett */
    }
}

.process-step {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 25px !important;
    position: relative !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02) !important;
}

.process-step .step-number {
    position: absolute !important;
    top: -20px !important;
    left: 20px !important;
    width: 40px !important;
    height: 40px !important;
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 10px rgba(141, 199, 63, 0.3) !important;
}

.process-step .step-content {
    margin-top: 15px !important;
}

.process-step h4 {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin-bottom: 10px !important;
}

.process-step p {
    font-size: 0.95rem !important;
    color: #64748b !important;
    margin-bottom: 0 !important;
}

/* =========================================================
   ESETTANULMÁNY ÉS GARANCIA DOBOZ
   ========================================================= */
.success-guarantee-box {
    display: grid !important;
    gap: 30px !important;
    grid-template-columns: 1fr !important;
}

@media (min-width: 992px) {
    .success-guarantee-box {
        grid-template-columns: 2fr 1fr !important; /* A sztori szélesebb, a garancia keskenyebb */
    }
}

.success-story {
    background-color: #f8fafc !important;
    border-left: 4px solid var(--color-primary) !important;
    padding: 30px !important;
    border-radius: 0 8px 8px 0 !important;
}

.success-story h3 {
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin-bottom: 15px !important;
}

.success-story h3 i {
    color: #fbbf24 !important; /* Arany kupa ikon */
    margin-right: 10px !important;
}

.success-story p {
    font-size: 1.05rem !important;
    color: #475569 !important;
    line-height: 1.7 !important;
}

.guarantee-badge {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
    color: #ffffff !important;
    padding: 30px !important;
    border-radius: 8px !important;
    text-align: center !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
}

.guarantee-badge i {
    font-size: 3rem !important;
    color: var(--color-primary) !important;
    margin-bottom: 15px !important;
}

.guarantee-badge h4 {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
}

.guarantee-badge p {
    font-size: 0.9rem !important;
    color: #cbd5e1 !important;
    margin-bottom: 0 !important;
}

/* ============================================================================================================================
   SZOLGÁLTATÁS ALOLDAL (ÁLTALÁNOS DIZÁJN) VÉGE
   ============================================================================================================================ */



/* ============================================================================================================================
   RÓLUNK / CÉGÜNKRŐL OLDAL STÍLUSAI
   ============================================================================================================================ */

/* Felső kétoszlopos szekció (Szöveg + Kép) */
.about-section-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
    align-items: center !important;
}

/* Az olvasósáv középre zárása és szűkítése az olvashatóságért */
.about-content {
    /* max-width: 900px !important; */
    margin: 0 auto 60px auto !important;
    padding: 0 20px !important;
    color: #334155 !important;
}

/* Bekezdések közötti távolság */
.about-section {
    margin-bottom: 40px !important;
}

.about-section p {
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    margin-bottom: 20px !important;
}

/* Címsorok formázása */
.about-section h3 {
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin-bottom: 20px !important;
    padding-bottom: 0px !important;
    /* border-bottom: 2px solid #e2e8f0 !important; /* Vonal a címsor alatt */
}


.about-text-content p {
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    color: #475569 !important;
    margin-bottom: 20px !important;
}

/* Küldetésünk kiemelt doboz */
.mission-statement-box {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    color: #ffffff !important;
    padding: 50px 30px !important;
    border-radius: 12px !important;
    margin: 60px 0 !important;
    position: relative !important;
    border-top: 4px solid var(--color-primary) !important;
}

.mission-statement-box .mission-icon {
    font-size: 2.5rem !important;
    color: var(--color-primary) !important;
    margin-bottom: 20px !important;
}

.mission-statement-box .section-subtitle {
    color: #ffffff !important;
    margin-bottom: 20px !important;
    font-size: 1.8rem !important;
}

.mission-statement-box p {
    font-size: 1.1rem !important;
    line-height: 1.8 !important;
    max-width: 1080px !important;
    margin: 0 auto !important;
    color: #e2e8f0 !important;
}

/* Főbb előnyök rács */
.advantages-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 25px !important;
    margin-top: 40px;
    margin-bottom: 40px;
}

.advantage-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 30px 20px !important;
    text-align: center !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.advantage-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 30px rgba(0,0,0,0.08) !important;
}

.advantage-icon {
    font-size: 2rem !important;
    color: var(--color-primary) !important;
    margin-bottom: 15px !important;
}

.advantage-card h4 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 10px !important;
}

.advantage-card p {
    font-size: 0.9rem !important;
    color: #64748b !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* Záró gondolat kiemelése */
.about-footer-note .highlight-text {
    font-size: 1.2rem !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    max-width: 900px !important;
    margin-top: 2rem !important;
    margin-bottom: 4rem !important;    
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 1.5 !important;
}

/* MOBILOS NÉZET BEÁLLÍTÁSAI */
@media (max-width: 992px) {
    .about-section-grid {
        grid-template-columns: 1fr !important;
    }
    
    .advantages-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 576px) {
    .advantages-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================================================================================
   RÓLUNK / CÉGÜNKRŐL OLDAL STÍLUSAI VÉGE
   ============================================================================================================================ */



/* ============================================================================================================================
   KAPCSOLAT OLDAL (Rács és Űrlap formázások)
   ============================================================================================================================ */

/* 1. Alapvető elrendezés (Mobilon egymás alatt) */
.contact-grid {
    display: grid !important;
    gap: 40px !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
}

/* Asztali nézet (Egymás mellett, 50-50% arány) */
@media (min-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 60px !important; /* Nagyobb térköz asztalin */
    }
}

/* 2. Elérhetőség ikonok és szövegek formázása */
.contact-item {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 25px !important;
}

.contact-icon {
    width: 45px !important;
    height: 45px !important;
    background-color: #f8fafc !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--color-primary) !important;
    font-size: 1.25rem !important;
    margin-right: 15px !important;
    flex-shrink: 0 !important;
}

.contact-text a {
    color: var(--color-primary) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

/* 3. Térkép dobozának lekerekítése */
.map-wrapper {
    border-radius: 12px !important;
    overflow: hidden !important; /* Ez vágja le a szögletes térképet kerekre */
    border: 1px solid #e2e8f0 !important;
}

/* 4. Az Űrlap Kártya stílusa */
.contact-form-card {
    background: #ffffff !important;
    padding: 40px !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
}

/* Űrlap mezők elrendezése és stílusa */
.calexpert-form .form-group {
    margin-bottom: 20px !important;
}

.calexpert-form .form-row {
    display: flex !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
}

.calexpert-form .half-width {
    flex: 1 1 calc(50% - 10px) !important;
    min-width: 200px !important;
}

.calexpert-form label {
    display: block !important;
    font-weight: 600 !important;
    color: #475569 !important;
    margin-bottom: 8px !important;
    font-size: 0.9rem !important;
}

.calexpert-form .form-control {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    color: #1e293b !important;
    background-color: #f8fafc !important;
    transition: all 0.3s ease !important;
    font-family: inherit !important;
}

/* Ha belekattintasz a mezőbe (Focus) */
.calexpert-form .form-control:focus {
    outline: none !important;
    border-color: var(--color-primary) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important; /* Finom kék/zöld glória */
}

/* GDPR Checkbox sor */
.calexpert-form .checkbox-group {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.calexpert-form .checkbox-group input {
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--color-primary) !important;
    cursor: pointer !important;
}

.calexpert-form .checkbox-group label {
    margin-bottom: 0 !important; /* Itt a label mellé kerül a checkboxnak */
    font-weight: 400 !important;
    cursor: pointer !important;
}

/* Teljes szélességű gomb */
.w-100 {
    width: 100% !important;
}

/* ============================================================================================================================
   KAPCSOLAT OLDAL (Rács és Űrlap formázások) VÉGE
   ============================================================================================================================ */



/* ============================================================================================================================
   BEJELENTKEZÉSI (LOGIN) OLDAL FORMÁZÁSA
   ============================================================================================================================ */

/* 1. Fő konténer (A kártya méretezése és középre zárása) */
.com-users-login {
    max-width: 550px !important; /* Hasonló szélesség, mint a kapcsolat űrlapé */
    margin: 60px auto 100px auto !important; /* Középre zárás, felül 60px, alul 100px térköz */
    background-color: #ffffff !important;
    padding: 40px 35px !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
}

/* 2. Címsor és leírás formázása */
.com-users-login .page-header h1 {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 10px !important;
    text-align: center !important; /* Középre igazított cím */
}

.com-users-login .login-description {
    text-align: center !important;
    color: #475569 !important;
    margin-bottom: 30px !important;
}

/* 3. Űrlap mezők elrendezése */
.com-users-login .control-group {
    margin-bottom: 20px !important;
}

/* Űrlap címkék (Username, Password) */
.com-users-login .control-label label {
    font-weight: 600 !important;
    color: #1e293b !important;
    margin-bottom: 8px !important;
    display: inline-block !important;
}

/* Piros csillag a kötelező mezőknél */
.com-users-login .control-label label .star {
    color: #e11d48 !important;
}

/* "Kérjük, töltse ki..." felirat eltüntetése (Zavaró tud lenni) */
.com-users-login .form-control-feedback {
    display: none !important; 
}

/* 4. Beviteli mezők (Megegyezik a Kapcsolat űrlappal) */
.com-users-login .form-control {
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    padding: 12px 15px !important;
    font-size: 0.95rem !important;
    background-color: #f8fafc !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
}

/* Fókusz állapot (amikor belekattint a mezőbe) */
.com-users-login .form-control:focus {
    background-color: #ffffff !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 80, 136, 0.15) !important; /* Finom kék/zöld ragyogás */
    outline: none !important;
}

/* 5. A jelszó láthatósága gomb (A szem ikon) finomhangolása */
.com-users-login .input-group .btn-secondary {
    border-radius: 0 8px 8px 0 !important; /* Csak a jobb oldalon kerekítjük */
    border: 1px solid #cbd5e1 !important;
    border-left: none !important;
    background-color: #f8fafc !important;
    color: #475569 !important;
}

/* 6. "Emlékezz rám" (Remember me) checkbox */
.com-users-login .com-users-login__remember {
    margin-bottom: 30px !important;
    margin-top: 10px !important;
}
.com-users-login .form-check-label {
    color: #475569 !important;
}

/* 7. Belépés Gomb (100% széles, arculati színnel) */
.com-users-login .btn-primary {
    display: block !important;
    width: 100% !important; /* Faltól falig gomb */
    background-color: var(--bg-color-button) !important;
    border-color: var(--color-primary) !important;
    border-radius: 8px !important;
    padding: 12px 15px !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
}

.com-users-login .btn-primary:hover {
    background-color: var(--color-primary) !important;
    box-shadow: 0 4px 15px rgba(0, 80, 136, 0.3) !important;
    transform: translateY(-2px) !important; /* Finom emelkedés kattintás előtt */
}

/* 8. Elfelejtett jelszó / felhasználónév linkek */
/* Letiltjuk a Bootstrap gyári, csúnya lista-kereteit */
.com-users-login .com-users-login__options.list-group {
    margin-top: 25px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Középre húzza a linkeket */
    gap: 10px !important;
    border: none !important; 
}

.com-users-login .com-users-login__options .list-group-item {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: var(--color-primary) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    transition: color 0.2s ease !important;
}

.com-users-login .com-users-login__options .list-group-item:hover {
    text-decoration: underline !important;
    color: #1e293b !important;
}

/* ============================================================================================================================
   BEJELENTKEZÉSI (LOGIN) OLDAL FORMÁZÁSA VÉGE
   ============================================================================================================================ */



/* ============================================================================================================================
   MORZSAMENÜ (BREADCRUMBS) PONTOS FORMÁZÁSA (HTML ALAPJÁN)
   ============================================================================================================================ */

/* 1. A fő konténer doboza (háttér és határolók) */
nav.mod-breadcrumbs__wrapper {
    background-color: transparent !important; 
    /* border-bottom: 1px solid #e2e8f0 !important; */
    width: 100% !important;
    margin: 0 !important;
    padding: 20px 20px !important; /* Esztétikus térköz a széleken */
}

/* 2. A lista alapformázása, a gyári padding (px-3 py-2) felülírása */
ol.mod-breadcrumbs {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

/* 3. A kezdő ikon formázása ÉS cseréje házikóra */
.mod-breadcrumbs__divider span.icon-location {
    color: var(--color-primary) !important; /* Elegáns Calexpert zöld */
    margin-right: 10px !important;
    font-size: 0.95rem !important;
}

/* Magának a rajznak a felülírása a Font Awesome Házikó (Home) ikonjára */
.mod-breadcrumbs__divider span.icon-location::before {
    content: "\f015" !important; /* A házikó (home) ikon pontos kódja */
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important; /* Ez garantálja, hogy a "teli" (solid) házikó jelenjen meg */
}

/* 4. Linkek (kattintható útvonalak) */
.mod-breadcrumbs__item a.pathway,
.mod-breadcrumbs__item a.pathway span {
    color: #475569 !important; /* Középszürke */
    text-decoration: none !important;
    font-size: 0.9rem !important;
    transition: color 0.2s ease !important;
}

/* Linkek egérráhúzáskor (Hover) */
.mod-breadcrumbs__item a.pathway:hover,
.mod-breadcrumbs__item a.pathway:hover span {
    color: var(--color-primary) !important; 
    text-decoration: underline !important;
}

/* 5. Az aktuális (aktív) oldal kiemelése */
.mod-breadcrumbs__item.active span {
    color: #1e293b !important; /* Sötétkék/szürke szín a határozottságért */
    font-weight: 600 !important;
    font-size: 0.9rem !important;
}

/* 6. Elválasztó jelek ( / ) a morzsák között */
.mod-breadcrumbs__item + .mod-breadcrumbs__item::before {
    content: "/" !important; /* Biztosítja a perjel megjelenését */
    color: #cbd5e1 !important; /* Visszafogott világosszürke */
    padding: 0 10px !important; /* Térköz a perjel és a szavak között */
}

/* ============================================================================================================================
   MORZSAMENÜ (BREADCRUMBS) PONTOS FORMÁZÁSA (HTML ALAPJÁN) VÉGE
   ============================================================================================================================ */



/* ============================================================================================================================
   LÁBLÉC (FOOTER)
   ============================================================================================================================ */

/* Biztonsági beállítás, hogy a faltól falig nyújtás ne okozzon vízszintes görgetősávot */
body {
    overflow-x: hidden !important; 
}

/* 1. A szövegszerkesztő által generált bekezdések (p) margóinak törlése */
.container-footer p {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 2. A Joomla modul dobozok gyári alsó távolságának eltüntetése */
.container-footer .moduletable {
    margin-bottom: 0 !important;
}

/* 3. Ha a Copyright sáv nagyon makacs lenne, a sortávolságot is összébb húzzuk */
.container-footer {
    line-height: 1.2 !important; 
    height: auto !important;
}

/* A legalsó vékony sáv */
.container-footer {
    background-image: none !important;

    background-color: #393939 !important; /* Sötét háttérszín */
    color: #e0e0e0; /* Világosszürke szövegszín, ami nem bántja a szemet */

    /* background-color: var(--bg-color-bottom) !important; 
    color: var(--text-color-bottom) !important; */


    text-align: left !important;
    font-size: 0.85rem !important;
    border-top: 2px solid var(--color-primary) !important; 
    
    /* 2. JAVÍTÁS: A kb. 10px-es lyuk (grid-gap) megszüntetése */
    margin-top: 1rem !important; /* Felhúzza a sávot pontosan a bottom-a aljához */
    position: relative !important;
    z-index: 10 !important; /* Biztosítja, hogy felülírja a rést */
    
    /* Biztonságból ezt is faltól falig nyújtjuk, hogy hajszálpontosan kövesse az előzőt  */
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    /*
    padding-left: calc(50vw - 50% + 15px) !important;
    padding-right: calc(50vw - 50% + 15px) !important;
    */

    /* A varázslat: A szöveget visszatoljuk pontosan a fejléc és a fő tartalom vonalába */
    padding-left: max(15px, calc((100vw - 1320px) / 2)) !important;
    padding-right: max(15px, calc((100vw - 1320px) / 2)) !important;
    box-sizing: border-box !important;

    /* Felső és alsó térközök */
    padding-top: 25px !important; 
    padding-bottom: 12px !important; 
}


/* 2. Felülírjuk a sablon szűkítő rácsrendszerét, hogy a modul kitöltse a teret */
.container-footer .grid-child {
  grid-column: 1 / -1 !important; /* Kifeszíti a teljes rácsra */
  width: 100% !important;
}

/* 3. A modul konténer szélességének maximalizálása */
.mod-custom.custom {
  width: 100%;
}




/*
.container-footer a {
    color: var(--color-primary) !important;
    text-decoration: none !important;
}

.container-footer a:hover {
    text-decoration: underline !important;
}
*/

/* 1. A Cassiopeia belső footer kereteinek lenullázása és középre igazítása */
.container-footer > div {
    min-height: 0 !important; /* Kiiktatjuk a gyári minimum magasságot */
    padding: 0 !important;    /* Töröljük a belső dobozok térközeit */
    margin: 0 !important;
    display: flex !important; 
    flex-direction: row !important;
    align-items: left !important; /* Függőlegesen tökéletesen középre zár */
    justify-content: center !important; /* Vízszintesen is középre húz mindent */
    flex-wrap: wrap !important;
}

/* 2. Ha ott van a "Back to top" (Irány a tetejére) nyíl, annak a méretét is csökkentjük */
.container-footer .back-to-top-link,
.container-footer a[href="#top"] {
    padding: 0 !important;
    margin: 0 0 0 15px !important; /* Csak egy kis bal oldali távolság a szövegtől */
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* 3. A modul dobozának "kiszabadítása", hogy ne feszüljön szét 100%-ra */
.container-footer .moduletable {
    width: auto !important; 
    flex: 0 0 auto !important;
}

/* --- CALEXPERT LÁBLÉC FORMÁZÁSA --- */

.calexpert-footer .footer-title {
  color: var(--color-primary) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  text-align: left !important;
  font-size: 0.9rem !important;
  position: relative !important;
  padding-bottom: 10px !important;
}
/* Linkek alapállapota és hover effektje */
.calexpert-footer a {
  color: #a0aab5 !important;
  text-decoration: underline !important;
  transition: color 0.3s ease !important;
}

.calexpert-footer a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* Kapcsolati lista ikonjainak térköze */
.footer-contact-list li {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.footer-contact-list li i {
  width: 25px;
  color: var(--color-primary); /* Ikonok színe */
  font-size: 1.1rem;
}

/* Jogi linkek térköze */
.footer-links li {
  margin-bottom: 8px;
}


/* MINŐSÍTÉSEK LOGÓINAK IGAZÍTÁSA
   A befogadó doboz (Egymás mellé teszi és középre igazítja őket) */
.footer-logos {
    display: flex !important;
    align-items: center !important; /* Függőlegesen tökéletesen egy vonalba húzza őket */
    gap: 20px !important; /* Távolság a logók között */
    flex-wrap: wrap !important; /* Ha mobilon nem férnek el, ízlésesen új sorba törnek */
}

/* Maguk a képek (Fix magasság, automatikus szélesség) */
.footer-logos img {
    height: 90px !important; /* IDE ÍRD BE A KÍVÁNT MAGASSÁGOT! (pl. 50px, 60px, 80px) */
    width: auto !important;  /* A szélesség engedelmesen leköveti a magasságot */
    object-fit: contain !important; /* Biztosítja a torzulásmentességet */
    margin: 0 !important; /* Eltünteti a felesleges margókat */
}

/* Alsó copyright sáv */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 20px;
  padding-top: 12px;
  color: #7a838c;
}

/* ============================================================================================================================
   LÁBLÉC (FOOTER) VÉGE
   ============================================================================================================================ */



/* ============================================================================================================================
   "VISSZA A TETEJÉRE" (BACK TO TOP) GOMB ÉS GÖRGETÉS
   ============================================================================================================================ */

/* 1. Vajpuha görgetés az egész weboldalon */
html {
    scroll-behavior: smooth !important; 
}

/* 2. A gomb alapstílusa (Asztali nézet) */
.calexpert-btt {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    width: 50px !important;
    height: 50px !important;
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
    z-index: 9998 !important; /* A fejléc (9999) alatt, de minden más felett */
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    opacity: 0.85 !important; /* Kicsit áttetsző, hogy finomabb legyen */
}

/* Hover (rámutatás) effektus */
.calexpert-btt:hover {
    opacity: 1 !important;
    transform: translateY(-5px) !important; /* Finoman megemelkedik */
    color: #ffffff !important;
    text-decoration: none !important;
}

/* 3. Mobilos finomhangolás (Kisebb méret, nagyobb áttetszőség) */
@media (max-width: 768px) {
    .calexpert-btt {
        bottom: 20px !important;
        right: 20px !important;
        width: 42px !important;
        height: 42px !important;
        font-size: 1rem !important;
        opacity: 0.6 !important; /* Mobilon diszkrétebb, hogy ne zavarja az olvasást */
    }
    
    .calexpert-btt:focus, 
    .calexpert-btt:active {
        opacity: 1 !important;
    }
}

/* =========================================================
   FŐOLDALI TELJES SZÉLESSÉGŰ HERO BANNER (1700x405)
   ========================================================= 

.home-hero-banner, .container-banner {
    /* 1. Kiszabadítjuk a dobozból, hogy faltól falig érjen 
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    
    /* 2. Háttérkép beállításai 
    background-image: url('/images/intro.jpg') !important; /* !!! IDE ÍRD A KÉPED PONTOS NEVÉT ÉS ELÉRÉSÉT !!! 
    background-size: cover !important; /* Intelligensen kitölti a teret, nem engedi megnyúlni a képet 
    background-position: center center !important; /* Mindig a kép közepe marad a fókuszban vágáskor 
    background-repeat: no-repeat !important;
    
    /* 3. Dinamikus képarány megtartása (1700 / 405) 
    aspect-ratio: 1700 / 405 !important;
    
    /* 4. Biztonsági korlátok a különböző kijelzőkre 
    min-height: 280px !important; /* MOBILRA: Megakadályozza, hogy a kép összeessen egy vékony csíkká 
    max-height: 450px !important; /* ULTRA-WIDE MONITORRA: Nem engedi, hogy a kép függőlegesen túl hatalmasra nőjön 
}

/* Kisebb finomhangolás mobilra, hogy ha a min-height miatt kicsit vágódik a kép széle, az is jól mutasson 
@media (max-width: 768px) {
    .home-hero-banner {
        background-position: 35% center !important; /* Ha mérnöki rajz vagy fontos részlet van a bal/közép oldalon, ide tolható a fókusz 
    }
} */

/* =========================================================
   FŐOLDALI LAPOZÓS HERO BANNER (Bootstrap 5 Carousel)
   ========================================================= */

/* 1. A konténer beállítása (A Cassiopeia banner pozíció már full-width, így elég a 100%) */
.calexpert-hero-slider {
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    background-color: #1e293b !important; /* Sötét háttér, ha lassan tölt a kép */
}

/* 2. Dinamikus képarány és biztonsági magasságok */
.calexpert-hero-slider .carousel-inner {
    aspect-ratio: 1700 / 405 !important;
    min-height: 300px !important; 
    max-height: 450px !important; 
}

/* --- A KULCS MEGOLDÁS: A dia dobozának is kötelező felvennie a 100% magasságot! --- */
.calexpert-hero-slider .carousel-item {
    height: 100% !important;
}

/* 3. A képek kitöltik a teret levágás nélkül */
.calexpert-hero-slider .carousel-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
    object-position: center center !important;
}


/* =========================================================
   SZÖVEGES DOBÓZ (CAPTION) ÉS GOMBOK FORMÁZÁSA
   ========================================================= */

/* Az elegáns sötétítő doboz, ami kiemeli a szöveget a képből */
.calexpert-hero-slider .carousel-caption {
    background: #494949d9 !important; /* 85%-os sötétkék/szürke áttetszőség */
    border-radius: 0px !important;
   /* border-top: 3px solid var(--color-primary) !important; /* Calexpert zöld díszcsík */
    
    /* Középre pozícionálás */
    bottom: 20% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    
    width: 80% !important;
    max-width: 600px !important;
    padding: 25px 30px 30px 30px !important;
    
    /* Visszakapcsoljuk a megjelenítést mobilon is (a Bootstrap alapból elrejti) */
    display: block !important; 
}

.calexpert-hero-slider .slider-title {
    color: var(--color-primary) !important; /* Calexpert Zöld */
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.calexpert-hero-slider .slider-text {
    color: #ffffff !important;
    font-size: 1.1rem !important;
    margin-bottom: 25px !important;
    line-height: 1.4 !important;
}

/* Akciógomb (Call to Action) */
.calexpert-hero-slider .slider-btn {
    background-color: transparent !important;
    border: 2px solid var(--color-primary) !important;
    color: #ffffff !important;
    padding: 10px 30px !important;
    font-weight: 600 !important;
    font-size: 1.05rem !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
}

.calexpert-hero-slider .slider-btn:hover {
    background-color: var(--color-primary) !important;
    color: #1e293b !important;
    box-shadow: 0 4px 15px rgba(141, 199, 63, 0.4) !important;
}

/* =========================================================
   MOBIL NÉZET FINOMHANGOLÁSA (Max 768px)
   ========================================================= */
@media (max-width: 768px) {
    .calexpert-hero-slider .carousel-caption {
        width: 90% !important;
        padding: 15px 20px 20px 20px !important;
        bottom: 5% !important;
    }
    .calexpert-hero-slider .slider-title {
        font-size: 1.3rem !important;
        margin-bottom: 5px !important;
    }
    .calexpert-hero-slider .slider-text {
        font-size: 0.9rem !important;
        margin-bottom: 15px !important;
        display: none !important; /* Mobilon elrejtjük a leírást, hogy csak a Cím és a Gomb maradjon! */
    }
    .calexpert-hero-slider .slider-btn {
        padding: 8px 20px !important;
        font-size: 0.9rem !important;
    }
}

/* =========================================================
   CASSIOPEIA GYÁRI AUTOMATIKUS TÉRKÖZÖK (1em) LENULLÁZÁSA
   ========================================================= */
.container-component > :first-child, 
.container-sidebar-left > :first-child, 
.container-sidebar-right > :first-child, 
.container-component > * + *, 
.container-sidebar-left > * + *, 
.container-sidebar-right > * + * {
    margin-top: 0 !important;
}

.btn-primary {
    background-color: var(--bg-color-button) !important;
    border-color: var(--color-primary) !important;
}

.btn-primary:hover {
    background-color: var(--color-primary) !important;
    box-shadow: 0 4px 15px rgba(0, 80, 136, 0.3) !important;
    transform: translateY(-2px) !important; /* Finom emelkedés kattintás előtt */
}

/* ============================================================================================================================
   "FELTÖLTÉS ALATT" (PLACEHOLDER) BLOKK DIZÁJN
   ============================================================================================================================ */
.calexpert-placeholder-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    background-color: #f8f9fa; /* A korábban használt elegáns, halvány szürke háttér */
    border: 2px dashed #cbd5e1; /* Szaggatott keret, ami a "munkafolyamatot" szimbolizálja */
    border-radius: 12px;
    padding: 50px 20px;
    margin: 40px 0;
    text-align: center;
}

.calexpert-placeholder-wrapper .placeholder-content {
    max-width: 550px;
}

.calexpert-placeholder-wrapper .placeholder-icon {
    font-size: 3.5rem;
    color: var(--color-primary, #0056b3); /* A Calexpert fő színe */
    margin-bottom: 25px;
    animation: placeholder-pulse 2s infinite; /* Finom lüktető animáció */
}

.calexpert-placeholder-wrapper h2 {
    font-size: 2rem !important;
    color: #1e293b !important;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
    text-transform: none !important; /* Felülírjuk az esetleges nagybetűs H2 szabályokat */
}

.calexpert-placeholder-wrapper p {
    color: #4b5057;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 35px;
}

.calexpert-placeholder-wrapper .placeholder-btn {
    background-color: var(--color-primary, #0056b3) !important;
    color: #ffffff !important;
    padding: 10px 25px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    border: none !important;
}

.calexpert-placeholder-wrapper .placeholder-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1) !important;
    opacity: 0.9;
}

/* Egyedi animáció az ikonnak, hogy vonzza a tekintetet */
@keyframes placeholder-pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

/* ============================================================================================================================
   "FELTÖLTÉS ALATT" (PLACEHOLDER) BLOKK DIZÁJN VÉGE
   ============================================================================================================================ */



/* ============================================================================================================================
   JOGI DOKUMENTUMOK (Adatkezelési tájékoztató stb.)
   ============================================================================================================================ */

/* Az olvasósáv középre zárása és szűkítése az olvashatóságért */
.legal-document-content {
    max-width: 900px !important;
    margin: 0 auto 60px auto !important;
    padding: 0 20px !important;
    color: #334155 !important;
}

/* Sorkizárt szöveg az elegáns megjelenéshez, elválasztással */
.legal-document-content.text-justify {
    text-align: justify !important;
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
    hyphens: auto !important;
}

/* Bekezdések közötti távolság */
.legal-section {
    margin-bottom: 40px !important;
}

.legal-section p {
    font-size: 1.05rem !important;
    line-height: 1.8 !important;
    margin-bottom: 15px !important;
}

/* Címsorok formázása */
.legal-section h3 {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 20px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #e2e8f0 !important; /* Vonal a címsor alatt */
}

/* Felsorolások (Listák) formázása */
.legal-section ul {
    margin-bottom: 25px !important;
    padding-left: 20px !important;
}

.legal-section ul li {
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    margin-bottom: 10px !important;
    color: #475569 !important;
}

/* Kiemelt Jogorvoslati doboz a lap alján */
.legal-contact-box {
    background-color: #f8fafc !important;
    border-left: 5px solid var(--color-primary) !important;
    padding: 30px !important;
    border-radius: 8px !important;
    margin-top: 50px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
}

.legal-contact-box h4 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 15px !important;
}

.legal-contact-box p {
    margin-bottom: 10px !important;
    line-height: 1.6 !important;
}

.naih-details {
    background-color: #ffffff !important;
    padding: 15px 20px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    font-family: monospace !important; /* Technikai, hivatali megjelenés a NAIH adatoknak */
    font-size: 0.95rem !important;
    color: #475569 !important;
    line-height: 1.8 !important;
}

/* ============================================================================================================================
   JOGI DOKUMENTUMOK (Adatkezelési tájékoztató stb.) VÉGE
   ============================================================================================================================ */