/* @media only screen and (max-width: 1000px) {
    .layers-panel-right, #help-panel-right {
        transform: translateX(0px) !important;
    }

    .layers-panel-right.active, #help-panel-right.active {
        transform: translateX(400px) !important;
    }
}
 */



:root {
    --white: #E1E1E1;
    --background: #535353;
    --background2n: #5a5a5a;
    --dark-detail: #353535;
    --checked: rgb(59 59 59);
    --border: 0.1px solid #424242;
    --blue: #1567ff;
    --btn-color: #fffafa;
}


html {
    color-scheme: dark !important;
}

html input {
    accent-color: #2690ff;
}

html,
body {
    margin: 0;
    overflow: hidden;
}

* {
    font-family: "Poppins", sans-serif;
}

.svg-eye svg,
.svg-lock svg {
    width: 16px;
    fill: var(--white);
    height: 16px;
}

#angles .child:nth-child(2n+1),
#holes .child:nth-child(2n+1),
#lengths .child:nth-child(2n+1) {
    background-color: var(--background);
}

.btn:not(:disabled) {
    cursor: pointer;
    border-radius: 9999px;
    background-color: rgb(107, 107, 107);
    color: var(--btn-color);
    font-size: 17px;
    opacity: 1;
    transition: .2s ease-in;
    text-decoration: none;
    padding: 10px 20px;
    text-align: center;
}

.btn:hover:not(:disabled) {
    background-color: rgb(90, 90, 90);
}

.btn.btn-primary:not(:disabled) {
    background-color: var(--blue);
}

.btn.btn-primary:hover:not(:disabled) {
    background-color: var(--blue);
    opacity: .8;
}

#angles .child:nth-child(2n),
#holes .child:nth-child(2n),
#lengths .child:nth-child(2n),
.settings-hover div:nth-child(2n) {
    background-color: var(--background2n);
}

/* ===== Sekcje otworów w panelu „Parametry szkła" (#holes) =====
   Lista sekcji oddzielonych kreską (bez ramek/zaokrągleń); typ rozróżnia
   tekst plakietki. Kolorystyka spójna z resztą paneli. */

/* Zarezerwuj miejsce na suwak na stałe, żeby jego pojawienie się
   nie przesuwało kart w lewo. */
#holes {
    scrollbar-gutter: stable;
    background-color: var(--background2n) !important;
}

#holes .hole-card {
    display: flex;
    flex-direction: column;
    /* nie kurcz sekcji przy wielu otworach — zamiast tego panel #holes ma się przewijać */
    flex-shrink: 0;
}

/* kreska oddzielająca kolejne otwory / grupy */
#holes .hole-card + .hole-card {
    border-top: 1px solid #424242;
}

#holes .hole-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background-color: var(--dark-detail);
    cursor: pointer;
    user-select: none;
}

/* strzałka zwijania (trójkąt) — w dół = rozwinięte, w prawo = zwinięte */
#holes .hole-card__chevron {
    margin-left: auto;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--white);
    transition: transform 0.15s ease;
}

#holes .hole-card--collapsed .hole-card__chevron {
    transform: rotate(-90deg);
}

/* po zwinięciu chowamy wszystkie wiersze, zostaje sam nagłówek */
#holes .hole-card--collapsed .child {
    display: none !important;
}

#holes .hole-card__badge {
    flex: 0 0 auto;
    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--white);
    white-space: nowrap;
}

#holes .hole-card__title {
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--white);
}

/* w kartach bez pasów zebry — tło daje sama karta */
#holes .hole-card .child:nth-child(2n),
#holes .hole-card .child:nth-child(2n+1) {
    background-color: transparent;
}


/* delikatny separator między wierszami w obrębie karty */
#holes .hole-card .child + .child {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* hover tylko na pojedynczym kafelku (wiersz / nagłówek), nie na całej karcie */
#holes .hole-card .child:hover,
#holes .hole-card__head:hover {
    background-color: var(--checked);
}

.svg-eye-button:hover svg,
.svg-lock-length-button:hover svg,
.svg-lock-angle-button:hover svg,
.svg-additional-grind-button:hover svg,
.svg-update-angle-button:hover svg,
.svg-update-hole-button:hover svg,
.svg-lock-group-button:hover svg,
.svg-delete-group-button:hover svg,
.svg-delete-button:hover svg {
    fill: white;

}

.svg-update-length-button {
    background: none;
}

.svg-eye-button:hover,
.svg-lock-length-button:hover,
.svg-lock-angle-button:hover,
.svg-additional-grind-button:hover,
.svg-update-angle-button:hover,
.svg-update-hole-button:hover,
.svg-lock-group-button:hover,
.svg-delete-group-button:hover,
.svg-rotate-button:hover,
.svg-delete-button:hover,
.svg-update-length-button:hover
{
    background-color: var(--dark-detail);
}

.svg-eye-button svg,
.svg-lock-length-button svg,
.svg-lock-angle-button svg,
.svg-additional-grind-button svg,
.svg-update-angle-button svg,
.svg-update-hole-button svg,
.svg-lock-group-button svg,
.svg-delete-group-button svg,
.svg-delete-button svg {
    fill: var(--white);
    width: 16px;
    height: 16px;
}

.list-hover button {
    /* border-bottom: var(--border) !important;
    border-left: none !important;
    border-right: none !important; */
    font-size: small !important;
    height: 38px !important;
    width: 260px;
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
}

.list-hover {
    display: inline-flex;
    flex-direction: column;
    background: var(--background);
    position: fixed;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
    max-height: 37px;
    margin-top: 42px;
}

iframe.active {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 3;
}

#length-modal-parent:not(.checked) {
    position: absolute;
    display: none;
    pointer-events: none;
    z-index: 1000;
    overflow: hidden;

}

#length-modal-parent.checked,
#angles-modal-parent,
#hole-modal-parent {
    position: absolute;
    display: none;
    /* Początkowo ukryty */
    pointer-events: none;
    /* Zapobiega interakcji z kontenerem */
    z-index: 1000;
    background: transparent;
    border-radius: 10px;
    overflow: hidden;
    border: var(--border);
    max-width: 120px;
    color: black;
}

#anglesDisplay {
    -moz-appearance: textfield;
    outline: none !important;
}

#length-modal-parent:not(.checked) #lengthDisplay {
    -moz-appearance: textfield;
    text-align: center;
    border: var(--border);
    width: 55px;
    color: white;
    padding: 0;
    outline: none;
    background-color: var(--background);

}

#length-modal-parent:not(.checked) #lengthDisplay::-webkit-inner-spin-button,
#anglesDisplay::-webkit-inner-spin-button,
#anglesDisplay::-webkit-outer-spin-button #length-modal-parent:not(.checked) #lengthDisplay::-webkit-outer-spin-button {
    -webkit-appearance: none;

}

#length-modal-parent.checked #lengthDisplay,
/* #angles-modal-parent.checked  */
#anglesDisplay,
#holeDisplay {
    border-radius: 10px 0 0 10px;
    border: none;
    background: var(--background2n);
    padding: 5px;
    width: 65%;
}

.prefferences-tab,
.startscreen-tab,
.glasschoosescreen-tab,
.glasschooseforlayers-tab,
.import-dxf-screen-tab,
.loadingscreen-tab,
.glasschooseshape-tab {
    z-index: -432;
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px) brightness(0.8);
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
}

.prefferences-tab.active,
.import-dxf-screen-tab.active,
.startscreen-tab.active,
.glasschoosescreen-tab.active,
.glasschooseforlayers-tab.active,
.loadingscreen-tab.active,
.glasschooseshape-tab.active {
    display: inline-flex !important;
    z-index: 99999999;
}

.glasschooseshape-tab.active {
    z-index: 999;
}
/* .glasschoosescreen-container {
    left: 20px;
    top: 20px;
} */
.prefferences.prefferences-tab.active .max-width,
.startscreen-tab.active .max-width,
.glasschoosescreen-tab.active .max-width,
.glasschooseshape-tab.active .max-width,
.glasschooseforlayers-tab.active .max-width,
.import-dxf-screen-tab.active .max-width,
.loadingscreen-tab.active .max-width {
    display: inline-flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    height: 100%;
    max-width: calc(100% - 450px);
}

.prefferences.prefferences-tab.active .row .item,
.startscreen-tab.active .row .item,
.glasschoosescreen-tab.active .row .item,
.glasschooseshape-tab.active .row .item,
.glasschooseforlayers-tab.active .row .item,
.import-dxf-screen-tab.active .row .item,
.loadingscreen-tab.active .row .item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.prefferences.prefferences-tab.active .row,
.startscreen-tab.active .row,
.glasschoosescreen-tab.active .row,
.glasschooseshape-tab.active .row,
.glasschooseforlayers-tab.active .row,
.import-dxf-screen-tab.active .row,
.loadingscreen-tab.active .row {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    max-width: 75%;
    width: 100%;
}

.close-prefferences-tab,
.close-import-dxf-tab,
.close-startscreen-tab,
.close-glasschooseforlayers-tab,
.close-glasschoosescreen-tab,
.modal .modal-close {
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
    padding: 10px;
}

.closeSvgIconButton {
    width: 16px;
    height: 16px;
    pointer-events: none;
}

#close-startscreen-tab,
#close-glasschooseforlayers-tab,
#close-glasschoosescreen-tab,
.modal .modal-close .closeSvgIconButton {
    pointer-events: inherit !important;
    cursor: pointer !important;
}

.import-dxf-screen .main-content {
    overflow-y: auto !important;
}

#response {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
}

div#response p {
    display: none;
}

div#response div {
    width: 32%;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #222222;
    border-radius: 10px;
    contain-intrinsic-block-size: auto 100px;
}

#response svg {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    max-width: 128px;
    max-height: 128px;
    stroke: white;
}

svg line {
    color: white;
    stroke: white;
    stroke-width: 10px;
}

.container.import-dxf-container.uploading div {
    pointer-events: none;
    filter: blur(10px);
}

.container.import-dxf-container.uploading::after {
    content: url('https://samherbert.net/svg-loaders/svg-loaders/spinning-circles.svg');
    position: absolute;
    z-index: 432;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


.sidebar {
    flex: 1;
    background: #222;
    padding: 20px;
    height: 100%;
    display: inline-flex;
    flex-direction: column;
    gap: 10px;
}

.suggestions * {
    margin: 0;
}

.menu-item {
    padding: 10px;
    cursor: pointer;
}

.menu-item.active {
    color: #4CAF50;
}

.nonecursor {
    cursor: default !important;
}


.close-startscreen-tab,
.close-glasschooseforlayers-tab,
.close-glasschoosescreen-tab,
.modal .modal-close {
    background: #282828 !important;
    width: 100% !important;
    top: 0px !important;
    right: 0 !important;
    z-index: 432;
    height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding-right: 10px !important;
}

input#lengthDisplay:active,
input#lengthDisplay:focus {
    border: 1px solid white !important;
}

.prefferences.prefferences-tab.active .row {
    flex-direction: column;
    gap: 10px;
}

/* .list-hover:hover {
    box-shadow: -3px 3px 20px 10px #00000017 !important;
} */

/* .list-hover {
    box-shadow: -3px 3px 20px 10px #00000017 !important;
} */

.main-content {
    flex: 4;
    padding: 20px 45px 50px;
    overflow-y: scroll;
    display: inline-flex;
    flex-direction: column;
    margin-top: 32px;
}

.container.startscreen-container .sidebar,
.container.glasschooseforlayers-container .sidebar,
.container.glasschoosescreen-container .sidebar,
.modal .modal-container .sidebar {
    margin-top: 32px;
}

.container.startscreen-container .header,
.container.glasschooseforlayers-container .header,
.container.glasschoosescreen-container .header,
.modal .modal-container .header {
    min-height: 200px;
}

#checkbox-redirect-starting-screen * {
    pointer-events: none;
    touch-action: none;
}

