/* Plik: style.css */
/* Wersja: 4.4 - IFRAME MOBILE MODAL FIX (Overscroll contain, % zamiast vh/vw) */

body {
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    background-color: #f1f5f9; 
}

/* === ZŁOTY ŚRODEK (Kompaktowy rozmiar UI na laptopach) === */
@media (min-width: 1024px) and (max-width: 1440px) {
    html {
        font-size: 14.5px; 
    }
    .wk-kalkulator-grid { 
        gap: 16px !important; 
    }
}

@media (min-width: 1441px) and (max-width: 1919px) {
    html { font-size: 16px; }
}

/* === NOWE: SKALOWANIE NA DUŻYCH MONITORACH (Ultra-Wide, 4K) === */
@media (min-width: 1920px) and (max-width: 2559px) {
    html { font-size: 19.5px; } /* Proporcjonalne powiększenie o ok 20% dla 2K / WQHD */
}

@media (min-width: 2560px) {
    html { font-size: 25px; } /* Skalowanie dla ogromnych ekranów 4K i większych */
}

/* === DANE INPUT NUMER === */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
}

/* === LOGO APLIKACJI === */
.wk-app-logo {
    margin-bottom: 0; 
    display: flex;
    align-items: center;
}
.wk-app-logo img {
    height: 50px; 
    width: auto;
    opacity: 1; 
}

/* === UKŁAD STRONY (RESPONSIVE GRID) === */
/* Domyślny Grid (Mobilny) */
.wk-kalkulator-grid {
    display: grid;
    grid-template-columns: 100%; 
    gap: 16px; 
    align-items: start;
    position: relative;
    width: 100%;
}

/* === KOLUMNA LEWA (OPCJE) === */
.wk-left-col {
    grid-column: 1;
    position: relative;
    z-index: 10;
    height: auto;
    overflow-y: visible; 
    overflow-x: hidden; 
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0; 
    word-wrap: break-word;
}

/* === KOLUMNA ŚRODKOWA + PRAWA (TERAZ JAKO JEDEN KONTENER FLEX) === */
.wk-mid-col {
    grid-column: 1;
    position: relative; 
    z-index: 40;
    height: auto;
    display: flex;
    flex-direction: column; /* Na mobile jedno pod drugim */
    gap: 16px;
    min-width: 0; 
}

/* === WIZUALIZACJA (RYSUNEK W CENTRUM) === */
.wk-wizualizacja {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    min-height: 400px;
}

