/* -----------------------------------------
    GŁÓWNE USTAWIENIA
----------------------------------------- */
.mk-form {
    max-width: 880px;
    margin: 20px auto;
    font-family: Arial, sans-serif;
    color: #111;
}

/* -----------------------------------------
    GRUPA OKNA (kontener)
----------------------------------------- */
.mk-window-group {
    border: 1px solid #d0d0d0;
    margin-bottom: 15px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: max-height 0.28s ease, opacity 0.28s ease;
    max-height: 1800px;
}

.mk-window-group.collapsed {
    max-height: 60px;
    opacity: 0.97;
    overflow: hidden;
}

.mk-window-group.fade-out {
    opacity: 0;
    transform: scale(0.98);
    transition: all 0.25s ease;
}

/* -----------------------------------------
    NAGŁÓWEK OKNA
----------------------------------------- */
.mk-window-header {
    background: #E30613;
    color: #fff;
    padding: 6px 12px;
    font-size: 15px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.mk-window-header h3,
.mk-window-header span {
    color: #fff !important;
}

/* Strzałka */
.mk-arrow {
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.mk-window-group.collapsed .mk-arrow {
    transform: rotate(-45deg);
}

/* Ciało okna */
.mk-window-body {
    padding: 12px;
}

/* -----------------------------------------
    KROKI
----------------------------------------- */
.mk-step {
    border: 1px solid #e0e0e0;
    margin-bottom: 10px;
}

.mk-step-header {
    background: #E30613;
    color: #fff;
    padding: 8px 10px;
    font-weight: bold;
    cursor: pointer;
    border-bottom: 1px solid #c20510;
    transition: background 0.2s ease;
}

.mk-step-header:hover {
    background: #c20510;
}

.mk-step-content {
    padding: 10px;
    max-height: 1000px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.25s ease;
}

.mk-step.collapsed .mk-step-content {
    max-height: 0;
    opacity: 0;
    padding: 0 10px;
}

/* -----------------------------------------
    POLA WYMIARÓW
----------------------------------------- */
.mk-dimensions-input-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
}

.mk-dimensions-input-group .mk-input-field {
    flex: 1;
    min-width: 200px;
}

.mk-dimensions-input-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #444;
}

.mk-dimensions-input-group input[type="number"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 0;
    box-sizing: border-box;
    font-size: 16px;
    transition: border-color 0.2s;
}

.mk-dimensions-input-group input[type="number"]:focus {
    border-color: #E30613;
    outline: none;
    box-shadow: 0 0 0 1px #E30613;
}

/* -----------------------------------------
    KAFELKI OKNO / KATEGORIA / THICKNESS / COLOR PREVIEW
----------------------------------------- */
.mk-window-item,
.mk-category-item,
.mk-thickness-item,
.mk-color-preview-tile {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 150px;
    height: 180px;
    margin: 4px;
    padding: 0;
    background: #fff;
    text-align: center;
    border: 1px solid #dcdcdc;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mk-window-item input[type="radio"],
.mk-color-picker-item input[type="radio"] {
    display: none;
}

.mk-window-item .mk-img-wrapper,
.mk-category-item .mk-img-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    width: 100%;
    padding: 5px;
}

.mk-window-item img,
.mk-category-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.mk-window-item span,
.mk-category-item span,
.mk-thickness-item .mk-thickness-value,
.mk-color-preview-tile .mk-color-text {
    display: block;
    font-size: 13px;
    color: #111;
    text-align: center;
    margin-top: 8px;
}

.mk-window-item input,
.mk-category-item input,
.mk-thickness-item input,
.mk-color-picker-item input {
    display: none;
}

.mk-window-item:has(input:checked),
.mk-category-item input:checked + img,
.mk-category-item input:checked + img + span,
.mk-thickness-item:has(input:checked),
.mk-color-picker-item:has(input:checked) {
    border: 2px solid #E30613;
    box-shadow: 0 3px 8px rgba(227, 6, 19, 0.3);
    color: #E30613;
}

/* -----------------------------------------
    GRUBOŚĆ RAMY (okno-item grubosc-item)
----------------------------------------- */
.mk-frame-thickness-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0;
}

