:root {
	--szin-fej-hatter: #313131;
	--szin-fej-szoveg: #d6d6d6;
	--szin-fej-link: #BE0969;
	
	--szin-menu-hatter: #6f6f6f;
	--szin-menu-szoveg: #d6d6d6;
	--szin-menu-link: #d6d6d6;
	
	--szin-tartalom-hatter: #f4f4f4;
	--szin-tartalom-szoveg: #483439;
	--szin-tartalom-link: #BE0969;

	--szin-gomb-hatter: red;
	--szin-gomb-szoveg: white;
	--szin-gomb-inaktív: gray;	
	
	--grid-gap: 20px;
    --grid-padding: 20px;	
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: var(--szin-tartalom-hatter, #ffffff);
    color: var(--szin-tartalom-szoveg, #333);
    display: flex;
    flex-direction: column;
    min-height: 100vh; 
}

a {
    text-decoration: none;
}

/* Alap konténer, amely a mobil nézetben teljes szélességű */
body > * {
    width: 100%;
    padding: 10px;
}


header {
    background-color: var(--szin-fejlec-hatter, #333);
    color: var(--szin-fejlec-szoveg, #fff);
    align-items: center;		
}
header .limiter {
	display: flex;
    justify-content: space-between;
}
.limiter {
    
}
header h1 {
    font-size: 1.4em;
}
header h1 img {
	width:280px;
}
.user-area {
	text-align:right;
}

.user-area img {
	width:40px;
	margin-left:10px;
	margin-right:10px;
}

/* MENU - Fő navigáció */
.main-menu {
    background-color: var(--szin-menu-hatter, #333);
    padding: 0;
}

.main-menu ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.main-menu li a {
    display: block;
    padding: 10px 0;
    color: var(--szin-menu-szoveg, #fff);
    border-bottom: 1px solid #666;
}

.main-menu li:last-child a {
    border-bottom: none;
}

/* SECTION - Fő tartalom */
.main-content {
    background-color: var(--szin-tartalom-hatter, #fff);
    padding: 20px 10px;
    flex-grow: 1; 
}

/* FOOTER - Lábléc */
footer {
    background-color: var(--szin-fej-hatter, #333);
    color: var(--szin-fej-szoveg, #fff);
    font-size: 0.8em; 
	padding:0px;
}
footer a {
	color:var(--szin-fej-link, #fff);
}
.foot_one {
	background-color: var(--szin-menu-hatter, #555);
	padding: 15px 10px;
}
.foot_one a {
	color:var(--szin-menu-link, #fff);
}
.foot_two {
	padding: 15px 10px;
}






/* RÁCSRENDSZER */
.grid-container {
    display: grid;
    gap: var(--grid-gap);
    padding: var(--grid-padding) 0;
    list-style-type: none; 
}
.grid-cols-2 {
    display: grid;
    gap: var(--grid-gap);
    padding: var(--grid-padding) 0;
    list-style-type: none;
	grid-template-columns: 1fr;
}
.grid-cols-3 {
    display: grid;
    gap: var(--grid-gap);
    padding: var(--grid-padding) 0;
    list-style-type: none;
	grid-template-columns: 1fr;
}
.grid-cols-4 {
    display: grid;
    gap: var(--grid-gap);
    padding: var(--grid-padding) 0;
    list-style-type: none;
	grid-template-columns:  1fr;
}




/*Általános szövegformázás */
.kiemelt {
	font-weight:bold;
	font-style:italic;
}
.jtext {
	text-align:justify-content;
}


/* ŰRLAPOK ÉS INPUT MEZŐK EGYSÉGESÍTÉSE */



input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    /* Alap megjelenés mobil nézethez */
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px;
    
    /* Általános betűtípus és méret öröklése */
    font-size: 1rem;
    line-height: 1.5;
    
    /* Alap keret és háttér */
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 4px;
    
    /* Áttűnés a fókuszhatáshoz */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    
    /* A Safari és Chrome natív megjelenésének kikapcsolása */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; 
}

/* Fókusz (Amikor a felhasználó a mezőbe kattint) */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    /* A keret kiemelése a gomb színével */
    border-color: var(--szin-gomb-hatter);
    /* Enyhe árnyék a fókuszhatás erősítésére */
    box-shadow: 0 0 0 3px rgba(var(--szin-gomb-hatter), 0.2); 
    outline: none; /* A böngésző alapértelmezett outline-jának kikapcsolása */
}


/* ======================================================== */
/* SELECT (DROP-DOWN) MEZŐK STÍLUSOZÁSA ÉS A NYÍL ÁTSZÍNEZÉSE */
/* ======================================================== */

select {
    /* Az appearance: none; elrejti a natív nyilat */
    /* Most létrehozunk egy egyedi nyilat a háttérkép segítségével */
    
    /* Egyedi, CSS-sel kódolt SVG nyíl a gomb színével */
    /* Ez egy BASE64 kódolt SVG, amiben a 'red' szín van a 'fill' résznél */
    /* A piros helyére be kell írni az Ön --szin-gomb-hatter változójának értékét! */
    /* Ha a --szin-gomb-hatter = #ff0000 (red), akkor a szín: %23ff0000 */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22red%22%20d%3D%22M7%2010l5%205%205-5z%22%2F%3E%3C%2Fsvg%3E");
    
    background-repeat: no-repeat;
    background-position: right 10px top 50%;
    background-size: 16px 16px;
    padding-right: 35px; /* Helyet hagyunk a nyílnak */
}

select::-ms-expand {
    display: none; /* IE/Edge nyíl elrejtése */
}



/* Alap gomb stílusok */
button,
input[type="submit"],
input[type="button"] {
    display: inline-block;
    padding: 12px 25px;
    margin-top: 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    text-align: center;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    
    /* Gomb színek alkalmazása */
    background-color: var(--szin-gomb-hatter);
    color: var(--szin-gomb-szoveg);
}

/* Gomb lebegtetés/hover */
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    opacity: 0.9;
}

/* Inaktív (disabled) állapot */
button:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled {
    background-color: var(--szin-gomb-inaktív);
    cursor: not-allowed;
    opacity: 1;
}


/* A hamburger gomb stílusa: */
.hamburger-toggle {
    display: block; 
    background: none;
    border: none;
    color: white;
    font-size: 2em;
    padding: 5px 10px;
    cursor: pointer;
    text-align: right;
    width: 100%; 
}

.main-menu ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    text-align: center;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.main-menu ul.is-open {
    max-height: 500px;
}




/* Ha szükséges a mobil és az asztali nézet különbsége: */
@media (min-width: 768px) {
    .form-group {
        display: flex; /* Csoportosítás a jobb elrendezésért */
        gap: 20px;
    }
    .form-group input {
        flex: 1; /* Egyforma szélesség több mezőnek egy sorban */
    }
}










/*webshop*/
/* 1. Alap konténer */
.shop-layout {
    display: flex;
    flex-direction: column; /* Mobil nézetben függőleges elrendezés */
}

/* 2. Mobil Szűrő Gomb */
.btn-filter-mobile {
    display: block; /* Látható mobil nézetben */
    width: 100%;
    margin-bottom: 20px;
    padding: 10px;
    background-color: var(--ceg-alapszin-1);
    color: white;
    border: none;
    cursor: pointer;
}

/* 3. Szűrő Oldalsáv (Alapértelmezett: Elrejtve mobil nézetben) */
.filter-sidebar {
    /* Abszolút pozicionálás és lecsúszó hatás beállítása */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    max-height: 0; /* Rejtett állapot */
    overflow: hidden;
    background-color: #ffffff;
    padding: 0 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
}

/* 4. A Megnyitott Szűrő Állapota (JS adja hozzá) */
.filter-sidebar.is-open {
    max-height: 80vh; /* Megjelenik és lecsúszik */
    padding: 20px;
}

/* 5. Terméklista (Grid) */
.product-grid {
    width: 100%; /* Mobil nézetben teljes szélesség */
}



/* 768px-től nagyobb képernyőkre (tablet és asztali) */
@media (min-width: 768px) {
    .hamburger-toggle {
        display: none;
    }
    .main-menu ul {
        max-height: none; 
        flex-direction: row; 
    }
    .limiter {
        max-width: 1600px;
        margin: 0 auto;
       
    }
    header h1 {
        font-size: 2em;
    }
    .main-menu ul {
        flex-direction: row;
        justify-content: center;
    }
    .main-menu li a {
        padding: 15px 20px;
        border-bottom: none;
        border-right: 1px solid #666;
    }
    .main-menu li:last-child a {
        border-right: none;
    }
    .main-content {
        padding: 40px 20px;
    }
	.grid-cols-2 {
		grid-template-columns: repeat(2, 1fr);
	}
	.grid-cols-3 {
		grid-template-columns: repeat(2, 1fr);
	}
	.grid-cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
	
}





/* 1024px-től nagyobb képernyőkre */
@media (min-width: 1024px) {
	.grid-cols-2 {
		grid-template-columns: repeat(2, 1fr);
	}
	.grid-cols-3 {
		grid-template-columns: repeat(3, 1fr);
	}
	.grid-cols-4 {
		grid-template-columns: repeat(3, 1fr);
	}
	
	.shop-layout {
        display: grid;
        gap: var(--grid-gap);
        /* Egy oszlop a szűrőnek (fix szélesség), egy a termékeknek (többi hely) */
        grid-template-columns: var(--szuro-szelesseg) 1fr;
    }

    /* 2. Mobil Szűrő Gomb Elrejtése */
    .btn-filter-mobile {
        display: none;
    }

    /* 3. Szűrő Oldalsáv Megjelenítése Asztali Nézetben */
    .filter-sidebar {
        position: static; /* Visszaállítjuk a normál helyzetbe */
        max-height: none; /* Mindig látszik */
        padding: 0;
        box-shadow: none;
    }

    /* 4. Terméklista (elfoglalja a második oszlopot) */
    .product-grid {
        /* A grid-responsive osztály már kezeli az oszlopok számát a termékeken belül */
        width: 100%;
    }
	
}

@media (min-width: 1600px) {
	.grid-cols-2 {
		grid-template-columns: repeat(2, 1fr);
	}
	.grid-cols-3 {
		grid-template-columns: repeat(3, 1fr);
	}
	.grid-cols-4 {
		grid-template-columns: repeat(4, 1fr);
	}
	
}