/* Pracownia RASEK 2025 - PanelKalkulator_Style_v_1.006 */

/* Wyłączenie domyślnego niebieskiego podświetlenia przy dotyku (Mobile) */
* {
    -webkit-tap-highlight-color: transparent;
}

@media screen and (max-width: 640px) {

    body {
        font-size: 18px;
    }
    input, select, button {
        /* font-size: 16px; */ 
    }
        h1 {
        font-size: 24px;
    }
    .main-wrapper {
    padding: 1px !important;
    }
.pdf-projekt-btn {
        width: 300px !important;
        height: 80px !important;
        font-size: 28px !important;
        top: -40px !important;
        right: 130px !important;
    }

    .szkic-close-btn {
        width: 80px !important;
        height: 80px !important;
        font-size: 28px !important;
        top: -40px !important;
        right: 25px !important;
        background-color: #dc5e5e !important;
        z-index: 2000 !important;
    }
    
    /* Dodatkowa poprawka, żeby szkicownik był bardziej dostępny */
    .szkic-container {
        padding-bottom: 70px !important; /* Miejsce na duży przycisk PDF na dole */
    }
    .modal-content.pin-content {
    width: 400px !important;
    }
}

@media screen and (max-width: 1338px) {
    #inputContainer {
    justify-content: center !important;
    }
    .menu {
    }
    .header-container {
    }
}

.main-wrapper {
    display: flex;
    max-width: 1320px;
    margin: 0 auto;
    /* padding: 0 20px; */
    width: 100%;
    position: relative;
    flex-direction: column;
    align-items: center;
}

body {
    min-width: 712px; /* <--- WAŻNE: Mówimy, że strona ma MINIMUM 620px szerokości */
    margin: 0 auto;   /* Wyśrodkowanie */
    padding: 0;
    width: 100%;
    background-color: white;
    /* Usuń overflow-x: hidden, pozwól viewportowi działać */
    letter-spacing: 0.5px;
    /* font-family: 'Inter', sans-serif; */
    font-family: "Roboto", sans-serif;
}

/* Wyśrodkowanie głównego kontenera */
.container {
    margin: 5px auto;
    max-width: 1360px;
    width: 100%;
    position: relative;
}

/* Kontener na zestawy */
#inputContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    margin-top: 15px;
    flex-direction: row; 
    justify-content: flex-start;
}

select {
    letter-spacing: 0.5px;
}

.header-row {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    border: 1px solid #d0d0d0;
    width: 200px;
    margin: -25px 0 12px 0;
    background-color: #f5efb7;
    padding: 4px 4px 4px 15px;
    border-radius: 6px;
    box-shadow: -1px -1px 13px 0px rgb(0 0 0 / 16%);
    flex-direction: row;
    align-items: center;
    font-family: "Michroma", sans-serif;
}

.row {
    display: flex;
    flex-direction: column;
    /* margin-bottom: 10px; */
}

.rowZ {
    /* display: flex;
    flex-direction: column;
    margin: 0px 0px 10px 30px; */
}

.row2 {
    display: flex;
    align-items: center;
    gap: 0px;
    flex-direction: row-reverse;
    justify-content: space-between;
    margin: 5px 0 10px 0;
}

.row.label {
    margin-bottom: 5px;
    margin-left: 2px;
}

.row input, .rowZ input {
    padding: 5px;
    width: 120px;
    border: 1px solid #d0d0d0;
    height: 25px;
    border-radius: 15px;
    color: #468bc6;
    font-size: medium;
    text-align: center;
}

.opcje {
    display: flex;
    flex-wrap: nowrap;
}

.fototkanina {
    width: 172px;
    height: 100px;
    background-color: #ffffff;
    border: 1px solid #d0d0d0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0 !important; 
    overflow: hidden;
    /* position: relative; */
    border: 1px solid #d0d0d0;
    background-color: #ffffff;
    box-shadow: -1px -1px 10px 0px rgb(0 0 0 / 16%);
    align-items: center;
    justify-content: center;
    transition: transform 0.1s, background-color 0.31s;
}
.trigger-icon img {
    width: 55px;
}

.image-box1 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #757575;
    text-align: center;
    cursor: zoom-in;
}

img.selected-image.zoomed {
    transform: scale(2.5);
    border: 1.8px solid #ffffff;
    box-shadow: 2px 2px 4px rgb(0 0 0 / 28%);
    border-radius: 1px;
    transition: transform 0.25s;
    z-index: 1000;
    cursor: zoom-out;
}

.scroll-btn {
    position: absolute;
    top: 50%;
    height: 70px;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.35);
    color: #f7f7f7;
    border: none;
    cursor: pointer;
    font-size: 24px;
    padding: 10px;
    z-index: 1001;
    opacity: 0;
}

.scroll-btn.visible {
    opacity: 1;
}

.left-btn { right: 200px; }
.right-btn { left: 200px; }

img.selected-image {
    transition: transform 0.25s;
    z-index: 1000;
}

/* Wyśrodkowanie górnego menu */
.menu1 {
    height: 15px;
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
    background-color: transparent;
    border: none;
    box-shadow: none;
}

/* Style pojedynczego zestawu (options) */
.options {
    padding: 10px 20px;
    margin: 0 0 15px 0;
    position: relative;
    border-radius: 6px;
    background-color: #f7f7f7;
    width: 650px;
    box-sizing: border-box;
    box-shadow: -1px -1px 10px 0px rgb(0 0 0 / 16%);
    border: 1px solid #d0d0d0;
}

/* --- PANEL STEROWANIA --- */
.control-panel {
    border: 1px solid #d0d0d0;
    padding: 10px 0 10px 0;
    margin: 0 0 15px 0;
    border-radius: 6px;
    background-color: #f7f7f7;
    width: 650px;
    height: auto;
    min-height: 211px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* gap: 10px; */
    box-shadow: -1px -1px 10px 0px rgb(0 0 0 / 16%);
}

/* Nadpisanie styli dla elementów wewnątrz control-panel */
.control-panel .dodatki {
    width: 100% !important;
    box-sizing: border-box;
    border: none !important;
    background-color: transparent !important;
}

.control-panel .button-container {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: center;
    display: flex;
    align-items: center;
}

.remove-btn {
    position: absolute;
    right: 8px;
    top: -15px;
    background-color: #dc5e5e;
    color: #ffffff;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid #7a7a7a;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 0;
    padding: 0;
    font-weight: bold;
}

/* Wyśrodkowanie wyniku */
.result {
    position: relative;
    width: 650px;
    border: 1px solid #d0d0d0;
    padding: 10px 0 10px 0;
    margin: 0 auto 20px auto;
    background-color: #f7f7f7;
    border-radius: 6px;
    box-shadow: -1px -1px 10px 0px rgb(0 0 0 / 16%);
}

