/* Základné štýly pre menu */
.smartfish-menu {
    background-color: var(--main-blue);
    padding: 20px;
    width: 100%;
    margin: 0 auto;
    border-top: 2px solid var(--bg-surface);
}

.menu-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    /* TOTO je hlavná zmena - vycentruje položky */
    align-items: flex-start;
    gap: 15px;
    /* Medzera 15px medzi položkami ostane zachovaná */
    width: 100%;
    flex-wrap: wrap;
}

.menu-item {
    width: 200px;
    /* Nastav si "rozumnú šírku", napr. 180px až 220px */
    display: flex;
    flex-direction: row;
    align-items: center;
    /* Aby bola ikona aj text výškovo v strede */
    justify-content: center;
    /* Aby bol obsah vnútri elementu v strede */
    padding: 15px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    color: var(--bg-surface);
    box-sizing: border-box;
    /* Zabezpečí, že padding nenafúkne nastavenú šírku */
}


/* Zvýraznenie aktívnej položky (Etapa 2) */
.menu-item .active {
    color: var(--accent-brown);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.step-label {
    font-size: 1.1em;
    line-height: 1.2;
    counter-reset: var(--bg-surface);

}

.menu-item.active .step-label {
    color: var(--accent-green);
}

.step-title {
    font-size: 0.85em;
    line-height: 1.5;
    /*text-transform: uppercase;*/
    color: var(--accent-brown);
}

.step-title.active {
    font-size: 0.85em;
    color: var(--accent-green);
    line-height: 1.2;
}

/* Tvoj doterajší kód ostáva nezmenený pre PC */

@media (max-width: 768px) {
    .menu-list {
        gap: 5px;
        /* Odporúčam zmenšiť medzeru (pôvodne 15px), aby sa ušetrilo miesto */

    }

    .menu-item {
        width: 25%;
        /* Zrušíme fixnú šírku 200px */
        /*padding: 3px 3px;*/
        /* Zmenšíme padding, aby ostalo viac miesta pre text/ikonu */
        flex-direction: column;
        /* VOLITEĽNÉ: Ak máš ikonu a text, na mobile vyzerá lepšie ikona NAD textom, aby to nebolo príliš stlačené */
        font-size: 14px;
        /* Zmenšenie textu, aby sa vošiel */
    }

    .smartfish-menu {
        background-color: var(--main-blue);
        padding: 5px;
        width: 100%;
        margin: 0 auto;
        border-top: 2px solid var(--bg-surface);
    }
}

.hidden-action-menu {
    /* 1. TOTO PRIDAJ: Vytrhne element z HTML a prestane naťahovať stránku */
    position: fixed;
    top: 0px;
    left: 0;
    width: 100%;
    /* Alebo konkrétnu šírku, napr. 300px, ak to nemá byť na celú obrazovku */

    z-index: 9999;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.85);

    /* 2. Predvolený stav - schované 100% svojej výšky smerom nahor */
    transform: translateY(-100%);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.hidden-action-menu.reveal {
    /* 3. Zobrazený stav - skĺzne na pozíciu top: 0 */
    transform: translateY(0);
    top: 75px;
}