/* custom.css */

/* Célpont: Minden modul, amely a háromoszlopos szekció középső (most 12-es) oszlopában van */
#three-column-section .col-md-12 > div.moduletable {
    /* Alsó margó hozzáadása, ami 10px-es helyet hagy a következő modul előtt */
    margin-bottom: 10px !important;
}#three-column-section .col-md-12 > div.moduletable:last-child {
    /* Eltávolítja az alsó margót az utolsó modultól, hogy a pozíció alján ne legyen felesleges tér */
    margin-bottom: 0 !important;
}

/* --- HÁTTÉRKÉP BEÁLLÍTÁSA A col-3-left POZÍCIÓHOZ --- */

/* Célpont: A bal oldali 3/12-es oszlop a three-column-section szekcióban */
#three-column-section .col-md-4 {
    /* 1. Kép forrásának beállítása (cserélje le az útvonalat, ha szükséges!) */
 /*   background-image: url("https://horecahpix.hu/images/headers/www_122009401_main_ONc4yo9.jpg"); */

    background-color: blue;
    /* 2. Háttérkép méretezése és pozíciója */
    background-size: cover;          /* A kép arányosan kitölti a rendelkezésre álló területet */
    background-position: center center; /* Középre igazítja a képet */
    background-repeat: no-repeat;    /* Megakadályozza a kép ismétlődését */
    
    /* 3. Ha fix 400px magasságot is szeretne (a korábbi példák alapján) */
    max-height: 300px;
    height: 300px; 
    overflow: hidden; 
    
    /* 4. Fontos: A háttérkép előtt megjelenő szöveg láthatóságának biztosítása */
    color: white; /* Ha a háttér sötét, a szöveg legyen világos */
    
    /* 5. A tartalom és a háttérkép elválást segítő kitöltés */
    padding: 20px; /* Hagy egy kis teret a szöveg és a szél között */
}

/* Kényszerítjük a modult, hogy rejtett legyen mobil nézetben */

@media (max-width: 1100px) {
    .module-cont[data-mod-id="193"] {
        display: none !important;
    }
}

/* A széles képernyőkön ez a beállítás marad érvényben (767px felett) */
.module-cont[data-mod-id="201"] {
    display: none !important;
}

/* --- 2. LÁTHATÓVÁ TÉTEL: CSAK MOBIL KÉPERNYŐN (767px alatt) --- */
@media (max-width: 1101px) {
    
    /* Felülírjuk az alapértelmezett beállítást, láthatóvá téve a modult */
    .module-cont[data-mod-id="201"] {
        display: flex !important; /* Vagy 'block', ha az eredeti modul nem flexbox-ot használt */
    }
}

/* Áttetsző gomb fehér kerettel, lekerekített sarkokkal és 3D hatással */
.custom-btn {
  display: inline-block;
  padding: 12px 24px;
  color: #fff;                      /* fehér szöveg */
  text-decoration: none;
  border: 1px solid #fff;           /* vékony fehér keret */
  border-radius: 8px;              /* lekerekített sarkok */
  background-color: transparent;   /* áttetsző háttér */
  font-size: 18px;
  font-weight: bold;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3); /* 3D hatás */
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Hover állapot */
.custom-btn:hover {
  background-color: rgba(255,255,255,0.1);
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0,0,0,0.4);
  color: #ccc;
}

/* Fénycsík animáció hoverkor */
.custom-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: all 0.5s ease;
}

.custom-btn:hover::before {
  left: 100%;
}
/* Mobil nézet: A gomb kb. feleakkora lesz (600px szélesség alatt) */
@media (max-width: 768px) {
    
    .custom-btn {
        /* Párnázás (padding) csökkentése kb. felére (12px 24px -> 6px 12px) */
        padding: 6px 12px;
        
        /* Betűméret csökkentése (18px -> 12px) */
        font-size: 12px;
        
        /* Árnyék csökkentése a diszkrétebb megjelenésért */
        box-shadow: 0 2px 3px rgba(0,0,0,0.3); 
    }

    /* Hover állapot módosítása mobilra: A 3D hatás (transform) kisméretű gomboknál zavaró lehet, de maradhat */
    .custom-btn:hover {
        transform: none; /* Kikapcsolhatja a mozgást, ha a felhasználó érintőképernyőt használ */
        box-shadow: 0 3px 4px rgba(0,0,0,0.4);
    }
}