.result_btn {
    display: flex;
    padding: 10px;
    gap: 10px;
    justify-content: center;
    align-items: flex-start; /* Ważne dla wyrównania ikon */
}
.icon-btn {
    width: 90px;          /* Szerokość całego przycisku */
    height: 90px;         /* Wysokość całego przycisku */
    border: none;
    background-color: transparent !important;
    
    /* --- KLUCZOWA ZMIANA (NAPRAWA PROPORCJI) --- */
    /* Pierwsza wartość (auto) to szerokość - dopasuje się sama */
    /* Druga wartość (50px) to wysokość - wspólna dla wszystkich */
    background-size: auto 50px; 
    
    background-repeat: no-repeat;
    background-position: center 5px; /* Wyśrodkowanie poziome, 5px od góry */
    
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Tekst "przyklejony" do dołu */
    align-items: center;
    padding: 0;
    padding-bottom: 5px;       /* Odstęp tekstu od dolnej krawędzi */
    transition: transform 0.1s;
    outline: none;
    box-shadow: none !important;
}
.icon-btn span {
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: bold;
    color: #4e4e4e;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;
    font-family: 'Michroma', sans-serif;
}

/* Efekt kliknięcia */
.icon-btn:active:not(:disabled) {
    transform: scale(0.95);
}

/* Tekst dla zablokowanych przycisków (opcjonalnie jaśniejszy) */
.icon-btn:disabled span {
    color: #656565;
}

/* --- LOGIKA PODMIANY GRAFIK --- */

/* 1. SAVE (Zapisz) */
.btn-save { background-image: url('../images/save-b2.png'); } /* Domyślny (2) */
.btn-save:hover:not(:disabled) { background-image: url('../images/save-b3.png'); } /* Hover (3) */
.btn-save:disabled { background-image: url('../images/save-b1.png'); cursor: default; } /* Zablokowany (1) */
/* Specjalny stan po zapisaniu (4) - nadpisuje disabled dzięki !important */
.btn-save.saved-state:disabled { background-image: url('../images/save-b4.png') !important; opacity: 1 !important; }
.btn-save.saved-state span { color: #5ea335; } /* Zielony tekst po zapisie */

/* 2. PDF */
.btn-pdf { background-image: url('../images/pdf-b2.png'); }
.btn-pdf:hover:not(:disabled) { background-image: url('../images/pdf-b3.png'); }
.btn-pdf:disabled { background-image: url('../images/pdf-b1.png'); cursor: default; }

/* 3. COPY (Kopiuj) */
.btn-copy { background-image: url('../images/copy-b2.png'); }
.btn-copy:hover:not(:disabled) { background-image: url('../images/copy-b3.png'); }
.btn-copy:disabled { background-image: url('../images/copy-b1.png'); cursor: default; }

/* 4. LOAD (Wczytaj) */
.btn-load { background-image: url('../images/load-b2.png'); }
.btn-load:hover:not(:disabled) { background-image: url('../images/load-b3.png'); }
.btn-load:disabled { background-image: url('../images/load-b1.png'); cursor: default; }

/* Usunięcie starych styli, które mogą przeszkadzać */
.save-server-btn, .pdf-btn, .copy-btn, .load-server-btn {
    background-color: transparent;
    border: none;
}

.label {
    /* width: 120px; */
    padding-bottom: 5px;
    font-size: 16px;
    /* font-weight: bold; */
    color: #4e4e4e;
    /* font-style: oblique; */
    /* font-family: "Oswald", sans-serif; */
    display: flex;
    justify-content: center;
    letter-spacing: 1px;
}

.input-group {
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding-bottom: 15px;
    justify-content: space-evenly;
}


.button-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
    width: 540px;
    padding: 10px;
}

h1 {
    max-width: 650px;
    color: #434242;
    font-size: 11px;
    letter-spacing: 3px;
    font-family: 'Michroma', sans-serif;
    /* text-shadow: -2px -2px 0 #FFF, 2px -2px 0 #FFF, -2px 2px 0 #FFF, 2px 2px 0 #FFF, 0 0 8px rgb(0 0 0 / 0%); */
}

h2 {
    max-width: 530px;
    margin: 0;
    color: #4e4e4e;
    text-align: right;
    font-weight: 300;
}

.checkbox { width: 30px !important; }

.btn {
    display: flex;
    flex-direction: column; /* ZMIANA: Układa elementy pionowo */
    align-items: center;
    justify-content: center;
    font-size: 35px;        /* Rozmiar plusa pozostaje duży */
    line-height: 1.2;         /* Zmniejsza odstęp między liniami */
    padding: 5px 10px;
    background-color: #e0e0e0;
    border: 1px solid #d0d0d0;
    width: 100%;
    height: 110px;
    color: #4e4e4e;
    gap: 0px;               /* Odstęp między plusem a napisem */
    font-family: 'Michroma', sans-serif;
}

/* Nowa klasa dla napisu */
.btn-text {
    font-size: 16px;        /* Wymagane 16px */
    font-weight: normal;    /* Możesz zmienić na bold jeśli chcesz */
    letter-spacing: 0.5px;
}

.undo-btn {
    font-size: 16px;
    height: 110px;
    width: 130px;
    display: none;
    background-color: #f5efb7;
    color: #404040;
    border: 1px solid #d0d0d0;
    border-radius: 2px;
    padding: 0px 15px;
    letter-spacing: 0.5px;
    /* font-family: 'Michroma', sans-serif; */
}

.hidden { display: none; }

.fabricContainer {
    display: flex;
    gap: 10px;
    align-items: center;
}

#mainSelect1, .fabricContainer, #subList1 { display: flex; }

#mainSelect1, .mainSelect {
    width: 120px;
    height: 30px;
    padding-left: 5px;
    background-color: #f7f7f7;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    /* font-family: "Oswald", sans-serif; */
}

.mainSelect:hover, #mainSelect1:hover {
    border-color: #4e4e4e;
    background-color: #e0e0e0;
}

.mainSelect option, #mainSelect1 option {
    padding: 8px;
    background-color: #ffffff;
    color: #4e4e4e;
}

#subList1, .subList {
    width: 230px;
    height: 35px;
    padding-left: 5px;
    background-color: #ffffff;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    /* font-family: "Oswald", sans-serif; */
}

.subList:hover, #subList1:hover {
    border-color: #4e4e4e;
    background-color: #e0e0e0;
}

.subList option, #subList1 option, .puszki-select option, .orientacja-select option {
    padding: 8px;
    background-color: #ffffff;
    color: #4e4e4e;
}

.puszki-select:hover, .orientacja-select:hover {
    border-color: #4e4e4e;
    background-color: #f7f7f7;
}

.variant-label {
    font-size: 14px;
    color: #4e4e4e;
    font-weight: bold;
    margin-top: -2px;
}

.image-container {
    margin-top: -30px;
    padding-left: 244px;
    display: none;
}

.image-container img {
    width: 155px;
    height: 85px;
    border: 1px solid #a2a2a2;
    border-radius: 2px;
}

.header-container {
    width: 650px;
    height: 180px;
    display: flex;
    margin-top: 10px;
    font-size: 7px;
    flex-direction: column;
    text-align: center;
    /* background-color: #f7f7f7; */
    background-image: url(../images/tlo-1.jpg);
    background-size: cover;
    /* background-position-y: -241px; */
    box-shadow: -1px -1px 10px 0px rgb(0 0 0 / 16%);
    align-items: flex-start;
    justify-content: space-around;
}