.container.prefferencess-container .item:hover label
.modal .modal-container .item:hover label {
    background: #2b2b2b !important;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.new-file-btn,
.start-drawing-btn {
    background: var(--blue);
    border: none;
    color: white;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 50px;
    font-size: 1.25rem;
}

.suggestions h1 {
    font-size: 20px;
}

.suggestions p {
    font-size: 16px;
}

.direction-column {
    flex-direction: column;
}

.double-glazing-label-start {
    margin-top: 0;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.modal-title {
    margin-bottom: 0;
    text-align: center;
}

.radio-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

#glass .radio-container,
#glass .select-container {
    margin-bottom: 0;
}

#glass .double-glazing-label {
    display: inline-block;
    margin: 10px 0;
}

.radio-container.one-col {
    grid-template-columns: 1fr;
}

.radio-container.two-col {
    grid-template-columns: 1fr 1fr;
}

.radio-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-radius: 10px;
    background-color: var(--background2n);
    box-shadow: 1px 1px 10px 0px #0000005e;
    cursor: pointer;
}

.radio-button svg {
    cursor: pointer;
}

.radio-button label {
    cursor: inherit;
}

.radio-button:has(input:checked) {
    box-shadow: inset 1px 1px 10px 0px #0000005e;
    cursor: default;
    background-color: #00000021;
}

.select-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.label-select {
    flex: 0;
    min-width: max-content;
}

.custom-select {
    padding: 7px 14px;
    font-size: 16px;
    flex: 1;
    cursor: pointer;
}

#glassDescription,
#glassDescription-start {
    padding: 10px 16px;
    border-radius: 10px;
    background-color: var(--background2n);
    box-shadow: inset 1px 1px 10px 0px #0000005e;
}

#glassDescription-start {
    margin-bottom: 15px;
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
    border: 2px solid #555;
    border-radius: 8px;
    overflow: hidden;
    font-family: Arial, sans-serif;
}

#glass .custom-table {
    margin: 0;
}

.custom-table thead {
    background-color: #282828;
}

.custom-table th {
    padding: 15px 20px;
    text-align: left;
    color: white;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 2px solid #555;
    border-right: 1px solid #555;
}

.custom-table th:last-child {
    border-right: none;
}

.custom-table tbody tr {
    background-color: #333;
}

.custom-table td {
    padding: 12px 20px;
    border-right: 1px solid #555;
    border-bottom: 1px solid #555;
}

#glass .custom-table td {
    padding: 0;
}

.custom-table td:last-child {
    border-right: none;
}

.custom-table tbody tr:last-child td {
    border-bottom: none;
}

.custom-table input[type="number"] {
    width: 100%;
    padding: 10px 12px;
    background-color: #444;
    border: 1px solid #666;
    border-radius: 4px;
    color: white;
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.custom-table input[type="number"]:focus {
    border-color: #888;
    background-color: #555;
    box-shadow: 0 0 0 2px rgba(136, 136, 136, 0.2);
}

.custom-table input[type="number"]::placeholder {
    color: #aaa;
    font-style: italic;
}

.custom-table input[type="number"]:read-only {
    background-color: #3a3a3a;
    cursor: default;
    opacity: 0.8;
}

/* Ukrycie strzałek w input number dla Webkit */
.custom-table input[type="number"]::-webkit-outer-spin-button,
.custom-table input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Ukrycie strzałek w input number dla Firefox */
.custom-table input[type="number"] {
    -moz-appearance: textfield;
}

#popups {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.file-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
    width: 100%;
}

.file.loading,
.file-container {
    max-width: 32%;
    height: fit-content;
    aspect-ratio: 1 / 1;
}

.file {
    background: #444;
    width: 100%;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;
}


.file img {
    width: 100%;
    height: 100%;
    max-width: 75%;
    max-height: 75%;
}

/* .startscreen-tab,
.loadingscreen-tab {
    background-color: var(--dark-detail) !important;
} */

/* .loading */
.load {
    animation: loading 2.5s infinite;
    /* animacja trwa 1 sekundę, powtarza się 5 razy */
    /* opóźnienie rozpoczęcia animacji o 1 sekundę */
}

.container.prefferencess-container .row .item {
    position: relative !important;
    opacity: 1 !important;
    white-space: nowrap !important;
    height: unset !important;
    font-size: inherit !important;
    text-align: center !important;
    display: inline-flex !important;
    height: 100% !important;
    padding: 0px !important;
    width: 100% !important;
    border-radius: 10px !important;
    overflow: hidden;
}

.container.prefferencess-container .item input {
    opacity: 1;
    height: unset !important;
    position: absolute !important;
    right: 20px;
    padding: 20px !important;
}

.container.prefferencess-container .item label {
    width: 100%;
    height: 100%;
    padding: 20px;
    background: #222;
    border-radius: 10px;
    justify-content: space-between !important;
    position: relative;
}

@keyframes highlit {
    0% {
        background-color: transparent;
    }

    50% {
        background-color: #62626269;
    }

    100% {
        background-color: transparent;
    }
}

@keyframes loading {
    0% {
        background-color: #444;
    }

    50% {
        background-color: #555;
    }

    100% {
        background-color: #444;
    }
}

.file-container h2 {
    font-size: small;
    color: rgb(233, 233, 233);
}

.file-container h3 {
    font-size: smaller;
    color: rgb(175, 175, 175);
}

.startscreen-tab.active .max-width,
.glasschoosescreen-tab.active .max-width,
.glasschooseshape-tab.active.max-width,
.glasschooseforlayers-tab.active .max-width,
.import-dxf-screen-tab.active .max-width,
.loadingscreen-tab.active .max-width {
    max-width: 35% !important;
}

.prefferences.prefferences-tab.active .container,
.startscreen-tab.active .container,
.glasschoosescreen-tab.active .container,
.glasschooseshape-tab.active .container,
.glasschooseforlayers-tab.active .container,
.import-dxf-screen-tab.active .container,
.loadingscreen-tab.active .container {
    max-width: 1200px;
    width: 100%;
    position: relative;
    background: var(--background);
    overflow: hidden;
    max-height: calc(100% - 88px);
    min-height: 500px;
    border-radius: 15px;
    box-shadow: -3px 3px 20px 10px #00000017;
    justify-content: flex-end;
    display: inline-flex;
}

#anglesDisplay+p {
    padding: 0 13.5px !important
}

/* 
input#lengthDisplay::selection,
#anglesDispla::selection {
    background: transparent;
    color: white;
} */

#length-modal-parent:not(.checked) #lengthDisplay+p {
    display: none !important;
}

#length-modal-parent.checked #lengthDisplay+p,
#anglesDisplay+p,
#secondLengthDisplay+p {
    right: 0px;
    top: 0;
    position: absolute;
    margin: 0;
    padding: 0 5px;
    color: white;
    font-size: 12px;
    height: 100%;
    background: var(--checked);
    display: inline-flex;
    align-items: center;
}


.list-hover>*:first-child {
    font-size: 0 !important;
    width: unset !important;
    display: unset !important;
    max-width: 48px;
    max-height: 0px;
}

.list-hover-parent {
    display: flex;
    height: 40px;
    border-right: var(--border);
    border-bottom: var(--border);
    font-size: 10px;
    padding: 1px 6px;
}

.relative {
    position: relative;
    border: none;
}

.list-hover button {
    opacity: 0 !important;
    z-index: -55 !important;
    overflow: hidden;
    max-height: 0;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 
canvas:focus,
canvas:active,
canvas:focus-within {
    background-color: red !important;
} */

.mis-placeholder.actives,
#generateHoleOnCanvas.actives,
#toggleCoordinates.actives,
#generateHolesWithdistanceOnCanvas.actives {
    display: inline-flex !important;
}

/* .mis-placeholder,
#generateHoleOnCanvas,
#toggleCoordinates,
#generateHolesWithdistanceOnCanvas,
#calculatePrice,
#save-path-btn,
#toggleSnap {
    display: none !important;
} */

#save-path-btn, #calculatePrice, #rotateFigureControl {
    display: none !important;
}

label[for="toggleSnap"] {
    display: none !important;
}

.list-hover-parent:hover>.list-hover{
    box-shadow: -3px 3px 20px 10px #00000017 !important;
    border: var(--border);
}

.list-hover-parent:hover>.list-hover>button:not(button:first-child):hover {
    background-color: var(--dark-detail) !important;

}

.list-hover-parent:hover>.list-hover>button:not(button:first-child) {
    opacity: 1 !important;
    z-index: 1 !important;
    max-height: unset !important;
    height: 45px !important;
    padding: 10px !important;

}

.list-hover-parent:hover>.list-hover>button:not(button:last-child) {
    border-bottom: var(--border) !important;
}

.list-hover-parent:hover .list-hover {
    max-height: unset !important;
}

/* Wersja dotykowa: brak :hover. JS przenosi .list-hover do <html> (iOS Safari przycinał
   position:fixed wewnątrz #toolbara, który ma overflow) i dodaje klasę .lh-open na samym
   elemencie .list-hover. Tu nadajemy mu wygląd zwykłej listy rozwijanej (jak na desktopie):
   ciemne tło, jasny tekst, ikona po lewej + tekst po prawej, pozycje jedna pod drugą. */
.list-hover.lh-open {
    display: inline-flex !important;
    flex-direction: column !important;
    width: 240px !important;
    max-width: calc(100vw - 16px) !important;
    max-height: 70vh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: var(--background) !important;
    border: var(--border) !important;
    border-radius: 0 0 10px 10px !important;
    box-shadow: -3px 3px 20px 10px rgba(0, 0, 0, 0.22) !important;
    z-index: 2147483000 !important;
    padding: 0 !important;
}

.list-hover.lh-open>button {
    display: flex !important;
    flex-direction: row-reverse !important;   /* SVG (ostatnie w DOM) na lewo, tekst na prawo */
    align-items: center !important;
    justify-content: flex-end !important;       /* w row-reverse = upchnij do lewej */
    width: 100% !important;
    max-width: none !important;                  /* zbija .list-hover>*:first-child{max-width:48px} które teraz łapie 1. realny przycisk */
    box-sizing: border-box !important;
    min-height: 44px !important;
    max-height: none !important;
    height: auto !important;
    padding: 8px 14px 8px 6px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--white, #e1e1e1) !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    text-align: left !important;
    white-space: normal !important;
    opacity: 1 !important;
    z-index: auto !important;
    overflow: hidden !important;
    cursor: pointer !important;
}

.list-hover.lh-open>button:not(:last-child) {
    border-bottom: var(--border) !important;
}

.list-hover.lh-open>button:active {
    background: var(--dark-detail, rgba(255, 255, 255, 0.08)) !important;
}

/* Ikona w pozycji listy — taki sam rozmiar jak na desktopie (#toolbar button svg: 16px + 8px padding).
   Po przeniesieniu .list-hover do <html> ta reguła już nie łapie, więc powtarzamy ją tutaj. */
.list-hover.lh-open>button svg {
    width: 16px !important;
    height: 16px !important;
    padding: 8px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    fill: var(--white, #e1e1e1) !important;
}

/* Belt-and-suspenders: gdy otwarty jest dropdown na dotyku, podbij też #toolbar. */
body.touch-dropdown-open #toolbar {
    z-index: 2147483000 !important;
}

.svg-lock-length-button svg path,
.svg-lock-length-button svg polyline,
.svg-lock-angle-button svg path,
.svg-lock-angle-button svg polyline,
.svg-additional-grind-button svg path,
.svg-additional-grind-button svg polyline,
.svg-update-angle-button svg path,
.svg-update-angle-button svg polyline,
.svg-update-hole-button svg path,
.svg-update-hole-button svg polyline,
.svg-lock-group-button svg path,
.svg-lock-group-button svg polyline {
    stroke: var(--white) !important;
}
.svg-lock-length-button svg path,
.svg-lock-angle-button svg path,
.svg-additional-grind-button svg path,
.svg-update-angle-button svg path,
.svg-update-hole-button svg path {
    fill: var(--white);
}
.svg-delete-button svg path {
    fill: var(--white);
}

