/* ============================================================================
   Sablon: Modern Glow (RESPONSIVE & APP-LIKE MOBILE CSS)
   Fájl: miniweb/templates/modern_glow/responsive.css
   Leírás: Extrém reszponzivitás, alkalmazás-szerű mobil nézettel.
   JAVÍTVA: 
   1. Minden tiltott "!important" eltávolítva a szabályzat 0. pontja szerint!
   2. Tiszta CSS specificitás az azonnali és akadásmentes nézetváltáshoz
      (PC <-> Mobil váltáskor azonnal frissül a felület oldalújratöltés nélkül).
============================================================================ */

/* Alapértelmezett rejtés asztali nézetben az új mobil elemeknek */
.mobile-top-phone { 
    display: none; 
}

/* ==========================================
   1. LAPTOP ÉS KISEBB MONITOROK (Max: 1400px)
========================================== */
@media (max-width: 1400px) {
    body .site-wrapper { 
        width: 95%; 
    }
    body .mw-nav { 
        width: 95%; 
    }
}

/* ==========================================
   2. TABLET NÉZET (Max: 992px)
========================================== */
@media (max-width: 992px) {
    body .site-wrapper { 
        width: 100%; 
        box-shadow: none; 
        border-radius: 0; 
        border: none; 
    }
    body .mw-nav { 
        width: 100%; 
        left: 0; 
        transform: none; 
        border-radius: 0; 
        border-top: none; 
        border-left: none; 
        border-right: none; 
        top: 0; 
    }
    
    .hero-split-layout { 
        grid-template-columns: 1fr; 
        gap: 40px; 
        text-align: center; 
        padding: 3rem 2rem; 
    }
    .hero-main-content { 
        text-align: center; 
    }
    .hero-main-content h1 { 
        text-align: center; 
    }
    .hero-main-content p { 
        max-width: 100%; 
        margin-left: auto; 
        margin-right: auto; 
        text-align: center; 
    }
    
    .hero-side-panels { 
        flex-direction: row; 
        justify-content: center; 
        flex-wrap: wrap; 
    }
    .hero-side-card { 
        flex: 1; 
        min-width: 300px; 
        text-align: left; 
    }
    
    .about-split-grid { 
        grid-template-columns: 1fr; 
        gap: 40px; 
    }
    .contact-grid { 
        grid-template-columns: 1fr; 
        gap: 40px; 
    }
    
    .mw-modal-box { 
        padding: 30px; 
    }
}