.header-logo {
    width: 350px;
    margin-left: 25px;
}

.dodatki {
    height: auto;
    min-height: 20px;
    border: 1px solid #d0d0d0;
    padding: 5px 20px 15px 20px;
    border-radius: 6px;
    background-color: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 540px;
}

/* Kontener na opcje dostawy (prawa strona dodatków) */
.delivery-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    margin-right: 10px;
}
.delivery-group label {
    -webkit-user-select: none; /* Safari i Chrome Mobile */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Internet Explorer/Edge */
    user-select: none;         /* Standard */
    cursor: pointer;           /* Wymusza kursor "rączki" */
}

.dodatki label {
    display: flex;
    gap: 5px;
    align-items: center;
    font-size: 16px;
    color: #282828;
    color: #4e4e4e;
}

.dodatki input[type="number"] {
    padding: 5px;
    width: 90px;
    border: 1px solid #d0d0d0;
    height: 20px;
    border-radius: 4px;
    color: #468bc6;
    font-size: medium;
}

.dodatki input[type="checkbox"] { margin-right: 0; }

.copy-btn, .pdf-btn, .pdf-projekt-btn, .email-btn, .load-server-btn, .save-server-btn {
    cursor: pointer;
    z-index: 1000;
    height: 90px;
    padding: 0px 20px;
    color: #4e4e4e;
}

.pdf-projekt-btn {
    padding: 0px 10px;
    position: absolute;
    right: 69px;
    top: -20px;
    background-color: #e0e0e0;
    color: #4e4e4e;
    cursor: pointer;
    border-radius: 2px;
    border: 1px solid #7a7a7a;
    height: 40px;
    width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: medium;
}

.copy-btn:hover, .pdf-btn:hover, .pdf-projekt-btn:hover, .email-btn:hover, .load-server-btn:hover, .save-server-btn:hover {
    background-color: #c0dcf4;
    /* transition: transform 0.1s;
    transform: scale(1.05); */
}

.btn:hover {
    background-color: #c0dcf4;
    color: #2d2d2d;
    border-color: #a0a0a0;
}

.undo-btn:hover {
    background-color: #c0dcf4;
    color: #333333;
    border-color: #a0a0a0;
}

.remove-btn:hover {
    background-color: #4e4e4e;
    color: #ffffff;
    border-color: black;
}

.Pianka-box2, .Rzep-box3, .Kontakt-box4 {
    width: 140px;
    height: 100px;
    /* background-color: #ffffff; */
    /* border: 1px solid #d0d0d0; */
    /* gap: 4px; */
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.1s, background-color 0.31s;
    cursor: pointer;
    filter: grayscale(100%) opacity(0.5) brightness(0.97);
    justify-content: center;
    margin-right: 5px;
}

.Pianka-box2 img, .Rzep-box3 img, .Kontakt-box4 img {
    max-width: 90%;
    max-height: 100%;
    transition: transform 0.3s;
}

.Pianka-box2 p, .Rzep-box3 p, .Kontakt-box4 p {
    margin-top: 5px;
    font-size: 14px;
    font-family: "Oswald", sans-serif;
    transition: color 0.3s;
    text-align: center;
    margin-bottom: 3px;
}

.Pianka-box2:hover, .Rzep-box3:hover, .Kontakt-box4:hover {
    background-color: #ffffff;
    filter: grayscale(0%) opacity(1.0) brightness(1.0);
    color: #4e4e4e;
    transform: scale(1.03);
    box-shadow: 2px 3px 8px 0px rgb(0 0 0 / 27%);
}

.Pianka-box2.active, .Rzep-box3.active, .Kontakt-box4.active {
    transform: scale(1.0);
    background-color: #e0e0e0;
    filter: grayscale(0%) opacity(1.0) brightness(1.0);
    background-color: #ffffff;
    color: #4e4e4e;
    box-shadow: -1px -1px 10px 0px rgb(0 0 0 / 16%);
}

.Pianka-box2.active::before, .Rzep-box3.active::before, .Kontakt-box4.active::before {
    content: "✓";
    position: absolute;
    top: -20px;
    left: 3px;
    font-size: 28px;
    color: #468bc6;
}

.selected-image {
    width: 142px;
    height: 74px;
    object-fit: cover;
}