/* === DOSTOSOWANIE ELEMENTÓW NA TELEFONIE === */
@media (max-width: 1023px) {
    /* Naprawa nienaturalnego kurczenia się kolumn po dodaniu display: contents */
    .wk-kalkulator-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important; /* To zmusza bloki do wypełnienia całej szerokości ekranu */
        gap: 16px !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }
    .wk-left-col, .wk-mid-col {
        display: contents !important; 
    }
    
    /* Ustalenie pożądanej kolejności na Mobile (Wybór -> Rysunek -> Opcje -> Podsumowanie) */
    #wk-typ-produktu-box { order: 1; width: 100% !important; margin: 0 !important; }
    .wk-wizualizacja { order: 2; width: 100% !important; margin: 0 !important; height: auto !important; min-height: unset !important; }
    #webkalkulator-container { order: 3; width: 100% !important; margin: 0 !important; height: auto !important; }
    .wk-info-panel { order: 4; width: 100% !important; margin: 0 !important; height: auto !important; }

    #webkalkulator-app { padding: 8px !important; overflow-x: hidden; } 
    
    /* Inteligentne skalowanie rysunku zamiast sztywnych 450px */
    #wk-rysunek-kontener {
        width: 100% !important;
        height: auto !important; 
        aspect-ratio: 4 / 3 !important; /* Zapewnia doskonałe proporcje rysunku i skalowanie wewnątrz Iframe */
        min-height: 320px !important;
        max-height: 55vh !important;
        padding: 0 !important; 
        border-radius: 12px !important;
        margin-bottom: 8px !important;
    }
    
    #wk-cena-label { display: none; }
    
    .wk-cena-wartosc { 
        display: block;
        margin-top: 0 !important;
        word-break: break-word; 
    }
    .wk-cena-wartosc .text-4xl { font-size: 1.75rem !important; line-height: 1.1; } 
    .wk-cena-wartosc .text-lg { font-size: 1.1rem !important; }
    
    #wk-cena-kontener {
        padding: 16px !important;
        margin-top: 0 !important;
        background-color: #fff !important;
        border-radius: 12px !important;
    }
    
    #wk-safety-glass-container {
        padding: 12px !important;
        font-size: 0.85rem !important;
        flex-direction: column;
        text-align: center;
        margin: 4px 0 !important;
        border-radius: 8px !important;
    }
    #wk-safety-glass-text i { font-size: 1.1rem; }
    .wk-btn-xs { padding: 6px 12px; font-size: 0.85rem; margin-top: 8px; width: 100%; }

    #wk-uw-box, #wk-vekt-box, #wk-romningsvei-box { 
        display: flex !important; 
        padding: 12px !important;
    }
    
    #wk-comment-container { padding: 16px !important; }
    #wk-product-comment { padding: 12px; font-size: 0.95rem; height: 80px; }

    #webkalkulator-container { padding: 16px !important; }
    .accordion-button { padding: 12px 14px; font-size: 0.95rem; }
    .wk-opcja-grupa label { font-size: 0.8rem; }
    
    /* Poprawka błędu odstępów na wskutek złego wpisu w starym CSS */
    .wk-opcje.space-y-6 > * + * { margin-top: 0 !important; }
    .wk-opcje.space-y-6 { gap: 16px !important; display: flex !important; flex-direction: column !important; margin-top: 0 !important; }
    
    .wk-draw-dir-btn { padding: 6px 10px !important; font-size: 0.8rem !important; gap: 4px !important; white-space: nowrap; }
    #wk-rysunek-kierunek-overlay { padding-left: 8px !important; padding-right: 8px !important; flex-wrap: wrap; justify-content: center !important; gap: 6px; top: 8px !important; }

    .wk-product-trigger-btn-centered { min-width: unset !important; padding: 12px 16px !important; width: 100% !important; }
    .wk-trigger-img { width: 56px !important; height: 56px !important; }
    .wk-trigger-value { font-size: 1.1rem !important; }

    /* Bezpieczne, wyśrodkowane nakładki na rysunku by nie obcinało ich przy krawędzi ekranu */
    #wk-rysunek-wymiary-overlay {
        left: 50% !important;
        transform: translateX(-50%) scale(0.9) !important;
        bottom: 12px !important;
        width: max-content !important;
        margin: 0 !important;
        transform-origin: bottom center;
    }
    #wk-rysunek-sprosser-overlay {
        left: 50% !important;
        transform: translateX(-50%) scale(0.9) !important;
        bottom: 65px !important; /* Umieszczone bezpiecznie nad wymiarami */
        width: max-content !important;
        margin: 0 !important;
        transform-origin: bottom center;
    }
    #wk-rysunek-skra-overlay {
        left: 50% !important;
        transform: translateX(-50%) scale(0.9) !important;
        top: 12px !important;
        width: 92% !important;
        max-width: 320px !important;
        margin: 0 !important;
        transform-origin: top center;
    }
    
    .wk-selection-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* === UKŁAD DESKTOP === */
