/* Plik: mobile.css - WERSJA ZMNIEJSZONA (KOMPAKTOWA) + ETYKIETA KUP (POPRAWIONA) */

/* Ukrywamy ten layout na desktopie */
@media (min-width: 992.02px) {
    #mobile-layout {
        display: none !important;
    }
    #desktop-layout {
        display: flex !important;
    }
}

/* Style dla layoutu mobilnego (poniżej 992px) */
@media (max-width: 992px) {
    /* --- FUNDAMENTY MOBILNE --- */
    html, body {
        height: 100%;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0 !important;
        margin: 0 !important;
        touch-action: manipulation; 
        -webkit-overflow-scrolling: touch;
        background-color: #000;
    }

    #desktop-layout {
        display: none !important;
    }

    #mobile-layout {
        display: flex;
        flex-direction: column; /* Domyślnie pionowo (Portrait) */
        width: 100%;
        min-height: 100vh;
        background: var(--page);
    }

    /* --- NAGŁÓWEK --- */
    #app-header {
        display: none !important;
    }
    
    /* --- GŁÓWNY WIDOK BRONI (PORTRAIT / PIONOWO) --- */
    #mobile-gun-view-wrapper {
        position: sticky;
        top: 0; 
        z-index: 500;
        background: #000; 
        width: 100%;
        padding-top: env(safe-area-inset-top); 
        border-bottom: 1px solid #333;
        overflow: hidden;
        flex-shrink: 0;
    }

    #gun-view-mobile {
        width: 100%;
        aspect-ratio: 4/3; 
        position: relative;
        background: #111;
        touch-action: none; 
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #mobile-menu-btn {
        position: absolute;
        top: calc(10px + env(safe-area-inset-top));
        left: 15px;
        background: rgba(0, 0, 0, 0.6);
        border: 1px solid #555;
        color: #fff;
        font-size: 20px;
        width: 40px;
        height: 40px;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 600;
        backdrop-filter: blur(4px);
    }

    #mobile-camo-swatches-overlay {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 8px;
        z-index: 600;
        background: rgba(0,0,0,0.6);
        padding: 5px 10px;
        border-radius: 20px;
        backdrop-filter: blur(4px);
        pointer-events: none;
    }
    #mobile-camo-swatches-overlay .camo-color-preview-swatch {
        width: 30px;
        height: 30px;
        font-size: 8px;
        pointer-events: auto;
    }

    /* --- KONTROLKI (PORTRAIT / PIONOWO) --- */
    #mobile-controls-wrapper {
        flex: 1;
        padding: 15px;
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
        background: var(--page);
        overflow-y: auto; 
    }

    /* === SPECIFICZNE STYLE DLA TRYBU POZIOMEGO (LANDSCAPE) === */
    @media (orientation: landscape) {
        html, body {
            overflow: hidden;
            background-color: #000;
        }

        #mobile-layout {
            flex-direction: row; /* Układ poziomy */
            height: 100vh;
            width: 100vw;
            overflow: hidden;
        }

        /* --- LEWA STRONA: BROŃ (70% SZEROKOŚCI - Twoje ustawienie) --- */
        #mobile-gun-view-wrapper {
            position: relative;
            width: 70%; 
            height: 100vh;
            padding-top: 0;
            border-bottom: none;
            border-right: 1px solid #333;
            background: #000;
            padding-left: env(safe-area-inset-left); 
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #gun-view-mobile {
            width: 100%;
            height: 100%;
            aspect-ratio: unset;
            background: #000;
            background-size: contain; 
            background-position: center;
            background-repeat: no-repeat;
        }
        
        #mobile-menu-btn {
            top: 20px;
            left: calc(20px + env(safe-area-inset-left));
        }

        #mobile-camo-swatches-overlay {
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
        }

        /* --- PRAWA STRONA: KONTROLKI (RESZTA SZEROKOŚCI) --- */
        #mobile-controls-wrapper {
            flex: 1;
            height: 100vh;
            background: #161616;
            
            /* Minimalne marginesy (Twoje ustawienie: 5px z prawej) */
            padding-top: 10px;
            padding-left: 5px;
            padding-right: 5px; 
            padding-bottom: calc(10px + env(safe-area-inset-bottom));
            
            overflow-y: auto;
            border-left: 1px solid #222;
            
            display: flex;
            flex-direction: column;
        }
        
        .mobile-section {
            width: 100%;
            padding: 8px;
            margin-bottom: 8px;
        }
        
        /* ZMNIEJSZENIE CZCIONKI PRZYCISKÓW TYLKO DLA LANDSCAPE */
        .parts button {
            font-size: 9px !important; /* Jeszcze mniejsza w poziomie */
            padding: 6px 2px !important;
            min-height: 32px !important;
        }
    }

    /* --- WSPÓLNE STYLE --- */
    .mobile-section {
        background-color: #1b1b1b;
        border: 1px solid #333;
        border-radius: 12px;
        padding: 15px;
        margin-bottom: 15px;
    }

    #mobile-mode-selection-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 0;
        border: none;
        background: transparent;
    }
    
    /* Dodatkowe wymuszenie stylu dla przycisków w wrapperze trybów */
    #mobile-mode-selection-wrapper button {
        font-size: 11px;
        padding: 8px;
        min-height: 36px;
    }

    .parts {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    
    /* --- ZMNIEJSZONE PRZYCISKI CZĘŚCI (GLOBALNIE MOBILE) --- */
    .parts button {
        padding: 8px 4px; /* Zmniejszony padding */
        font-size: 10px;  /* Mniejsza czcionka (było 13px/11px) */
        min-height: 34px; /* Mniejsza wysokość (było 40px-44px) */
        background: #252525;
        color: #ddd;
        border: 1px solid #444;
        border-radius: 6px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; /* Kropki jak tekst za długi */
    }
    
    .parts button.selected {
        background: var(--pri);
        color: #fff;
        border-color: var(--pri);
    }

    /* --- PALETA KOLORÓW --- */
    .palette {
        display: grid;
        gap: 8px;
        padding-bottom: 10px;
    }

    /* POPRAWKA DLA LANDSCAPE: Zbicie kolumn */
    @media (orientation: landscape) {
        .palette {
            /* Wąskie kolumny blisko siebie (Twoje ustawienie: 3 kolumny po 60px) */
            grid-template-columns: repeat(3, 60px) !important;
            justify-content: center; 
            gap: 6px;
        }
        
        .sw .dot {
            width: 42px !important;
            height: 42px !important;
        }
    }

    /* W pionie (Portrait) zostawiamy elastycznie */
    @media (orientation: portrait) {
        .palette {
            grid-template-columns: repeat(auto-fill, minmax(45px, 1fr));
        }
        .sw .dot {
            width: 42px; 
            height: 42px;
        }
    }
    
    .sw {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .sw .dot {
        border-radius: 50%;
        border: 2px solid #444;
    }
    
    .sw.active .dot {
        border-color: #fff;
        transform: scale(1.1);
        box-shadow: 0 0 8px var(--pri);
    }
    
    .lbl {
        font-size: 8px; /* Jeszcze mniejszy podpis */
        margin-top: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        color: #aaa;
    }

    /* --- MENU MODALNE (ZMNIEJSZONE) --- */
    #mobile-menu-modal {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.95);
        z-index: 2000;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
        backdrop-filter: blur(5px);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    #mobile-menu-modal.visible {
        opacity: 1;
        pointer-events: auto;
    }
    .mobile-menu-content {
        width: 85%;
        max-width: 320px; /* Nieco węższe */
        display: flex;
        flex-direction: column;
        gap: 10px; /* Mniejsze odstępy */
    }
    .modal-menu-btn {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 15px; /* Mniejszy padding przycisków */
        background: #222;
        border: 1px solid #444;
        color: #fff;
        text-decoration: none;
        font-size: 14px; /* Mniejsza czcionka */
        font-weight: bold;
        border-radius: 8px;
        width: 100%;
        text-align: left;
    }
    .modal-menu-btn i {
        width: 20px;
        text-align: center;
        color: var(--pri);
        font-size: 14px;
    }
    .modal-menu-btn.quote-btn {
        background: rgba(220, 53, 69, 0.15);
        border-color: var(--error);
        color: #ffadad;
    }
    .modal-menu-btn.quote-btn i {
        color: var(--error);
    }

    /* Wybór modelu na mobile */
    #model-select-mobile {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.95);
        z-index: 800;
        overflow-y: auto;
        padding: 40px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: calc(40px + env(safe-area-inset-top));
    }

    /* --- ETYKIETA KUP (CALLOUT) - ZMNIEJSZONA O ok. 20% --- */
    /* Te style dodaję teraz do Twojego pliku, aby "odchudzić" metkę na mobile */

    /* 1. Kropka na broni */
    #gun-view-mobile .callout-dot {
        width: 8px !important;        /* Zmniejszone z 12px */
        height: 8px !important;
        border: 1px solid #fff !important; 
        box-shadow: 0 0 4px var(--pri) !important; 
    }

    /* 2. Przycisk 'Kup' */
    #gun-view-mobile .callout-btn {
        font-size: 10px !important;    /* Mniejsza czcionka */
        padding: 4px 8px !important;  /* Zwarte paddingi */
        border-radius: 4px !important;
    }
    #gun-view-mobile .callout-btn i {
        font-size: 9px !important;   /* Mniejsza ikona */
        margin-right: 3px !important;
    }

    /* 3. Etykieta Ceny (Retro) */
    #gun-view-mobile .retro-price-tag {
        font-size: 9px !important;    /* Zmniejszone z 10px */
        padding: 2px 5px !important;  /* Minimalny padding */
        border-width: 1px !important; /* Cieńsza ramka */
        border-radius: 1px !important;
        z-index: 9999;
    }
    /* Dziurka w etykiecie */
    #gun-view-mobile .retro-price-tag::after {
        width: 4px !important;
        height: 4px !important;
        bottom: -3px !important;
    }

    /* 4. Linia łącząca */
    #gun-view-mobile .callout-line-path {
        stroke-width: 1px !important; /* Cieńsza linia */
    }
}