select:focus { outline: 1.5px solid #468bc6; }
option:focus { outline: 1.5px solid #468bc6; }
input[type="number"]:focus { outline: 1.5px solid #468bc6; }

.row3 {
    display: none;
    padding-top: 5px;
    border: 1px solid #d0d0d0;
    border-radius: 0 0 6px 6px;
    background-color: #ffffff;
    margin: 20px 0 10px 0;
}

.row3 .input-group {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    justify-content: center;
    /* align-items: flex-end; */
    text-align: center;
}
.row3.hidden label {
    font-size: 12px;
text-align: center;
}
.row3 .row {
    display: flex;
    flex-direction: column;
    margin-bottom: 5px;
}

.row3 input[type="number"] {
    width: 80px;
    padding: 5px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    color: #468bc6;
    font-size: small;
}

.row3 select {
    height: 30px;
    padding: 5px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    font-size: small;
    /* font-family: "Oswald", sans-serif; */
    color: #468bc6;
}

.pomiar {
    text-align: center;
    padding: 4px;
    margin: 4px 0 4px 0;
    font-size: 16px;
    color: #4e4e4e;
    /* font-weight: bold; */
    /* letter-spacing: 1px; */
    background-color: #f1f1f1;
}

.row3-1 {
    width: 90px;
    display: flex;
    flex-direction: column;
}
.row3-2a {
    width: 145px;
}
.row3-2b {
    width: 100px;
    display: none;
}

button.ZobaczProjek {
    font-family: "Oswald", sans-serif;
    height: 100%;
    color: #468bc6;
    background-color: white;
    border: 1.75px dotted #468bc6;
    letter-spacing: 0.5px;
    margin-left: 15px;
}

button.ZobaczProjek:hover {
    background-color: #c0dcf4;
    border: 1.75px dotted #468bc6;
    letter-spacing: 0.5px;
}

button.ZobaczProjek.active {
    background-color: #dc5e5e;
    color: white;
}

button.material-symbols-outlined {
    font-size: 28px;
    color: #757587;
    background-color: #f7f7f700;
    border: 0px dotted #757587;
    transition: transform 0.1s ease;
}

button.material-symbols-outlined:hover {
    color: #468bc6;
    transform: scale(1.2);
    transform-origin: center;
}

button.material-symbols-outlined.active {
    color: #dc5e5e;
    transform: scale(1.2);
}

#szicMainCon {
    position: fixed;
    top: 50px;
    left: 50px;
    display: flex;
    background-color: white;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    display: none;
    font-family: 'Inter', sans-serif;
}

.szkic-container {
    z-index: 1000;
    cursor: grab;
    user-select: none;
}

.szkic-container:active { cursor: grabbing; }

.szkic-container2 {
    position: relative;
    padding: 0px 60px 20px 40px;
    overflow: hidden;
    word-wrap: break-word;
    font-family: 'Inter', sans-serif;
}

.szkic-close-btn {
    position: absolute;
    right: 8px;
    top: -15px;
    background-color: #dc5e5e;
    color: #ffffff;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid #7a7a7a;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 0;
    padding: 0;
    font-weight: bold;
    z-index: 1000;
}

.szkic-close-btn:hover {
    background-color: #4e4e4e;
    color: #ffffff;
    border-color: black;
}

.szkic-figure {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #c0dcf4;
    box-shadow: inset 1px 1px 20px 3px rgb(55 117 170 / 60%);
    z-index: 1001;
    overflow: visible;
}

.szkic-figureM {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff00;
    border: 1.5px dashed #4e4e4e;
    z-index: 1000;
    overflow: visible;
}

.szkic-point {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #c61212;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 1003;
}

.szkic-line {
    position: absolute;
    pointer-events: none;
    z-index: 1000;
}

.szkic-title {
    height: 100px;
    text-align: left;
    font-size: 18px;
    font-weight: bold;
    padding: 12px 0px 0px 40px;
    color: #4e4e4e;
    font-family: "Michroma", sans-serif;
}

.result-moved {
    position: absolute;
    width: 650px;
    left: 655px;
    top: 387px;
    box-sizing: border-box;
    margin-left: 15px;
}

/* Stylizacja przycisku graficznego */
.move-btn {
    margin: -40px 30px 0 0;
    color: #d0d0d0;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 10px;
    font-family: "Michroma", sans-serif;
    background: none;
    border: none;
    padding: 5px;
    height: auto;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    outline: none;
    transform: none;
    transition: none;
}
.move-btn:hover {
    /* color: #4e4e4e;
    filter: opacity(0.8);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s; */
}

/* Stylizacja obrazka - tu dzieje się cała magia obrotów */
.move-btn img {
    width: 60px;
    height: auto;
    display: block;
    filter: opacity(0.3);
    
    /* 1. Pozycja startowa: 0 stopni */
    transform: rotate(0deg);
    
    /* Płynna animacja */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s;
}

/* 2. HOVER (gdy NIE jest active):
   Obrót o 60 stopni w prawo */
.move-btn:not(.active):hover img {
    filter: opacity(0.8);
    transform: rotate(10deg);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s;
}

/* 3. ACTIVE (Po kliknięciu):
   Obrót o kolejne 120 stopni (60 + 120 = 180).
   Ikona ląduje "do góry nogami" (180 stopni) i tak zostaje, sygnalizując zmianę widoku. */
.move-btn.active img {
    filter: opacity(0.3);
    transform: rotate(90deg);
}
.move-btn.active:hover img {
    transform: rotate(100deg);
    filter: opacity(0.8);
}

/* KLASA PRZEŁĄCZAJĄCA WIDOK NA "STARY" */
.view-split.menu1 {
    margin: 0 0 0 0;
}

.view-split.container {
    margin: 5px 10px;
}

.view-split .options,
.view-split .control-panel {
    margin-left: 0; 
    margin-right: 0;
}

@media (max-width: 1338px) {

    .menu1 { justify-content: center; }
    .move-btn { display: none; }

    .result-moved {
        position: static;
        max-height: none;
        margin: 0 auto 20px auto;
        border: 1px solid #d0d0d0;
        background-color: #f7f7f7;
        border-radius: 6px;
        font-family: "Open Sans", serif;
    }
    .view-split.container {
        margin: 5px auto;
    }
    .view-split .options,
    .view-split .control-panel {
        margin-left: auto;
        margin-right: auto;
    }
    .view-split.menu1 {
        margin: 0;
        justify-content: center;
    }
    .menu1 { justify-content: center; }
    .move-btn { display: none; }
}

.hidden-for-pdf { display: none; }

.input-group .unit {
    margin-left: 5px;
    font-size: medium;
    color: #468bc6;
}

.szer, .wys, .szt, .klej {
    display: flex;
    justify-content: center;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    width: 110px;
    padding: 5px;
    font-size: 16px;
    text-align: center;
}

.number-input-container {
    position: relative;
    display: inline-block;
}

.number-input-container .arrow-up,
.number-input-container .arrow-down {
    position: absolute;
    width: 35px;
    height: 35px;
    font-size: x-large;
    font-weight: 100;
    color: #4e4e4e;
    background-color: #f7f7f7;
    border: 1px solid #d0d0d0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}

.number-input-container .arrow-up {
    border-radius: 0 15px 15px 0;
    right: 0px;
    top: 0px;
}

.number-input-container .arrow-down {
    border-radius: 15px 0 0 15px;
    left: 0px;
    bottom: 0px;
}

.number-input-container .arrow-up:hover,
.number-input-container .arrow-down:hover {
    color: #4e4e4e;
    background-color: #c0dcf4;
    border: 1px solid #afafaf;
    width: 35px;
    height: 35px;
}
.number-input-container .arrow-up:hover{
    color: #4e4e4e;
    background-color: #c0dcf4;
    border: 1px solid #afafaf;
    width: 35px;
    height: 35px;
    right: 0px;
    top: 0px;
}
.number-input-container .arrow-down:hover {
    color: #4e4e4e;
    background-color: #c0dcf4;
    border: 1px solid #afafaf;
    width: 35px;
    height: 35px;
    left: 0px;
    bottom: 0px;
}



.inner-square {
    position: absolute;
    width: 54px;
    height: 54px;
    background-color: white;
    border: 1px solid #a0a5a9;
    transform: translate(-50%, -50%);
}

.inner-square2 {
    position: absolute;
    width: 42px;
    height: 42px;
    border: 1px solid #a0a5a9;
    box-shadow: inset 0px 0px 3px 0px rgb(160 160 160);
    transform: translate(-50%, -50%);
}

.inner-square-circle {
    position: absolute;
    width: 27px;
    height: 27px;
    background-color: #d9dbda;
    border-radius: 50%;
    box-shadow: inset 1px 2px 2px 1px rgb(160 160 160);
    transform: translate(-50%, -50%);
}

.inner-square-circle1 {
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: #ffffff;
    border: 0.5px solid #878787;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.inner-square-circle2 {
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: #a0a5a9;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.dashed-line {
    position: absolute;
    border: 1px dashed red;
    z-index: 1002;
}

.horizontal-line {
    width: 100%;
    height: 0;
    top: 50%;
    left: 0;
}

.vertical-line { width: 0; }

.szkic-opisX, .szkic-opisY {
    text-align: center;
    width: 120px;
    position: absolute;
    font-size: large;
    color: #4e4e4e;
    background-color: rgb(229 194 98);
    padding: 4px 10px;
    border-radius: 3px;
    border: 1px solid #9f9f9f;
    box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.2);
    z-index: 1002;
    line-height: 1.2;
}

.szkic-opisX { height: 47px; }
.szkic-opisY { height: 47px; }

.dimension-label {
    font-size: large;
    color: #4e4e4e;
    padding: 2px 5px;
    white-space: nowrap;
}

.szkic-podsumowanie p {
    margin: 0px !important;
    color: #4e4e4e;
    font-size: large;
}
.szkic-podsumowanie span {
    color: #4e4e4e;
    font-family: "Michroma", sans-serif;
    font-size: 18px;
}

.podsumowanie-text-input {
    resize: none !important;
    width: 520px;
    padding: 10px;
    margin-top: 10px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    font-size: 18px;
    color: #4e4e4e;
    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: pre-wrap;
}

#szkicInput {
    width: 100%;
    padding: 10px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    font-size: medium;
    color: #468bc6;
    margin-top: 10px;
}

.KontaktAll { z-index: 1000; }
.no-box-shadow { box-shadow: none !important; }
.header-divider {
    border: none;
    height: 0.5px;
    background-color: #e0e0e0;
}

.footer {
    margin: 0 50px 0 50px;
}

.footer h3 {
    margin-block-start: 0;
    margin-block-end: 1em;
}

.footer a { color: #468bc6; }

p.version {
    color: #b2b2b2;
    text-align: center;
    font-size: 14px;
    padding-bottom: 20px;
}

.infolinia-box {
    line-height: 26px;
    width: 230px;
    height: 75px;
    border: 1px solid #a0a0a0;
    border-radius: 6px;
    text-align: center;
    font-size: 30px;
    color: #4e4e4e;
    background-color: #ffffff;
    box-sizing: border-box;
}
.namepage { line-height: 35px; }

.menu0 {
    background-color: #c0dcf4;
    width: 650px;
    height: 30px;
    box-shadow: -1px -1px 10px 0px rgb(0 0 0 / 16%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu {
    border-radius: 4px;
    height: 30px;
    margin-bottom: 100px;
    background-color: #ffffff;
    border: 1px solid #d0d0d0;
    width: 650px;
    border-radius: 0 0 10px 10px;
    box-shadow: -1px -1px 10px 0px rgb(0 0 0 / 16%);
}
.menu-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 5px;
    gap: 15px;
    text-align: center;
}

.menu-item {
    border-radius: 6px; */
    /* box-shadow: -1px -1px 10px 0px rgb(0 0 0 / 16%); */
    /* border: 1px solid #d0d0d0; */
    /* margin: 5px; */
    /* padding-top: 3px; */
    width: 105px;
    /* height: 132px; */
    display: flex;
    color: #4e4e4e;
    font-size: x-small;
    /* font-weight: bold; */
    /* font-family: "Oswald", sans-serif; */
    flex-direction: column;
    /* background-color: white; */
    align-items: center;
    justify-content: flex-start;
}

.menu-item img {
    margin: 7px 0 0 0;
    width: 80px;
    border: 2px solid #ffffff;
    box-shadow: 0px 2px 6px 2px rgb(0 0 0 / 17%);
    border-radius: 4px;
}

.menu-item p {
    margin: 5px 0 0 0;
    font-size: 10px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    width: 70px;
    font-family: 'Michroma', sans-serif;
}

/* Wspólny styl dla zablokowanych przycisków */
.save-server-btn:disabled,
.pdf-btn:disabled,
.copy-btn:disabled,
.load-server-btn:disabled {
    background-color: #e0e0e0;
    border-color: #d0d0d0;
    color: #a0a0a0;
    cursor: not-allowed;
    transform: none !important;
    opacity: 0.4;
}

.save-server-btn:disabled:hover,
.pdf-btn:disabled:hover,
.copy-btn:disabled:hover,
.load-server-btn:disabled:hover {
    background-color: #e0e0e0;
}

.quote-info-header {
    background-color: #e0e0e0;
    border: 1px solid #d4d4d4;
    color: #4e4e4e;
    padding: 15px;
    margin-bottom: 15px;
    text-align: center;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.quote-info-header .quote-id {
    font-weight: normal;
    font-size: 18px;
    color: #404040;
}

.quote-info-header .quote-id b {
    font-weight: bold;
    font-size: 20px;
    color: #2d2d2d;
}

.quote-info-header .quote-pin {
    font-weight: normal;
    font-size: 18px;
    color: #dc5e5e;
    margin-left: 15px;
}

.quote-info-header .quote-pin b { font-weight: bold; }

.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}

.pin-overlay-style {
    background-color: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(2px);
}

.modal-content.pin-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    width: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.modal-input-field {
    font-size: large;
    text-align: center;
    margin: 10px 0;
    padding: 10px;
    width: 80%;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    color: #404040;
}

.error-msg {
    color: red;
    font-size: 16px;
    margin-top: 10px;
    min-height: 20px;
}

.close-modal {
    position: absolute;
    top: 5px; right: 10px;
    font-size: 24px;
    cursor: pointer;
}

/* MODAL SUKCESU */
#saveSuccessModal .modal-content {
    background-color: #ffffff;
    width: -moz-fit-content;
    width: fit-content;
    min-width: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 30px;
    border-radius: 6px;
    border: 1px solid #d0d0d0;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

#saveSuccessModal .modal-header h2 {
    color: #4e4e4e;
    margin-bottom: 20px;
    margin-top: 5px;
    text-align: left;
}
.modal-header {
    padding: 20px 0 5px;
}

.quote-box.flex-row-box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 15px;
    padding: 10px 18px;
    background-color: #e0e0e0;
    border: 1px solid #868686;
    border-radius: 6px;
    margin-bottom: 20px;
    flex-direction: row-reverse;
}

.quote-text-wrapper { text-align: left; }

.quote-label {
    font-size: 19px;
    color: #333;
}

.quote-number-display.large-text {
    font-size: 36px !important;
    color: #dc5e5e;
    letter-spacing: 1px;
    line-height: 1.2;
    text-align: center;
}

.copy-btn-compact {
    background-color: #ffffff;
    border: 1px solid #9d9d9d;
    color: #4e4e4e;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 19px;
    border-radius: 4px;
    white-space: nowrap;
    height: 60px;
    width: 200px;
}

.copy-btn-compact:hover {
    background-color: #c0dcf4;
    border-color: #868686;
    color: #404040;
}

#modalQuotePrice {
    color: #5ea335;
}