/* FEJLÉCEK */
@media only screen and (max-width: 768px) {
  h1 {
    font-size: 20px !important; 
  }
  h2 {
    font-size: 10px !important; 
  }
  h3 {
    font-size: 11px !important; 
  }

}

.hpix_fejl1 {
    font-size: 43px; /* Alapértelmezett méret asztali gépen */
    color: #4f4f4f;
    font-family: 'Bahnschrift'
  }
@media (max-width: 600px) {
    .hpix_fejl1 {
        font-size: 26px;
    }
}

.hpix_fejl2 {
    font-size: 24px; /* Alapértelmezett méret asztali gépen */
    color: #4f4f4f;
    font-family: 'Bradley Hand ITC'
  }
@media (max-width: 600px) {
    .hpix_fejl2 {
        font-size: 20px;
    }
}


/* TERMÉKDOBOZ  */
/* Termékkártya alapstílus */
.product-item {
    /* 1px margó: felül 0, oldalt 1px, alul 1px 
    margin: 0 1px 0px 0px;  */
  
    /* Fehér háttér, hogy elkülönüljön az oldal háttérétől */
    background-color: #f9f9f9; 
    
    /* Diszkrét, nagyon világos szürke keret, hogy kiemelje a kártyát */
    border: 1px solid #dddddd; 
    
    /* Enyhe lekerekítés, modern megjelenésért */
    border-radius: 8px; 
    
    /* Belső párnázás, hogy a tartalom ne tapadjon a kerethez */
    padding: 12px; 
    
    /* Átmenet a hover effekthez */
    transition: all 0.3s ease; 
  
  /* x-eltolás | y-eltolás | elmosódás | terjedés | szín (félig átlátszó fekete) */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Hover effektus: Kiemeli az éppen kiválasztott kártyát */
.product-item:hover {
    /* Kisebb emelkedés (kissé felfelé mozog) */
    transform: translateY(-2px); 
    
    /* Erősebb árnyék a kiemeléshez */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); 
}
.product-list-container { 
      /* 3px távolság oszlopok (vízszintesen) és sorok (függőlegesen) között */
    gap: 3px; 
}

/* MOBIL KÉPERNYŐK KÜLÖN KEZELÉSE  */
/* Alapértelmezett beállítás: mindenhol rejtve */
.show-mobile-only {
    display: none !important;
}
@media (max-width: 768px) {
    .show-mobile-only {
        display: block !important; /* Vagy 'flex', 'inline-block' stb., a tartalom típusától függően */
    }
}

.hide-mobile-only {
    display: block; 
}
@media (max-width: 768px) {
    .hide-mobile-only {
        display: none !important; /* Felülírja az alapértelmezett beállítást mobil nézetben */
    }
}


/* Full1-top pozíció  */

.fullwidth-container {
    
  /* Szélesség 100%-ra kényszerítése */
    width: 100%;
    
    /* Fontos: A fix sablon szélességek felülírása */
    max-width: 100% !important; 
    
    /* A sablonból örökölt oldalsó padding/margók eltávolítása */
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

/* Opcionális: biztosítja, hogy a belső modulok is a teljes szélességet kitöltsék */
#full1-top-position .moduletable {
    padding: 0;
    margin: 0;
}


/* --- FELÜLÍRÁS NAGY KÉPERNYŐN, HA A PROBLÉMA OTT IS FENNÁLL (KÉT KÁRTYA TÖRIK) --- */
/* Ez megoldja azt a problémát, hogy széles képernyőn a 3. kártya letörik: */
/* Valószínűleg a szülő konténer túl szűk. Ezzel a kártyákat kényszerítjük az egyharmados szélességre. */
.oss-card.col-md-4 {
    /* Az !important gyakran szükséges a kiterjesztés fix beállításainak felülírásához */
    width: 33.3333% !important; 
    float: left !important;
}