@media (min-width: 1024px) {
    .wk-kalkulator-grid { 
        grid-template-columns: 30% 68%; 
        grid-template-rows: 1fr;
        gap: 2%;
        align-items: start; 
    }
    
    .wk-left-col { 
        grid-column: 1; 
        grid-row: 1; 
        top: auto;
        max-height: none;
        overflow-x: visible; 
        min-height: auto; 
    }
    
    .wk-mid-col { 
        grid-column: 2; 
        grid-row: 1; 
        position: sticky;
        top: 20px;
        height: calc(100vh - 40px);
        height: calc(100dvh - 40px); 
        max-height: calc(100vh - 40px);
        max-height: calc(100dvh - 40px);
        
        overflow-y: auto !important; 
        overflow-x: hidden !important; 
        
        flex-direction: row; 
        scrollbar-width: thin; 
        scrollbar-color: #cbd5e1 transparent;
    }

    /* Własny suwak dla scrolla prawej kolumny */
    .wk-mid-col::-webkit-scrollbar {
        width: 6px;
    }
    .wk-mid-col::-webkit-scrollbar-track {
        background: transparent;
    }
    .wk-mid-col::-webkit-scrollbar-thumb {
        background-color: #cbd5e1;
        border-radius: 10px;
    }
    
    #wk-uw-box, #wk-vekt-box, #wk-romningsvei-box { display: flex !important; }
    #wk-cena-label { display: block; }
    
    /* IDEALNE DOPASOWANIE RYSUNKU - STYŁY KRYTYCZNE */
    #wk-rysunek-kontener { 
        height: auto !important; 
        flex-grow: 1;
        min-height: 500px !important; /* Zabezpieczenie przed zapadnięciem rysunku */
        padding: 0 !important; 
    }

    .wk-cena-wartosc .text-4xl { font-size: 2rem !important; }
    #wk-safety-glass-container { padding: 12px !important; font-size: 0.95rem !important; flex-direction: row; }
}

@media (min-width: 1280px) and (max-width: 1919px) {
    .wk-kalkulator-grid { 
        grid-template-columns: 26% 72%; 
    }
}

/* Dostosowanie proporcji siatki na bardzo dużych monitorach żeby lewe opcje nie robiły się potężne */
@media (min-width: 1920px) {
    .wk-kalkulator-grid { 
        grid-template-columns: 22% 76%; 
    }
}

/* === WSPÓLNE STYLE DLA RYSUNKU === */

#wk-rysunek-kontener {
    display: block !important; 
    width: 100%;
    position: relative; /* Wymagane dla pozycjonowania SVG */
    margin-top: 0px !important;     
    margin-bottom: 0px !important;
    overflow: hidden !important; 
    order: -1 !important;         
    z-index: 10;
    
    /* Efekt winiety na wszystkich 4 krawędziach */
    background: radial-gradient(circle at center, #ffffff 0%, #f8fafc 50%, #e2e8f0 100%) !important;
    box-shadow: inset 0 0 60px rgba(71, 85, 105, 0.12) !important; 
}

#wk-rysunek-kontener svg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100% !important;
     height: 100% !important;
     max-width: none !important;
}

/* === NAKŁADKA Z PRZYCISKAMI KIERUNKU NA RYSUNKU === */
.wk-draw-dir-btn {
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #cbd5e1;
    color: #64748b;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(4px);
}

.wk-draw-dir-btn:hover {
    background-color: #f8fafc;
    color: #334155;
    border-color: #94a3b8;
}

.wk-draw-dir-btn.active {
    background-color: #f0fdf4;
    color: #16a34a;
    border-color: #16a34a;
    box-shadow: 0 0 0 1px #16a34a;
}

/* === KOMPAKTOWE OKNO CENY === */
#wk-cena-kontener {
    min-height: auto !important;
}
.wk-cena-wartosc {
    line-height: 1.1;
}

#wk-safety-glass-container,
.wk-safety-glass-warning {
    display: flex !important;
    position: relative !important; 
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background-color: #fff7ed;
    border: 1px dashed #fdba74;
    border-radius: 8px;
    color: #c2410c;
    font-size: 0.95rem;
    font-weight: 700;
    box-sizing: border-box;
    z-index: 50;
    clear: both; 
}

#wk-safety-glass-container.hidden {
    display: none !important;
}

.wk-safety-glass-warning.success {
    background-color: #f0fdf4;
    border-color: #86efac;
    color: #15803d;
    border-style: solid;
}