.order-btn-action {
    background-color: #ffffff;
    color: #4e4e4e;
    border: 1px solid #4e4e4e;
    padding: 8px 25px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    letter-spacing: 1px;
    margin-top: 5px;
}

.order-btn-action:hover {
    background-color: #c0dcf4;
    color: #404040;
}

.pin-confirm-btn {
    background-color: #c0dcf4;
    color: #4e4e4e;
    border: 1px solid #767676;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    letter-spacing: 1px;
    margin-top: 10px;
}

.pin-confirm-btn:hover {
    background-color: #468bc6;
    color: #ffffff;
}

.quote-section {
    margin: 15px 15px 0 15px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #d0d0d0;
    page-break-inside: avoid;
    font-family: 'Inter', sans-serif;
}

.quote-section:last-child {
    border-bottom: none;
}
.quote-section span {
    font-size: 16px;
}

#pdf-temp-container {
    position: fixed;
    top: 0;
    left: -9999px;
    width: 560px;
    background-color: #ffffff;
    padding: 20px;
    border: 1px solid #d0d0d0;
    font-family: "Open Sans", serif;
    color: #404040;
    z-index: 99999;
}

#pdf-temp-container .quote-info-header {
    background-color: #e0e0e0 !important;
    border: 1px solid #d4d4d4;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}