.mk-thickness-item {
    width: 80px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mk-thickness-value {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-weight: bold;
    font-size: 14px;
}

/* -----------------------------------------
    PREVIEW KOLORU
----------------------------------------- */
.mk-color-preview-tile {
    width: 200px;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.mk-color-preview-tile .mk-color-swatch {
    width: 80px;
    height: 60px;
    border: 2px solid #ccc;
    border-radius: 4px;
    transition: background-color 0.3s;
}

/* -----------------------------------------
    MODAL KOLORU
----------------------------------------- */
.mk-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex; /* tutaj flex od razu */
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none; /* blokuje kliknięcia gdy niewidoczny */
    transition: opacity 0.3s ease;
}

.mk-modal-overlay.visible {
    opacity: 1;
    pointer-events: auto; /* pozwala na interakcję gdy widoczny */
}

.mk-modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    min-width: 350px;
    max-width: 90%;
}

.mk-modal-content h4 {
    color: #E30613;
    margin-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

/* GRID KOLORÓW */
.mk-color-picker-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 15px 0;
}

.mk-color-picker-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 8px;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    transition: all 0.2s ease;
    width: 100px;
    text-align: center;
}

.mk-color-picker-item:hover {
    border-color: #E30613;
    box-shadow: 0 2px 5px rgba(227, 6, 19, 0.1);
}

.mk-color-picker-item .mk-color-swatch {
    width: 80px;
    height: 60px;
    border: 1px solid #aaa;
    border-radius: 4px;
    margin-bottom: 5px;
}

.mk-color-picker-item .mk-color-label {
    font-size: 11px;
    color: #444;
}

.mk-modal-close-button {
    background: #E30613;
    color: #fff;
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    float: right;
    border-radius: 0;
}