/* === PRZYCISKI I KONTROLKI === */

#wk-typ-produktu, select {
    touch-action: auto !important;
    pointer-events: auto !important;
}

.wk-radio-label {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.wk-radio-label:hover {
    background-color: #f3f4f6;
}
.wk-radio-label input[type="radio"] {
    display: none;
}
.wk-radio-label input[type="radio"]:checked + span {
    font-weight: 600;
}
.wk-radio-label input[type="radio"]:checked + span::before {
     content: '✓';
     margin-right: 6px;
     color: #2563eb;
     font-weight: bold;
}
.wk-radio-label:has(input[type="radio"]:checked) {
     border-color: #2563eb;
     background-color: #eff6ff;
}

.wk-icon-thumb {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
    background-color: #fff;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.2s, box-shadow 0.2s;
    transform-origin: center center;
    position: relative;
    z-index: 10;
    flex-shrink: 0;
}

@media (hover: hover) {
    .wk-icon-thumb:hover {
        transform: scale(6);
        border-color: #475569;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        cursor: zoom-in;
    }
}

.wk-material-button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    height: auto;
    min-height: 44px;
    border: 1px solid #cbd5e1; 
    border-radius: 6px; 
    background-color: #ffffff; 
    cursor: pointer; 
    transition: all 0.2s ease-in-out; 
    font-weight: 500; 
    color: #334155;
    position: relative;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.wk-material-button:hover:not(:disabled) { background-color: #f1f5f9; }
.wk-material-button.selected { 
    border-color: #16a34a; 
    background-color: #dcfce7; 
    color: #14532d; 
    font-weight: 700; 
}
.wk-material-button:disabled { background-color: #f3f4f6; color: #9ca3af; cursor: not-allowed; opacity: 0.7; }

/* === HARMONIJKA (ACCORDION) === */
.accordion-button {
    background-color: #f3f4f6; 
    color: #374151; 
    cursor: pointer; 
    padding: 10px 16px; 
    width: 100%; 
    border: 1px solid #d1d5db; 
    border-radius: 6px; 
    text-align: left; 
    font-weight: 500; 
    display: flex;
    align-items: center;
    justify-content: space-between;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.accordion-button:hover { background-color: #e5e7eb; }
.accordion-button.active { background-color: #e5e7eb; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.accordion-button .icon::before { content: '+'; font-weight: bold; font-size: 1.2em; transition: transform 0.2s ease; display: inline-block; }
.accordion-button.active .icon::before { content: '−'; }

.accordion-header-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wk-scrollable-list {
    max-height: 450px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background-color: #f8fafc;
    margin-top: 8px;
}

.wk-compact-option {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #e2e8f0;
    cursor: pointer;
    font-size: 0.9rem;
    color: #334155;
    transition: background-color 0.2s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.wk-compact-option:last-child { border-bottom: none; }
.wk-compact-option:hover { background-color: #e2e8f0; }

.wk-compact-option input[type="checkbox"] {
    margin-right: 12px;
    width: 16px;
    height: 16px;
    accent-color: #2563eb;
    cursor: pointer;
}
.wk-compact-option .label-text { flex-grow: 1; font-weight: 600; }
.wk-compact-option .price-tag { font-size: 0.85em; color: #2563eb; font-weight: 600; white-space: nowrap; }

/* === WYGLĄD ZABLOKOWANYCH (WYKLUCZAJĄCYCH SIĘ) SZYB === */
.wk-compact-option.is-disabled {
    opacity: 0.4;
    background-color: #f8fafc;
    border-color: #e2e8f0;
}
.wk-compact-option.is-disabled label {
    cursor: not-allowed;
    color: #94a3b8;
}
.wk-compact-option.is-disabled input[type="checkbox"] {
    cursor: not-allowed;
}

/* === MAŁE ZWYKŁE TOOLTIPY === */
.wk-info-tooltip-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    z-index: 50;
}

.wk-tooltip-content {
    display: none; 
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    width: 280px; 
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    padding: 15px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #334155;
    z-index: 99999; 
    text-align: left;
    white-space: normal;
}

.wk-tooltip-content::after, 
.wk-tooltip-content::before {
    top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;
}
.wk-tooltip-content::after { border-color: rgba(255, 255, 255, 0); border-top-color: #ffffff; border-width: 6px; margin-left: -6px; }
.wk-tooltip-content::before { border-color: rgba(203, 213, 225, 0); border-top-color: #cbd5e1; border-width: 7px; margin-left: -7px; }

@media (hover: hover) {
    .wk-info-tooltip-container:hover .wk-tooltip-content { display: block; }
}
.wk-info-tooltip-container.active .wk-tooltip-content { display: block; }

.wk-btn-xs {
    padding: 3px 10px; font-size: 0.8rem; font-weight: 600; border-radius: 4px; cursor: pointer; background-color: #ffffff; border: 1px solid #cbd5e1; color: #334155; transition: all 0.2s; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.wk-btn-xs:hover { background-color: #f8fafc; border-color: #94a3b8; color: #0f172a; }

.wk-btn-xs-danger { color: #dc2626; border-color: #fca5a5; background-color: #fff1f2; }
.wk-btn-xs-danger:hover { background-color: #fee2e2; border-color: #f87171; color: #b91c1c; }

#wk-panel-alignment-wrapper { flex-grow: 1; justify-content: space-between; height: 38px; }

/* Siatka szprosów */
.wk-sprosse-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.wk-sprosse-card { cursor: pointer; display: block; -webkit-tap-highlight-color: transparent;}
.wk-sprosse-card-content { display: flex; flex-direction: column; align-items: center; border: 1px solid #cbd5e1; border-radius: 8px; background-color: #fff; overflow: hidden; transition: all 0.2s ease-in-out; height: 100%; position: relative; }
.wk-sprosse-card:hover .wk-sprosse-card-content { border-color: #94a3b8; background-color: #f8fafc; }
.wk-sprosse-img { width: 100%; height: 80px; object-fit: cover; background-color: #f1f5f9; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.wk-sprosse-img-placeholder { width: 100%; height: 80px; }
.wk-sprosse-label { padding: 8px 4px; font-size: 0.75rem; font-weight: 600; text-align: center; color: #334155; line-height: 1.2; position: relative; z-index: 20; background: #fff; width: 100%; }

/* ZOOM DLA ZDJĘĆ SZPROSÓW - POPRAWIONY Z-INDEX */
@media (hover: hover) {
    .wk-sprosse-card:hover .wk-sprosse-img {
        transform: scale(2.5);
        z-index: 50; 
        position: relative;
        box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    }
    
    .wk-sprosse-card:hover .wk-sprosse-label {
        z-index: 51;
    }
}

/* === ZOOM DLA ZDJĘĆ W ZAKŁADCE TILBEHØR I PROFILI === */
.group img {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s;
    transform-origin: center center;
}

@media (hover: hover) {
    .group:not(.opacity-50):not(.cursor-not-allowed):hover img {
        transform: scale(2.2);
        z-index: 100;
        position: relative;
        background-color: #ffffff;
        border-radius: 8px;
        box-shadow: 0 15px 35px rgba(0,0,0,0.25);
        padding: 5px;
    }
}

.wk-svg-info-trigger {
    z-index: 150 !important; 
    transition: transform 0.2s ease, color 0.2s ease;
}
.wk-svg-info-trigger:hover {
    z-index: 160 !important;
    transform: scale(1.2); 
}


/* === STYLE KOLORÓW (GRID Z KARTAMI) === */
.wk-farge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.wk-farge-card { cursor: pointer; display: block; -webkit-tap-highlight-color: transparent; height: 100%; }
.wk-farge-card-content { display: flex; flex-direction: column; align-items: center; border: 1px solid #cbd5e1; border-radius: 8px; background-color: #fff; overflow: hidden; transition: all 0.2s ease-in-out; height: 100%; position: relative; padding-bottom: 10px; }
@media (hover: hover) {
    .wk-farge-card:hover .wk-farge-card-content { border-color: #94a3b8; background-color: #f8fafc; transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); }
}
.wk-farge-img { width: 100%; height: 110px; object-fit: cover; background-color: #f1f5f9; border-bottom: 1px solid #e2e8f0; margin-bottom: 12px; transition: transform 0.3s ease; }
@media (hover: hover) {
    .wk-farge-card:hover .wk-farge-img { transform: scale(1.05); }
}
.wk-farge-color-swatch { width: 28px; height: 28px; border-radius: 50%; position: absolute; top: 96px; right: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.15); z-index: 10; }
.wk-farge-label { padding: 0 8px; font-size: 0.8rem; font-weight: 600; text-align: center; color: #334155; line-height: 1.3; width: 100%; }
.wk-farge-card input:checked ~ .wk-farge-card-content .wk-farge-label { color: #15803d; }

/* Obsługa wyboru z wyszukiwarki (Valgfri) */
.valgfri-input { display: none; margin-top: 8px; border: 1px solid #d1d5db; border-radius: 4px; padding: 6px 10px; width: 100%; font-size: 0.9rem; }


#wk-mobile-cart-wrapper { display: block; margin-top: 12px; width: 100%; }

/* ======================================================= */
/* === WYBÓR MATERIAŁU I DOSTAWCY === */
/* ======================================================= */
.wk-selection-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(85px, 1fr)); gap: 16px; width: 100%; align-items: end; }
.wk-selection-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 8px; background-color: transparent; border: 2px solid transparent; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; height: 100%; min-height: 80px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

.wk-check-badge { display: none !important; }
.wk-card-image { width: 100%; height: auto; max-height: 60px; object-fit: contain; margin-bottom: 6px; filter: grayscale(100%); opacity: 0.5; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: center bottom; }
.wk-card-label { font-size: 0.75rem; font-weight: 500; text-align: center; color: #94a3b8; line-height: 1.1; transition: color 0.3s ease; }

.wk-selection-card.selected { background-color: rgba(22, 163, 74, 0.08); border-color: transparent; }
.wk-selection-card.selected .wk-card-image { filter: grayscale(0%); opacity: 1; transform: scale(1.15); }
.wk-selection-card.selected .wk-card-label { color: #16a34a; font-weight: 700; }
@media (hover: hover) { .wk-selection-card:hover:not(.selected):not(:disabled) .wk-card-image { opacity: 0.8; filter: grayscale(0%); transform: translateY(-2px); } }
.wk-selection-card:disabled { opacity: 0.3; cursor: not-allowed; background-color: transparent; }
.wk-selection-card:disabled .wk-card-image { filter: grayscale(100%); opacity: 0.3; }

/* ======================================================= */
/* === NOWE ELEMENTY: WYSRODKOWANY PRZYCISK PRODUKTU === */
/* ======================================================= */

.wk-product-trigger-btn-centered {
    width: fit-content;
    min-width: 280px;
    max-width: 100%;
    margin: 0 auto;
    background-color: #ffffff;
    border: 2px solid #cbd5e1;
    border-radius: 12px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
}
.wk-product-trigger-btn-centered:hover {
    border-color: #16a34a;
    background-color: #f8fafc;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.wk-trigger-content {
    display: flex;
    align-items: center;
    gap: 15px;
}
.wk-trigger-img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 8px;
    background-color: #f1f5f9;
    border: 1px solid #e2e8f0;
}
.wk-trigger-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.wk-trigger-label {
    font-size: 0.7rem;
    color: #64748b;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2px;
    letter-spacing: 0.05em;
}
.wk-trigger-value {
    font-size: 1.15rem;
    color: #1e293b;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
}
.wk-trigger-icon {
    color: #94a3b8;
    font-size: 1.5rem;
    margin-left: 10px;
}


/* Modal (Tło) */
.wk-product-modal {
    position: fixed; 
    top: 0;
    left: 0;
    right: 0; 
    bottom: 0; 
    width: 100%; /* BYŁO 100vw */
    height: 100%; /* BYŁO 100vh */
    background-color: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 2147483647; 
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.wk-product-modal.open {
    opacity: 1;
    pointer-events: auto;
}

/* Modal (Okno) */
.wk-product-drawer {
    background-color: #ffffff;
    width: 90%;
    max-width: 1000px;
    max-height: 85vh;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative; 
    z-index: 2147483648; 
}
.wk-product-modal.open .wk-product-drawer {
    transform: translateY(0);
}

/* Header Modala */
.wk-drawer-header {
    padding: 16px 24px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    z-index: 10;
    flex-shrink: 0; /* Zapewnia, że header nie zostanie ściśnięty */
}
.wk-drawer-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
}
.wk-drawer-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #64748b;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: all 0.2s;
}
.wk-drawer-close:hover {
    background-color: #f1f5f9;
    color: #ef4444;
}

/* Content Modala */
.wk-drawer-content {
    padding: 24px;
    overflow-y: auto;
    background-color: #f8fafc;
    overscroll-behavior: contain; /* NOWE: Zapobiega przewijaniu strony pod spodem na telefonach */
    -webkit-overflow-scrolling: touch; /* NOWE: Płynne przewijanie na urządzeniach Apple */
}

/* Siatka Produktów */
.wk-product-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); 
    gap: 16px;
}

/* Pojedynczy Kafelek Produktu */
.wk-product-item {
    background-color: #ffffff;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    height: 100%;
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.wk-product-item:hover {
    transform: translateY(-4px) translateZ(0);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.wk-product-item.active {
    border-color: #16a34a;
    background-color: #f0fdf4;
    box-shadow: 0 0 0 1px #16a34a;
}

.wk-product-img {
    width: 100%;
    height: 100px;
    object-fit: contain;
    margin-bottom: 12px;
    border-radius: 6px;
    background-color: #f1f5f9; 
}

.wk-product-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #334155;
    line-height: 1.3;
}

.wk-product-item.active .wk-product-name {
    color: #15803d;
}

/* Dostosowanie dla Mobile (Bottom Sheet) */
@media (max-width: 768px) {
    .wk-product-modal {
        align-items: flex-end; 
    }
    .wk-product-drawer {
        width: 100%;
        max-width: 100%;
        max-height: 85%; /* Zmienione z 80vh na % dla bezpieczeństwa w iframe */
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        transform: translateY(100%); 
        display: flex; /* Zapewnia właściwe działanie overflow */
        flex-direction: column;
    }
    .wk-product-modal.open .wk-product-drawer {
        transform: translateY(0);
    }
    .wk-drawer-content {
        padding: 16px; /* Zmniejszono na mobile dla większej przestrzeni */
        flex-grow: 1; 
        overflow-y: auto;
    }
    .wk-product-grid-container {
        grid-template-columns: repeat(2, 1fr); 
        gap: 12px;
    }
    .wk-product-img {
        height: 80px;
    }
    .wk-product-item {
        padding: 10px;
    }
}

/* === MODAL FORMULARZA (BESTILLING) === */
.wk-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.wk-modal.hidden {
    display: none;
    opacity: 0;
    pointer-events: none;
}

.wk-modal-content {
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: modalSlideIn 0.3s ease-out;
    overscroll-behavior: contain; /* Dodano na wszelki wypadek */
}

@keyframes modalSlideIn {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.wk-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #e5e7eb;
}

.wk-logistics-wrapper {
    animation: modalSlideIn 0.4s ease-out;
}

.wk-pallet-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wk-pallet-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* === ANIMACJA PULSOWANIA NAKŁADKI SZPROSÓW === */
@keyframes wk-pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); }
    70% { box-shadow: 0 0 0 10px rgba(22, 163, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
.wk-pulse-green {
    animation: wk-pulse-green 1.5s infinite;
    border-color: #16a34a !important;
}