#pdf-temp-container .order-btn-action {
    display: none !important;
}

/* --- Specjalny styl dla Kleju (napis nad inputem) --- */
.klej {
    display: flex;
    flex-direction: column; /* Napis nad polem */
    align-items: flex-start; /* Wyrównanie do lewej */
    gap: 3px;
}

.klej-wrapper {
    display: flex;
    align-items: center;
}

.labelklej {
    font-size: 16px;
    margin-left: 2px;
}

.klej-wrapper .unit {
    margin-left: 5px; /* Odstęp 5px dla 'szt' */
    color: #4e4e4e;
}

/* --- Nowe style dla sekcji składania zamówienia (Email + Przycisk) --- */

.order-action-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #bfbfbf;
}

.order-instruction-text {
    font-size: 14px;
    color: #4e4e4e;
    text-align: center;
    margin: 0;
    max-width: 95%;
    line-height: 1.3;
}

.order-input-group {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap; /* Pozwala na zawijanie na małych ekranach */
}

#clientEmail {
    padding: 8px 10px;
    border: 1px solid #4e4e4e;
    border-radius: 4px;
    font-size: 16px;
    width: 250px;
    height: 40px; /* Dopasowanie wysokości do przycisku */
    box-sizing: border-box;
    text-align: center;
}

#clientEmail:focus {
    outline: 1px solid #468bc6;
    background-color: #ffffff;
}

/* Styl dla zablokowanego przycisku "Złóż zamówienie" */
.order-btn-action:disabled {
    background-color: #e0e0e0;
    color: #a0a0a0;
    border-color: #d0d0d0;
    cursor: not-allowed;
}

/* Korekta marginesów przycisku w nowym układzie */
.order-btn-action {
    margin-top: 0 !important; /* Reset marginesu, bo teraz jest w flexboxie */
    height: 40px; /* Sztywna wysokość dla równania z inputem */
    display: flex;
    align-items: center;
    justify-content: center;
}
/* --- Style dla nowego modala końcowego --- */

.final-instructions {
    text-align: left;
    margin-top: 15px;
    padding: 10px 20px;
    background-color: #ffffff;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.final-instructions .main-info {
    font-size: 16px;
    margin-bottom: 15px;
    color: #333;
}

.final-instructions ol {
    margin: 0;
    padding-left: 20px;
}

.final-instructions li {
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 1.4;
    color: #4e4e4e;
}

.highlight-price {
    color: #5ea335;
    font-size: 1.1em;
    font-weight: bold;
}

/* Dostosowanie linku w modalu */
.order-link {
    color: #468bc6;
    text-decoration: underline;
}

.order-link:hover {
    color: #003d82;
    text-decoration: none;
}
.start-text {
    padding: 0 15px;
    color: red;
    font-style: italic;
    text-align: center;
}
/* --- NOWY UKŁAD STOPKI (3 KOLUMNY) --- */

.footer-row {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    text-align: left;
    justify-content: center;
}

.footer-col {
    /* flex: 0.3; */
    min-width: 250px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 12px;
}

.footer-col p {
    line-height: 1.5;           /* Ładniejszy odstęp między liniami tekstu */
    margin: 5px 0;
}

/* Dostosowanie dla telefonów (układ pionowy) */
@media (max-width: 800px) {
    .footer-row {
        flex-direction: column; /* Na małym ekranie ustawia kolumny jedna pod drugą */
        text-align: center;     /* Na telefonie ładniej wygląda wyśrodkowane */
    }
    
    .footer {
        margin: 0 20px !important; /* Mniejsze marginesy boczne na telefonie */
    }
}

/* --- Komunikat technologiczny (Toast) --- */
.tech-warning-toast {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #dc5e5e;
    color: white;
    padding: 35px 40px 25px 40px; /* Większy padding u góry dla przycisku */
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
    z-index: 10000;
    font-size: 18px;
    /* font-family: "Oswald", sans-serif; */
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
    border: 2px solid white;
}

.tech-warning-toast.visible {
    opacity: 1;
    visibility: visible;
}

/* Styl przycisku zamykania */
.toast-close-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 25px;
    height: 25px;
    background-color: #4e4e4e;
    border: 1px solid white;
    color: white;
    font-weight: bold;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.toast-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* --- Poprawka wyglądu dla pól wymiarów (gdy JS zmienia je na text) --- */
.x1, .y2, .left-input, .bottom-input {
    text-align: center !important;    /* Wyśrodkowanie */
    color: #468bc6 !important;        /* Niebieski kolor tekstu */
    font-size: 16px !important;       /* Wielkość czcionki */
    padding: 5px;
    width: 80px;                     /* Szerokość pola */
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    background-color: white;
}

/* Zachowanie podświetlenia przy kliknięciu */
.x1:focus, .y2:focus, .z3:focus, .left-input:focus, .bottom-input:focus, .klej-ilosc:focus {
    outline: 1.5px solid #468bc6;
box-shadow: -1px -1px 10px 0px rgb(0 0 0 / 16%);
}
/* --- MODAL WYBORU TKANIN --- */
#fabricModal {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(2px);
}