.svg-rotate-button svg {
    width: 16px;
    height: 16px;
}

.block-checkbox+.svg-lock-button svg+.svg-delete-button svg+.svg-delete-group-button svg+.svg-rotate-button svg+.svg-lock-group-button svg {
    filter: invert(1);
}

.svg-eye-button,
.svg-lock-length-button,
.svg-lock-angle-button,
.svg-additional-grind-button,
.svg-update-angle-button,
.svg-update-hole-button,
.svg-lock-group-button,
.svg-delete-group-button,
.svg-rotate-button,
.hide-all,
.svg-delete-button {
    display: inline-flex;
    width: 42px;
    outline: 0;
    aspect-ratio: 1/1;
    border: none;
    background: none;
    height: 42px;
    flex-direction: column;
    align-items: center;
    border-right: var(--border);
    justify-content: center;
}

.svg-update-angle-button {
    width: auto;
    flex-direction: row;
    aspect-ratio: unset;
    gap: 3px;
}

.input-field-correction {
    border-top: var(--border);
}

/* .layers-panel-right > div.active
{
    border-bottom: var(--border);
} */
.layers-text input {
    max-width: 100px;
}

.layers-text--mis {
    width: auto;
    flex: 1;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.child--coordinates {
    justify-content: center;
    padding: 5px 10px;
    box-sizing: border-box;
}

.layers-text--coordinates {
    width: 100%;
    justify-content: center;
    /* 2 kolumny: rząd 1 = od lewej / od prawej, rząd 2 = od dolnej / od górnej
       (nadpisuje inline grid-template-columns:repeat(4,1fr) z szablonu) */
    grid-template-columns: repeat(2, 1fr) !important;
}

/* Wyśrodkuj etykietę + pole w każdej komórce (od lewej/prawej/dolnej/górnej) */
.layers-text--coordinates .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
    text-align: center;
}

.layers-text {
    gap: 10px;
    display: inline-flex;
    align-items: center;
    width: 50%;
    font-size: 11px;
}

.sheet-container {
    margin-right: 10px;
    position: fixed;
}

.canvas-buttons-container {
    font-size: 3;
}

canvas {
    background-color: #282828;
    position: fixed;
    z-index: -2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

#icon {
    position: absolute;
    left: 0px;
    top: 2px;
    width: 32px;
    height: 32px;
    mix-blend-mode: lighten;
}

.tips div.active {
    display: inline-flex;
    align-items: center;

}

.grid-tool {
    display: inline-flex;
    gap: 10px;
    cursor: default;
}

.grid-tool p {
    margin: 0;
    padding: 0;
}

.grid-button {
    border: var(--border);
    padding: 2px 25px;
    margin: 3px;
}

.tips div {
    display: none;
}

.tips {
    color: var(--white);
    display: inline-flex;
}

#selectionContainer {
    gap: 2px;
    display: inline-flex;
    flex-direction: column;
}

.mid {
    display: inline-flex;
    align-items: center;
}

#toolbar {
    margin-bottom: 10px;
    background-color: var(--background);
    display: inline-flex;
    z-index: 32423;
    justify-content: space-between;
    width: 100%;
    z-index: 1000;
    border-bottom: var(--border);
    position: relative;
    height: 42px;
}

#toolbar button:not(.active) {
    cursor: pointer;
}

#toolbar button > p,
#toolbar .list-hover-parent > p {
    font-size: 17px;
    margin: auto;
}

/* #toolbar button{
    border-left: var(--border);
} */

/* #toolbar button:first-child {
    border-left: var(--border);
} */

#toolbar button:hover {
    background-color: rgb(100, 100, 100);
}

#toolbar button:active {
    background-color: var(--checked)
}

#toolbar label {
    border-right: var(--border);

    width: 45px;
    display: inline-flex;
    z-index: 432;
    justify-content: center;
    align-items: center;
}
.input-length {
    justify-content: center;
    width: 100%;
    padding: 10px;
    padding-right: 39px;
    box-sizing: border-box;
}

.input-length .layers-text {
    width: 100%;
    justify-content: center;
}

.input-length input {
    background-color: var(--background);
    outline: none;
    color: var(--white);
    border: var(--border);
    border-radius: 5px;
}
.dynamicInputs {
    z-index: 999;
    height: 30px;
    transform: translate(-50%, -50%);
    background: var(--dark-detail);
    display: inline-flex;
    flex-direction: row;
    border-radius: 50px;
}
.dynamicInputs .divInputForLengthInputFromLayersLockLengthDiv,
.dynamicInputs .divInputForAngleInputFromLayersLockAngleDiv,
.dynamicInputs .divInputForHoleInputFromLayersLockHoleDiv {
    /* transform: translate(-50%, -50%); */
    background: none;
    border: none;
    display: inline-flex;
    align-items: center;
    width: 30px;
    justify-content: center;
}
.dynamicInputs .divInputForLengthInputFromLayersLockLengthDiv .divInputForLengthInputFromLayersLockLengthDivCheckbox,
.dynamicInputs .divInputForAngleInputFromLayersLockAngleDiv .divInputForAngleInputFromLayersLockAngleDivCheckbox,
.dynamicInputs .divInputForHoleInputFromLayersLockHoleDiv .divInputForHoleInputFromLayersLockHoleDivCheckbox {
    display: none;
}
.dynamicInputs .divInputForLengthInputFromLayersLockLengthDiv .divInputForLengthInputFromLayersLockLengthDivCheckboxLabel,
.dynamicInputs .divInputForAngleInputFromLayersLockAngleDiv .divInputForAngleInputFromLayersLockAngleDivCheckboxLabel,
.dynamicInputs .divInputForHoleInputFromLayersLockHoleDiv .divInputForHoleInputFromLayersLockHoleDivCheckboxLabel {
    background: none;
}
.dynamicInputs .divInputForLengthInputFromLayersLockLengthDiv svg,
.dynamicInputs .divInputForAngleInputFromLayersLockAngleDiv svg,
.dynamicInputs .divInputForHoleInputFromLayersLockHoleDiv svg {
    /* fill: var(--white); */
    width: 16px;
    height: 16px;
    pointer-events: none;
}
.dynamicInputs .dynamicInput {
    /* transform: translate(-50%, -50%); */
    border: var(--border);
    border-radius: 50px;
    text-align: center;
    width: 75px;
    background-color: var(--dark-detail);
}


#angles-modal-parent:not(.checked),
#length-modal-parent:not(.checked),
#hole-modal-parent:not(.checked) {
    position: absolute;
    transform: translate(-50%, -50%);

}

#anglesDisplay {
    text-align: center !important;
    height: 100% !important;
    border-radius: 0 !important;
}

#angles-modal-parent.active {
    display: inline-flex !important;

}

#angles-modal-parent {
    border-radius: 0 !important;
}

#anglesDisplay+p {
    display: none !important;
}

#anglesDisplay {
    max-width: 50px;
    padding: 0 !important;
    width: 100%;
}


#toolbar button {
    display: flex;
    align-items: center;
    z-index: 3;
    overflow: hidden;
    border: none;
    background-color: none;
    background: none;
    border-RIGHT: var(--border);
    font-size: 10px;
}

#toolbar input:not([type="range"]):not([type="file"]) {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
    z-index: -1;
}

#rotateFigureControl {
    display: flex;
    align-items: center;
    border-right: var(--border);
    padding: 0 4px;
}

#rotateFigureAngle {
    opacity: 1 !important;
    position: static !important;
    width: 52px !important;
    height: 28px !important;
    z-index: auto !important;
    background: var(--background);
    color: var(--white);
    border: 1px solid #555;
    border-radius: 4px;
    text-align: center;
    font-size: 12px;
}


#title {
    text-align: center;
    color: var(--white);
    background-color: var(--background);
    border: 2px solid #424242;
    padding: 5px;
    z-index: 3423424243;
    position: relative;
}

#toolbar label {
    font-size: 0;
}

.radio-group {
    display: inline-flex;
    width: 100%;
    justify-content: space-around;
    flex-direction: row-reverse;
}

input:checked+label:not(.radio label) {
    background-color: rgb(59 59 59);
}

#toolbar button svg,
#toolbar label svg,
.svg-rotate-button svg {
    width: 16px;
    height: 16px;
    padding: 8px;
    fill: var(--white);
}

#toolbar .right path {
    stroke: #8b8b8b;

}

#toolbar .left path:not(#singleSelectTool path) {
    fill: var(--white);
    stroke: #8b8b8b;
}

#toolbar .left {
    justify-content: flex-start;
}

#toolbar .right {
    justify-content: flex-end;
}

#toolbar .left,
#toolbar .right {
    display: inline-flex;
    flex-wrap: wrap;
}

.layers-panel-right.active,
.coordinates-panel-right.active {
    transform: translateX(0px);
}

#coordinates2.active,
#lengths.active,
#angles.active,
#holes.active,
#area.active {
    display: inline-flex !important;
}

#edycjaDlugosciMenu label {
    color: var(--white);
}

.layers-panel-right,
.coordinates-panel-right {
    transform: translateX(1500px);
    z-index: 432;
    transition: 0.2s ease-in-out;
    /* +16px na rezerwę suwaka (scrollbar-gutter w #holes), żeby treść nie ściskała się w lewo */
    width: 486px;
    display: inline-flex;
    position: fixed;
    right: 0;
    flex-direction: column;
    top: 43px;
    max-height: calc(100% - 43px);
}


#holes>.child>.svg-update-hole-button>svg,
#holes>.child>.svg-lock-group-button>svg,
#holes>.child>.svg-delete-group-button>svg,
#holes>.child>.svg-rotate-button>svg,
#holes>.child>.svg-delete-button>svg {
    filter: invert(1);
}

/* .layers-text .content p {
    margin: 2px !important;
} */

.layers-text .content {
    max-width: 120px;
}


.layers-text .row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#toggle-holes svg

/* #generateHoleOnCanvas svg path  */
    {
    fill: none !important;
}

.delete-hole {
    aspect-ratio: 1/1;
    width: 24px;
    height: 24px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.delete-hole svg {
    fill: var(--white);
    width: 12px;
    height: 12px;
    padding: 3px;
    aspect-ratio: 1/1;
}

label b {
    font-weight: 100;
}

.input-field-correction>*:first-child,
#area>*:first-child {
    margin-top: 20px;
}

.input-field-correction>*:last-child,
#area>*:last-child {
    margin-bottom: 20px;
}

#help-panel-right>div:not(.icons-nav-help)>*,
#coordinates-panel-right>div:not(.icons-nav-help)>* .input-field-correction>*,
#area>*,
.input-field-correction>*,
#glass>div>* {
    margin: 5px 10px;
}

.disabled,
.Disabled,
.disabled:hover,
#Disabled:hover {
    pointer-events: none;
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;

}

#glass-price {
    display: inline-flex;
    flex-direction: column;
}

#edycjaDlugosciMenu {
    position: absolute;
    top: 400px;
    left: 300px;
    background: var(--background);
    flex-direction: column;
    padding: 10px;
    border-radius: 5px;

}

#edycjaDlugosciMenu button {
    background-color: var(--blue);
    color: white;
    border-radius: 5px;
    border: none;
}

#help-panel-right>div:not(.icons-nav-help, .position-relative),
#coordinates-panel-right>div:not(.icons-nav-help, .position-relative) {
    display: none;
}

#help-panel-right>div.active,
#coordinates-panel-right>div.active {
    display: inline-flex !important;
}

.icons-navbar-css>button:hover,
.icons-navbar-css>button.active {
    background-color: var(--background) !important;
}

.icons-navbar-css>button {
    display: inline-flex;
    gap: 10px;
    width: 100%;
    height: 100%;
    padding: 5px 0;
    justify-content: center;
    cursor: default;
    align-items: center;
    cursor: pointer;
    border: none;
    border-right: var(--border);
}

