/*
 * Mobilná verzia podľa dizajnu z /design (obrázky)
 * Platí len pre max-width: 991px
 */

.mobile-bottom-nav { display: none; }
.services-search-mobile { display: none; }           /* default – na desktope skryté */
.services-search-mobile--bottom { display: none; }   /* spodné pole vôbec nepoužívame */
.hero-dual-images-mobile { display: none; } /* default – na desktope skryté, zobrazíme len na mobile */

@media (max-width: 991px) {
    /* --- BODY: odsadenie pre spodné menu --- */
    body {
        padding-bottom: 100px !important;
    }

    /* --- HLAVIČKA PODĽA DESIGNU: len top bar + logo --- */
    .main-nav-section .nav-glass-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }
    .main-nav-section .nav-toggle,
    .main-nav-section .nav-menu-container {
        display: none !important;
    }
    /* Logo jemne zasahuje medzi pilulky a je väčšie */
    .main-nav-section {
        margin-top: -28px;
    }
    .main-nav-section .nav-logo {
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 0 0 10px;
    }
    .main-nav-section .nav-logo img {
        height: 90px;
        width: auto;
    }

    /* Horný pás – pilulky nalepené naľavo a napravo */
    .top-bar .container { padding: 0 16px; }
    .top-bar-items {
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        flex-wrap: nowrap;
    }
    .top-left, .top-right {
        flex: 0 0 auto;
    }
    .top-item {
        border-radius: 999px;
        padding: 6px 14px;
        font-size: 11px;
        justify-content: center;
        white-space: nowrap;
    }
    .hours-desktop { display: none; }
    .hours-mobile { display: inline; }

    /* --- SPODNÉ MENU (ako na obrázku Homepage_mobile_downmenu) --- */
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        max-width: 380px;
        z-index: 9999;
    }
    .nav-container-glass {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 12px 8px;
        width: 100%;
        background: rgba(0, 0, 0, 0.4) !important;
        backdrop-filter: blur(25px) saturate(140%);
        -webkit-backdrop-filter: blur(25px) saturate(140%);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 999px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
    .nav-item-icon {
        color: #fff !important;
        font-size: 22px !important;
        text-decoration: none !important;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        transition: background 0.2s, color 0.2s;
    }
    .nav-item-icon:hover,
    .nav-item-icon:active {
        color: #035695 !important;
        background: rgba(255, 255, 255, 0.08);
    }
    .nav-item-icon i { margin: 0; }

    /* Otvorenie draweru z bottom Menu – zobrazíme .nav-menu-container */
    body.mobile-nav-open .main-nav-section .nav-menu-container {
        display: flex !important;
        position: fixed;
        top: 0;
        right: 0;
        width: min(320px, 85vw);
        height: 100vh;
        margin: 0;
        padding: 80px 20px 100px;
        flex-direction: column;
        align-items: stretch;
        transform: translateX(0);
        visibility: visible;
        z-index: 10001;
        overflow-y: auto;
        border-radius: 0;
        box-shadow: -10px 0 40px rgba(0,0,0,0.5);
    }
    body.mobile-nav-open .nav-overlay {
        opacity: 1;
        visibility: visible;
        z-index: 10000;
    }
    body.mobile-nav-open .mobile-bottom-nav {
        display: none !important;
    }
}

/* X zatváracie tlačidlo */
.nav-close-btn {
    display: none;
}
@media (max-width: 991px) {
    .nav-close-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,0.15);
        background: rgba(255,255,255,0.07);
        color: #fff;
        font-size: 18px;
        cursor: pointer;
        z-index: 10002;
    }
    .nav-close-btn:hover {
        background: rgba(255,255,255,0.15);
    }
}

/* Zosvetli text v mobilnom menu, aby bol čitateľnejší cez blur */
@media (max-width: 991px) {
    .main-nav-section .nav-menu-container {
        background: rgba(10, 10, 10, 0.92);
    }
    .bricks-nav-menu li a {
        color: #F9FAFB;
        font-weight: 600;
    }
    .bricks-nav-menu .sub-menu li a {
        color: #E5E7EB !important;
    }
    /* Submenu v mobilnom menu bez tmavého pozadia a rámikov */
    body.mobile-nav-open .bricks-nav-menu .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        margin: 4px 0 0 0;
        padding: 0 0 0 16px;
        display: none;           /* skryté v základnom stave, necháme ho len otvoriť/zavrieť */
        max-height: none;
        overflow: visible;
        box-shadow: none !important;
        background: transparent !important;
        border: none !important;
        list-style: none;
    }
    body.mobile-nav-open .bricks-nav-menu li.menu-open > .sub-menu {
        display: block;
    }
    body.mobile-nav-open .bricks-nav-menu .sub-menu li.sub-menu-all {
        border-top: none !important;
        margin-top: 4px;
        padding-top: 4px;
    }
    /* Na mobile vypneme overlay, aby neblokoval kliknutia v menu */
    .nav-overlay {
        display: none !important;
    }
}