.fabric-modal-content {
    background: white;
    width: 90%;
    max-width: 1000px;
    height: 70vh;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.fabric-modal-header {
    padding: 10px 20px;
    background: #f7f7f7;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fabric-modal-header h3 { margin: 0; color: #4e4e4e; font-size: 20px; }
.close-fabric-modal {
    background: #dc5e5e; color: white; border: none;
    width: 30px; height: 30px; border-radius: 4px; cursor: pointer; font-weight: bold;
}

.fabric-modal-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* LEWY PANEL - KATEGORIE */
.fabric-sidebar {
    width: 180px;
    background: #f0f0f0;
    border-right: 1px solid #ddd;
    overflow-y: auto;
    padding: 10px;
    flex-shrink: 0; /* Nie zwężaj się */
}

.cat-btn {
    display: block;
    /* width: 100%; */
    padding: 6px 15px;
    margin-bottom: 5px;
    text-align: left;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    /* font-family: "Oswald", sans-serif; */
    transition: 0.2s;
}

.cat-btn:hover { background: #e0e0e0; }
.cat-btn.active {
    background: #468bc6;
    color: white;
    border-color: #357abd;
}

/* PRAWY PANEL - SIATKA KOLORÓW */
.fabric-grid-container {
    flex: 1;
    padding: 0 !important; /* Reset paddingu, żeby tło było na całą szerokość */
    overflow-y: auto;
    background-color: #fff;
    /* Ścieżka do zdjęcia - upewnij się, że plik istnieje w folderze images */
    background-image: linear-gradient(to right, rgba(255,255,255, 0.7) 0 100%), url('../images/tkaniny.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.fabric-grid {
    display: grid;
    /* Automatyczne dopasowanie: min 150px szerokości, zmieści tyle ile wejdzie */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    /* gap: 7px;
    margin: 7px; */
}

.fabric-item {
    cursor: pointer;
    border: 1px solid #eee;
    border-radius: 3px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    background: white;
}

.fabric-item:hover {
    transform: translateY(4px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-color: #468bc6;
}

.fabric-thumb {
    width: 100%;
    object-fit: cover;
    background-color: #f0f0f0;
}

.fabric-name {
    padding: 8px;
    font-size: 12px;
    text-align: center;
    color: #444;
    line-height: 1.2;
    font-family: "Open Sans", sans-serif;
    word-break: break-word; /* Łamanie długich nazw */
}



div#sumaZamBtn b {
    color: #5ea335;
    font-size: 22px;
}
.SumaZam-fixed {
    position: fixed;
    top: 70px;
    right: 0;
    transform: translateY(-50%);
    background-color: #ffffff;
    color: #4e4e4e;
    border: 1px solid #d0d0d0;
    border-right: none;
    font-size: 16px;
    font-weight: bold;
    font-family: 'Michroma', sans-serif;
    /* letter-spacing: 1px; */
    padding: 10px 20px;
    border-radius: 8px 0 0 8px;
    /* box-shadow: -4px 0 15px rgba(0, 0, 0, 0.15); */
    z-index: 9999;
    cursor: default;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
@media (max-width: 1000px) {
    .SumaZam-fixed {
        font-size: 18px;
        top: 70px;
        display: flex;
        flex-direction: column;
        height: 60px;
        align-content: center;
        justify-content: center;
    }
    div#sumaZamBtn b {
        font-size: 24px;
    }
}



/* ############## MOBILE - zmiana układu (Side-by-Side) ############## */
@media (max-width: 768px) {
    .fabric-modal-content {
    width: 95%;
    height: 90vh;
    }
    /* 1. Resetujemy body, żeby było obok siebie (row), a nie pod sobą */
    .fabric-modal-body { 
        flex-direction: row; 
    }
    .result {
    font-size: 22px;
    }
    /* 2. Wąski pasek boczny z lewej */
    .fabric-sidebar {
        width: 170px;
        /* min-width: 110px;   Nie zwężaj się poniżej tego */
        height: auto;
        display: block;
        border-right: 1px solid #ddd;
        border-bottom: none;
        overflow-y: auto;   /* Przewijanie pionowe */
        overflow-x: hidden; /* UKRYJ pasek poziomy */
        padding: 10px;
    }
    
    /* 3. Dostosowanie guzików kategorii */
    .cat-btn {
        margin-bottom: 5px;
        font-size: 16px; /* Mniejsza czcionka */
        padding: 10px 10px;
        text-align: center; /* Wyśrodkowanie tekstu */
    }

    /* 4. Kontener siatki zajmuje resztę miejsca */
    .fabric-grid-container {
        padding: 10px;
    }

    /* 5. Mniejsze kafelki w siatce */
    .fabric-grid {
        /* Min 120px - zmieści zazwyczaj 2 w rzędzie na reszcie ekranu */
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); 
        gap: 8px;
    }
    
    .fabric-thumb { /* height: 60px; */ }
    .fabric-name { font-size: 10px; padding: 4px; }




.menu-container {
    gap: 25px;
}
.variant-label {
    font-size: 16px;
}
.label {
    font-size: 18px;
}
.szer input, .wys input, .szt input, .klej-wrapper input {
    font-size: 21px !important;
}
.Pianka-box2 p, .Rzep-box3 p, .Kontakt-box4 p {
    font-size: 16px;
}
.trigger-placeholder-text {
    font-size: 16px;
}
.row3.hidden label {
    font-size: 16px;
}
x1, .y2, .left-input, .bottom-input {
    font-size: 21px !important;
}
.dodatki label {
    font-size: 18px;
}
.quote-section {
    font-size: 26px;
}
.quote-section span {
    font-size: 26px;
}
.footer-col {
    font-size: 18px;
}
.copy-btn, .pdf-btn, .pdf-projekt-btn, .email-btn, .load-server-btn, .save-server-btn {
    height: 100px;
}
.result_btn {
    gap: 25px;
    padding-bottom: 25px;
}
.icon-btn span {
    font-size: 14px;
}
.menu-item p {
    font-size: 12px;
}
.btn-text {
    font-size: 21px;
}
.undo-btn {
    font-size: 18px;
}
button.ZobaczProjek {
    margin-right: 10px;
}
.row3 .input-group {
    gap: 24px;
}
.row3 select {
    font-size: 16px;
    /* width: 100%; */
    height: 36px;
    padding: 5px;
}
.quote-section-1 span {
    font-size: 26px !important;
}
.quote-section-2, .quote-section-3 {
    font-size: 20px !important;
}
.order-instruction-text {
    font-size: 20px;
}
#clientEmail {
    font-size: 18px;
    width: 350px;
}
.quote-info-header .quote-pin {
    font-size: 26px;
}
.quote-info-header .quote-id {
    font-size: 26px;
}
.quote-info-header .quote-id b {
    font-size: 26px;
}
.modal-content.pin-content button {
    margin-top: 20px;
}
.modal-input-field {
    height: 60px;
    font-size: 26px;
}
button.pin-confirm-btn {
    height: 80px;
    font-size: 26px;
}

}




/* ############## KONIEC MOBILE - zmiana układu (Side-by-Side) ############## */

.features-show-more-btn { display: none; }
.features-toggle-btn {
display: none;
}

/* --- Zmiana wyglądu triggera w zestawie (NOWY STYL) --- */

.fabric-trigger-box {
    /* width: 100%; */
    /* height: 100%; */
    position: relative;
    /* display: flex; */
    /* flex-direction: column; */
    cursor: pointer;
    text-align: center;
    background: #ffffff;
    transition: 0.2s;

}

.fototkanina:hover { 
    background-color: #ffffff;
    filter: grayscale(0%) opacity(1.0) brightness(1.0);
    color: #4e4e4e;
    transform: scale(1.03);
    box-shadow: 2px 3px 8px 0px rgb(0 0 0 / 27%);
}

/* Styl zdjęcia wypełniającego cały box */
.trigger-img {
    width: 172px;
    height: 100px;
    object-fit: cover;
    display: block;
}

/* Pasek z nazwą koloru na dole */
.trigger-subtext {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.85); /* Biały, lekko przezroczysty */
    padding: 1px 0;
    font-size: 11px;
    color: #333;
    text-align: center;
    overflow: hidden;         /* Utnij jak za długi */
    text-overflow: ellipsis;  /* Dodaj wielokropek (...) */
    border-top: 1px solid #eee;
    line-height: 1.2;
}

/* Styl dla stanu "Brak wyboru" i "Własna" */
.trigger-icon { 
    color: #468bc6; 
}

.trigger-placeholder-text {
    font-size: 14px;
    color: #4e4e4e;
    line-height: 1.3;
    font-family: "Oswald", sans-serif;
}

/* Ukrycie starych selectów, ale pozostawienie ich w DOM */
.hidden-selects { display: none !important; }

/* --- DYSKRETNY PASEK PRZEWIJANIA (Scrollbar) --- */

/* Dla Chrome, Safari, Edge, Opera */
.fabric-sidebar::-webkit-scrollbar,
.fabric-grid-container::-webkit-scrollbar {
    width: 6px;               /* Cienki pasek */
}

.fabric-sidebar::-webkit-scrollbar-track,
.fabric-grid-container::-webkit-scrollbar-track {
    background: transparent;  /* Tło paska przezroczyste */
}

.fabric-sidebar::-webkit-scrollbar-thumb,
.fabric-grid-container::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2); /* Półprzezroczysty szary suwak */
    border-radius: 10px;      /* Zaokrąglone końce */
}