.icons-navbar-css svg *:not(.toggle-lenghts svg *) {
    stroke: var(--white);

}

.icons-nav-help>div{
    flex: 2 1 auto;
    cursor: pointer;
}

.icons-nav-help>div.active {
    cursor: default;
    background-color: #838383;
}

.icons-navbar-css>div:not(div:last-child) {
    border-right: var(--border)
}

.icons-navbar-css svg:not(#help-panel-right svg),
.icons-navbar-css svg:not(#coordinates-panel-right svg) {
    width: 24px;
    height: 24px;
    fill: var(--white);

}

.icons-nav-help svg{
    display: block;
    margin: auto;
}

#hide-all-angles-input {
    display: none;
}

#help-panel-right svg,
#coordinates-panel-right svg,
.stick-tuts svg,
.stick-coordinates-tuts svg {
    width: 16px;
    height: 16px;
    padding: 4px;
    fill: var(--white);

}

.icons-navbar-css {
    color: var(--white);
    display: inline-flex;
    background: var(--background2n);
    border-bottom: var(--border);
    width: 100%;
    justify-content: space-evenly;
    font-size: 12px;
}

#lengths .child,
#coordinates .child {
    display: inline-flex;
}

#coordinates .child {
    justify-content: flex-start;
}

.child.position-relative {
    border-bottom-left-radius: 15px;
    position: fixed;
    bottom: -42px;
    z-index: 452432;
    width: 100%;
}

#layers-panel-right>#lengths {
    opacity: 0;
    z-index: -1;
    position: absolute;
}

#layers-panel-right>#lengths.active {
    opacity: 1 !important;
    z-index: 2 !important;
    position: unset !important;
    /* border-radius: 0 0 10px 10px; */
}

/* #toggleSnap+label+.list-hover-parent>.list-hover {
    box-shadow: none;
} */

#coordinates2,
#angles,
#lengths,
#holes,
#area,
#glass {
    overflow-y: auto;
    display: none !important;
    z-index: 2;
    font-size: 16px;
    background-color: var(--dark-detail);
    color: var(--white);
    flex-direction: column;
}

.checked-checkbox-tut {
    right: 470px;
}



#help-panel-right>div:not(.icons-nav-help, .position-relative),
#coordinates-panel-right>div:not(.icons-nav-help, .positon-relative) {
    z-index: 2;
    font-size: 16px;
    background-color: var(--dark-detail);
    color: var(--white);
    flex-direction: column;
}


#nowaDlugosc {
    border-radius: 10px;
    border: none;
    padding-left: 5px;
    background: var(--white);
}

button.active {
    background-color: var(--checked) !important;
}

#toolbar button.menu-active {
    background-color: var(--checked);
}

.layers-panel-title {
    background: var(--background2n);
    padding: 8px;
    text-align: center;
    font-size: 20px;
}

.settings-hover div {
    padding: 10px;
    cursor: pointer;
}

.settings-hover .save-img,
.settings-hover .prefferences-button
{
    display: none;
}

.layers-panel-right>div:not(.icons-navbar-css) .child,
.coordinates-panel-right>div:not(.icon-navbar-css) .child {
    cursor: default;
    display: inline-flex;
    gap: 10px;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
}

.settings-hover div:hover,
#angles div:hover,
#lengths div:hover {
    background-color: var(--checked) !important;
}

.settings-hover.active {
    display: block !important;
}


.highlitAnimation.active,
.highlitAnimationForGlassScreen.active,
.highlitAnimationForGlassChooseForLayersScreen.active {
    animation: highlit 1s infinite;
}

.settings-hover div>* {
    cursor: default;
}



.settings-hover div>a {
    display: block;
    height: 100%;
    width: 100%;
}

#angles,
#lengths,
#holes,
#area,
#glass,
.layers-panel-right,
.coordinates-panel-right {
    box-shadow: -3px 3px 20px 10px #00000017;
}

#toggle-coordinates-layer {
    border-radius: 0 !important;
}

.settings-hover {
    display: none;
    box-shadow: -3px 3px 20px 10px #00000017;
    position: fixed;
    z-index: 1;
    top: 39px;
    overflow: hidden;
    padding-top: 9px;
    left: 0px;
    color: var(--white);
    width: 240px;
    background-color: var(--background);
    border-radius: 0 0 10px 0;
}

.dialog {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.dialog-content {
    margin: auto;
    padding: 20px;
    border-radius: 5px;
    width: 30%;
    max-width: 500px;
    width: 100%;
    background: var(--background);
    color: var(--white);
}

.alertPopText {
    text-align: center;
    font-size: 20px;
    margin: 10px 0 20px;
}

.dialog-content button:last-child {

    opacity: 1;
    color: var(--white);
    background-color: #1567ff;
}
.dialog-content.angle button:first-child,
.dialog-content.length button:first-child {

    opacity: 1;
    color: var(--white);
    background-color: #1567ff !important;
}

.dialog-content button:first-child:hover {
    opacity: 0.5;
}

.dialog-content button {
    transition: 0.1s;
    border: none;
    border-radius: 50px;
    padding: 8px 25px;
    opacity: 0.3;
}

.dialog-content-doublehole {
    margin: 15% auto;
    padding: 20px;
    border-radius: 5px;
    width: 30%;
    background: var(--background);
    color: var(--white);
}

.dialog-content-doublehole button {
    transition: 0.1s;
    border: none;
    border-radius: 50px;
    padding: 8px 25px;
    opacity: 1;
}

.dialog-content-doublehole button:hover {
    opacity: 0.5;
}

.wipe-or-dont {
    display: inline-flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    gap: 20px;
}

.earaser {
    filter: brightness(1.35);
}

.more-settings:hover + .settings-hover,
.settings-hover:hover {
    display: block;
}

/* Wersja dotykowa: brak :hover — menu "Więcej" rozwijamy klasą .settings-open
   dodawaną przez JS (tylko na pointer: coarse). */
.settings-hover.settings-open {
    display: block !important;
    z-index: 2147483000 !important;
}

.more-settings svg {
    filter: brightness(2.5);
}

#area,
#glass {
    border-radius: 0 !important;
    position: unset !important;
}

.input-field-correction *,
#area *,
#glass * {
    outline: none;
}

#container-for-angles-lenghts {
    position: relative;
    width: 100%;
}

.hide,
.input-field-correction {
    display: none !important;
}

.input-field-correction {
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
}

#selectionContainer label {
    display: inline-flex;
    gap: 5px;
    justify-content: space-between;
}

.input-field-correction,
#area,
#glass {
    gap: 5px;
    border-radius: 5px;
    background: var(--background2n);
    color: var(--white);
    display: inline-flex;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1000;
    flex-direction: column;
    width: 100%;
    border-bottom-left-radius: 15px !important;
    overflow-x: hidden;
}

#glass>div {
    display: inline-flex;
    flex-direction: column;
}

.marign-left-10 {
    margin-left: 10% !important;
}

.input-field-correction input,
.layers-input,
#area input,
#glass input {
    background-color: var(--background);
    outline: none;
    color: var(--white);
    border: none;
    border: var(--border);
    border-radius: 5px;
}

#area input {
    appearance: none;
    -moz-appearance: textfield; /* Firefox */
    cursor: default;
    padding: 5px 10px;
    margin-top: 0;
    margin-bottom: 0;
}

#area input::-webkit-outer-spin-button,
#area input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
    cursor: default;
}

#area button,
#glass button {
    border-radius: 5px;
    outline: none;
    border: none;
}

#selectionContainer .input-field-submit {
    margin-top: 20px;
}

.input-field-submit,
.wmc-bottom-buttons a {
    background-color: var(--blue);
    color: white;
    border-radius: 50px;
    border: none;
    padding: 10px 0;
}

.input-field-correction button:not(.input-field-submit) {
    border: none;
    border-radius: 5px;
    opacity: 0.3;
}

.input-field-correction button:not(.input-field-submit):hover {
    opacity: 0.5;
}

select {
    background: var(--background2n);
    outline: none;
    color: var(--white);
    border-radius: 5px;
}

select {
    scrollbar-width: none;
    /*For Firefox*/
    ;
    -ms-overflow-style: none;
    /*For Internet Explorer 10+*/
    ;
}

select::-webkit-scrollbar {
    /*For WebKit Browsers*/
    width: 0;
}



#roundButton {
    position: absolute;
    bottom: 90px;
    left: 10px;
    color: white;
    background: rgba(0, 0, 0, 0.7);
    padding: 5px;
    border-radius: 5px;
    z-index: 1000;
    /* Ensure it's above all canvas layers */
}

#stick-tus-checkbox,
#stick-coordinates-tus-checkbox,
.obrobka-checkbox,
.block-angle-checkbox,
.block-length-checkbox {
    display: none;
}

.length-checkboxes,
.angle-checkboxes {
    display: inline-flex;
    outline: 0;
    background: none;
    height: 42px;
    border-left: var(--border);
    flex-direction: row;
    align-items: center;
    border-right: var(--border);
    justify-content: center;
}

.obrobka-checkbox svg,
.block-length-checkbox svg,
.block-angle-checkbox svg {
    fill: var(--white);
    width: 16px;
    height: 16px;
}

.checked-checkbox {
    display: none;
}

.checked-checkbox.active {
    display: inline-flex !important;
    margin-left: 17px;
    margin-top: 9px;
}

#glass,
#glass>div {
    flex-direction: column;
    background: var(--background);
}

#glass.active {
    display: inline-flex !important;
}





.stick-tuts,
.stick-coordinates-tuts {
    border-bottom-left-radius: 15px;
    gap: 10px;
    display: inline-flex;
    align-items: center;
    font-weight: 100;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    background: var(--background2n);
}

#stick-tus-checkbox+label,
#stick-coordinates-tus-checkbox+label,
#hide-all-angles-input+label {
    width: 32px;
    height: 32px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-bottom-left-radius: 10px;
}

.layers-input+p {
    position: absolute;
    right: 20px;
}

#coordinates {
    padding: 20px 0;
    overflow-y: auto !important;
}

.nomargin {
    margin: 0;
    padding: 0;
}

.prices-row input {
    cursor: default;
}

.prices-row input::-webkit-inner-spin-button,
.prices-row input::-webkit-inner-spin-button {
    opacity: 0 !important;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {

    opacity: 1;

}

#hide-all-angles-input+label,
#hide-all-lengths-input+label,
#hide-all-holes-input+label {
    width: 41px !important;
    height: 42px !important;
}

#angles .child button>svg,
#holes .child button>svg .stick-tuts svg {
    pointer-events: none;
}

.svg-oczko {
    pointer-events: none !important;
}

.svg-oczko-2 path {
    fill: var(--white);
}

#lengths .child button>svg {
    pointer-events: none;
}

.magnify-toolbar,
#hide-all-lengths-input,
#hide-all-holes-input,
.scaling-toolbar {
    display: none;
}

.fat {
    top: 103.5px !important;
}

#toolbar .mid {
    width: min-content;
}

.mobile-tools-menu {
    display: none;
}

.mobile-tools-hidden-trigger {
    display: none !important;
    pointer-events: none !important;
}

#generateHoleOnCanvas.mobile-tools-hidden-trigger,
#generateHoleOnCanvas.mobile-tools-hidden-trigger.actives {
    display: none !important;
    pointer-events: none !important;
}

.scaling-toolbar p {
    margin: 0;
    white-space: nowrap;
}

.magnify-toolbar.active,
.scaling-toolbar.active {
    display: inline-flex;
}

.svg-eye-button svg path {
    fill: var(--white);
}

#order-confirm {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}



.popup {
    position: fixed;
    z-index: 10;
    display: none;
    right: 0px;
    top: 0;
}

/* Style dla wyświetlenia popupa */
.popup.active {
    display: flex;
    margin: auto;
    color: var(--white);
    text-align: center;
    background: #282828;
    flex-direction: column;
    border-radius: 0 0 15px 15px;

}

