/* Media Queries a responzivní úpravy - ORGANIZED & SAFE VERSION */



@media (max-width: 768px) {



    /* ==========================================================================

       ČÁST 1: VEŘEJNÉ ZOBRAZENÍ (To, co vidí zákazník na mobilu)

       ========================================================================== */



    /* --- 1. GLOBÁLNÍ RESET --- */

    /* Deaktivace animace flipu na mobilních zařízeních */

    .menu-item-flip-container,

    .menu-item-flipper { display: contents; }

    .menu-item-face { position: static; backface-visibility: visible; }

    .menu-item-back { display: none; }



    /* --- 2. HEADER (Mobile Slim) --- */

    header {

        flex-direction: row; align-items: center; justify-content: space-between;

        padding: 12px 15px; gap: 10px;

        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);

    }

    header.scrolled {

        padding: 12px 15px; background: rgba(255, 255, 255, 0.98);

    }



    /* Logo na mobilu */

    header .logo { display: flex; width: auto; padding: 0; gap: 0; flex-shrink: 0; }

    header .logo h1 { font-size: 1.3rem; margin: 0; text-align: left; line-height: 1; color: #fff; }

    header.scrolled .logo h1 { color: var(--primary-color); }

    .header-info { display: none !important; }



    /* Navigace na mobilu */

    header nav { order: 2; flex: 1; padding: 0; width: auto; }

    header nav ul {

        display: flex; flex-wrap: nowrap; width: 100%; gap: 4px; margin: 0; margin-left: auto; max-width: 320px;

        background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(5px);

        border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; padding: 3px;

    }

    header.scrolled nav ul { background: #f0f0f0; border-color: transparent; backdrop-filter: none; }

    header nav ul li { flex: 1; display: flex; }

    #delivery-open-li-mobile { display: flex; }



    /* Styl tlačítek v navigaci */

    header nav ul li a.nav-link,

    header nav ul li button.nav-link {

        flex: 1; background: transparent; color: #fff; border: none; border-radius: 9px;

        padding: 6px 4px; font-size: 0.8rem; font-weight: 600; box-shadow: none;

        transition: all 0.2s ease; white-space: nowrap; display: inline-flex;

        align-items: center; justify-content: center; line-height: 1.3;

    }

    header.scrolled nav ul li a.nav-link,

    header.scrolled nav ul li button.nav-link { color: #333; }



    /* Tlačítko "Rozvoz" */

    header nav ul li button.delivery-open {

        background: var(--primary-color); color: #fff !important; border-color: var(--primary-color);

        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); font-weight: 700;

    }

    header.scrolled nav ul li button.delivery-open { box-shadow: none; }



    /* Hover efekty */

    header nav ul li a.nav-link:hover,

    header nav ul li button.nav-link:hover { transform: none; box-shadow: none; background: rgba(255, 255, 255, 0.2); }

    header.scrolled nav ul li a.nav-link:hover,

    header.scrolled nav ul li button.nav-link:hover { background: #e0e0e0; color: var(--primary-color); border-color: transparent; }

    header nav ul li button.delivery-open:hover { background: color-mix(in srgb, var(--primary-color) 90%, black); color: #fff !important; }

    header nav ul li a.nav-link::after, header nav ul li button.nav-link::after { display: none; }



    /* Ikona Rozvozu (Chytrá barva) */

    #delivery-open-btn-mobile svg { color: #fff !important; fill: #fff !important; transition: all 0.3s ease; }

    header.scrolled #delivery-open-btn-mobile svg { color: var(--primary-color) !important; fill: var(--primary-color) !important; }



    /* --- 3. ROZVOZ TLAČÍTKA (Obsah stránky) --- */

    .delivery-buttons-desktop { display: none !important; }

    .delivery-buttons-mobile {

        display: none !important; width: 100%; justify-content: center; gap: 15px;

        margin-top: 10px; flex-wrap: wrap; min-height: 45px;

    }

    .delivery-buttons-mobile.has-visible { display: flex !important; }



    /* --- 4. HERO & CONTENT --- */

    .hero { padding: 100px 20px 20px; }

    .hero-text h1 { font-size: 2rem; }

    .hero-text p { font-size: 1.1rem; }

    .single-review-bubble { max-width: 90%; min-width: 280px; padding: 16px 20px; }



    /* --- 5. CATEGORY FILTERS --- */

    #category-filters {

        position: sticky; top: 60px; z-index: 98;

        background: rgba(250, 250, 250, 0.98); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);

        border-bottom: 1px solid #e0e0e0; margin: 0; width: 100vw; margin-left: calc(-50vw + 50%);

        box-sizing: border-box; padding: 12px 0; padding-left: 25px; padding-right: 15px;

        display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start;

        gap: 6px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;

        scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none;

    }

    #category-filters::-webkit-scrollbar { display: none; }

    .filter-dot { display: none !important; }

    #category-filters .filter-item:first-child { margin-left: 5px; }



    .filter-item {

        flex: 0 0 auto; padding: 0; position: relative; z-index: 1;

        transition: margin 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); margin: 0;

    }

    .filter-item.active { z-index: 10; margin: 0 8px; }



    .filter-label {

        display: flex; align-items: center; justify-content: center; padding: 8px 18px;

        font-size: 0.9rem; color: #555; font-weight: 600; white-space: nowrap;

        background: #fff; border: 1.5px solid #ddd; border-radius: 25px; line-height: 1.2;

        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, background-color 0.2s ease, border-color 0.2s ease;

        transform: scale(1); transform-origin: center center;

    }

    .label-text {

        display: block; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

        transform-origin: center center; transform: scale(1);

    }



    /* Aktivní stav */

    .filter-item.active .filter-label {

        background: var(--primary-color); border-color: var(--primary-color); color: #fff; font-weight: 700;

        transform: scale(1.05); box-shadow: 0 6px 15px color-mix(in srgb, var(--primary-color) 40%, transparent);

    }

    .filter-item.active .filter-label .label-text { transform: scale(1.20); }

    .filter-item:not(.active) .filter-label { background: #f9f9f9; opacity: 0.9; transform: scale(1); }



    /* --- 6. MENU ITEMS (Mobile List View) --- */

    .menu-item {

        width: 100%; max-width: 100%; min-height: 80px;

        padding: 34px 12px 26px 12px;

        display: flex; flex-direction: row; align-items: flex-start; gap: 12px;

        margin-bottom: 8px; border-radius: 12px; position: relative;

    }

    .menu-item-content-mobile {

        flex: 1; display: flex; flex-direction: column; min-width: 0; justify-content: flex-start; height: 100%;

    }

    .menu-item-title-row {

        display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px;

    }

    .menu-item h3 {

        margin: 0; margin-right: 10px; font-size: 1rem; line-height: 1.2; text-align: left; flex: 1; min-width: 0;

    }

    .menu-item p {

        margin: 0; font-size: 0.8rem; color: #666; line-height: 1.2; text-align: left;

    }

    .price {

        font-size: 1rem; margin: 0; flex-shrink: 0; min-width: 75px; text-align: right; line-height: 1.2;

    }

    /* Štítky */

    .category-tag {

        position: absolute; top: 0px; left: 0px; padding: 2px 8px;

        border-radius: 12px 0px 10px 0px; border-top: none; border-left: none; font-size: 0.75rem; line-height: 1.2;

    }

    .recommended-tag {

        position: absolute; top: 0px; right: 0px; padding: 2px 8px;

        border-radius: 0px 12px 0px 10px; border-top: none; border-right: none; z-index: 3; font-size: 0.75rem; line-height: 1.2;

    }

    .photo-indicator {

        position: absolute; top: auto; bottom: 0px; right: 0px; padding: 2px 8px;

        font-size: 0.75rem; font-weight: 600; border-radius: 10px 0px 12px 0px;

        border: 1px solid rgba(40, 167, 69, 0.2); border-bottom: none; border-right: none; z-index: 3; line-height: 1.2;

    }





    /* ==========================================================================

       ČÁST 2: ADMIN NÁSTROJE (Mobile)

       Zobrazí se pouze, pokud je uživatel přihlášený (CSS třídy se aplikují)

       ========================================================================== */



    /* Admin Bar (Nahoře) */

    #admin-bar {

        flex-direction: column; padding: 12px 10px; gap: 10px; align-items: stretch;

        margin-top: 60px; /* Odsazení pro mobilní fixed header */

    }

    .admin-action-btn { font-size: 0.95rem; padding: 12px 16px; text-align: center; }



    /* Admin Tlačítka na kartě jídla */

    .admin-controls { top: 3px; right: 3px; }



    /* Editace kartičky (rozbalený formulář) */

    .menu-item.editing {

        width: 100%; max-width: 100%; flex-direction: column; padding: 15px;

    }



} /* Konec @media (max-width: 768px) */









