/* MC Konfigurator Produktu — Frontend CSS v1.0 */

.mckp-configurator *,
.mckp-modal-overlay *,
.mckp-lightbox-overlay * { box-sizing: border-box; }

/* Zapobiegaj chowaniu SVG przez motywy */
.mckp-configurator svg,
.mckp-modal-overlay svg,
.mckp-lightbox-overlay svg,
.mckp-popup-editor-preview svg {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible;
    pointer-events: none;
}
.mckp-bar-arrow svg,
.mckp-bar-lock-icon svg { pointer-events: none; }
.mckp-zoom-btn svg,
.mckp-modal-close svg,
.mckp-back-btn svg,
.mckp-lightbox-close svg { display: block !important; }

/* ============================================================
   BELKI AKORDEONU
   ============================================================ */
.mckp-configurator {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.mckp-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, background .15s;
    outline: none;
    user-select: none;
   
}

.mckp-bar:hover        { border-color: #c9cdd6; box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.mckp-bar:focus-visible { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.2); }

.mckp-bar.mckp-bar-selected { border-color: #22c55e; background: #f0fdf4; }
.mckp-bar.mckp-bar-error    { border-color: #ef4444; background: #fff5f5; animation: mckpShake .3s ease; }

@keyframes mckpShake {
    0%,100% { transform: translateX(0); }
    25%     { transform: translateX(-4px); }
    75%     { transform: translateX(4px); }
}

.mckp-bar-left  { display:flex; flex-direction:row; align-items:center; gap:0; flex:1; min-width:0; overflow:hidden; }
.mckp-bar-title { font-size:15px; font-weight:600; color:#1a1a1a; line-height:1.3; white-space:nowrap; flex-shrink:0; }

.mckp-bar-sep {
    margin: 0 8px;
    color: #d1d5db;
    font-weight: 400;
    flex-shrink: 0;
    font-size: 13px;
}

.mckp-bar-selected { font-size:13px; color:#6b7280; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.mckp-bar.mckp-bar-selected .mckp-bar-selected { color:#16a34a; font-weight:600; }

.mckp-bar-right  { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.mckp-bar-price  { font-size:12px; font-weight:700; color:#16a34a; background:#dcfce7; padding:2px 8px; border-radius:20px; }
.mckp-bar-arrow  { display:flex; align-items:center; color:#9ca3af; transition:color .2s; }
.mckp-bar:hover .mckp-bar-arrow { color:#374151; }

/* Kłódka — ukryj gdy bar odblokowany */
.mckp-bar:not(.mckp-bar-locked) .mckp-bar-lock-icon { display: none; }

/* Belka zagnieżdżona — zablokowana (child bar) */
.mckp-bar.mckp-bar-locked {
    cursor: not-allowed;
    opacity: .6;
    background: #f9fafb;
    border-style: dashed;
    position: relative;
}
.mckp-bar.mckp-bar-locked:hover { box-shadow: none; border-color: #e5e7eb; }
.mckp-bar.mckp-bar-locked .mckp-bar-arrow { opacity: .4; }
.mckp-bar-lock-icon {
    display: flex;
    align-items: center;
    color: #9ca3af;
    flex-shrink: 0;
}

/* Tooltip zablokowanego baru */
.mckp-locked-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: #fff;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
    z-index: 10;
}
.mckp-locked-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1f2937;
}
.mckp-locked-tooltip.mckp-tip-visible { opacity: 1; }

/* ============================================================
   MODAL
   ============================================================ */
.mckp-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999990;
    background: rgba(6,13,9,.30);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.mckp-modal-overlay.mckp-active { display: flex; }

.mckp-modal-dialog {
    position: relative;
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 900px;
    height: 85vh;
    max-height: 85vh;
    display: flex;
    flex-direction: row;
    box-shadow: 0 25px 60px rgba(0,0,0,.25);
    overflow: hidden;
}

/* Przycisk zamknij — absolutny na dialogu */
.mckp-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border: none; background: none; cursor: pointer;
    border-radius: 50%;
    color: #6b7280;
    transition: background .15s, color .15s;
    box-shadow: none;
}
.mckp-modal-close:hover { background: #f3f4f6; color: #111827; }

/* Body — lewa strona dialogu, flex-column */
.mckp-modal-body {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Nagłówek z tytułem — wewnątrz body */
.mckp-modal-hd {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.mckp-modal-title { margin:0; font-size:17px; font-weight:700; color:#111827; }

/* Nagłówek tytułu wewnątrz lewej kolumny nested popup */
.mckp-nested-inner-hd {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.mckp-nested-inner-hd .mckp-modal-title { margin: 0; }

/* Kontener treści — tu JS wstrzykuje popup */
.mckp-modal-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Wrapper klonowanego contentu sekcji — musi rosnąć by wypełnić ciało modala */
.mckp-section-popup {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ============================================================
   WYSZUKIWARKA
   ============================================================ */
.mckp-search-bar {
    padding: 12px 16px 8px;
    flex-shrink: 0;
    max-width: 600px;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

.mckp-search-input,
.mckp-search-input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    padding: 9px 12px 9px 42px !important;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 13px;
    background-color: #f9fafb;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 13px center !important;
    background-size: 16px 16px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box !important;
}
.mckp-search-input::-webkit-search-decoration,
.mckp-search-input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
.mckp-search-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.15); background-color: #fff; }

/* ============================================================
   POPUP PROSTY
   ============================================================ */
.mckp-simple-popup { display:flex; flex-direction:column; flex:1; min-height:0; }

/* Układ z panelem podglądu po prawej (tylko dla typów image/image-text) */
.mckp-simple-main {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.mckp-simple-main .mckp-scroll-area { border-right: 1px solid #f0f0f0; }
.mckp-simple-main .mckp-preview-area { flex-shrink: 0; }

.mckp-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding: 8px 16px 16px;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}
.mckp-scroll-area::-webkit-scrollbar { width: 5px; }
.mckp-scroll-area::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }

.mckp-options-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
@media (max-width:1024px) { .mckp-options-grid { grid-template-columns: repeat(4,1fr); } }
@media (max-width:680px)  { .mckp-options-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width:440px)  { .mckp-options-grid { grid-template-columns: repeat(2,1fr); } }

.mckp-option-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-width: 2px;
    border-style: solid;
    border-color: #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s;
    background: #fff;
}

.mckp-option-card:hover    { border-color: #93c5fd; }
.mckp-option-card.mckp-selected { border-color: #3b82f6; background: #eff6ff; }

.mckp-card-img             { position:relative; width:100%; min-width:0; height:140px; overflow:hidden; background:#f3f4f6; flex-shrink:0; }
.mckp-card-img img         { display:block; width:100%; height:100%; object-fit:cover; }

.mckp-zoom-btn {
    position: absolute;
    top: 4px; right: 4px;
    background: rgba(255,255,255,.88);
    border: none; border-radius: 4px;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; opacity: 0;
    transition: opacity .15s;
    color: #374151;
}
.mckp-card-img:hover .mckp-zoom-btn { opacity: 1; }

.mckp-card-body { display:flex; flex-direction:column; flex:1; min-width:0; width:100%; align-items:center; }

.mckp-card-label { padding: 6px 6px 0; font-size: 12px; font-weight: 500; color: #374151; line-height: 1.3; }
.mckp-card-price { font-size: 11px; color: #16a34a; font-weight: 700; padding: 2px 0; }

/* Przycisk wyboru — domyślnie ghost */
.mckp-card-select,
.mckp-child-select {
    display: block;
    width: calc(100% - 12px);
    margin: 6px;
    padding: 5px 0;
    font-size: 12px;
    font-weight: 600;
    background: transparent;
    color: #6b7280;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.mckp-card-select:hover, .mckp-child-select:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #374151;
}
/* Podświetlony po zaznaczeniu kafelka */
.mckp-option-card.mckp-selected .mckp-card-select,
.mckp-child-card.mckp-selected .mckp-child-select {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
}
.mckp-option-card.mckp-selected .mckp-card-select:hover,
.mckp-child-card.mckp-selected .mckp-child-select:hover {
    background: #374151;
    border-color: #374151;
}

.mckp-no-results { padding: 24px; text-align: center; color: #9ca3af; font-size: 14px; }

/* ============================================================
   NESTED POPUP — slide panels
   ============================================================ */
.mckp-nested-popup {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Viewport — klip animacji */
.mckp-panels-viewport {
    position: relative;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* Każdy panel — absolutny, cała przestrzeń viewportu */
.mckp-nested-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
   
    will-change: transform;
    transition: transform .32s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}

/* Domyślne pozycje: panel 1 widoczny, panel 2 poza ekranem po prawej */
.mckp-parents-panel  { transform: translateX(0); }
.mckp-children-panel { transform: translateX(100%); }

/* Po przejściu do dzieci */
.mckp-showing-children .mckp-parents-panel  { transform: translateX(-100%); }
.mckp-showing-children .mckp-children-panel { transform: translateX(0); }

/* ---- Search wrap — wyrównanie kontrolowane przez widget ---- */
.mckp-panel-search-wrap {
    display: flex;
    justify-content: flex-start;
    padding: 10px 0px 6px;
    flex-shrink: 0;
}
.mckp-panel-search-wrap .mckp-search-bar {
    padding: 0;
    max-width: 600px;
    margin: 0;
    flex-shrink: 1;
}

/* ---- Panel 1: rodzice ---- */
.mckp-parents-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: clip;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
    padding: 4px 2px 12px 0;
}
.mckp-parents-scroll::-webkit-scrollbar { width: 5px; }
.mckp-parents-scroll::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }

.mckp-parents-list { display:flex; flex-direction:column; }

.mckp-parent-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    cursor: pointer;
    border: 0 solid transparent;
    border-bottom-width: 1px;
    border-bottom-color: #f5f5f5;
    transition: background .12s;
}
.mckp-parent-row:last-child { border-bottom-color: transparent; }
.mckp-parent-row:hover { background: #f9fafb; }
.mckp-parent-row.mckp-parent-active { background: #eff6ff; }

.mckp-parent-thumb {
    width: 80px; height: 80px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f3f4f6;
}
.mckp-parent-thumb img { width:100%; height:100%; object-fit:cover; display:block; }

.mckp-parent-info  { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.mckp-parent-name  { font-size:15px; font-weight:600; color:#111827; }
.mckp-parent-desc  { font-size:13px; color:#6b7280; line-height:1.4; }

.mckp-choose-parent {
    display: inline-block;
    width: auto;
    padding: 6px 18px;
    font-size: 12px;
    margin: 0;
    align-self: flex-start;
    border: 1px solid #d1d5db;
}

/* Panel dzieci — flex row: lewa (siatka) + prawa (podgląd) */
.mckp-children-panel {
    flex-direction: row !important;
}

.mckp-children-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ---- Panel 2: dzieci ---- */
.mckp-children-top {
    padding: 10px 16px 0;
  
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mckp-children-top-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mckp-back-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 13px;
    cursor: pointer;
    color: #374151;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
}
.mckp-back-btn:hover { background: #f3f4f6; border-color: #d1d5db; }

.mckp-children-heading { font-size:15px; font-weight:700; color:#111827; flex:1; }

.mckp-colors-area {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}
.mckp-colors-area::-webkit-scrollbar { width: 5px; }
.mckp-colors-area::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }

.mckp-children-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 10px;
}

/* Podgląd tapicerki — prawa lub dolna kolumna dialogu */
.mckp-preview-area {
    flex: 0 0 30%;
    min-width: 0;
    max-width: 400px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: #fafafa;
    overflow: hidden;
    box-sizing: border-box;
}

/* Tryb kolumna (podgląd na dole) — resetuj ograniczenia szerokości z trybu wiersza */
.mckp-modal-dialog[style*="column"] .mckp-preview-area {
    width: 100%;
    max-width: 100%;
    height: auto;
}

.mckp-preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    color: #9ca3af;
    font-size: 12px;
}

.mckp-preview-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.mckp-preview-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: 10px;
    text-align: center;
}
.mckp-preview-name  { font-size:13px; font-weight:600; color:#111827; }
.mckp-preview-price { font-size:12px; color:#16a34a; font-weight:700; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.mckp-lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0,0,0,.92);
    align-items: center;
    justify-content: center;
}
.mckp-lightbox-overlay.mckp-active { display: flex; }

#mckp-lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 6px;
    animation: mckpSlideIn .2s ease;
}

.mckp-lightbox-close {
    position: fixed;
    top: 20px; right: 20px;
    background: rgba(255,255,255,.15);
    border: none; border-radius: 50%;
    width: 42px; height: 42px;
    display: flex; align-items:center; justify-content:center;
    cursor: pointer; color: #fff;
    transition: background .15s;
}
.mckp-lightbox-close:hover { background: rgba(255,255,255,.3); }

/* ============================================================
   TYTUŁ NAD KONFIGURATOREM
   ============================================================ */
.mckp-configurator-title {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
}

/* ============================================================
   POPUP PREVIEW W EDYTORZE — symulowany overlay
   ============================================================ */

/* Nakładka — przeniesiona przez JS do <body>, więc position:fixed */
.mckp-popup-editor-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    z-index: 999999;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(6,13,9,0.30);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Dialog wewnątrz — reuse existing .mckp-modal-dialog styles; nadpisz tylko wysokość */
.mckp-popup-editor-preview .mckp-modal-dialog {
    height: 80vh;
    max-height: 80vh;
    width: 100%;
}

/* W edytorze panele zagnieżdżone — statyczne bloki jeden pod drugim (bez animacji JS) */
.mckp-popup-editor-preview .mckp-panels-viewport {
    position: static;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.mckp-popup-editor-preview .mckp-nested-panel {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    transition: none !important;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: visible;
}

.mckp-popup-editor-preview .mckp-children-panel {
    border-top: 1px solid #f0f0f0;
}

/* Zawsze pokaż wszystkie gridy dzieci */
.mckp-popup-editor-preview .mckp-children-grid[style*="display:none"],
.mckp-popup-editor-preview .mckp-children-grid[style*="display: none"] {
    display: grid !important;
}

.mckp-popup-editor-preview .mckp-parents-scroll,
.mckp-popup-editor-preview .mckp-colors-area {
    overflow: visible;
    height: auto;
    flex: none;
}

.mckp-popup-editor-preview .mckp-scroll-area {
    overflow: visible;
    flex: 1;
}

/* ============================================================
   KOLUMNOWY UKŁAD PODGLĄDU (JS dodaje klasę mckp-dir-column)
   ============================================================ */
body #mckp-modal .mckp-modal-dialog.mckp-dir-column,
body .mckp-popup-editor-preview .mckp-modal-dialog.mckp-dir-column {
    flex-direction: column;
}
body #mckp-modal .mckp-modal-dialog.mckp-dir-column .mckp-modal-body,
body .mckp-popup-editor-preview .mckp-modal-dialog.mckp-dir-column .mckp-modal-body {
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
}
body #mckp-modal .mckp-modal-dialog.mckp-dir-column .mckp-preview-area,
body .mckp-popup-editor-preview .mckp-modal-dialog.mckp-dir-column .mckp-preview-area {
    width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 0;
}

/* ============================================================
   MOBILE
   ============================================================ */
body.mckp-modal-open { overflow: hidden; }

/* ============================================================
   KOSZYK — lista opcji konfiguratora
   ============================================================ */
.woocommerce-cart dl.variation dt { font-size: 12px; color: #6b7280; font-weight: 600; margin: 0; }
.woocommerce-cart dl.variation dd { font-size: 12px; margin: 0 0 4px 0; display: flex; align-items: baseline; gap: 6px; }
.woocommerce-cart dl.variation dd p { margin: 0; display: flex; align-items: baseline; gap: 6px; width: 100%; }
.mckp-cart-opt-label { flex: 1; min-width: 0; color: #374151; }
.mckp-cart-opt-price { white-space: nowrap; font-weight: 700; color: #16a34a; font-size: 11px; margin-left: auto; }

/* ============================================================
   KASA — rozwijana lista dodatków
   ============================================================ */
.mckp-checkout-opts { margin-top: 4px; }
.mckp-chk-toggle {
    background: none; border: none; cursor: pointer; padding: 2px 0;
    font-size: 11px; font-weight: 600; color: #6b7280; display: inline-flex; align-items: center; gap: 4px;
}
.mckp-chk-toggle:hover { color: #111827; }
.mckp-chk-arrow { font-size: 8px; transition: transform 0.2s; display: inline-block; }
.mckp-chk-toggle.mckp-open .mckp-chk-arrow { transform: rotate(180deg); }
.mckp-chk-list {
    list-style: none; margin: 4px 0 0; padding: 0;
}
.mckp-chk-list li {
    display: flex; align-items: baseline; gap: 6px; padding: 2px 0;
    font-size: 11px; color: #374151; border-bottom: 1px solid #f3f4f6;
}
.mckp-chk-list li:last-child { border-bottom: none; }
.mckp-chk-opt-name { flex: 1; min-width: 0; }
.mckp-chk-opt-price { white-space: nowrap; font-weight: 700; color: #16a34a; margin-left: auto; }