/* ==========================================
   3. SZIGORÚ MOBIL APP NÉZET (Max: 768px)
========================================== */
@media (max-width: 768px) {
    
    /* Tipográfia zsugorítása */
    :root {
        --font-size-heading: 1.5rem; 
        --font-size-base: 14px;      
    }
    
    body { 
        padding-bottom: 90px; 
        padding-top: 0; 
    }
    body .mw-main-content { 
        padding-top: 88px; 
        padding-bottom: 20px; 
    }
    .mw-section { 
        padding: 30px 0; 
    }
    .content-box { 
        padding: 25px 15px; 
        border-radius: 20px; 
        margin-bottom: 15px;
    }
    .mw-container { 
        padding: 0 10px; 
        width: 100%; 
    }

    body .mw-hero { 
        height: auto; 
        min-height: auto; 
        padding-top: 0; 
        margin-bottom: 15px;
        margin-top: 0;
    }

    /* Üveghatás csapda kikapcsolása mobilon */
    body .mw-nav, 
    body .nav-container, 
    body .menu {
        transform: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        filter: none;
    }

    /* Felső sáv (2 soros natív app elrendezés) */
    body .mw-nav {
        position: fixed; 
        top: 0; 
        left: 0; 
        width: 100%;
        height: 95px; 
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        z-index: 1000;
        display: block;
        pointer-events: none; 
    }
    
    body .mw-nav::before {
        content: ''; 
        position: absolute; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%;
        background: var(--bg-nav);
        backdrop-filter: blur(30px); 
        -webkit-backdrop-filter: blur(30px);
        border-bottom: 1px solid var(--glass-border);
        box-shadow: 0 10px 30px var(--shadow-base);
        border-radius: 0 0 20px 20px;
        z-index: -1;
    }
    
    body .nav-container { 
        padding: 0; 
        display: block; 
        pointer-events: none;
    }
    
    body .logo {
        position: fixed;
        top: 15px; 
        left: 15px; 
        right: 15px; 
        width: calc(100vw - 30px);
        z-index: 1001;
        display: flex; 
        flex-direction: column; 
        align-items: flex-start; 
        justify-content: flex-start;
        gap: 10px; 
        pointer-events: none;
    }
    
    /* 1. Sor: Logó és Témaváltó gomb */
    body .logo-wrapper {
        display: flex; 
        flex-direction: row; 
        align-items: center; 
        justify-content: space-between; 
        width: 100%; 
        height: 32px;
        pointer-events: auto; 
    }

    body .logo-link { 
        display: flex; 
        align-items: center; 
        height: 100%; 
        max-width: calc(100% - 45px); 
    }
    body .logo-link img { 
        max-height: 28px; 
        margin-right: 8px; 
    }
    body .brand-text-logo { 
        font-size: 1.2rem; 
        line-height: 1; 
        margin: 0; 
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis; 
    }
    
    body .theme-toggle-btn {
        width: 32px; 
        height: 32px;
        border-radius: 50%;
        background: var(--bg-input);
        border: 1px solid var(--border-color);
        color: var(--text-light);
        display: flex; 
        align-items: center; 
        justify-content: center;
        box-shadow: var(--shadow-light);
        pointer-events: auto;
        cursor: pointer;
        flex-shrink: 0;
        padding: 0;
        margin: 0;
    }
    body .theme-toggle-btn i { 
        width: 16px; 
        height: 16px; 
        pointer-events: none; 
        margin: 0;
    }

    /* 2. Sor: Telefonszám */
    body .mobile-top-phone {
        display: flex; 
        align-items: center; 
        gap: 6px;
        color: var(--text-muted); 
        font-size: 0.85rem; 
        font-weight: 700;
        text-decoration: none; 
        letter-spacing: 0.5px;
        pointer-events: auto; 
        height: 26px;
    }
    body .mobile-top-phone i { 
        width: 14px; 
        height: 14px; 
        color: var(--primary-color); 
    }

    /* Alsó natív app-menü */
    body .menu { 
        position: fixed; 
        bottom: 0; 
        left: 0; 
        width: 100%;
        height: 75px; 
        margin: 0; 
        padding: 0;
        display: flex; 
        flex-direction: row;
        justify-content: space-around; 
        align-items: center;
        background: transparent; 
        border: none; 
        box-shadow: none;
        z-index: 1000;
        padding-bottom: env(safe-area-inset-bottom);
        pointer-events: auto;
    }
    
    body .menu::before {
        content: ''; 
        position: absolute; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%;
        background: var(--bg-nav);
        backdrop-filter: blur(30px); 
        -webkit-backdrop-filter: blur(30px);
        border-top: 1px solid var(--glass-border);
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -10px 30px var(--shadow-base);
        z-index: -1;
    }

    /* Jobb felső kapcsolat gomb mobilon */
    body .menu a[href*="contact"] {
        position: fixed;
        top: 57px; 
        right: 15px;
        z-index: 99999; 
        pointer-events: auto; 
        cursor: pointer;
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-glow) 100%);
        color: var(--btn-text-hover, #ffffff);
        border: none;
        border-radius: 13px; 
        padding: 0 12px;
        display: flex; 
        flex-direction: row; 
        align-items: center; 
        justify-content: center;
        box-shadow: 0 4px 15px var(--primary-glow);
        width: auto; 
        height: 26px; 
    }
    body .menu a[href*="contact"] span { 
        font-size: 0.65rem; 
        font-weight: 800; 
        letter-spacing: 0.5px; 
        text-transform: uppercase; 
        line-height: 1; 
        margin: 0; 
    }
    body .menu a[href*="contact"] i,
    body .menu a[href*="contact"]::after { 
        display: none; 
    }

    /* Alsó menüpontok */
    body .menu a:not([href*="contact"]) {
        flex: 1; 
        height: 100%; 
        padding: 6px 0; 
        margin: 0; 
        font-size: 0.5rem; 
        text-align: center; 
        display: flex; 
        flex-direction: column; 
        justify-content: center; 
        align-items: center;
        border-bottom: none; 
        background: transparent; 
        color: var(--text-muted);
        white-space: nowrap; 
        letter-spacing: -0.2px; 
        line-height: 1.2;
        z-index: 1;
    }
    body .menu a:not([href*="contact"])::after { 
        display: none; 
    }
    body .menu a:not([href*="contact"]) i { 
        width: 20px; 
        height: 20px; 
        margin-bottom: 4px; 
        color: inherit; 
    }
    
    body .menu a.active-link:not([href*="contact"]) {
        color: var(--mw-item-font-color, var(--mw-menu-font-color, var(--primary-color)));
        background: var(--mw-item-bg-color, transparent);
    }
    body .menu a.active-link:not([href*="contact"]) i {
        color: inherit;
    }
    
    body .menu a.btn:not([href*="contact"]) { 
        background: transparent; 
        box-shadow: none; 
        border: none; 
        color: var(--text-muted); 
    }
    body .menu a.btn:not([href*="contact"]):hover, 
    body .menu a.btn:not([href*="contact"]).active { 
        color: var(--primary-color); 
    }

    /* Többoszlopos rácsok kényszerítése mobilon (2 oszlop) */
    .card-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 12px; 
    }
    .feature-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 12px; 
    }
    .album-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 12px; 
    }
    .team-gallery-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 10px; 
    }
    .trust-bar { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 12px; 
    }
    .time-slots { 
        grid-template-columns: repeat(3, 1fr); 
        gap: 8px; 
    }
    .split-inputs { 
        grid-template-columns: 1fr; 
        gap: 12px; 
    } 
    .product-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 12px; 
    }

    /* Elemek arányos méretezése */
    .hero-split-layout { 
        padding: 1.5rem; 
        border-radius: 20px; 
    }
    .hero-main-content h1 { 
        font-size: calc(var(--font-size-heading, 1.5rem) * 1.3); 
        text-align: center;
    }
    .hero-main-content p { 
        font-size: 0.85rem; 
        text-align: center;
    }
    .hero-side-card { 
        min-width: 100%; 
        flex-direction: row; 
        padding: 12px; 
        gap: 12px; 
    }
    .hero-side-card img { 
        width: 70px; 
        height: 70px; 
    }
    
    .trust-item-card { 
        flex-direction: column; 
        align-items: center; 
        text-align: center; 
        padding: 15px 10px; 
        gap: 10px; 
    }
    .trust-icon { 
        width: 35px; 
        height: 35px; 
    }
    .trust-content h4 { 
        font-size: 0.9rem; 
        text-align: center;
    }
    .trust-content p { 
        font-size: 0.75rem; 
        line-height: 1.3; 
        text-align: center;
    }

    .service-card { 
        border-radius: 16px; 
    }
    .card-img { 
        height: 110px; 
        margin: 6px 6px 0 6px; 
        border-radius: 10px 10px 0 0; 
    }
    .card-content { 
        padding: 12px; 
    }
    .card-content h3 { 
        font-size: 0.9rem; 
        margin-bottom: 6px; 
    }
    .card-content .desc { 
        font-size: 0.75rem; 
        line-height: 1.3; 
        margin-bottom: 10px;
        display: -webkit-box; 
        -webkit-line-clamp: 3; 
        -webkit-box-orient: vertical; 
        overflow: hidden; 
    }
    .card-meta { 
        font-size: 0.85rem; 
        padding-top: 8px; 
        flex-direction: column; 
        gap: 5px; 
        align-items: flex-start; 
    }
    .card-actions { 
        flex-direction: column; 
        gap: 5px; 
        margin-top: 10px; 
    }
    .card-actions .btn { 
        width: 100%; 
        padding: 8px; 
        font-size: 0.7rem; 
        border-radius: 8px; 
    }

    /* Katalógus kártyák mobilon */
    .catalog-card { 
        border-radius: 16px; 
    }
    .catalog-img { 
        height: 110px; 
    }
    .catalog-content { 
        padding: 12px; 
    }
    .catalog-content h3 { 
        font-size: 0.9rem; 
        margin-bottom: 6px; 
    }
    .catalog-content .desc { 
        font-size: 0.75rem; 
        margin-bottom: 10px; 
        display: -webkit-box; 
        -webkit-line-clamp: 2; 
        -webkit-box-orient: vertical; 
        overflow: hidden; 
    }
    .catalog-attr { 
        font-size: 0.75rem; 
        margin-bottom: 10px; 
    }
    .catalog-footer { 
        padding-top: 10px; 
    }
    .catalog-footer .price { 
        font-size: 1.1rem; 
    }
    .add-to-cart-btn { 
        width: 35px; 
        height: 35px; 
    }
    .add-to-cart-btn i { 
        width: 16px; 
        height: 16px; 
    }
    .catalog-badge { 
        top: 10px; 
        right: 10px; 
        padding: 3px 8px; 
        font-size: 0.6rem; 
    }

    /* Lebegő kosár gomb elhelyezése */
    .floating-cart-btn {
        width: 55px;
        height: 55px;
        bottom: 95px;
        right: 15px;
    }
    .floating-cart-btn i { 
        width: 22px; 
        height: 22px; 
    }
    .cart-badge { 
        width: 22px; 
        height: 22px; 
        font-size: 0.7rem; 
        top: -2px; 
        right: -2px; 
    }

    .album-card { 
        border-width: 2px; 
    }
    .album-card img, 
    .album-card .no-cover { 
        height: 140px; 
    }
    .album-overlay { 
        padding: 12px; 
    }
    .album-overlay h4 { 
        font-size: 0.9rem; 
        margin-bottom: 2px; 
        text-align: center;
    }
    .album-overlay span { 
        font-size: 0.6rem; 
        text-align: center; 
        display: block;
    }
    
    .team-img-wrapper img { 
        height: 120px; 
    }
    .feature-card { 
        flex-direction: column; 
        align-items: center; 
        text-align: center; 
        padding: 15px; 
    }

    .booking-container { 
        padding: 25px 15px; 
        border-radius: 20px; 
    }
    .form-group label { 
        font-size: 0.75rem; 
        margin-bottom: 6px; 
    }
    .form-group select, 
    .form-group input, 
    #contact-form input, 
    #contact-form textarea, 
    #checkout-form input, 
    #checkout-form select, 
    #checkout-form textarea { 
        padding: 12px; 
        font-size: 0.85rem; 
        border-radius: 10px; 
    }
    .time-slot-btn { 
        padding: 10px; 
        font-size: 0.95rem; 
        border-radius: 10px; 
    }

    .contact-block { 
        padding: 20px 15px; 
    }
    .contact-block h4 { 
        text-align: center; 
    }
    .contact-block li { 
        font-size: 0.85rem; 
    }
    .contact-block li strong { 
        min-width: 80px; 
        font-size: 0.8rem; 
    }
    .map-container iframe { 
        height: 250px; 
    }

    .mw-footer { 
        padding: 40px 0 100px 0; 
    }
    .footer-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 20px; 
        text-align: left; 
    }
    .footer-col-brand { 
        grid-column: span 2; 
        text-align: center; 
    } 
    .social-icons { 
        justify-content: center; 
    }
    .footer-col-links h4, 
    .footer-col-contact h4 { 
        font-size: 1rem; 
        margin-bottom: 15px; 
    }
    .footer-col-links a, 
    .footer-col-contact p { 
        font-size: 0.8rem; 
    }
    .system-branding { 
        padding-top: 15px; 
        font-size: 0.75rem; 
    }

    .mw-modal-overlay { 
        padding: 10px; 
        align-items: flex-end; 
    }
    .mw-modal-box { 
        padding: 25px 20px; 
        border-radius: 25px 25px 15px 15px; 
        max-height: 90vh; 
    }
    .mw-modal-close { 
        top: 15px; 
        right: 15px; 
        width: 35px; 
        height: 35px; 
    }
    #sm-title { 
        font-size: 1.3rem; 
        margin-bottom: 10px; 
    }
    #sm-desc { 
        font-size: 0.85rem; 
        line-height: 1.5; 
        margin-bottom: 20px; 
    }
}