/* ================================================================= */

/* IPAD AIR 2022 - PORTRAIT (NA VÝŠKU) */

/* ================================================================= */

@media screen and (min-width: 768px) and (max-width: 991px) and (orientation: portrait) {

    

    /* HLAVIČKA */

    header {

        display: flex !important;

        flex-wrap: wrap !important;

        align-items: center !important;

        justify-content: flex-start !important;

        padding: 10px 15px !important;

        gap: 0 !important;

    }

    

    /* LOGO */

    .logo {

        order: 1 !important;

        flex: 0 0 auto !important;

        margin: 0 8px 0 0 !important;

    }

    

    /* KONTAKTY */

    .header-info {

        order: 2 !important;

        flex: 0 0 auto !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;

        justify-content: center !important;

        margin: 0 !important;

        padding: 0 !important;

        gap: 4px !important;

        position: static !important;

        transform: none !important;

        left: auto !important;

        right: auto !important;

    }

    

    /* TELEFONNÍ ČÍSLO - POSUN DOPRAVA */

    .header-info .contact-info {

        margin: 0 !important;

        padding: 0 !important;

        display: flex !important;

        align-items: center !important;

        gap: 6px !important;

    }

    

    .header-info .contact-info a {

        font-size: 0.85rem !important;

        white-space: nowrap !important;

        text-align: left !important;

        display: flex !important;

        align-items: center !important;

        gap: 6px !important;

        margin-left: 22px !important; /* POSUN DOPRAVA - číslo zarovnané s "Otevřeno" */

    }

    

    /* Ikona telefonu */

    .header-info .contact-info svg,

    .header-info .contact-info i,

    .header-info .contact-info::before {

        width: 16px !important;

        height: 16px !important;

        flex-shrink: 0 !important;

    }

    

    /* OTEVÍRACÍ DOBA - BEZ POSUNU */

    .header-info .opening-status-wrapper {

        margin: 0 !important;

        padding: 0 !important;

        display: flex !important;

        align-items: center !important;

        gap: 6px !important;

    }

    

    .header-info .opening-status-wrapper span {

        font-size: 0.85rem !important;

        white-space: nowrap !important;

        text-align: left !important;

        display: flex !important;

        align-items: center !important;

        gap: 6px !important;

    }

    

    /* Ikona otevírací doby */

    .header-info .opening-status-wrapper svg,

    .header-info .opening-status-wrapper i,

    .header-info .opening-status-wrapper::before {

        width: 16px !important;

        height: 16px !important;

        flex-shrink: 0 !important;

    }

    

    /* NAVIGACE */

    nav {

        order: 3 !important;

        flex: 0 0 auto !important;

        margin: 0 0 0 auto !important;

        padding: 0 !important;

    }

    

    nav ul {

        gap: 6px !important;

        margin: 0 !important;

        padding: 0 !important;

    }

    

    nav .nav-link {

        white-space: nowrap !important;

        padding: 8px 12px !important;

    }

    

    /* ROZVOZOVÁ TLAČÍTKA */

    .delivery-buttons-desktop { 

        display: none !important; 

    }

    

    #delivery-open-li-mobile { 

        display: block !important; 

    }

    

    .delivery-buttons-mobile:not([style*="display"]) { 

        display: none !important; 

    }

    

    .delivery-buttons-mobile {

        order: 4 !important;

        width: 100% !important;

        justify-content: center !important;

        gap: 15px !important;

        padding-top: 10px !important;

    }

}