/* -----------------------------------------
    TOOLTIP / POMOC
----------------------------------------- */
.tooltip-container {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mk-help-icon {
    font-size: 16px;
    font-weight: bold;
    color: #E30613;
    background: #fff;
    border-radius: 50%;
    border: 2px solid #E30613;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-left: 10px;
    transition: background 0.2s;
    z-index: 10;
}

.mk-tooltip-content {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 300px;
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    padding: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    color: #111;
    z-index: 999;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mk-tooltip-content.visible {
    display: block;
    opacity: 1;
}

.mk-tooltip-content h4 {
    color: #E30613;
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 15px;
}

.mk-tooltip-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-top: 10px;
    border: 1px solid #eee;
}

/* -----------------------------------------
    RESPONSYWNOŚĆ
----------------------------------------- */
@media (max-width: 768px) {
    .mk-window-item,
    .mk-category-item,
    .mk-thickness-item {
        width: 48%;
    }
}

@media (max-width: 480px) {
    .mk-window-item,
    .mk-category-item,
    .mk-thickness-item {
        width: 100%;
    }
}

/* -----------------------------------------
    LOADER / SPINNER
----------------------------------------- */
.loader {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

.loader:after {
    content: " ";
    display: block;
    width: 40px;
    height: 40px;
    margin: 1px;
    border-radius: 50%;
    border: 4px solid #E30613;
    border-color: #E30613 transparent #E30613 transparent;
    animation: spin 1.2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ============================
   BAZA: wszystkie tekstury
   ============================ */
.mk-color-picker-item .mk-color-swatch[class*="color-texture-"],
.mk-color-preview-tile .mk-color-swatch[class*="color-texture-"] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #777; /* dla modalu można ewentualnie zmienić na delikatny */
}

/* ============================
   TEKSTURY: modal i podgląd
   ============================ */

/* 02 Weiß */
.mk-color-picker-item .mk-color-swatch.color-texture-white,
.mk-color-preview-tile .mk-color-swatch.color-texture-white {
    background-image: url('../images/moskitiera/02-white.jpg');
}

/* 08 Dunkelbraun (RAL 8019) */
.mk-color-picker-item .mk-color-swatch.color-texture-dunkelbraun,
.mk-color-preview-tile .mk-color-swatch.color-texture-dunkelbraun {
    background-image: url('../images/moskitiera/08-dunkelbraun.jpg');
}

/* 20 Schwarz */
.mk-color-picker-item .mk-color-swatch.color-texture-schwartz,
.mk-color-preview-tile .mk-color-swatch.color-texture-schwartz {
    background-image: url('../images/moskitiera/20-schwartz.jpg');
}

/* 23 Anthrazitgrau */
.mk-color-picker-item .mk-color-swatch.color-texture-anthrazitgrau,
.mk-color-preview-tile .mk-color-swatch.color-texture-anthrazitgrau {
    background-image: url('../images/moskitiera/23-anthrazitgrau.jpg');
}

/* 26 Mahagoni */
.mk-color-picker-item .mk-color-swatch.color-texture-mahagoni,
.mk-color-preview-tile .mk-color-swatch.color-texture-mahagoni {
    background-image: url('../images/moskitiera/26-mahagoni.jpg');
}

/* 28 Nussbaum */
.mk-color-picker-item .mk-color-swatch.color-texture-nussbaum,
.mk-color-preview-tile .mk-color-swatch.color-texture-nussbaum {
    background-image: url('../images/moskitiera/28-nussbaum.jpg');
}

/* 30 Golden Eiche */
.mk-color-picker-item .mk-color-swatch.color-texture-goldeneiche,
.mk-color-preview-tile .mk-color-swatch.color-texture-goldeneiche {
    background-image: url('../images/moskitiera/30-goldeneiche.jpg');
}

/* 49 Turner Oak Matt */
.mk-color-picker-item .mk-color-swatch.color-texture-turneroak,
.mk-color-preview-tile .mk-color-swatch.color-texture-turneroak {
    background-image: url('../images/moskitiera/49-turneroak.jpg');
}

/* 52 Winchester */
.mk-color-picker-item .mk-color-swatch.color-texture-winchester,
.mk-color-preview-tile .mk-color-swatch.color-texture-winchester {
    background-image: url('../images/moskitiera/52-winchester.jpg');
}

/* Alux DB703 */
.mk-color-picker-item .mk-color-swatch.color-texture-aluxdb,
.mk-color-preview-tile .mk-color-swatch.color-texture-aluxdb {
    background-image: url('../images/moskitiera/aluxdb.jpg');
}

/* ============================
   MODAL: jednolite kolory RAL
   ============================ */
.mk-color-picker-item .mk-color-swatch[style*="#"] {
    border: 1px solid #777; /* ramka dla jednolitych kolorów */
}

/* ============================
   PODGLĄD: jednolite kolory RAL
   ============================ */
.mk-color-preview-tile .mk-color-swatch[style*="#"] {
    border: 1px solid #ccc; /* delikatniejsza ramka */
}

/* Ustawienie kontenera z kafelkami siatki na rząd (zachowując rozmiary i kolumnowy układ wewnętrzny kafelków) */
.mk-step-color-net .mk-step-content {
    display: flex;
    flex-wrap: wrap; /* pozwala zawijać kafelki na mniejszych ekranach */
    gap: 8px; /* odstępy między kafelkami */
    align-items: flex-start;
    justify-content: flex-start;
}

/* Na bardzo wąskich ekranach można zawęzić: kafelki zajmą 100% szerokości */
@media (max-width: 480px) {
    .mk-step-color-net .mk-step-content {
        justify-content: center;
    }

    .mk-step-color-net .mk-window-item,
    .mk-step-color-net .mk-category-item {
        width: 100% !important; /* jeśli chcesz, żeby na telefonie były w jednej kolumnie */
    }
}

/* ---- Globalny tytuł: biały na czerwonym (Insektenschutz) ---- */
#mk-global-title {
    display: block; /* block pozwala zajmować całą szerokość rodzica */
    width: 100%; /* rozciąga się do szerokości formularza (.mk-form) */
    box-sizing: border-box; /* uwzględnia padding w szerokości */
    background: #E30613;
    color: #fff;
    padding: 8px 12px;
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 12px;
    text-align: left; /* możesz zmienić na center jeśli wolisz wyśrodkowany tytuł */
}

/* ---- Nagłówki poszczególnych okien: biały background, czerwone podsumowanie ---- */
.mk-window-header {
    background: #fff !important; /* biały podkład dla per-okno header */
    color: #E30613 !important; /* domyślnie czerwony kolor tekstu w header */
    padding: 6px 12px;
    font-size: 15px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid #e6e6e6;
}

/* Jeśli gdzieś wcześniej było wymuszane białe color dla h3/span w header — nadpisujemy */
.mk-window-header h3,
.mk-window-header span {
    color: inherit !important;
}

/* Podsumowanie (tekst po lewej/prawa strona header) - czerwony na białym */
.mk-window-summary {
    background: transparent;
    color: #E30613 !important;
    font-weight: 700;
    margin-right: 8px;
}

/* Strzałka — teraz czerwona (zachowuje obracanie przy collapsed) */
.mk-arrow {
    border-right: 2px solid #E30613 !important;
    border-bottom: 2px solid #E30613 !important;
    width: 10px;
    height: 10px;
    display: inline-block;
    transform: rotate(45deg);
    transition: transform 0.18s ease;
    margin-left: 8px;
}

.mk-window-group.collapsed .mk-arrow {
    transform: rotate(-45deg);
}

/* Drobne dopasowania aby wszystko ładnie wyglądało w wąskich widokach */
@media (max-width: 480px) {
    #mk-global-title {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .mk-window-header {
        padding: 8px 10px;
        font-size: 14px;
    }
}