.popup img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 0 0 15px 15px;
}

.popup-start {
    position: relative;
    z-index: 10;
    display: none;
    max-width: 565px;
    width: 100%;
}

/* Style dla wyświetlenia popupa */
.popup-start.active {
    display: flex;
    margin: auto;
    color: var(--white);
    text-align: center;
    background: #282828;
    flex-direction: column;
    border-radius: 15px;
}

.popup-start img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 0 0 15px 15px;
    width: 565px;
    height: 353px;
}

.title-bar {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
    border-radius: 0 0 15px 15px
}

/* Karuzela zdjęć szkła */
#popupGlassName {
    width: 520px;
}

#popupGlassName img,
#popupGlassName-start img {
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: contain;
    border-radius: 0 0 15px 15px;
}

.glass-carousel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.45);
    border: none;
    color: #fff;
    font-size: 20px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    z-index: 2;
    border-radius: 50%;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-btn:hover {
    background: rgba(0,0,0,0.75);
}

.carousel-prev { left: 6px; }
.carousel-next { right: 6px; }

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 8px 0 6px;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #666;
    cursor: pointer;
    transition: background 0.2s;
}

.carousel-dot.active {
    background: #fff;
}

.title-bar .close {
    position: absolute;
    right: 10px;
    cursor: pointer;
}

.title-bar p {
    width: 90%;
}

.dialog.active {
    display: flex !important;
}

/* #generateHoleOnCanvas,
#toggle-holes {
    display: none !important;
} */

#toggle-options-layer>div:first-child,
#toggle-coordinates-layer>div:first-child {
    overflow-y: scroll;
    max-height: 400px;
    height: 100%;
}

.prices-row {
    display: inline-flex;
    justify-content: space-between;
}

.prices-row .row {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.glass-first-child {
    display: none !important;
}

.loader {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    background: #00000054;
    justify-content: center;
    backdrop-filter: blur(1px);
}

.loader.active {
    display: inline-flex !important;
    z-index: 999 !important;
}

.cart-parent {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    position: fixed;
    top: 0;
    height: 100%;
    transform: translateX(-781px);
    transition: 0.2s ease-in-out;
    width: 1000vh;
    z-index: -50;
}

.cart-parent.active {
    transform: translateX(0) !important;
    backdrop-filter: blur(1px) brightness(0.8);
    z-index: 999;

}

.cart-parent .cart-content {
    background: #242424;
    height: 100%;
    display: inline-flex;
    flex-direction: column;
}


/* .cart-icon {
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    display: inline-flex;
    align-items: center;
    width: 47px;
    background: var(--blue);
}
 */
.cart-buttons {
    margin-top: 75px;
    width: 100%;
    display: inline-flex;
    justify-content: flex-end;
}
.close-cart-icon svg, .redirect-cart-icon svg {
    padding: 8px;
}

.cart-icon svg {
    width: 24px;
    padding: 8px;
    height: 24px;
    fill: var(--white);
}

.left-icons {
    height: 100vh;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top: 0;
    z-index: 432;
}

.cart-content .woocommerce>* {
    margin: 0 50px;
}

.cart-content .woocommerce {
    display: inline-flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
}

.cart-collaterals .cart_totals {
    padding-bottom: 50px;
}

.cart-content .content {
    display: inline-flex;
    flex-direction: column;
    height: 100%;
}

/* Miniatura i nazwa produktu w mini-koszyku to linki do strony produktu, ale produkty są
   tworzone dynamicznie z edytora i nie mają publicznej strony -> kliknięcie prowadzi do
   pustego ekranu. Wyłączamy te kliknięcia (zostaje wizualnie tak samo). */
.cart-content .content .wmc-image a,
.cart-content .content .wmc-product-title {
    pointer-events: none !important;
    cursor: default !important;
    text-decoration: none !important;
}

form.woocommerce-cart-form {
    max-height: 500px;
    overflow-y: scroll;
}

/* koszyk */

.wmc-cart {
    display: none;
}



.wmc-count {
    position: absolute;
    right: -10px;
    height: 25px;
    width: 25px;
    border-radius: 100px;
    background-color: #000;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    font-size: 12px;
    top: 0;
}

.wmc-content {
    width: 400px;
    flex-direction: column;
    display: inline-flex;
    text-align: center;
    justify-content: space-between;
    height: 100%;
    max-height: 85%;
}


.wmc-content h3:not(.wmc-empty h3) {
    display: none;
}

.wmc-subtotal {
    height: 40px;
}

.wmc-bottom-buttons {
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    gap: 10px;
}


.wmc-products {
    margin: 0 !important;
    padding-left: 0;
    max-height: 100%;
    height: 73%;
    overflow: scroll;
}

.bottom-things {
    background: var(--background);
    padding-bottom: 20px;
    border-top: 2px solid #424242;
    position: fixed;
    bottom: 0;
    left: 0;
    width: inherit;
}

.wmc-products li {
    padding: 5px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}



.wmc-remove {
    width: 10%;
}

.wmc-image {
    width: 30%;
}

.wmc-product-title {
    color: #333 !important;
    text-decoration: none !important;
}

.wmc-image img {
    max-width: 100%;
    height: auto;
}

.wmc-details {
    width: 60%;
    text-align: center;
}

.wmc-details h4 {
    font-size: 18px;
    color: var(--white);
    font-weight: 700;
}

.wmc-price {
    font-size: 16px;
}

.wmc-content a {
    text-decoration: none;
    color: white !important;
    margin: 0 10px;
}

.wmc-content h5 b {
    font-weight: 100;
}

.wmc-content h5 {
    font-size: 18px;
    padding: 0;
    font-weight: 500;
    margin: 0 !important;
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.wmc-empty {
    height: auto;
}



.shortcode-wrapper .wmc-cart {
    position: relative !important;
}

.wmc-cart-wrapper.shortcode-wrapper {
    height: 100%;
}

.wmc-details h4,
.wmc-details p {
    margin: 0;
}

#holes svg {
    pointer-events: none;
}

.layerContainer.active {
    background: #2f2f2f;
}

.layerContainer {
    height: 34px;
    display: inline-flex;
    border-radius: 4px;
    background: var(--background);
    align-items: center;
}



.layerContainer button {
    background: none;
    display: inline-flex;
    border: none;
}

.layerContainer svg {
    fill: var(--white);
}

.layerContainer p {
    margin: 0;
    font-size: 12px;
    padding: 0;
}

#canvas-buttons-container {
    display: inline-flex;
    gap: 10px;
}

#add-sheet-btn {
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    border: none;
    height: 25px;
    cursor: pointer;
}

/* .layer-name-input {
    pointer-events: none;
} */

.sheets {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 10px;
    align-items: center;
}

.layer-name-input {
    width: 85px;
    border: none;
    outline: none;
    background: transparent;
    font-size: inherit;
    color: inherit;
    padding: 0;
    color: #e3e3e3;
    margin: 0;
    cursor: text;
    font-size: 15px;
}

#coordinates .layers-text .content:last-child {
    padding-right: 10px;
}

.holes-checkboxes {
    display: inline-flex;
}

.svg-rotate-button svg path {
    stroke: var(--white);
}

.svg-rotate-button svg {
    fill: transparent;
}

.remove-sheet-btn {
    cursor: pointer;
    height: 93%;
    background: #656565 !important;
    border-radius: 0px 4px 4px 0;
    align-items: center;
}

.sheet-tab {
    width: 20px;
}

.edgesExample active {
    display: inline-flex;
    flex-direction: column;
}

.popupImages,
.popupImages-start {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    /* width: 200px; */
}

.popupImages>img {
    width: 200px;
}

.popupImages>p>svg,
.popupImages-start>p>svg {
    width: 16px;
    height: 16px;
    fill: #fff;
}

.learn-more,
.learn-more-start {
    cursor: pointer;
    color: var(--blue);
}

.squareSizeDialog,
.rectangleSizeDialog,
.rhombusSizeDialog,
.trapezoidSizeDialog,
.polygonSizeDialog {
    display: none;
}

.squareSizeDialog active,
.rectangleSizeDialog active,
.rhombusSizeDialog active,
.trapezoidSizeDialog active,
.polygonSizeDialog active {
    display: inline-flex;
    z-index: 123456;
}

.square-dimensions-content,
.rectangle-dimensions-content,
.rhombus-dimensions-content,
.trapezoid-dimensions-content,
.polygon-dimensions-content {
    margin: auto;
    padding: 20px;
    border-radius: 5px;
    width: 100%;
    max-width: 600px;
    background: var(--background);
    color: var(--white);
}

.square-dimensions-content img,
.rectangle-dimensions-content img,
.rhombus-dimensions-content img,
.trapezoid-dimensions-content img,
.polygon-dimensions-content img {
    display: block;
    margin: 20px auto 20px;
    height: 200px;
    filter: invert(100%);
}

.square-dimensions-content button,
.rectangle-dimensions-content button,
.rhombus-dimensions-content button,
.trapezoid-dimensions-content button,
.polygon-dimensions-content button {
    transition: 0.1s;
    border: none;
    border-radius: 5px;
    padding: 8px 25px;
    cursor: pointer;
}

.square-dimensions-content button:last-child,
.rectangle-dimensions-content button:last-child,
.rhombus-dimensions-content button:last-child,
.trapezoid-dimensions-content button:last-child,
.polygon-dimensions-content button:last-child {

    opacity: 1;
    color: var(--white);
    background-color: #1567ff;
    cursor: pointer;
}

.square-inputs>*:not(:last-child),
.rectangle-inputs>*:not(:last-child),
.rhombus-inputs>*:not(:last-child),
.trapezoid-inputs>*:not(:last-child),
.polygon-inputs>*:not(:last-child) {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    align-items: flex-end;
    margin-bottom: 10px;
    width: 100%;
}

#second-length-modal-parent {
    position: absolute;
    display: none;
    pointer-events: none;
    /* Zapobiega interakcji z kontenerem */
    z-index: 1000;
    background: transparent;
    border-radius: 10px;
    overflow: hidden;
    /* border: var(--border); */
    max-width: 120px;
    color: black;
}

#second-length-modal-parent.checked {
    display: block;
    /* Wyświetl modal */
}

#second-length-modal-parent #secondLengthDisplay {
    -moz-appearance: textfield;
    text-align: center;
    border: var(--border);
    width: 100px;
    color: white;
    padding: 0;
    outline: none;
    background-color: var(--background);
}

#second-length-modal-parent #secondLengthDisplay::-webkit-inner-spin-button,
#second-length-modal-parent #secondLengthDisplay::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

#second-length-modal-parent.checked #secondLengthDisplay,
#secondLengthDisplay {
    border-radius: 10px 0 0 10px;
    border: none;
    background: var(--background2n);
    padding: 5px;
    width: 65%;
}

/* .sheets, .save, .import-dxf-start, .open-file-btn {
    display: none !important;
} */


.blinker {
    animation: blinker-animation 1.5s linear infinite; /* 1.5s to czas trwania animacji */
  }
  
  @keyframes blinker-animation {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0; /* Znika na chwilę */
    }
    100% {
      opacity: 1; /* Pojawia się z powrotem */
    }
  }
  


  .main-content h1 {
    font-size: 2em;
    color: var(--light-text);
    text-align: center;
    margin-bottom: 20px;
}

.main-content > p {
    font-size: 1.2em;
    color: var(--light-text);
    text-align: center;
    margin-bottom: 40px;
}

.choose {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex-direction: row;
    gap: 35px;
    height: -webkit-fill-available;
}

.chooseformanysheets,
.chooseforonesheet {
    cursor: pointer;
    background: #282828;
    border-radius: 15px;
    flex-direction: column;
    transition: transform 0.3s, box-shadow 0.3s;
}

.chooseformanysheets:hover,
.chooseforonesheet:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.chooseformanysheets img,
.chooseforonesheet img {
    width: 100%;
    height: 100px;
    border-radius: 15px 15px 0 0;
}