/* ================================================================= */

/* IPAD AIR 2022 - LANDSCAPE (NA ŠÍŘKU) */

/* ================================================================= */

@media screen and (min-width: 768px) and (max-width: 1194px) and (orientation: landscape) {

    

    /* HLAVIČKA */

    header {

        display: flex !important;

        flex-wrap: wrap !important;

        align-items: center !important;

        justify-content: flex-start !important;

        padding: 10px 10px !important;

        gap: 0 !important;

    }

    

    /* LOGO */

    .logo {

        order: 1 !important;

        flex: 0 0 auto !important;

        margin: 0 5px 0 0 !important;

    }

    

    /* KONTAKTY */

    .header-info {

        order: 2 !important;

        flex: 0 0 auto !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;

        justify-content: center !important;

        margin: 0 !important;

        padding: 0 !important;

        gap: 3px !important;

        position: static !important;

        transform: none !important;

        left: auto !important;

        right: auto !important;

    }

    

    /* TELEFONNÍ ČÍSLO - POSUN */

    .header-info .contact-info {

        margin: 0 !important;

        padding: 0 !important;

        display: flex !important;

        align-items: center !important;

        gap: 5px !important;

    }

    

    .header-info .contact-info a {

        font-size: 0.8rem !important;

        white-space: nowrap !important;

        text-align: left !important;

        display: flex !important;

        align-items: center !important;

        gap: 5px !important;

        margin-left: 19px !important; /* POSUN */

    }

    

    .header-info .contact-info svg,

    .header-info .contact-info i,

    .header-info .contact-info::before {

        width: 14px !important;

        height: 14px !important;

        flex-shrink: 0 !important;

    }

    

    /* OTEVÍRACÍ DOBA */

    .header-info .opening-status-wrapper {

        margin: 0 !important;

        padding: 0 !important;

        display: flex !important;

        align-items: center !important;

        gap: 5px !important;

    }

    

    .header-info .opening-status-wrapper span {

        font-size: 0.8rem !important;

        white-space: nowrap !important;

        text-align: left !important;

        display: flex !important;

        align-items: center !important;

        gap: 5px !important;

    }

    

    .header-info .opening-status-wrapper svg,

    .header-info .opening-status-wrapper i,

    .header-info .opening-status-wrapper::before {

        width: 14px !important;

        height: 14px !important;

        flex-shrink: 0 !important;

    }

    

    /* NAVIGACE */

    nav {

        order: 3 !important;

        flex: 0 0 auto !important;

        margin: 0 0 0 auto !important;

        padding: 0 !important;

    }

    

    nav ul {

        gap: 5px !important;

        margin: 0 !important;

        padding: 0 !important;

    }

    

    nav .nav-link {

        white-space: nowrap !important;

        padding: 7px 10px !important;

        font-size: 0.9rem !important;

    }

    

    /* ROZVOZOVÁ TLAČÍTKA */

    .delivery-buttons-desktop { 

        display: none !important; 

    }

    

    #delivery-open-li-mobile { 

        display: block !important; 

    }

    

    .delivery-buttons-mobile:not([style*="display"]) { 

        display: none !important; 

    }

    

    .delivery-buttons-mobile {

        order: 4 !important;

        width: 100% !important;

        justify-content: center !important;

        gap: 10px !important;

        padding-top: 8px !important;

    }

}



/* ===== ČITELNOST TEXTU V ÚVODU (Hero sekce) ===== */

.hero-text h1, 

.hero-text p {

    font-family: 'Poppins', sans-serif !important;

    font-weight: 700 !important; /* Tučné písmo */

    text-shadow: 

        0 2px 4px rgba(0, 0, 0, 0.9),

        0 0 40px rgba(0, 0, 0, 0.7);

}



/* Pokud chceš hlavní nadpis ještě tučnější */

.hero-text h1 {

    font-weight: 800 !important; /* Extra bold */

}



/* Text odstavců trochu mírnější */

.hero-text p {

    font-weight: 600 !important; /* Semi-bold */

}