/* 1. PRZYCISK "Usuń okno" (znajduje się wewnątrz mk-window-body) */
.mk-remove-window.button {
    /* Wygląd "ducha" (ghost button) - czerwona ramka i tekst, białe tło */
    background: #fff;
    color: #E30613;
    border: 1px solid #E30613;
    margin-top: 15px;
    width: 100%; /* Rozciągnij na całą szerokość sekcji */
}

.mk-remove-window.button:hover {
    /* Odwrócenie kolorów przy najechaniu (hover) */
    background: #E30613;
    color: #fff;
    border-color: #c20510;
}

/* 2. PRZYCISK "+ Dodaj kolejne okno" (główny przycisk akcji) */
#mk-add-window.button {
    /* Wygląd podstawowy - czerwone tło, biały tekst (mocny akcent) */
    background: #E30613;
    color: #fff;
    border: 1px solid #E30613;
    margin-bottom: 20px;
}

#mk-add-window.button:hover {
    /* Lekko ciemniejszy czerwony przy najechaniu */
    background: #c20510;
    border-color: #c20510;
}

/* 3. PRZYCISK "Wyślij" (główny formularz submission) */
.mk-form input[type="submit"] {
    /* Podobny do Dodaj, ale może być lekko szerszy */
    background: #E30613;
    color: #fff;
    border: 1px solid #E30613;
    width: 100%; /* Rozciągnięty na całą szerokość formularza */
    max-width: 250px; /* Ograniczenie szerokości dla głównego CTA */
    float: right; /* Wyrównanie do prawej (lub usuń float i użyj margin auto wewnątrz kontenera) */
    margin-top: 20px;
}

.mk-form input[type="submit"]:hover {
    background: #c20510;
    border-color: #c20510;
}

/* Styl dla inputów Imię i Email (dla spójności) */
.mk-form input[type="text"],
.mk-form input[type="email"] {
    width: 100%;
    max-width: 400px; /* Ograniczenie szerokości */
    padding: 10px 12px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 0;
    box-sizing: border-box;
    font-size: 16px;
    transition: border-color 0.2s;
}

.mk-form input[type="text"]:focus,
.mk-form input[type="email"]:focus {
    border-color: #E30613;
    outline: none;
    box-shadow: 0 0 0 1px #E30613;
}

/* Usuń migający kursor (karetkę) z elementów, które nie są polami tekstowymi,
   ale które mogą być klikalne lub mieć w środku elementy radiowe/hidden/etc. */

/* Główny kontener formularza i grupy, aby zapobiec karetce na całej stronie */
.mk-form {
    caret-color: auto; /* Zapewnienie, że domyślne pola input wewnątrz będą mieć kursor */
}

/* Wszędzie, gdzie migający kursor jest niepożądany: */

/* 1. Nagłówki okien i kroków */
.mk-window-header,
.mk-step-header {
    user-select: none; /* Zapobiega zaznaczaniu tekstu i może pomóc w ukryciu karetki */
    caret-color: transparent;
}

/* 2. Kafelki (wybór okna, kategorii, grubości, podgląd koloru) */
.mk-window-item,
.mk-category-item,
.mk-thickness-item,
.mk-color-preview-tile {
    /* Ustawienie kursora na 'pointer', bo są klikalne */
    cursor: pointer;
    /* Usunięcie migającej karetki, ponieważ tekst nie jest edytowalny */
    caret-color: transparent;
    user-select: none;
}