/* ==========================================
   4. ULTRA-KICSI MOBILOK (Max: 360px)
========================================== */
@media (max-width: 360px) {
    .card-grid, 
    .feature-grid, 
    .album-grid, 
    .trust-bar, 
    .product-grid { 
        gap: 8px; 
    }
    .card-img { 
        height: 90px; 
    }
    .card-content { 
        padding: 10px; 
    }
    .card-content h3 { 
        font-size: 0.8rem; 
    }
    .card-content .desc { 
        font-size: 0.7rem; 
    }
    .card-actions .btn { 
        font-size: 0.6rem; 
        padding: 6px; 
    }
    
    .catalog-img { 
        height: 90px; 
    }
    .catalog-footer .price { 
        font-size: 0.95rem; 
    }
    
    .floating-cart-btn { 
        width: 45px; 
        height: 45px; 
        bottom: 85px; 
        right: 10px; 
    }
    .floating-cart-btn i { 
        width: 18px; 
        height: 18px; 
    }
    
    body .menu a:not([href*="contact"]) { 
        font-size: 0.45rem; 
        letter-spacing: -0.4px; 
    }
    body .menu a:not([href*="contact"]) i { 
        width: 18px; 
        height: 18px; 
    }
    
    .time-slots { 
        grid-template-columns: repeat(2, 1fr); 
    }
    .footer-grid { 
        grid-template-columns: 1fr; 
        text-align: center; 
    } 
    .footer-col-links a, 
    .footer-col-contact p { 
        justify-content: center; 
    }
}