.chooseformanysheets h2,
.chooseforonesheet h2 {
    font-size: 1.5em;
    color: var(--light-text);
    margin-top: 10px;
    text-align: center;
    padding: 0 15px;
}

.chooseformanysheets p,
.chooseforonesheet p {
    font-size: 1.25em;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 20px;
    text-align: center;
}

.chooseformanysheets > div,
.chooseforonesheet > div {
    padding: 16px 25px;
    display: inline-flex;
    flex-direction: column;
}

.chooseformanysheets > div > button,
.chooseforonesheet > div > button {
    margin: auto;
}

.chooseforonesheet .icons-container,
.chooseformanysheets .icons-container {
    display: flex;
    gap: 10px;
    width: min-content;
    margin: auto;
    padding: 7px 0;
    color: rgba(255, 255, 255, 0.75);
}

.shape-choose {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-top: auto;
    margin-bottom: 20px;
}

.choose-own-shape-btn {
    padding: 6px;
    cursor: pointer;
    margin-bottom: auto;
}

.main-content h1.modal-title {
    font-size: 30px;
    margin-bottom: 40px;
}

.shape-choose button {
    display: flex;
    flex-direction: column;
    padding: 20px;
    cursor: pointer;
    max-height: 220px;
    height: 100%;
    font-size: 21px;
    border: 3px solid #ffffff52;
    transition: border-color .2s ease-in-out, transform .2s ease-in-out, box-shadow .2s ease-in-out;
}

.shape-choose button:hover,
.shape-choose button:focus,
.shape-choose button:focus-visible {
    border-color: #fff;
    transform: translateY(-2px);
    box-shadow: 1px 1px 10px 0px #fff;
    outline: none;
}

.shape-choose button svg {
    width: 100%;
    height: 100%;
}

.set-glass-btn {
    background: var(--background);
    border: none;
    color: white;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 50px;
    width: fit-content;
}
.set-glass-btn:hover {
    background: var(--blue);
}

.file-grid > div#glass-second-child {
    width: 100%;
}
.file-grid > div#glass-second-child .row {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    width: 100%;
}
div#popupFpInfo-start .popupImages-start > img {
    height: auto;
    width: auto;
}

/* TODO: display addtional grind options */
.length-checkboxes .svg-additional-grind-button{
    display: none;
}
/* TODO: display addtional grind options */
.additionalGrindContainer{
    display: none;
}

.spinner {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 3px solid;
    border-color: #c639a2 #c639a2 transparent transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
  }
  .spinner::after,
  .spinner::before {
    content: '';  
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 3px solid;
    border-color: transparent transparent #305ec2 #305ec2;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    box-sizing: border-box;
    animation: rotationBack 0.5s linear infinite;
    transform-origin: center center;
  }
  .spinner::before {
    width: 50px;
    height: 50px;
    border-color: #FFF #FFF transparent transparent;
    animation: rotation 1.5s linear infinite;
  }
      
  @keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  } 
  @keyframes rotationBack {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-360deg);
    }
  }
      
 .ui-dialog-titlebar-close { /* jQuery ui dialog hide close button */
    display: none;
  }

/* Koło: tafla bez edycji kątów, długości i otworów */
body.circle-shape-active #toggle-angless,
body.circle-shape-active #toggle-lenghts,
body.circle-shape-active #toggle-holes,
body.circle-shape-active #generateHoleOnCanvas,
body.circle-shape-active #generateHolesWithdistanceOnCanvas,
body.circle-shape-active .mis-placeholder {
    display: none !important;
}

/* ========== BLOKADA NA MOBILCE ========== */
#mobileBlocker {
    display: none;
}

@media only screen and (max-width: 1024px), only screen and (pointer: coarse) and (max-width: 1280px) {
    #mobileBlocker {
        display: flex !important;
        position: fixed;
        inset: 0;
        z-index: 2147483647; /* maksymalna wartość INT32 — przebija wszystkie inne z-indexy w aplikacji */
        background: rgba(20, 20, 20, 0.98);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        align-items: center;
        justify-content: center;
        padding: 20px;
        box-sizing: border-box;
    }

    #mobileBlocker .mobileBlocker-card {
        background: var(--background, #535353);
        color: var(--white, #E1E1E1);
        border-radius: 12px;
        padding: 28px 22px;
        max-width: 420px;
        width: 100%;
        text-align: center;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    #mobileBlocker .mobileBlocker-icon {
        margin-bottom: 14px;
    }

    #mobileBlocker h2 {
        margin: 0 0 12px 0;
        font-size: 20px;
        font-weight: 600;
        color: var(--white, #E1E1E1);
    }

    #mobileBlocker p {
        margin: 0 0 12px 0;
        font-size: 15px;
        line-height: 1.45;
        color: var(--white, #E1E1E1);
        opacity: 0.9;
    }

    #mobileBlocker .mobileBlocker-sub {
        font-size: 13px;
        opacity: 0.65;
        margin-bottom: 22px;
    }

    #mobileBlocker .mobileBlocker-btn {
        display: block;
        width: fit-content;
        margin: 0 auto;
        padding: 11px 26px;
        background: var(--blue, #1567ff);
        color: #fff;
        text-decoration: none;
        border: 0;
        border-radius: 8px;
        cursor: pointer;
        font-family: inherit;
        font-weight: 500;
        font-size: 15px;
        transition: opacity 0.15s ease;
    }

    #mobileBlocker .mobileBlocker-btn:hover,
    #mobileBlocker .mobileBlocker-btn:active {
        opacity: 0.85;
    }

    #mobileBlocker .mobileBlocker-preview-btn {
        display: block;
        width: fit-content;
        margin: 12px auto 0;
        padding: 10px 22px;
        background: transparent;
        color: var(--white, #E1E1E1);
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 8px;
        font-weight: 400;
        font-size: 13px;
        cursor: pointer;
        font-family: inherit;
        text-decoration: none;
        transition: background 0.15s ease;
    }

    #mobileBlocker .mobileBlocker-preview-btn:hover,
    #mobileBlocker .mobileBlocker-preview-btn:active {
        background: rgba(255, 255, 255, 0.05);
    }

    /* Bez trybu podglądu: zablokuj interakcje z całą zawartością edytora pod overlay'em */
    body:not(.mobile-preview-mode) > *:not(#mobileBlocker):not(#mobilePreviewBanner):not(script) {
        pointer-events: none !important;
        user-select: none !important;
    }

    /* Tryb podglądu: blocker schowany (banner usunięty — zasłaniał toolbar) */
    body.mobile-preview-mode #mobileBlocker {
        display: none !important;
    }

    /* W trybie podglądu canvas pozostaje interaktywny — pinch zoom + 2-finger pan
       (nasze handlery) + tap na elementy UI. Drag pojedynczym palcem na canvasie
       nie jest obsługiwany na mobilce — figura i tak ląduje na środku po utworzeniu. */
}

/* Banner trybu podglądu — usunięty, zasłaniał toolbar na mobilce */
#mobilePreviewBanner {
    display: none !important;
}

#mobilePreviewBanner span {
    flex: 1;
    text-align: center;
}

#mobilePreviewBanner button {
    background: rgba(0, 0, 0, 0.15);
    border: none;
    color: #1a1a1a;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto !important;
}

#mobilePreviewBanner button:hover,
#mobilePreviewBanner button:active {
    background: rgba(0, 0, 0, 0.25);
}

/* Przycisk zamknięcia panelu po prawej — domyślnie ukryty (tylko na mobilce widoczny) */
.layers-panel-mobile-close {
    display: none;
}

/* Floating mobile add-to-cart button — domyślnie ukryty, widoczny na mobilce */
#layersPanelMobileOpen {
    display: none;
}

