/* Základné štýly pre reštauračné menu plugin */
/* Author:BeART TM s.r.o.*/
/* Nastavenie box-sizing pre všetky elementy */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Kontajner celého menu */
.rm-menu-container {
    max-width: 1200px;
    margin: 30px auto;
    padding: 20px 20px 180px 10px; /* Zmenený ľavý padding na 10px */
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
    /* Pridáme transition pre max-height pre plynulú zmenu výšky */
    transition: max-height 0.2s ease-out; /* Skrátené na 0.2s pre rýchlosť */
    overflow: hidden; /* Dôležité pre max-height animáciu */
    
    /* --- Nové vlastnosti pre optimalizáciu výkonu --- */
    will-change: max-height; /* Naznačí prehliadaču, že sa max-height bude meniť */
    transform: translateZ(0); /* Vynúti GPU akceleráciu */
}

/* Navigácia/filter kategórií */
.rm-category-filter {
    display: flex; /* Použijeme flexbox */
    flex-wrap: wrap; /* Umožní zalomenie tlačidiel na nový riadok na malých obrazovkách */
    justify-content: center; /* Vycentruje tlačidlá */
    margin-bottom: 35px;
    padding-bottom: 15px;
    border-bottom: 2px solid #eee;
    padding: 0 10px; /* Upravíme padding pre lepšie okraje */
    overflow-x: unset; /* Zruší horizontálny posuvník */
    white-space: normal; /* Zruší zákaz zalomenia riadku */
}