/* Dla Firefoxa */
.fabric-sidebar, .fabric-grid-container {
    scrollbar-width: thin;
    scrollbar-color: rgb(70 139 198) #f7f7f7;
}

/* --- BLOKADA PRZEWIJANIA TŁA --- */
body.modal-open {
    overflow: hidden !important;
    height: 100vh; /* Zapobiega skakaniu na mobile */
}
input.klej-ilosc {
    padding: 5px;
    width: 110px;
    border: 1px solid #d0d0d0;
    height: 25px;
    border-radius: 15px;
    color: #468bc6;
    font-size: medium;
    text-align: center;
}

/* --- IKONKA INFO W KAFELKACH --- */

/* Ustawiamy pozycję relatywną dla kafelka, żeby ikonka wiedziała gdzie jest róg */
.Pianka-box2, .Rzep-box3, .Kontakt-box4 {
    position: relative; 
}

/* Styl samej ikonki */
.info-icon-btn {
    position: absolute;
    top: -10px;
    right: 7px;
    width: 20px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #ccc;
    /* border-radius: 50%; */
    color: #468bc6;
    font-size: 18px;
    font-weight: bold;
    font-family: sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: 0.2s;
    line-height: 1;
    font-family: "Times New Roman", Times, serif;
    font-style: italic;
}

.info-icon-btn:hover {
    background-color: #468bc6;
    color: white;
    border-color: #468bc6;
    transform: scale(1.3);
}

/* Wygląd modala informacyjnego */
.info-modal-box {
    max-width: 500px; /* Węższy niż standardowy modal */
    text-align: left;
}
.modal-content {
    background: white;
    padding: 30px;
    margin: 100px 20px 100px 20px;
    border-radius: 8px;
    width: 600px;
    max-width: 90%;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.infoTitle {
    margin-top: 0;
    color: #4e4e4e;
    font-family: 'Michroma', sans-serif;
    font-size: 18px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 15px;
}
div#infoText {
    font-size: 16px;
    line-height: 1.6;
    color: #404040;
    text-align: left;
}
img#infoImage {
    max-width: 100%;
    height: auto;
    border: 1px solid #d0d0d0;
    padding: 7px;
    margin-bottom: 16px;
    box-shadow: 0 2px 7px 0px rgb(0 0 0 / 15%);
}
button.pin-confirm-btn {
    width: 100%;
    max-width: 200px;
}
h3#infoTitle {
    font-family: 'Michroma', sans-serif;
    font-size: 16px;
}
button.pin-confirm-btn {
}
/* --- STYLIZACJA PRAWEGO PANELU W MODALU --- */

.fabric-right-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Ważne dla scrollowania samej siatki */
    background: #fff;
}

/* Pasek filtrów */
.features-filter-bar {
    padding: 10px 15px;
    background: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Przycisk Filtra (Pastylka) */
/* Domyślna pastylka */
.filter-badge {
    padding: 6px 14px;
    background: #ffffff;
    border: 1px solid #ccc;
    border-radius: 2px;
    font-size: 12px;
    color: #4e4e4e;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.filter-badge:hover {
    border-color: #468bc6;
    background: #f0f7fb;
}
.filter-badge.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #f9f9f9;
    border-color: #ddd;
    color: #aaa;
    pointer-events: none; /* Blokuje klikanie */
}
/* Stan 1: AKTYWNY FILTR (Szukam tego) - Niebieski */
.filter-badge.active {
    background: #468bc6 !important;
    color: white !important;
    border-color: #357abd !important;
    opacity: 1 !important;
}
.filter-badge.is-attribute:not(.active) {
    border-color: #4e4e4e;
    border: 1px dotted #4e4e4e;
    color: #4e4e4e;
    background-color: #c0dcf4;
}

/* Stan 2: PODGLĄD CECHY (Wybrana tkanina to ma) - Zielony */
.filter-badge.highlighted {
    background: #27ae60;
    color: white;
    border-color: #219150;
    font-weight: normal; /* Zwykła waga, to tylko info */
    box-shadow: none;
}

/* Komunikat o braku wyników w sidebarze */
.no-results-msg {
    padding: 15px;
    text-align: center;
    color: #dc5e5e;
    font-size: 13px;
    line-height: 1.4;
    font-weight: bold;
    margin: 10px;
    border-radius: 4px;
    background: #fff5f5;
}

/* Box z opisem cechy */
.feature-desc-box {
    background: #ffffff;
    color: #2c3e50;
    padding: 10px 20px;
    font-size: 14px;
    border-bottom: 1px solid #dbe2e8;
    line-height: 1.4;
    font-style: italic;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Poprawka dla kontenera siatki, aby scrollował się niezależnie */
.fabric-grid-container {
    flex: 1; /* Zajmij resztę miejsca pod filtrami */
    overflow-y: auto; 
    padding: 10px;
}

/* Mobile: filtry przewijane poziomo, jeśli jest ich dużo */
@media (max-width: 768px) {
    .features-filter-bar {
        /* Włączamy zawijanie */
        flex-wrap: wrap;
        max-height: 30px; 
        overflow: hidden; /* Ukrywa resztę */
        position: relative; /* Żeby pozycjonować przycisk względem tego paska */
        transition: max-height 0.4s ease-in-out; /* Płynna animacja */
        padding-bottom: 30px; /* Miejsce na dole dla napisu */
        display: flex;
        justify-content: center; /* Wyśrodkowanie pastylek */
    }

    /* Klasa dodawana przez JS po rozwinięciu */
    .features-filter-bar.expanded {
        max-height: 500px; /* Wystarczająco dużo, żeby pokazać wszystko */
    }

    /* Wygląd przycisku "Pokaż więcej" */
    .features-show-more-btn {
        display: block !important; /* Pokaż na mobile */
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
        background: #ffffff;
        color: #468bc6;
        font-size: 14px;
        text-transform: uppercase;
        padding: 5px 0;
        cursor: pointer;
        letter-spacing: 1px;
    }
    
    .features-show-more-btn:hover {
        color: #4e4e4e;
    }
    .filter-badge {
        white-space: nowrap; /* Nie łam tekstu */
    }
    
    /* Na mobile sidebar i prawy panel są obok siebie (flex-row z poprzedniego kodu)
       ale upewnijmy się, że prawy panel ma flex: 1 */
    .fabric-right-panel {
        flex: 1;
        width: 100%; /* Zabezpieczenie */
    }
}