/* ========== MOBILE RESPONSIVE — FAZA 1: start screen, loading screen, dialogi ========== */
@media only screen and (max-width: 768px) {

    /* Wyłącz padding 0 20px na overlayach żeby treść mogła zająć cały ekran */
    .startscreen-tab,
    .glasschoosescreen-tab,
    .glasschooseforlayers-tab,
    .import-dxf-screen-tab,
    .loadingscreen-tab,
    .glasschooseshape-tab,
    .prefferences-tab {
        padding: 0 !important;
    }

    /* Wszystkie modalne overlay'e na mobilce muszą zasłaniać toolbar (z-index 1000) */
    .startscreen-tab.active,
    .glasschoosescreen-tab.active,
    .glasschooseforlayers-tab.active,
    .import-dxf-screen-tab.active,
    .loadingscreen-tab.active,
    .glasschooseshape-tab.active,
    .prefferences-tab.active {
        z-index: 100000 !important;
    }

    /* Belka zamknięcia modalu — zamiast czarnego paska na całą szerokość,
       małe pływające kółko × w prawym górnym rogu */
    .close-startscreen-tab,
    .close-glasschooseforlayers-tab,
    .close-glasschoosescreen-tab,
    .close-glasschooseshape-tab,
    .close-import-dxf-tab,
    .close-prefferences-tab,
    .close-loadingscreen-tab,
    .modal .modal-close {
        background: rgba(0, 0, 0, 0.5) !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        top: 8px !important;
        right: 8px !important;
        left: auto !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10 !important;
    }

    .close-startscreen-tab svg,
    .close-glasschooseforlayers-tab svg,
    .close-glasschoosescreen-tab svg,
    .close-glasschooseshape-tab svg,
    .close-import-dxf-tab svg,
    .close-prefferences-tab svg,
    .close-loadingscreen-tab svg,
    .modal .modal-close svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* main-content modalu — mniejsze padding-top, bo belka zamknięcia jest teraz mała pływająca */
    .startscreen-container .main-content,
    .glasschoosescreen-container .main-content,
    .glasschooseforlayers-container .main-content,
    .import-dxf-container .main-content {
        padding-top: 16px !important;
    }

    /* Dialogi (squareSizeDialog, rectangleSizeDialog itd.) muszą być WYŻEJ niż overlay'e
       żeby gdy user kliknie kafelek kształtu, dialog z polami wymiarów pojawił się na wierzchu */
    .dialog.active {
        z-index: 200000 !important;
    }

    /* Container — pełna szerokość, scroll w środku jeśli za dużo treści */
    .prefferences.prefferences-tab.active .container,
    .startscreen-tab.active .container,
    .glasschoosescreen-tab.active .container,
    .glasschooseshape-tab.active .container,
    .glasschooseforlayers-tab.active .container,
    .import-dxf-screen-tab.active .container,
    .loadingscreen-tab.active .container {
        max-width: 100% !important;
        max-height: 100% !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
    }

    /* max-width zawartości — żeby na mobilce nie było ścisków */
    .prefferences.prefferences-tab.active .max-width,
    .startscreen-tab.active .max-width,
    .glasschoosescreen-tab.active .max-width,
    .glasschooseshape-tab.active .max-width,
    .glasschooseforlayers-tab.active .max-width,
    .import-dxf-screen-tab.active .max-width,
    .loadingscreen-tab.active .max-width {
        max-width: 100% !important;
        padding: 0 16px;
        box-sizing: border-box;
    }

    .prefferences.prefferences-tab.active .row,
    .startscreen-tab.active .row,
    .glasschoosescreen-tab.active .row,
    .glasschooseshape-tab.active .row,
    .glasschooseforlayers-tab.active .row,
    .import-dxf-screen-tab.active .row,
    .loadingscreen-tab.active .row {
        max-width: 100% !important;
    }

    /* Loading screen: schowaj tło z laptopem (zajmuje 65%, zostawia za mało miejsca) */
    .loadingscreen-tab .img-loadingscreen-tab {
        display: none !important;
    }

    .loadingscreen-tab.active .container.loadingscreen-container {
        max-width: 100% !important;
        max-height: 100% !important;
    }

    /* Start screen: pokaż sidebar i main-content jeden pod drugim, nie obok siebie */
    .startscreen-container,
    .glasschoosescreen-container,
    .glasschooseforlayers-container,
    .import-dxf-container {
        flex-direction: column !important;
        height: 100% !important;
        overflow-y: auto !important;
    }

    .startscreen-container .sidebar,
    .glasschoosescreen-container .sidebar,
    .glasschooseforlayers-container .sidebar,
    .import-dxf-container .sidebar {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: auto !important;
        padding: 16px !important;
        box-sizing: border-box;
    }

    .startscreen-container .main-content,
    .glasschoosescreen-container .main-content,
    .glasschooseforlayers-container .main-content,
    .import-dxf-container .main-content {
        flex: 1 1 auto !important;
        padding: 48px 16px 16px !important; /* top 48px = 32px pasek zamknięcia + 16px breathing */
        margin-top: 0 !important;
        overflow-y: visible !important;
    }

    /* Tytuł modalu (h1.modal-title) — czytelnie i z mniejszym fontem */
    .main-content h1.modal-title,
    .main-content h1 {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin: 0 0 16px 0 !important;
        text-align: center;
    }

    /* Suggestions banner (header z poradnikiem video) — pomniejsz, ukryj duże zdjęcie */
    .startscreen-container .main-content .header {
        max-height: none !important;
        height: auto !important;
        flex-direction: column !important;
    }

    .startscreen-container .main-content .suggestions {
        padding: 16px !important;
        height: auto !important;
    }

    .startscreen-container .main-content .suggestions-banner {
        display: none !important;
    }

    /* Pliki (file-grid) — jedna kolumna na mobilce */
    .file-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Dialogi rozmiarów (prostokąt, koło, romb itp.) */
    .square-dimensions-content,
    .rectangle-dimensions-content,
    .rhombus-dimensions-content,
    .trapezoid-dimensions-content,
    .polygon-dimensions-content {
        max-width: 92vw !important;
        width: 92vw !important;
        padding: 16px !important;
        box-sizing: border-box;
    }

    .square-dimensions-content img,
    .rectangle-dimensions-content img,
    .rhombus-dimensions-content img,
    .trapezoid-dimensions-content img,
    .polygon-dimensions-content img {
        height: 140px !important;
        margin: 12px auto !important;
    }

    /* Inputy w dialogach — duża wysokość żeby palec trafił */
    .square-dimensions-content input,
    .rectangle-dimensions-content input,
    .rhombus-dimensions-content input,
    .trapezoid-dimensions-content input,
    .polygon-dimensions-content input,
    .dialog-content input,
    #circleSizeDialog input {
        font-size: 16px !important;
        padding: 8px 10px !important;
        min-height: 38px !important;
        width: 100% !important;
        box-sizing: border-box;
        display: block;
    }

    /* Każdy label w dialogu ma swój wiersz: tekst → input → (mm) jeden pod drugim */
    .square-dimensions-content label,
    .rectangle-dimensions-content label,
    .rhombus-dimensions-content label,
    .trapezoid-dimensions-content label,
    .polygon-dimensions-content label,
    #circleSizeDialog label {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
        width: 100% !important;
        margin-bottom: 10px;
    }

    .square-dimensions-content label > b,
    .rectangle-dimensions-content label > b,
    .rhombus-dimensions-content label > b,
    .trapezoid-dimensions-content label > b,
    .polygon-dimensions-content label > b,
    #circleSizeDialog label > b {
        font-size: 12px;
        opacity: 0.7;
        font-weight: normal;
        margin-top: -2px;
    }

    /* Kontener inputów — tylko kolumna, bez flex-wrap dziwactw */
    .square-inputs,
    .rectangle-inputs,
    .rhombus-inputs,
    .trapezoid-inputs,
    .polygon-inputs {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .square-inputs > *:not(:last-child),
    .rectangle-inputs > *:not(:last-child),
    .rhombus-inputs > *:not(:last-child),
    .trapezoid-inputs > *:not(:last-child),
    .polygon-inputs > *:not(:last-child) {
        flex-direction: column !important;
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    /* Confirmation buttons — większe palce */
    .confirmButtons,
    .square-dimensions-content .confirmButtons,
    .rectangle-dimensions-content .confirmButtons,
    .rhombus-dimensions-content .confirmButtons,
    .trapezoid-dimensions-content .confirmButtons {
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 12px;
    }

    .square-dimensions-content button,
    .rectangle-dimensions-content button,
    .rhombus-dimensions-content button,
    .trapezoid-dimensions-content button,
    .polygon-dimensions-content button,
    .dialog-content button,
    #circleSizeDialog button {
        min-height: 42px !important;
        padding: 10px 18px !important;
        font-size: 14px !important;
    }

    /* Wybór parametrów szkła — dwie kolumny → jedna kolumna na mobilce.
       height: auto — bez tego grid (fill-available) rozciągał karty na całą wysokość
       ekranu, zostawiając duże puste pola w środku. */
    .choose {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        height: auto !important;
        align-content: start !important;
    }

    /* Radio-container (Typ szkła, Twardość, Szlifowanie itp.) — jedna kolumna */
    .radio-container,
    .radio-container.two-col,
    .radio-container.one-col {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .radio-button {
        padding: 12px 16px !important;
        font-size: 14px !important;
    }

    /* Shape-choose (kwadrat, prostokąt, koło, romb, trapez) — dwie kolumny, mniejsze */
    .shape-choose {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin-top: 16px !important; /* zamiast auto które pchało na dół */
        margin-bottom: 16px !important;
    }

    .shape-choose button {
        max-height: none !important;
        padding: 12px 8px !important;
        font-size: 13px !important;
    }

    .shape-choose button svg {
        max-height: 60px !important;
        width: auto !important;
    }

    .choose-own-shape-btn svg {
        max-height: 60px !important;
        width: auto !important;
    }

    /* "Narysuj swój kształt" — wymaga rysowania, na mobilce nie ma sensu.
       Wyszarzamy + dorzucamy etykietę "Tylko na komputerze". */
    .choose-own-shape-btn {
        position: relative;
        opacity: 0.45 !important;
        pointer-events: none !important;
        cursor: not-allowed !important;
        filter: grayscale(0.7);
    }

    .choose-own-shape-btn::after {
        content: "Tylko na komputerze";
        position: absolute;
        bottom: 6px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.7);
        color: #ffd166;
        padding: 3px 10px;
        border-radius: 12px;
        font-size: 10px;
        font-weight: 500;
        white-space: nowrap;
        letter-spacing: 0.3px;
    }

    /* Select-container (Rodzaj szkła, Grubość szkła itp.) — label nad selectem,
       a nie obok, żeby select miał pełną szerokość i nie ucinał długich opcji */
    .select-container {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
    }

    .select-container .label-select {
        min-width: 0 !important;
    }

    .select-container .custom-select {
        width: 100% !important;
        min-width: 0 !important;
        font-size: 16px !important;
    }

    /* Ikona "info" obok selectu — w wierszu z labelem (nie zajmuje osobnego rzędu) */
    .select-container > svg {
        position: absolute;
        top: 0;
        right: 0;
        margin: 4px;
    }

    .select-container {
        position: relative;
    }

    .chooseformanysheets,
    .chooseforonesheet {
        height: auto !important;
        align-self: start !important;   /* karta dopasowana do treści, nie rozciągana */
    }

    .chooseformanysheets h2,
    .chooseforonesheet h2 {
        font-size: 1.05em !important;
        margin-top: 0 !important;
    }

    .chooseformanysheets p,
    .chooseforonesheet p {
        font-size: 0.9em !important;
        margin-top: 8px !important;
    }

    .chooseformanysheets > div,
    .chooseforonesheet > div {
        padding: 16px !important;
    }

    /* Panel po prawej (Konfiguracja parametrów, Help) — 100% viewport na mobilce */
    .layers-panel-right,
    .coordinates-panel-right,
    #help-panel-right {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Nagłówek "Konfiguracja parametrów" z X — schowany na mobilce,
       zabierał cały rząd nad canvasem bez potrzeby (panel i tak jest zadokowany u góry) */
    .layers-panel-right .layers-panel-title {
        display: none !important;
    }

    .layers-panel-right.active,
    .coordinates-panel-right.active,
    #help-panel-right.active {
        transform: translateX(0) !important;
    }

    /* Tekst w panelach — łamać normalnie, nie przesuwać się poza widok */
    .layers-panel-right *,
    .coordinates-panel-right *,
    #help-panel-right * {
        word-wrap: break-word;
        overflow-wrap: anywhere;
        max-width: 100%;
    }

    /* W panelu otworów nie rozrywaj słów/jednostek (np. "mm" lądowało jako "m" nad "m") */
    #holes .layers-text,
    #holes .layers-text p,
    #holes .row,
    #holes .row p {
        overflow-wrap: normal !important;
        word-break: keep-all !important;
    }

    /* Tabs nawigacji (Kąt, Długość, Otwory, Pole, Szkło) — wszystko w JEDNYM rzędzie */
    .layers-panel-right .icons-navbar-css {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-around !important;
        width: 100%;
        gap: 4px;
        padding: 4px 8px !important;
    }

    .layers-panel-right .icons-navbar-css > * {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        flex-direction: column !important;
        font-size: 11px !important;
        padding: 6px 2px !important;
        text-align: center;
        gap: 2px;
    }

    .layers-panel-right .icons-navbar-css > * svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* Przycisk zamknięcia panelu na mobilce (X) — tylko na mobilce widoczny */
    .layers-panel-mobile-close {
        display: inline-flex !important;
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        width: 32px;
        height: 32px;
        background: rgba(255, 255, 255, 0.1);
        border: none;
        color: var(--white, #E1E1E1);
        font-size: 22px;
        line-height: 1;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-family: inherit;
    }

    .layers-panel-mobile-close:hover,
    .layers-panel-mobile-close:active {
        background: rgba(255, 255, 255, 0.2);
    }

    .layers-panel-title {
        position: relative;
    }

    /* Floating "dodaj do koszyka" — stale widoczny na mobilce */
    #layersPanelMobileOpen {
        display: inline-flex !important;
        position: fixed;
        bottom: 70px;
        right: 16px;
        z-index: 100001;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: var(--blue, #1567ff);
        color: #fff;
        border: none;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        font-family: inherit;
    }

    #layersPanelMobileOpen:hover,
    #layersPanelMobileOpen:active {
        background: #0f54d6;
    }

    #layersPanelMobileOpen svg {
        width: 26px !important;
        height: 26px !important;
    }

    #layersPanelMobileOpen .mobile-cart-plus {
        color: #ffd84d;
        stroke: #ffd84d !important;
    }

    /* Lewitujący "Dodaj do koszyka" tylko podczas pracy na arkuszu — ukryj, gdy otwarty
       jest któryś z ekranów startowych/wyboru (ładowanie, start, wybór kształtu,
       wybór parametrów szkła, import DXF). */
    body:has(.loadingscreen-tab.active) #layersPanelMobileOpen,
    body:has(.startscreen-tab.active) #layersPanelMobileOpen,
    body:has(.glasschooseshape-tab.active) #layersPanelMobileOpen,
    body:has(.glasschoosescreen-tab.active) #layersPanelMobileOpen,
    body:has(.import-dxf-screen-tab.active) #layersPanelMobileOpen {
        display: none !important;
    }

    /* Hover-list dropdown'y w toolbarze (otwory miś, predefiniowane kształty itp.)
       Domyślnie position: fixed bez left/right — wystają poza viewport po prawej.
       Na mobilce zakotwiczamy do prawego brzegu z max szerokością. */
    .list-hover {
        right: 8px !important;
        left: auto !important;
        max-width: calc(100vw - 16px) !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
    }

    /* Panel koszyka otwarty — wyższy z-index niż toolbar (1000) i panele,
       żeby zakrył je na mobilce (koszyk zajmuje cały ekran) */
    .cart-parent.active {
        z-index: 100002 !important;
    }

    /* iOS Safari (pasek adresu u góry): nie centruj panelu w pionie — inaczej, gdy
       zawartość jest wyższa niż widoczny obszar, góra panelu (pasek z X) ucieka ponad
       ekran. Wyrównujemy do góry i ograniczamy wysokość do REALNIE widocznego viewportu. */
    .cart-parent {
        align-items: flex-start !important;
        height: 100vh !important;      /* fallback dla starszych iOS */
        height: 100dvh !important;
    }

    .cart-parent.active .cart-content {
        width: 100vw !important;
        height: 100vh;                 /* fallback dla starszych iOS */
        height: 100dvh !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }

    /* Panel koszyka (mini-cart) na mobilce — odsuń zawartość od notcha / krawędzi ekranu */
    .cart-parent .cart-content {
        width: 100vw !important;
        box-sizing: border-box;
        padding-top: 0 !important;   /* odstęp od góry / safe-area przejmuje przyklejony .cart-buttons */
    }

    .cart-content .woocommerce > * {
        margin: 0 12px !important;
    }

    /* Pasek z ikonami (koszyk / X) na górze panelu — nie przyklejaj do krawędzi,
       inaczej X ucina się o zaokrąglony róg ekranu / pasek statusu */
    .cart-buttons {
        position: sticky !important;
        top: 0 !important;
        z-index: 5 !important;
        background: #242424 !important;   /* tło jak .cart-content, żeby X zawsze był czytelny przy przewijaniu */
        margin-top: 0 !important;
        padding-top: calc(env(safe-area-inset-top, 0px) + 14px) !important;
        padding-right: calc(env(safe-area-inset-right, 0px) + 14px) !important;
        padding-left: calc(env(safe-area-inset-left, 0px) + 14px) !important;
        box-sizing: border-box !important;
    }

    .close-cart-icon svg,
    .redirect-cart-icon svg {
        width: 24px !important;
        height: 24px !important;
        padding: 6px !important;
    }

    form.woocommerce-cart-form {
        max-height: none !important;
    }

    /* ===== Mini-cart (woo-minicart) na mobilce — czytelny layout: [×] [miniatura] [nazwa+cena] ===== */
    /* Struktura wtyczki: ul.wmc-products > li.mini_cart_item > .wmc-remove + .wmc-image + .wmc-details */
    .cart-content .content .wmc-content {
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }

    .cart-content .content .wmc-content > h3 {
        font-size: 13px !important;
        color: #bdbdbd !important;
        font-weight: 500 !important;
        margin: 0 0 8px !important;
        padding: 0 14px !important;
        text-align: left !important;
    }

    .cart-content .content ul.wmc-products {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .cart-content .content ul.wmc-products > li {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
        padding: 12px 14px !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-sizing: border-box !important;
    }

    .cart-content .content .wmc-remove {
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .cart-content .content .wmc-remove .remove,
    .cart-content .content .wmc-remove a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 30px !important;
        height: 30px !important;
        font-size: 22px !important;
        line-height: 1 !important;
        color: #e1e1e1 !important;
        text-decoration: none !important;
        opacity: 0.85 !important;
    }

    .cart-content .content .wmc-image {
        flex: 0 0 120px !important;
        width: 120px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .cart-content .content .wmc-image a {
        display: block !important;
        line-height: 0 !important;
        width: 120px !important;
    }

    /* Bardziej specyficzny selektor (.cart-parent .cart-content...) + zdjęcie max-width/height,
       bo WordPress/wtyczki często wstrzykują "img { max-width: 100% }" ograniczające obrazek
       do szerokości kolumny rodzica. */
    .cart-parent .cart-content .content .wmc-image img,
    .cart-parent .cart-content .content ul.wmc-products img,
    .cart-content .content .wmc-image img.attachment-woocommerce_thumbnail {
        width: 120px !important;
        height: 120px !important;
        max-width: none !important;
        max-height: none !important;
        min-width: 0 !important;
        min-height: 0 !important;
        object-fit: contain !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border-radius: 8px !important;
        display: block !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .cart-content .content .wmc-details {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .cart-content .content .wmc-details .wmc-product-title,
    .cart-content .content .wmc-details .wmc-product-title h4 {
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
        color: #e6e6e6 !important;
        text-decoration: none !important;
    }

    .cart-content .content .wmc-details p {
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
        color: #bdbdbd !important;
    }

    .cart-content .content .wmc-details .wmc-price {
        color: #fff !important;
        font-weight: 600 !important;
        display: block !important;     /* wymusza " x 1" w osobnej linii pod cenami */
        line-height: 1.4 !important;
    }

    /* Subtotal ("Łącznie: ...") */
    .cart-content .content .wmc-subtotal,
    .woocommerce-mini-cart__total {
        font-size: 15px !important;
        text-align: center !important;
        padding: 14px !important;
        margin: 0 !important;
    }

    .cart-content .content .wmc-subtotal h5 {
        margin: 0 !important;
        font-size: 15px !important;
        color: #e6e6e6 !important;
        font-weight: 600 !important;
    }

    /* Przyciski "Zobacz koszyk" / "Zamówienie" — pełna szerokość, jeden pod drugim */
    .cart-content .content .wmc-bottom-buttons,
    .woocommerce-mini-cart__buttons,
    .wmc-cart-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding: 0 14px 14px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .cart-content .content .wmc-bottom-buttons a,
    .woocommerce-mini-cart__buttons a,
    .wmc-cart-buttons a,
    .cart-content .content a.button {
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
        padding: 13px !important;
        font-size: 14px !important;
        margin: 0 !important;
    }

    /* Toolbar mobilny — przyciski rozciągnięte równo na całą szerokość paska. */
    #toolbar {
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        width: 100% !important;
        height: 40px !important;
        flex-wrap: nowrap !important;
        justify-content: stretch !important;
    }

    /* Spłaszczamy .left/.right (display:contents) — ich dzieci stają się bezpośrednimi
       elementami flex #toolbara, dzięki czemu można ustawić kolejność POJEDYNCZYCH
       przycisków: Menu (hamburger) -> Koszyk -> Dodaj do koszyka -> reszta narzędzi. */
    #toolbar > .left,
    #toolbar > .right {
        display: contents !important;
    }

    #toolbar button,
    #toolbar .mobile-tools-menu > summary,
    #toolbar label,
    #toolbar .mobile-tools-menu,
    #toolbar .list-hover-parent {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        flex-shrink: 1 !important;
    }

    #toolbar .more-settings { order: -3 !important; }
    #toolbar .cart-icon { order: -2 !important; }
    #toolbar .add-to-cart { order: -1 !important; }

    #toolbar .mobile-tools-menu {
        display: block !important;
        position: relative !important;
        order: 0 !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        /* padding tylko z lewej (z prawej usunięty na życzenie) */
        padding: 0 0 0 4px !important;
        color: var(--white, #E1E1E1);
    }

    #toolbar .mobile-tools-menu > summary {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 40px !important;
        padding: 0 !important;
        border-right: var(--border);
        list-style: none;
        cursor: pointer;
        box-sizing: border-box;
    }

    #toolbar .mobile-tools-menu > summary::-webkit-details-marker {
        display: none;
    }

    #toolbar .mobile-tools-menu > summary svg {
        width: 16px !important;
        height: 16px !important;
        padding: 0 !important;
        color: var(--white, #E1E1E1);
    }

    #toolbar .mobile-tools-menu > summary p {
        display: none !important;
    }

    /* Tło zaznaczenia na całym flex-itemie (.mobile-tools-menu), nie na summary —
       inaczej 4px poziomego paddingu details zostaje przezroczyste i robi się gap przy borderach. */
    #toolbar .mobile-tools-menu[open] {
        background-color: var(--checked);
    }

    .mobile-tools-menu-list {
        display: none;
        position: fixed;
        top: 44px;
        left: 8px;
        z-index: 2147483001;
        width: min(280px, calc(100vw - 16px));
        max-height: 60vh;
        overflow-y: auto;
        background: var(--background, #535353);
        border: var(--border);
        border-radius: 0 0 10px 10px;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
    }

    .mobile-tools-menu-list.mobile-tools-menu-list-open {
        display: flex !important;
        flex-direction: column !important;
    }

    .mobile-tools-menu-list button {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex: 0 0 auto !important;
        gap: 12px !important;
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        padding: 13px 14px !important;
        color: var(--white, #E1E1E1) !important;
        background: transparent !important;
        border: 0 !important;
        border-bottom: var(--border);
        font-size: 14px !important;
        line-height: 1.25 !important;
        text-align: left !important;
        font-family: inherit;
        box-sizing: border-box;
    }

    .mobile-tools-menu-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 32px !important;
        width: 32px !important;
        height: 32px !important;
    }

    .mobile-tools-menu-icon svg {
        width: 18px !important;
        height: 18px !important;
        padding: 0 !important;
        margin: 0 !important;
        color: var(--white, #E1E1E1) !important;
        fill: var(--white, #E1E1E1);
        stroke: #8b8b8b;
        box-sizing: border-box;
    }

    .mobile-tools-menu-icon svg path {
        fill: var(--white, #E1E1E1);
        stroke: #8b8b8b;
    }

    .mobile-tools-menu-list button:last-child {
        border-bottom: 0 !important;
    }

    .mobile-tools-menu-list button:hover,
    .mobile-tools-menu-list button:active {
        background-color: var(--checked) !important;
    }

    #arcTool,
    #arcTool.actives,
    #erasePoint,
    #erasePoint.actives,
    #generateHoleOnCanvas,
    #generateHoleOnCanvas.actives,
    #generateHolesWithdistanceOnCanvas,
    #generateHolesWithdistanceOnCanvas.actives,
    #toolbar .mis-placeholder,
    #toolbar .mis-placeholder.actives {
        display: none !important;
    }

    /* Narzędzie rysowania — ukryte na mobilce (rysowanie wyłączone w trybie podglądu) */
    #drawButton {
        display: none !important;
    }

    #toolbar button > p,
    #toolbar .list-hover-parent > p {
        display: none !important;
    }

    #toolbar button {
        min-width: 0 !important;
        padding: 0 4px !important;
        height: 40px !important;
        justify-content: center !important;
    }

    /* mniejsze ikony w toolbarze — niższy pasek, więcej miejsca dla canvasa */
    #toolbar button svg,
    #toolbar .mobile-tools-menu > summary svg,
    #toolbar label svg {
        width: 15px !important;
        height: 15px !important;
        padding: 6px !important;
    }

    #toolbar .list-hover-parent {
        height: 40px !important;
        padding: 0 4px !important;
        align-items: center !important;
    }

    #toolbar .list-hover-parent > svg {
        width: 24px !important;
        height: 22px !important;
        padding: 0 !important;
    }

    /* ===== Panel "Konfiguracja parametrów" — kompaktowo, żeby zostawił dużo miejsca canvasowi ===== */
    /* Zakładki Kąt/Długość/Otwory/Pole/Szkło — wąski rząd */
    .layers-panel-right .icons-navbar-css {
        padding: 2px 6px !important;
        gap: 2px !important;
    }

    .layers-panel-right .icons-navbar-css > * {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        flex-direction: column !important;
        font-size: 9px !important;
        line-height: 1.1 !important;
        padding: 3px 1px !important;
        text-align: center !important;
        gap: 1px !important;
    }

    .layers-panel-right .icons-navbar-css > * svg {
        width: 15px !important;
        height: 15px !important;
    }

    /* Treść aktywnej zakładki — ograniczona wysokość + scroll, żeby (np. opcje "Szkło")
       nie spychała figury z ekranu */
    .layers-panel-right > #coordinates2,
    .layers-panel-right > #angles,
    .layers-panel-right > #lengths,
    .layers-panel-right > #holes,
    .layers-panel-right > #area,
    .layers-panel-right > #glass {
        max-height: 40vh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* sam panel — niech zaczyna się tuż pod niższym toolbarem */
    .layers-panel-right {
        top: 40px !important;
        max-height: calc(100% - 40px) !important;
    }
}