.rm-filter-btn {
    flex-shrink: 0; /* Zabraňuje scvrkávaniu tlačidiel */
    background-color: #eee;
    color: #555;
    border: none;
    padding: 10px 20px;
    margin: 5px; /* Upravíme margin pre lepšie medzery */
    border-radius: 25px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.rm-filter-btn:hover {
    background-color: #e0e0e0;
    transform: translateY(-2px);
}

.rm-filter-btn.active {
    background-color: #d42323; /* Farba pizze Kohút pre aktívne tlačidlo */
    color: #fff;
    box-shadow: 0 4px 10px rgba(212, 35, 35, 0.3);
}

/* Sekcie kategórií */
.rm-category-section {
    opacity: 1;
    /* Transition pre opacity necháme, ale skrátime ho pre rýchlosť */
    transition: opacity 0.2s ease; /* Zmenené z 0.15s na 0.2s */
    margin-bottom: 40px; /* Medzera medzi sekciami kategórií */
    display: block; /* Defaultne zobrazené */

    /* --- Nové vlastnosti pre optimalizáciu výkonu --- */
    will-change: opacity; /* Naznačí prehliadaču, že sa opacity bude meniť */
    transform: translateZ(0); /* Vynúti GPU akceleráciu */
    position: relative; /* Potrebné pre absolútne pozicovanie scroll-up tlačidla */
}

.rm-category-section.hidden {
    opacity: 0;
    pointer-events: none; /* Zabraňuje interakcii, keď je skryté */
    /* display: none; bude nastavené cez JS po animácii opacity */
}

.rm-category-title {
    text-align: center;
    font-size: 32px;
    color: #333;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 3px solid #d42323; /* Farba pizze Kohút */
    display: inline-block; /* Aby sa border-bottom prispôsobil šírke textu */
    margin-left: auto;
    margin-right: auto;
    width: auto; /* Zabezpečí, že sa prispôsobí obsahu */
}

/* Kontajner pre položky menu v každej kategórii */
.rm-items-grid {
    display: grid; /* Použijeme CSS Grid pre rozloženie */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 2-3 stĺpce, podľa šírky */
    gap: 25px; /* Medzera medzi boxami */
    margin-top: 25px;
}

/* Každá položka menu ako box */
.rm-menu-item {
    display: flex; /* Použijeme flexbox vo vnútri položky pre zarovnanie obsahu */
    align-items: flex-start; /* Zarovná položky hore */
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Jemný tieň pre 3D efekt */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Plynulá animácia pri hover */
    /* min-height: 100px; */ /* Odstránené, aby sa výška prispôsobila obsahu */
}

.rm-menu-item:hover {
    transform: translateY(-3px); /* Mierne sa zdvihne pri hover */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* Obrázok/Ikona vľavo */
.rm-item-image {
    flex-shrink: 0; /* Nebude sa scvrkávať */
    width: 50px; /* Pevná šírka pre kontajner obrázku/ikony */
    height: 50px; /* Pevná výška */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 50%; /* Aby bol kruhový, ak chcete */
    background-color: #f0f0f0; /* Pozadie pre ikonu/obrázok */
    margin-right: 15px; /* Medzera od detailov */
}

.rm-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Pokryje celú oblasť bez deformácie */
    border-radius: 50%; /* Aby bol kruhový, ak chcete, inak 0 */
}

.rm-item-image .dashicons {
    font-size: 30px; /* Zmenšená veľkosť ikony pre 50x50px kontajner */
    color: #ccc; /* Farba ikony */
}

/* Detaily jedla (názov, zloženie, alergény) */
.rm-item-details {
    flex-grow: 1; /* Zaberie zvyšný priestor */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rm-item-title {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
    line-height: 1.2;
    display: flex; /* Aby číslo a názov boli na jednom riadku */
    align-items: center; /* Vertikálne zarovnanie */
    gap: 8px; /* Medzera medzi číslom a názvom */
}

/* Štýly pre číslo jedla */
.rm-item-number {
    font-size: 20px;
    font-weight: bold;
    color: #d42323; /* Farba pizze Kohút */
    /* margin-right: 8px; -> nahradené "gap" v .rm-item-title */
}

/* Špecificky pre text názvu v rámci h3, aby číslo malo svoje miesto */
.rm-item-details .rm-item-title .wp-post-title { /* Toto je defaultná trieda pre the_title(), ak ho WP zabalí */
    /* Môže byť potrebné upraviť v závislosti od konkrétnej implementácie */
    font-size: 22px; /* Predvolená veľkosť názvu na PC */
    color: #333; /* Predvolená farba názvu */
    font-weight: 700;
    display: inline; /* Zabezpečí, že názov nebude zalomený pod číslom */
}


.rm-item-description {
    font-size: 15px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 8px;
}

.rm-item-alergeny {
    font-size: 13px;
    color: #888;
    font-style: italic;
    margin-top: auto; /* Posunie alergény na spodok, ak je viac miesta */
}

/* Cena jedla */
.rm-item-price {
    flex-shrink: 0; /* Zabraňuje scvrkávaniu ceny */
    font-size: 22px;
    font-weight: bold;
    color: #d42323; /* Farba pizze Kohút */
    margin-left: 15px; /* Medzera od detailov */
    white-space: nowrap; /* Zabezpečí, že cena sa nezalomí */
    display: flex;
    align-items: center; /* Vycentruje cenu vertikálne */
}

/* --- Štýly pre tlačidlo "Scroll Up" --- */
.rm-scroll-up-btn {
    display: block; /* Zobrazí sa ako blokový element */
    width: fit-content; /* Prispôsobí sa šírke textu */
    margin: 20px auto 15px auto; /* Vycentruje ho a pridá medzeru od obsahu (zmenené) */
    padding: 10px 25px;
    background-color: #d42323; /* Farba pizze Kohút */
    color: #fff;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(212, 35, 35, 0.3);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.rm-scroll-up-btn:hover {
    background-color: #b31d1d; /* Tmavší odtieň pri hover */
    transform: translateY(-2px);
}

/* --- Štýly pre dátum aktualizácie --- */
.rm-last-updated-footer {
    display: block; /* Zabezpečí, že zaberá celý riadok */
    text-align: right; /* Zarovná text vpravo */
    font-size: 12px;
    color: #555; /* Zmenená farba na tmavšiu */
    margin-top: 20px; /* Zvýšená medzera od tlačidla/obsahu */
    padding-top: 5px;
    border-top: 1px solid #eee; /* Jemná čiara nad textom */
    width: 100%; /* Zabezpečí, že zaberá celú šírku */
}


/* -------------- MEDIA QUERIES (pre responzívny dizajn) -------------- */

@media (max-width: 992px) {
    .rm-items-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Prispôsobí stĺpce pre tablety */
    }
}

@media (max-width: 768px) {
    .rm-menu-container {
        padding-left: 10px; /* Zmenený ľavý padding na 10px pre mobil */
        padding-right: 10px; /* Zmenený pravý padding na 10px pre mobil */
    }

    .rm-items-grid {
        grid-template-columns: 1fr; /* Na mobiloch 1 stĺpec */
        gap: 20px;
    }

    .rm-menu-item {
        padding: 12px;
        margin-bottom: 20px; /* Pridaná medzera medzi položkami na mobiloch */
    }

    .rm-item-image {
        width: 45px; /* Mierne menší obrázok na mobile */
        height: 45px;
        margin-right: 12px;
    }

    .rm-item-image .dashicons {
        font-size: 28px;
    }

    .rm-item-title {
        font-size: 20px; /* Celková veľkosť h3 */
        gap: 5px; /* Menšia medzera na mobile */
    }

    .rm-item-number {
        font-size: 18px; /* Mierne menšie číslo na mobile */
    }

    .rm-item-details .rm-item-title .wp-post-title {
        font-size: 20px; /* Zabezpečí, že text názvu sa zmenší na mobile */
    }

    .rm-item-description {
        font-size: 14px;
        word-break: break-word; /* Zabezpečí zalomenie dlhých slov */
    }

    .rm-item-alergeny {
        font-size: 12px; /* Mierne menšie alergény na mobile */
        word-break: break-word; /* Zabezpečí zalomenie dlhých slov */
    }

    .rm-item-price {
        font-size: 20px;
        margin-left: 10px;
    }

    .rm-scroll-up-btn {
        padding: 8px 20px;
        font-size: 13px;
    }

    /* Úpravy pre dátum aktualizácie na mobiloch */
    .rm-last-updated-footer {
        font-size: 13px; /* Zväčšený font pre lepšiu čitateľnosť na mobiloch */
        padding-left: 10px; /* Pridané horizontálne odsadenie */
        padding-right: 10px; /* Pridané horizontálne odsadenie */
        line-height: 1.4; /* Zabezpečí dostatočnú výšku riadku */
    }
}

/* Štýly pre fallback ikonu */
.rm-fallback-icon {
    display: flex !important; /* Dôležité pre správne zarovnanie */
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}