/* 3. Modal koloru */
.mk-modal-overlay,
.mk-modal-content,
.mk-color-picker-item,
.mk-modal-close-button {
    caret-color: transparent;
    user-select: none;
}

/* 4. Dodatkowe elementy klikalne (np. ikona pomocy) */
.mk-help-icon {
    user-select: none;
    caret-color: transparent;
}

/* Ważne: Wymuś powrót karetki tylko dla pól, w których ma się wpisywać tekst.
   Dotyczy to pól wymiarów, ilości, imienia i email.
   W Twoim kodzie PHP są to: input[type="number"], input[type="text"], input[type="email"].
   Dla input[type="hidden"] kursor i tak nie jest widoczny. */

.mk-dimensions-input-group input[type="number"],
.mk-form input[type="text"],
.mk-form input[type="email"] {
    caret-color: initial !important; /* Wymuś kursor */
    user-select: text !important; /* Wymuś możliwość zaznaczania */
}

/* Upewnij się, że pole ilości (mk-quantity-0) też ma kursor */
.mk-step-quantity .mk-input-field input[type="number"] {
    caret-color: initial !important;
    user-select: text !important;
}

/* -----------------------------------------
    POPRAWKA DLA KAFELKÓW WYBORU KOLORU SIATKI
    (mk-category-item w kroku mk-step-color-net)
----------------------------------------- */

.mk-step-color-net .mk-category-item {
    /* Dodajemy padding-bottom, by oddzielić napis 'Schwarz' / 'Grau' od dolnej ramki. */
    padding: 0 0 8px 0; /* Górny, prawy, lewy padding pozostają zerowe */
}

.mk-step-color-net .mk-category-item span {
    /* Zmniejszenie marginesu górnego, aby tekst nie był zbyt oddalony od obrazka */
    margin-top: 4px;
    padding: 0 5px; /* Dodatkowy padding poziomy dla bezpieczeństwa */
}

.mk-validation-error-msg {
    color: red;
    font-size: 0.85em;
    display: none; /* Domyślnie ukryty */
    margin-top: 5px;
}

/* Klasa, która jest dodawana przez JS */
.mk-validation-error-msg.active {
    display: block;
}

.mk-input-field {
    position: relative;
    padding-bottom: 0;
}

.mk-validation-error-msg {
    display: none;
    position: absolute;

    top: 65px; /* Zakładana pozycja pod inputem */
    left: 0;

    /* --- ZMIANA TUTAJ: Nadanie wysokiego priorytetu warstwie --- */
    z-index: 999; /* Ustawienie bardzo wysokiej wartości, aby był na wierzchu */
    /* -------------------------------------------------------- */

    /* Reszta stylizacji... */
    color: white;
    background-color: #e74c3c;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.mk-validation-error-msg::before {
    content: "";
    position: absolute;
    top: -5px; /* Strzałka 5px ponad dymkiem */
    left: 10px;
    border-width: 0 5px 5px 5px;
    border-style: solid;
    border-color: transparent transparent #e74c3c transparent;
}

.mk-window-group .mk-error-message.error-critical {
    background-color: #f44336; /* Czerwony */
    border-color: #d32f2f;
    color: white;
}

/* Styl Żółty (dla zapytania mailowego) */
.mk-window-group .mk-error-message.error-warning {
    background-color: #ffeb3b; /* Żółty */
    border-color: #fbc02d;
    color: #333; /* Ciemny tekst */
}

.mk-step-content .mk-info-note {
    /* Wymiary i odstępy */
    background-color: #f0f0f0; /* Bardzo jasne, neutralne tło (szarość) */
    border: 1px solid #ddd; /* Cienka, dyskretna ramka */
    border-left: 3px solid #007bff; /* Podkreślenie kolorem wiodącym (niebieski lub inny akcent) */
    border-radius: 4px; /* Lekko zaokrąglone rogi */
    margin-bottom: 0;
    /* Tekst */
    font-size: 0.85em; /* Zmniejszenie czcionki (około 85% normalnego rozmiaru) */
    color: #6c757d; /* Ciemnoszary, subtelny kolor tekstu */
    line-height: 1.4; /* Lepsza czytelność dłuższych linijek */

    /* Upewnienie się, że jest blokiem */
    display: block;
}