/**
 * wizard.css — Style kreatora ps_krea_wyc_advanced
 * Bazuje na style.css z ps_krea_wyc (zachowany design, nowa architektura)
 * Kolor akcentu: #d1cdca (szary) — wg decyzji klienta (nie turkus motywu)
 */

/* ============================================================
   ZMIENNE CSS (łatwa personalizacja)
   ============================================================ */
:root {
    --krea-color-primary:    #d1cdca;
    --krea-color-primary-dk: #a7a4a2;
    --krea-color-secondary:  #c3c4c6;
    --krea-color-text:       #2b2b2b;
    --krea-color-text-light: #4d4d4d;
    --krea-color-border:     #e0e0e0;
    --krea-color-bg:         #f9f9f9;
    --krea-color-white:      #ffffff;
    --krea-color-danger:     #e74c3c;
    --krea-color-success:    #27ae60;
    --krea-radius:           10px;
    --krea-radius-sm:        5px;
    --krea-shadow:           0 2px 12px rgba(0,0,0,0.08);
    --krea-shadow-hover:     0 4px 20px rgba(209,205,202,0.25);
    --krea-transition:       0.25s ease;
    --krea-font:             "Sora Variable",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

/* ============================================================
   WRAPPER GŁÓWNY
   ============================================================ */
.krea-wizard-wrapper {
    font-family:    var(--krea-font);
    color:          var(--krea-color-text);
    margin:         0 auto;
    padding:        0 15px;
}

/* ============================================================
   NAGŁÓWEK KREATORA
   ============================================================ */
.krea-wizard-header {
    text-align:    center;
    margin-bottom: 30px;
}

.krea-wizard-title {
    display:       block;
    font-size:     28px;
    font-weight:   700;
    color:         var(--krea-color-primary);
    margin-bottom: 10px;
    line-height:   1.3;
}

.krea-wizard-description {
    font-size:  16px;
    color:      var(--krea-color-text-light);
    max-width:  600px;
    margin:     0 auto;
    line-height: 1.6;
}

/* ============================================================
   PASEK POSTĘPU — numeryczny (borstep)
   ============================================================ */
.krea-progress-bar {
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin-bottom:   15px;
    flex-wrap:       nowrap;
    gap:             0;
}

.krea-progress-step {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    cursor:         default;
    opacity:        0.45;
    transition:     opacity var(--krea-transition);
}

.krea-progress-step.active,
.krea-progress-step.completed {
    opacity: 1;
}

.krea-step-number {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            32px;
    height:           32px;
    border-radius:    50%;
    border:           2px solid var(--krea-color-border);
    background:       var(--krea-color-white);
    font-weight:      700;
    font-size:        13px;
    color:            var(--krea-color-text-light);
    transition:       all var(--krea-transition);
    flex-shrink:      0;
}

.krea-progress-step.active .krea-step-number {
    background:    var(--krea-color-primary);
    border-color:  var(--krea-color-primary);
    color:         var(--krea-color-white);
    box-shadow:    0 0 0 4px rgba(209,205,202,0.2);
}

.krea-progress-step.completed .krea-step-number {
    background:   var(--krea-color-primary);
    border-color: var(--krea-color-primary);
    color:        var(--krea-color-white);
}

.krea-progress-step.completed {
    cursor: pointer;
}

.krea-progress-step.completed:hover .krea-step-number {
    background:   var(--krea-color-primary);
    border-color: var(--krea-color-primary);
    box-shadow:   0 0 0 4px rgba(209,205,202,0.2);
    transform:    scale(1.08);
}

.krea-progress-step.completed:hover .krea-step-label {
    color: var(--krea-color-primary);
}

/* Krok podsumowania — przygaszony jak pozostałe przyszłe kroki, nigdy klikalny.
   Pełną widoczność uzyskuje dopiero z klasą .active/.completed (dodawaną przez JS). */
.krea-progress-step.krea-progress-step--summary {
    cursor:         default;
    pointer-events: none;
}

.krea-step-label {
    font-size:   11px;
    margin-top:  4px;
    color:       var(--krea-color-text-light);
    text-align:  center;
    max-width:   72px;
    word-break:  break-word;
    line-height: 1.3;
}

.krea-progress-step.active .krea-step-label {
    color:       var(--krea-color-primary);
    font-weight: 600;
}

.krea-progress-connector {
    flex:             1;
    height:           2px;
    min-width:        10px;
    max-width:        40px;
    background:       var(--krea-color-border);
    margin-bottom:    20px;
    transition:       background var(--krea-transition);
}

/* Pasek liniowy procentowy */
.krea-progress-line {
    height:           4px;
    background:       var(--krea-color-border);
    border-radius:    2px;
    margin-bottom:    30px;
    overflow:         hidden;
}

.krea-progress-line-fill {
    height:     100%;
    background: linear-gradient(90deg, var(--krea-color-primary), var(--krea-color-primary-dk));
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* ============================================================
   KONTENER KROKÓW
   ============================================================ */
.krea-steps-container {
    position:  relative;
    overflow:  hidden;
}

.krea-step {
    display: none;
}

.krea-step.active {
    display: block;
}

/* Animacje przejść */
.krea-slide-in-right {
    animation: kreaSlidInRight 0.3s ease forwards;
}

.krea-slide-in-left {
    animation: kreaSlidInLeft 0.3s ease forwards;
}

.krea-slide-out-left {
    animation: kreaSlidOutLeft 0.3s ease forwards;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.krea-slide-out-right {
    animation: kreaSlidOutRight 0.3s ease forwards;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

@keyframes kreaSlidInRight {
    from { transform: translateX(40px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

@keyframes kreaSlidInLeft {
    from { transform: translateX(-40px); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}

@keyframes kreaSlidOutLeft {
    from { transform: translateX(0);     opacity: 1; }
    to   { transform: translateX(-40px); opacity: 0; }
}

@keyframes kreaSlidOutRight {
    from { transform: translateX(0);    opacity: 1; }
    to   { transform: translateX(40px); opacity: 0; }
}

/* ============================================================
   NAGŁÓWEK KROKU
   ============================================================ */
.krea-step-header {
    text-align:    center;
    margin-bottom: 25px;
}

.krea-step-image {
    margin-bottom: 15px;
}

.krea-step-image img {
    max-height:    120px;
    max-width:     100%;
    border-radius: var(--krea-radius);
    object-fit:    cover;
}

.krea-step-title {
    font-size:     22px;
    font-weight:   700;
    color:         var(--krea-color-text);
    margin:        0 0 10px;
}

.krea-step-description {
    font-size:  15px;
    color:      var(--krea-color-text-light);
    line-height: 1.6;
}

/* ============================================================
   OPCJE — SIATKA (single / tile)
   ============================================================ */
.krea-options-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap:                   16px;
    margin-bottom:         25px;
    width:                 100%;
}

.krea-option-card {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    padding:        16px 12px;
    border:         2px solid var(--krea-color-border);
    border-radius:  var(--krea-radius);
    background:     var(--krea-color-white);
    cursor:         pointer;
    transition:     all var(--krea-transition);
    position:       relative;
    box-shadow:     var(--krea-shadow);
    box-sizing:     border-box;
}

.krea-option-card:hover {
    border-color: var(--krea-color-primary);
    box-shadow:   var(--krea-shadow-hover);
    transform:    translateY(-2px);
}

.krea-option-card.selected {
    border:       3px solid var(--krea-color-primary-dk);
    background:   rgba(167,164,162, 0.18);
    box-shadow:   0 0 0 3px rgba(167,164,162,0.45), var(--krea-shadow-hover);
}

.krea-option-card.selected::after {
    content:          '✓';
    position:         absolute;
    top:              8px;
    right:            10px;
    width:            30px;
    height:           30px;
    background:       var(--krea-color-primary-dk);
    color:            white;
    border-radius:    50%;
    font-size:        17px;
    font-weight:      bold;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    line-height:      30px;
    box-shadow:       0 2px 6px rgba(167,164,162,0.6);
}

/* Ukryj natywny input radio */
.krea-option-radio,
.krea-option-checkbox {
    position: absolute;
    opacity:  0;
    width:    0;
    height:   0;
}

.krea-option-image {
    width:         100%;
    margin-bottom: 10px;
}

.krea-option-image img {
    width:         100%;
    height:        210px;
    object-fit:    contain;
    background:    var(--krea-color-bg);
    border-radius: var(--krea-radius-sm);
    border:        1px solid var(--krea-color-border);
}

.krea-option-card.selected .krea-option-image img {
    border-color: var(--krea-color-primary);
}

/* ============================================================
   EFEKT „MGŁY" — przygaszenie niewybranych opcji, gdy jedna
   jest już wybrana (mocniejsze wyróżnienie wyboru — pkt 6/7)
   ============================================================ */
.krea-options-grid:has(.krea-option-card.selected) .krea-option-card:not(.selected),
.krea-options-image-grid:has(.krea-option-image-card.selected) .krea-option-image-card:not(.selected),
.krea-options-list:has(.krea-option-item.selected) .krea-option-item:not(.selected) {
    opacity:    0.4;
    filter:     grayscale(0.4);
    transition: opacity var(--krea-transition), filter var(--krea-transition);
}

/* Po najechaniu przygaszona opcja wraca do pełni — sygnał, że wciąż jest klikalna */
.krea-options-grid:has(.krea-option-card.selected) .krea-option-card:not(.selected):hover,
.krea-options-image-grid:has(.krea-option-image-card.selected) .krea-option-image-card:not(.selected):hover,
.krea-options-list:has(.krea-option-item.selected) .krea-option-item:not(.selected):hover {
    opacity: 1;
    filter:  none;
}

.krea-option-label {
    font-size:   15px;
    font-weight: 600;
    color:       var(--krea-color-text);
    margin-bottom: 4px;
}

.krea-option-icon {
    font-size:     32px;
    margin-bottom: 8px;
    color:         var(--krea-color-primary);
}

.krea-option-desc {
    font-size:  13px;
    color:      var(--krea-color-text-light);
    line-height: 1.45;
}

/* ============================================================
   WSKAŹNIK POZIOMU (stopień czyszczenia itp.)
   ============================================================ */
.krea-level-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    width:           100%;
    margin-top:      8px;
    gap:             8px;
}

.krea-level-label {
    font-size:   14px;
    font-weight: 700;
    color:       var(--krea-color-text-light);
    text-align:  left;
    flex-shrink: 0;
}

.krea-level-dots {
    display:     flex;
    align-items: center;
    gap:         4px;
    flex-shrink: 0;
}

.krea-dot {
    display:       inline-block;
    width:         11px;
    height:        11px;
    border-radius: 50%;
    border:        2px solid var(--krea-color-primary);
    background:    transparent;
    transition:    background var(--krea-transition);
}

.krea-dot--active {
    background: var(--krea-color-primary);
}

/* ============================================================
   SUB-SEKCJA OPCJI (inline pytanie po wyborze opcji)
   ============================================================ */
.krea-sub-section {
    display:    none;
    width:      100%;
    text-align: left;
    margin-top: 12px;
    padding:    12px;
    background: #f5f4f3;
    border:     1px solid var(--krea-color-primary);
    border-radius: var(--krea-radius-sm);
    animation:  krea-fade-in 0.2s ease;
}

.krea-option-card.selected .krea-sub-section,
.krea-option-image-card.selected .krea-sub-section {
    display: block;
}

.krea-sub-note {
    font-size:   13px;
    color:       var(--krea-color-text);
    line-height: 1.5;
    margin-bottom: 10px;
}

.krea-sub-check-label {
    display:     flex;
    align-items: center;
    gap:         8px;
    cursor:      pointer;
    font-size:   14px;
    font-weight: 600;
    color:       var(--krea-color-text);
    margin:      0;
}

.krea-sub-check-label input[type="checkbox"] {
    width:  18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--krea-color-primary);
}

@keyframes krea-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   OPCJE — LISTA (multi / checkbox)
   ============================================================ */
.krea-options-list {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    margin-bottom:  25px;
}

.krea-option-item {
    display:       flex;
    align-items:   center;
    gap:           14px;
    padding:       14px 16px;
    border:        2px solid var(--krea-color-border);
    border-radius: var(--krea-radius-sm);
    background:    var(--krea-color-white);
    cursor:        pointer;
    transition:    all var(--krea-transition);
    box-sizing:    border-box;
}

.krea-option-item:hover {
    border-color: var(--krea-color-primary);
    background:   rgba(209,205,202, 0.06);
}

.krea-option-item.selected {
    border:      3px solid var(--krea-color-primary-dk);
    background:  rgba(167,164,162, 0.18);
    box-shadow:  0 0 0 3px rgba(167,164,162,0.4);
}

.krea-option-item img {
    width:         50px;
    height:        50px;
    object-fit:    cover;
    border-radius: var(--krea-radius-sm);
    flex-shrink:   0;
}

/* ============================================================
   OPCJE — DUŻE ZDJĘCIA (image type)
   ============================================================ */
.krea-options-image-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:                   16px;
    margin-bottom:         25px;
}

.krea-option-image-card {
    border:        2px solid var(--krea-color-border);
    border-radius: var(--krea-radius);
    overflow:      hidden;
    cursor:        pointer;
    transition:    all var(--krea-transition);
    position:      relative;
    box-sizing:    border-box;
}

.krea-option-image-card:hover {
    border-color: var(--krea-color-primary);
    box-shadow:   var(--krea-shadow-hover);
    transform:    translateY(-2px);
}

.krea-option-image-card.selected {
    border:     3px solid var(--krea-color-primary-dk);
    box-shadow: 0 0 0 3px rgba(167,164,162,0.45), var(--krea-shadow-hover);
}

.krea-option-image-card.selected::after {
    content:          '✓';
    position:         absolute;
    top:              8px;
    right:            8px;
    width:            30px;
    height:           30px;
    background:       var(--krea-color-primary-dk);
    color:            #fff;
    border-radius:    50%;
    font-size:        17px;
    font-weight:      bold;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    line-height:      30px;
    box-shadow:       0 2px 6px rgba(167,164,162,0.6);
    z-index:          2;
}

.krea-option-image-card label {
    display:        flex;
    flex-direction: column;
    cursor:         pointer;
    margin:         0;
}

.krea-option-image-card img {
    width:      100%;
    height:     150px;
    object-fit: contain;
    background: var(--krea-color-bg);
    display:    block;
}

.krea-option-image-card .krea-option-label {
    padding: 10px;
}

/* ============================================================
   KROK INFORMACYJNY
   ============================================================ */
.krea-step-info-content {
    text-align:    center;
    margin-bottom: 25px;
}

.krea-info-image {
    max-width:     100%;
    max-height:    180px;
    border-radius: var(--krea-radius);
    margin-bottom: 15px;
    object-fit:    cover;
}

/* ============================================================
   KALKULATOR WYMIARÓW
   ============================================================ */
.krea-dimension-calculator {
    margin: 0 auto 25px;
}

/* Karta wokół pól wejściowych */
.krea-dim-inputs-card {
    background:    var(--krea-color-white);
    border:        1px solid var(--krea-color-border);
    border-radius: var(--krea-radius);
    padding:       20px;
    box-shadow:    var(--krea-shadow);
}

.krea-dim-field {
    margin-bottom: 18px;
}

.krea-dim-field:last-of-type {
    margin-bottom: 0;
}

.krea-dim-field label {
    display:       flex;
    align-items:   center;
    gap:           6px;
    font-weight:   600;
    font-size:     14px;
    margin-bottom: 8px;
    color:         var(--krea-color-text);
}

.krea-dim-field label .material-icons {
    font-size: 18px;
    color:     var(--krea-color-primary);
}

.krea-dim-input {
    width:         100%;
    padding:       12px 16px;
    border:        2px solid var(--krea-color-border);
    border-radius: var(--krea-radius-sm);
    font-size:     20px;
    font-weight:   600;
    color:         var(--krea-color-text);
    transition:    border-color var(--krea-transition), box-shadow var(--krea-transition);
    box-sizing:    border-box;
}

.krea-dim-input:focus {
    outline:      none;
    border-color: var(--krea-color-primary);
    box-shadow:   0 0 0 3px rgba(209,205,202,0.15);
}

.krea-dim-unit {
    font-size:   16px;
    font-weight: 700;
    color:       var(--krea-color-primary-dk);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Wynik — powierzchnia */
.krea-dim-result {
    display:       flex;
    align-items:   center;
    gap:           10px;
    margin-top:    18px;
    padding:       14px 18px;
    background:    var(--krea-color-primary);
    border-radius: var(--krea-radius-sm);
    font-size:     15px;
    font-weight:   600;
    color:         var(--krea-color-white);
}

.krea-dim-result .material-icons {
    font-size:   22px;
    flex-shrink: 0;
}

.krea-dim-result strong {
    font-size: 20px;
}

/* ============================================================
   KALKULATOR WYMIARÓW — step7.php / step_dimension.tpl
   ============================================================ */

/* Trzy stany obrazu */
.krea-image-wrapper {
    display:   none;
    position:  relative;
    width:     100%;
    line-height: 0;
}

.krea-image-wrapper.active-view {
    display: block;
}

.krea-base-image {
    width:   100%;
    height:  auto;
    display: block;
}

/* SVG nakładka wymiarowa */
.krea-overlay-svg {
    position:       absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}

/* Linie wymiarowe */
.krea-dim-line {
    stroke:           red;
    stroke-width:     3;
    stroke-dasharray: 8, 5;
    opacity:          0;
    transition:       opacity 0.3s ease;
}

.kalkulator-wymiary .krea-dim-line {
    stroke-width:     2;
    stroke-dasharray: 0 !important;
}

/* Linie TEPW (pomocnicze, kreskowane) */
#s7-line-width-tepw-a, #s7-line-width-tepw-b,
#s7-line-width-tepw-c, #s7-line-width-tepw-d,
#s7-line-width-tepw-a-vrt, #s7-line-width-tepw-b-vrt,
#s7-line-width-tepw-c-vrt, #s7-line-width-tepw-d-vrt {
    stroke-dasharray: 8, 5 !important;
}

/* Etykiety tekstowe SVG */
.krea-dim-text {
    fill:             red;
    font-weight:      bold;
    font-size:        22px;
    paint-order:      stroke;
    stroke:           white;
    stroke-width:     4px;
    stroke-linecap:   round;
    stroke-linejoin:  round;
    opacity:          0;
    transition:       opacity 0.3s ease;
    text-anchor:      middle;
}

/* Klasa aktywna — pokazuje linie/etykiety */
.highlight-active {
    opacity: 1 !important;
}

/* Kolumny layoutu kalkulatora */
.krea-dim-inputs-col {
    padding-right:  20px;
    padding-bottom: 15px;
}

.krea-dim-visual-col {
    padding-left: 15px;
}

/* Wrapper pola input + jednostka */
.krea-dim-input-wrap {
    display:     flex;
    align-items: center;
    gap:         10px;
}

/* Obrazek kalkulatora graficznego */
.kalkulator-wymiary {
    border-radius: var(--krea-radius);
    overflow:      hidden;
    border:        1px solid var(--krea-color-border);
    background:    var(--krea-color-bg);
}

/* Nota informacyjna — callout */
.krea-dim-note {
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    margin-top:    14px;
    padding:       12px 16px;
    background:    rgba(209,205,202,0.06);
    border:        1px solid rgba(209,205,202,0.3);
    border-radius: var(--krea-radius-sm);
    font-size:     13px;
    font-weight:   500;
    color:         var(--krea-color-text);
    line-height:   1.7;
}

.krea-dim-note-icon {
    font-size:   20px;
    color:       var(--krea-color-primary);
    flex-shrink: 0;
    margin-top:  1px;
}

.krea-dim-note-text {
    flex: 1;
}

/* Błąd zakresu wymiarów (40–400 cm) */
.krea-dim-range-error {
    margin-top:    12px;
    background:    rgba(231,76,60,0.07);
    color:         #c0392b;
    border:        2px solid rgba(231,76,60,0.35);
    padding:       12px 16px;
    border-radius: var(--krea-radius-sm);
    font-size:     14px;
    font-weight:   600;
    text-align:    center;
    line-height:   1.5;
    animation:     kreaDimFadeIn 0.4s ease;
}

/* Ostrzeżenie (szerokość < długość) — złagodzone */
.krea-dim-warning-box {
    margin-top:    12px;
    background:    rgba(231,76,60,0.07);
    color:         #c0392b;
    border:        2px solid rgba(231,76,60,0.35);
    padding:       12px 16px;
    border-radius: var(--krea-radius-sm);
    font-size:     14px;
    font-weight:   600;
    text-align:    center;
    line-height:   1.5;
    animation:     kreaDimFadeIn 0.4s ease;
}

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

/* Rating dots — ocena czyszczenia / pochłaniania wilgoci */
.krea-option-rating {
    margin-top: 10px;
    font-size:  12px;
    color:      var(--krea-color-text-light);
}

.krea-option-rating-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   5px;
    gap:             8px;
}

.krea-option-rating-label {
    font-size:   12px;
    color:       var(--krea-color-text-light);
    white-space: nowrap;
    flex:        1;
}

.krea-rating-dots {
    display: flex;
    gap:     4px;
}

.krea-rating-dot {
    width:         16px;
    height:        16px;
    border-radius: 50%;
    background:    #c4c4c6;
    display:       inline-block;
    flex-shrink:   0;
}

.krea-rating-dot.active {
    background: var(--krea-color-primary);
}

/* Responsive — kalkulator */
@media (max-width: 768px) {
    .krea-dim-inputs-col,
    .krea-dim-visual-col {
        padding-left:  0;
        padding-right: 0;
    }

    .krea-dim-inputs-card {
        display:   flex;
        flex-wrap: wrap;
        gap:       12px;
        padding:   16px;
    }

    .krea-dim-field {
        flex:      1;
        min-width: 130px;
        margin-bottom: 0;
    }

    .krea-dim-result {
        width: 100%;
    }

    .krea-dim-text {
        font-size: 16px;
    }
}

/* ============================================================
   KROK PODSUMOWANIA
   ============================================================ */
.krea-summary-container {
    margin-bottom: 25px;
}

.krea-summary-list {
    list-style:  none;
    padding:     0;
    margin:      0;
    display:     flex;
    flex-direction: column;
    gap:         0;
}

.krea-summary-item {
    display:        flex;
    align-items:    flex-start;
    gap:            16px;
    padding:        14px 0;
    border-bottom:  1px solid var(--krea-color-border);
}

.krea-summary-item:first-child {
    border-top: 1px solid var(--krea-color-border);
}

.krea-summary-step-label {
    flex:        0 0 40%;
    font-size:   14px;
    font-weight: 600;
    color:       var(--krea-color-text-light);
    padding-top: 2px;
    line-height: 1.4;
}

.krea-summary-choices {
    flex:        1;
    display:     flex;
    flex-wrap:   wrap;
    gap:         8px;
    align-items: center;
}

.krea-summary-choice {
    display:       flex;
    align-items:   center;
    gap:           8px;
    padding:       5px 12px 5px 6px;
    background:    rgba(209,205,202, 0.07);
    border:        1px solid var(--krea-color-primary);
    border-radius: 20px;
    font-size:     13px;
    font-weight:   600;
    color:         var(--krea-color-primary-dk);
}

.krea-summary-choice--dim {
    padding: 5px 14px;
    font-size: 14px;
}

.krea-summary-img {
    width:         28px;
    height:        28px;
    object-fit:    cover;
    border-radius: 50%;
    flex-shrink:   0;
}

.krea-summary-empty {
    color:       var(--krea-color-text-light);
    font-size:   14px;
    text-align:  center;
    padding:     20px 0;
}

/* ============================================================
   POŁĄCZONY BOKS OFERTY (cena + przyciski produktów)
   ============================================================ */
.krea-summary-price-box {
    margin-top: 20px;
}

.krea-offer-box {
    border:        2px solid var(--krea-color-primary);
    border-radius: var(--krea-radius);
    overflow:      hidden;
    background:    var(--krea-color-white);
}

.krea-offer-price {
    display:     flex;
    align-items: center;
    gap:         16px;
    padding:     20px 24px;
    background:  rgba(209,205,202, 0.06);
    border-bottom: 1px solid rgba(209,205,202, 0.25);
}

.krea-offer-icon {
    font-size:   38px;
    color:       var(--krea-color-primary);
    flex-shrink: 0;
}

.krea-offer-price-body {
    display:        flex;
    flex-direction: column;
    gap:            3px;
}

.krea-offer-subtitle {
    font-size:  13px;
    color:      var(--krea-color-text-light);
    line-height: 1.4;
}

.krea-offer-total {
    display:     flex;
    align-items: baseline;
    gap:         10px;
    flex-wrap:   wrap;
}

.krea-offer-label {
    font-size:   14px;
    font-weight: 600;
    color:       var(--krea-color-text-light);
    white-space: nowrap;
}

.krea-offer-value {
    font-size:   30px;
    font-weight: 700;
    color:       var(--krea-color-primary-dk);
    line-height: 1;
}

.krea-offer-actions {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    padding:        16px 20px;
}

.krea-offer-btn {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
    padding:         14px 20px;
    border-radius:   var(--krea-radius-sm);
    border:          2px solid var(--krea-color-primary);
    background:      var(--krea-color-primary);
    color:           var(--krea-color-white);
    text-decoration: none;
    font-weight:     600;
    transition:      all var(--krea-transition);
}

.krea-offer-btn:hover {
    background:  var(--krea-color-primary-dk);
    border-color: var(--krea-color-primary-dk);
    color:        var(--krea-color-white);
    transform:    translateY(-2px);
    box-shadow:   var(--krea-shadow-hover);
}

.krea-offer-btn--recommended {
    box-shadow: 0 3px 10px rgba(209,205,202, 0.3);
}

.krea-offer-btn-name {
    flex:        1;
    font-size:   14px;
    font-weight: 600;
    text-align:  left;
    line-height: 1.3;
}

.krea-offer-btn-cta {
    display:     flex;
    align-items: center;
    gap:         4px;
    font-size:   14px;
    white-space: nowrap;
    flex-shrink: 0;
}

.krea-offer-btn-cta .material-icons {
    font-size: 18px;
}

@media (max-width: 576px) {
    .krea-summary-item {
        flex-direction: column;
        gap:            6px;
    }

    .krea-summary-step-label {
        flex: none;
        font-size: 12px;
        color: var(--krea-color-text-light);
    }

    .krea-summary-price-value { font-size: 22px; }
}

/* ============================================================
   WALIDACJA
   ============================================================ */
.krea-validation-msg {
    padding:       10px 14px;
    background:    rgba(231,76,60,0.08);
    border:        1px solid var(--krea-color-danger);
    border-radius: var(--krea-radius-sm);
    color:         var(--krea-color-danger);
    font-size:     14px;
    margin-top:    10px;
}

/* ============================================================
   NAWIGACJA — PRZYCISKI
   ============================================================ */
.krea-step-navigation {
    display:         flex;
    gap:             14px;
    align-items:     center;
    margin-top:      25px;
    padding-top:     20px;
    border-top:      1px solid var(--krea-color-border);
    flex-wrap:       wrap;
}

.krea-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         12px 26px;
    border-radius:   var(--krea-radius-sm);
    font-size:       15px;
    font-weight:     600;
    cursor:          pointer;
    border:          2px solid transparent;
    transition:      all var(--krea-transition);
    text-decoration: none;
    line-height:     1;
}

.krea-btn .material-icons {
    font-size: 18px;
}

.krea-btn-next {
    background:   var(--krea-color-primary);
    border-color: var(--krea-color-primary);
    color:        var(--krea-color-white);
    margin-left:  auto;
}

.krea-btn-next:hover {
    background:   var(--krea-color-primary-dk);
    border-color: var(--krea-color-primary-dk);
    transform:    translateY(-2px);
    box-shadow:   var(--krea-shadow-hover);
}

.krea-btn-back {
    background:   transparent;
    border-color: var(--krea-color-secondary);
    color:        var(--krea-color-text-light);
}

.krea-btn-back:hover {
    background:   var(--krea-color-bg);
    border-color: var(--krea-color-text-light);
    color:        var(--krea-color-text);
}

.krea-btn-primary {
    background:   var(--krea-color-primary);
    border-color: var(--krea-color-primary);
    color:        var(--krea-color-white);
}

.krea-btn-primary:hover {
    background:   var(--krea-color-primary-dk);
    border-color: var(--krea-color-primary-dk);
    transform:    translateY(-2px);
    box-shadow:   var(--krea-shadow-hover);
}

.krea-btn-restart {
    background:   transparent;
    border-color: var(--krea-color-secondary);
    color:        var(--krea-color-text-light);
}

.krea-btn-restart:hover {
    border-color: var(--krea-color-primary);
    color:        var(--krea-color-primary);
    background:    rgba(209,205,202,0.06);
}

/* ============================================================
   WYNIKI — KONTENER
   ============================================================ */
.krea-result-inner {
    padding: 10px 0;
}

.krea-final-message {
    font-size:     16px;
    line-height:   1.6;
    color:         var(--krea-color-text);
    margin-bottom: 25px;
    padding:       20px;
    background:    rgba(209,205,202,0.06);
    border-left:   4px solid var(--krea-color-primary);
    border-radius: var(--krea-radius-sm);
}

.krea-result-summary {
    margin-bottom: 25px;
}

.krea-result-summary-title {
    font-size:     16px;
    font-weight:   700;
    margin-bottom: 10px;
    color:         var(--krea-color-text-light);
}

.krea-result-choices {
    list-style:  none;
    padding:     0;
    margin:      0;
    display:     flex;
    flex-wrap:   wrap;
    gap:         8px;
}

.krea-choice-item {
    padding:       6px 14px;
    background:    rgba(209,205,202,0.1);
    border:        1px solid var(--krea-color-primary);
    border-radius: 20px;
    font-size:     13px;
    color:         var(--krea-color-primary-dk);
    font-weight:   600;
}

/* Tytuł sekcji produktów */
.krea-result-products-title {
    font-size:     20px;
    font-weight:   700;
    margin-bottom: 20px;
    color:         var(--krea-color-text);
}

/* ============================================================
   LISTA PRODUKTÓW (kontener — zachowany dla komunikatu braku produktów)
   ============================================================ */
.krea-products-grid {
    display:       flex;
    flex-direction: column;
    gap:           10px;
}

/* Akcje wynikowe */
.krea-result-actions {
    display:     flex;
    gap:         12px;
    flex-wrap:   wrap;
    margin-top:  20px;
    padding-top: 20px;
    border-top:  1px solid var(--krea-color-border);
}

/* Brak produktów */
.krea-no-products {
    color:        var(--krea-color-text-light);
    font-size:    15px;
    text-align:   center;
    padding:      30px;
    border:       2px dashed var(--krea-color-border);
    border-radius: var(--krea-radius);
}

/* ============================================================
   LOADER
   ============================================================ */
.krea-loader {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    padding:         30px;
    color:           var(--krea-color-text-light);
    font-size:       15px;
}

.krea-loader-spinner {
    width:        36px;
    height:       36px;
    border:       3px solid var(--krea-color-border);
    border-top:   3px solid var(--krea-color-primary);
    border-radius: 50%;
    animation:    kreaSpin 0.8s linear infinite;
}

@keyframes kreaSpin {
    to { transform: rotate(360deg); }
}

/* Błąd AJAX */
.krea-ajax-error {
    padding:       12px 16px;
    background:    rgba(231,76,60,0.08);
    border:        1px solid var(--krea-color-danger);
    border-radius: var(--krea-radius-sm);
    color:         var(--krea-color-danger);
    margin-bottom: 15px;
}

/* ============================================================
   RESPONSYWNOŚĆ
   ============================================================ */
@media (max-width: 767px) {
    .krea-wizard-title       { font-size: 22px; }
    .krea-step-title         { font-size: 18px; }
    .krea-options-grid       { grid-template-columns: 1fr; gap: 8px; }
    .krea-options-image-grid { grid-template-columns: 1fr 1fr; }
    .krea-btn                { padding: 10px 18px; font-size: 14px; }
    .krea-btn-next           { margin-left: 0; }
    .krea-step-navigation    { flex-direction: column; align-items: stretch; }
    .krea-option-image img   { height: auto; }
    .krea-offer-price        { padding: 16px 18px; gap: 12px; }
    .krea-offer-icon         { font-size: 30px; }
    .krea-offer-value        { font-size: 24px; }
    .krea-offer-btn          { padding: 12px 16px; }
    .krea-offer-btn-name     { font-size: 13px; }
    .krea-offer-btn-cta      { font-size: 13px; }

    /* Pasek postępu — układ pionowy */
    .krea-progress-bar {
        flex-direction:  column;
        align-items:     flex-start;
        justify-content: flex-start;
        padding:         4px 0;
    }

    .krea-progress-step {
        flex-direction: row;
        align-items:    center;
        gap:            10px;
        width:          100%;
        padding:        2px 0;
    }

    .krea-step-number {
        width:       26px;
        height:      26px;
        font-size:   11px;
        flex-shrink: 0;
    }

    .krea-step-label {
        display:     block;
        max-width:   none;
        font-size:   13px;
        text-align:  left;
        margin-top:  0;
        white-space: nowrap;
    }

    /* Łącznik jako pionowa linia pod kółkiem */
    .krea-progress-connector {
        width:       2px;
        height:      16px;
        min-width:   0;
        max-width:   2px;
        flex:        none;
        margin-left: 12px; /* (26px - 2px) / 2 — centruje pod kółkiem */
        margin-bottom: 0;
    }
}

@media (max-width: 480px) {
    .krea-options-grid        { grid-template-columns: 1fr; }
    .krea-options-image-grid  { grid-template-columns: 1fr; }
    .krea-offer-btn           { flex-direction: column; align-items: flex-start; gap: 6px; }
    .krea-offer-btn-cta       { align-self: flex-end; }
}