/* --- HOMEPAGE MOBILE: prepínače okraj-okraj (design) --- */
@media (max-width: 991px) {
    .hero-section .container { padding: 0 0 0 0; }
    .hero-section .hero-toggles {
        display: flex !important;
        justify-content: stretch;
        width: 100%;
        margin: 0 0 20px 0;
        gap: 0;
        padding: 0 0;
    }
    .hero-section .hero-toggles .toggle-btn {
        flex: 1;
        padding: 16px 12px;
        font-size: 17px;
        border-radius: 0;
        border-left: none;
        border-right: 0px solid rgba(255, 255, 255, 0.15);
    }
    .hero-section .hero-toggles .toggle-btn:first-child {
        border-radius: 0 50px 50px 0;
        border-right: 0px solid rgba(255, 255, 255, 0.15);
    }
    .hero-section .hero-toggles .toggle-btn:last-child {
        border-radius: 50px 0 0 50px;
        border-right: none;
        text-align: right;
        justify-content: flex-end;
    }
    .hero-section .hero-toggles .toggle-btn.active {
        box-shadow: inset 0 1px 4px rgba(255, 255, 255, 0.25), 0 4px 15px rgba(3, 86, 149, 0.35);
    }
    .hero-section .hero-content-wrapper { padding: 0 16px; }
    .hero-section .hero-actions .glassButton {
        padding: 14px 40px;
        font-size: 17px;
        font-weight: 700;
        min-width: 200px;
    }
    .hero-section .hero-image-desktop { display: none; }
    .hero-dual-images.hero-dual-images-mobile {
        display: flex; /* len na mobile sa dvojica obrázkov zobrazí */
        justify-content: center;
        align-items: center;
        width: 100vw;                           /* natiahne sa na šírku viewportu */
        margin: -10px 0 28px;        /* zarovná blok presne na kraje viewportu, nezávisle od .container/.hero-content-wrapper */
        overflow: hidden;
    }
    .hero-dual-images.hero-dual-images-mobile .image-wrapper {
        flex: 0 1 50%;
    }
    .hero-dual-images.hero-dual-images-mobile .image-wrapper.left-overflow {
        margin-right: 0px; /* mobil viac mimo pravý okraj – zruší sivý pás vpravo */
        text-align: right;
    }
    .hero-dual-images.hero-dual-images-mobile .image-wrapper.right-overflow {
        margin-left: 0px; /* notebook mierne mimo ľavý okraj */
        text-align: left;
    }
    .hero-dual-images.hero-dual-images-mobile .image-wrapper img {
        height: 250px;
    }
}

/* Menšia medzera medzi logom a \"Naše Služby\" na stránke služieb (mobil) */
@media (max-width: 991px) {
    .services-hero-section {
        margin-top: 0;
        padding-top: 8px;
    }
}

/* Homepage: v mobilnej verzii skryť stredný obrázok v cenníku */
@media (max-width: 768px) {
    .pricing-section .pricing-image {
        display: none;
    }
}

/* --- STRÁNKA SLUŽBY: vyhľadávanie + 2 stĺpce (design, len mobil/tablet) --- */
@media (max-width: 991px) {
    .services-search-mobile.services-search-mobile--top {
        display: flex;
        align-items: center;
        gap: 12px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 50px;
        padding: 12px 20px;
        margin-bottom: 24px;
    }
    .services-search-mobile i {
        color: rgba(255, 255, 255, 0.5);
        font-size: 16px;
    }
    .services-search-mobile .services-search-input {
        flex: 1;
        background: none;
        border: none;
        color: #fff;
        font-size: 15px;
        outline: none;
    }
    .services-search-mobile .services-search-input::placeholder {
        color: rgba(255, 255, 255, 0.4);
    }
    .services-dynamic-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px;
    }
}

/* --- FOOTER PODĽA DESIGNU: logo hore, sociálne, link, copyright --- */
@media (max-width: 991px) {
    .main-footer .footer-content {
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }
    .main-footer .footer-socials {
        order: -1;
        margin-bottom: 8px;
    }
    .main-footer .footer-copy {
        font-size: 13px;
        opacity: 0.8;
    }
}