/* ============================================================
   Vloer Configurator v3 – configurator.css
   Scoped under .vloer-configurator to avoid theme conflicts
   ============================================================ */

.vloer-configurator, .vloer-configurator * { box-sizing: border-box; }

/* ---------- Grid ---------- */
/* .vloer-configurator .container { max-width: 1200px; margin: 0 auto; } */
.vloer-configurator .row       { display: flex; flex-wrap: wrap; gap: 20px; }
.vloer-configurator .col       { flex: 1 0 0%; }
.vloer-configurator .col-12    { width: 100%; }
.vloer-configurator .col-md-4  { width: 30%; flex-grow: 1;  }
.vloer-configurator .col-md-7  { width: 58.333%; }
.vloer-configurator .col-md-8  { width: 66.666%; }
.vloer-configurator .col-lg-4  { width: 33.333%; }
.vloer-configurator .col-lg-10 { width: 83.333%; }

/* ---------- Progress bar ---------- */
.vloer-configurator .progress {
    display: flex;
    margin: 0 0 30px;
}
.vloer-configurator .progress__item {
    flex: 1;
    text-align: center;
    padding: 14px 0;
    background: #e8e8e8;
    font-weight: 700;
    font-size: 15px;
    color: #888;
    text-decoration: none;
    border-right: 2px solid #fff;
    cursor: pointer;
    transition: background .2s;
}
.vloer-configurator .progress__item:last-child { border-right: none; }
.vloer-configurator .progress__item--active    { background: #e30613; color: #fff; }

/* ---------- Headings & text ---------- */
.vloer-configurator .floor__content h1 {
    font-size: 28px; font-weight: 800; margin: 0 0 14px; color: #1a1a2e;
}
.vloer-configurator .floor__content p { color: #555; line-height: 1.65; margin: 0 0 14px; }

/* ---------- Buttons ---------- */
.vloer-configurator .button {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 12px 24px; font-weight: 700; font-size: 14px;
    border-radius: 4px; cursor: pointer; text-decoration: none;
    border: none; transition: background .2s, opacity .2s;
    line-height: 1.2; font-family: inherit;
}
.vloer-configurator .floor__submit { background: #e30613; color: #fff !important; }
.vloer-configurator .floor__submit:hover { background: #a3020b; }
.vloer-configurator .floor__back  { background: #bbb; color: #fff !important; font-size: 16px; padding: 12px 18px; }
.vloer-configurator .floor__back:hover { background: #999; }
.vloer-configurator .floor__buttongroup { display: flex; gap: 10px; align-items: center; padding: 20px 0 10px; }
.vloer-configurator button.floor__submit { cursor: pointer; }
.vloer-configurator button.floor__submit:disabled { background: #aaa; cursor: not-allowed; }

/* ---------- Shape cards – step 1 ---------- */
.vloer-configurator .shape__group {
    display: block; text-decoration: none; border: 2px solid #ddd;
    border-radius: 5px; overflow: hidden; margin-bottom: 24px;
    cursor: pointer; transition: border-color .2s, box-shadow .2s; color: inherit;
}
.vloer-configurator .shape__group:hover { border-color: #e30613; box-shadow: 0 3px 14px rgba(0,0,0,.12); }
.vloer-configurator .shape__image  { width: 100%; display: block; }
.vloer-configurator .shape__body   { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: #f8f8f8; border-top: 1px solid #eee; }
.vloer-configurator .shape__title  { font-size: 14px; color: #555; }
.vloer-configurator .shape__button { background: #0d121c; color: #fff !important; font-size: 12px; font-weight: 700; padding: 8px 16px; border-radius: 3px; text-transform: uppercase; letter-spacing: .5px; }
.vloer-configurator .shape__button:hover { background: #263f75; }

/* ---------- Offer shortcut – step 1 ---------- */
.vloer-configurator .offer-shortcut {
    background: #f5f5f5; border: 1px solid #ddd; border-radius: 5px;
    padding: 18px; margin-bottom: 20px; font-size: 14px; line-height: 1.6; color: #444;
}
.vloer-configurator .offer-shortcut .button {
    width: 100%; margin-top: 12px; background: #e30613; color: #fff !important;
    text-align: center; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: 13px;
}
.vloer-configurator .offer-shortcut .button:hover { background: #b0000a; }

/* ---------- Floor diagram – step 2 ---------- */
.vloer-configurator .size__container { width: 100%; margin-bottom: 12px; }
.vloer-configurator .zoomViewport    { overflow: hidden; border-radius: 6px; }
.vloer-configurator .zoomContainer  { position: relative; display: inline-block; width: 100%; }
.vloer-configurator .size__image    { display: block; width: 100%; }

.vloer-configurator .size__box {
    position: absolute;
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(255,255,255,.92);
    border: 1px solid #bbb; border-radius: 4px;
    padding: 3px 8px; font-size: 12px; font-weight: 700;
    white-space: nowrap; pointer-events: none;
    transform: translate(-50%, -50%);
}
.vloer-configurator .size__icon {
    background: #e30613; color: #fff; border-radius: 50%;
    width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.vloer-configurator .size__unit          { font-size: 12px; color: #222; font-weight: 700; }
.vloer-configurator .size__unit--readonly{ color: #666; font-weight: 400; }
.vloer-configurator .size__box--readonly { background: rgba(240,240,240,.92); }

/* ---------- Dimension form – step 2 ---------- */
.vloer-configurator .size__form  { padding-top: 4px; }
.vloer-configurator .size__group { margin-bottom: 18px; }
.vloer-configurator .size__title { display: block; font-weight: 700; font-size: 14px; margin-bottom: 10px; color: #222; }

.vloer-configurator .input__group { display: flex; align-items: center; margin-bottom: 8px; }
.vloer-configurator .input__group--hidden { display: none; }

.vloer-configurator .input__size {
    background: #e30613; color: #fff; border-radius: 50%;
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; flex-shrink: 0; margin-right: 8px;
}
.vloer-configurator .input,
.vloer-configurator .size__input {
    padding: 9px 10px; border: 1px solid #ccc; border-radius: 4px;
    font-size: 14px; font-family: inherit; transition: border-color .2s;
    height: 42px;
}
.vloer-configurator .input:focus,
.vloer-configurator .size__input:focus { outline: none; border-color: #1a7abf; }
.vloer-configurator .input--right       { text-align: right; }
.vloer-configurator .input--after       { width: 90px; border-radius: 4px 0 0 4px; border-right: none; }
.vloer-configurator .input--after-large { width: 90px; border-radius: 4px 0 0 4px; border-right: none; }
.vloer-configurator .input__after {
    background: #f2f2f2; border: 1px solid #ccc; border-left: none;
    padding: 9px 10px; font-size: 13px; color: #666;
    border-radius: 0 4px 4px 0; white-space: nowrap;
}
.vloer-configurator .reset-option { margin: 6px 0 4px; font-size: 13px; }
.vloer-configurator .reset-option a  { color: #1a7abf; cursor: pointer; }
.vloer-configurator .reset-option a:hover { text-decoration: underline; }
.vloer-configurator .reset-confirm { display: none; }

/* ---------- Option groups – steps 3-5 ---------- */
.vloer-configurator .option__group {
    display: flex; gap: 24px; padding-bottom: 28px; margin-bottom: 24px;
    border-bottom: 1px solid #eee; flex-wrap: wrap;
}
.vloer-configurator .option__group:last-child { border-bottom: none; }
.vloer-configurator .option__image { width: 220px; flex-shrink: 0; border-radius: 5px; overflow: hidden; background: #eee; }
.vloer-configurator .option__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vloer-configurator .option__body  { flex: 1; min-width: 0; }
.vloer-configurator .option__title { display: block; font-size: 17px; font-weight: 700; color: #1a1a2e; margin-bottom: 8px; }
.vloer-configurator .option__text  { display: block; font-size: 14px; line-height: 1.7; color: #555; margin-bottom: 14px; }
.vloer-configurator .option__text p { margin: 0; }
.vloer-configurator .option__offer { display: block; font-size: 14px; font-weight: 600; color: #333; margin-bottom: 8px; }
.vloer-configurator .option__input-group { flex-wrap: nowrap; }

/* ---------- Summary sidebar ---------- */
.vloer-configurator .summary {
    background: #f5f5f5; border: 1px solid #ddd; border-radius: 5px; padding: 18px;
}
.vloer-configurator .summary__title { display: block; font-size: 16px; font-weight: 700; color: #1a1a2e; margin-bottom: 14px; }
.vloer-configurator .summary__image-group { position: relative; margin-bottom: 14px; line-height: 0; }
.vloer-configurator .summary__image { width: 100%; display: block; border-radius: 4px; }
.vloer-configurator .summary__icon {
    position: absolute; background: rgba(255,255,255,.93);
    border: 1px solid #bbb; border-radius: 3px; padding: 2px 7px;
    font-size: 11px; font-weight: 700; color: #333;
    white-space: nowrap; pointer-events: none; transform: translate(-50%, -50%);
}
.vloer-configurator .summary__body { border-top: 1px solid #ddd; padding: 10px 0 4px; }
.vloer-configurator .summary__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.vloer-configurator .summary__subtitle { font-size: 14px; font-weight: 700; color: #1a1a2e; }
.vloer-configurator .summary__link { color: #e30613; font-size: 13px; font-weight: 600; text-decoration: none; }
.vloer-configurator .summary__link:hover { text-decoration: underline; }
.vloer-configurator .summary__specs { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; }
.vloer-configurator .summary__info  { color: #666; }
.vloer-configurator .summary__data  { font-weight: 700; color: #222; text-align: right; }

/* ---------- Step 6 contact form ---------- */
.vloer-configurator .overview .input {
    display: block; width: 100%; margin-bottom: 10px;
    padding: 13px 14px; border: 1px solid #ccc; border-radius: 4px;
    font-size: 15px; font-family: inherit;
}
.vloer-configurator .overview textarea.input { resize: vertical; height: 150px; }
.vloer-configurator .overview .input--error  { border-color: #c00; }
.vloer-configurator .input__checkbox { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #555; margin-bottom: 10px; cursor: pointer; }
.vloer-configurator .error { display: block; font-size: 12px; color: #c00; margin: -6px 0 8px; min-height: 14px; }
.vloer-configurator .onw-submit-comment { font-size: 13px; color: #777; font-style: italic; margin: 6px 0 16px; }

/* ---------- Form message ---------- */
#vloer-form-msg {
    padding: 14px 18px; border-radius: 4px; font-size: 15px; font-weight: 600; margin-bottom: 18px;
}
#vloer-form-msg.success { background: #d4edda; border: 1px solid #b8dfc6; color: #155724; }
#vloer-form-msg.error   { background: #f8d7da; border: 1px solid #f0b9be; color: #721c24; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    .vloer-configurator .col-md-4,
    .vloer-configurator .col-md-7,
    .vloer-configurator .col-md-8,
    .vloer-configurator .col-lg-4,
    .vloer-configurator .col-lg-10 { width: 100%; }
    .vloer-configurator .option__image { width: 100%; height: 200px; }
    .vloer-configurator .summary { margin-top: 24px; }
    .vloer-configurator .progress__item { font-size: 12px; padding: 10px 2px; }
    .vloer-configurator .floor__content h1 { font-size: 22px; }
}

/* ---------- Lightbox ---------- */
.vloer-lightbox-trigger {
    display: block; cursor: zoom-in; position: relative; line-height: 0;
}
.vloer-lightbox-trigger::after {
    content: '⤢';
    position: absolute; top: 6px; right: 6px;
    background: rgba(0,0,0,.55); color: #fff;
    font-size: 14px; line-height: 1; padding: 4px 7px;
    border-radius: 4px; pointer-events: none;
}
.vloer-lightbox-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(0,0,0,.82);
    align-items: center; justify-content: center;
    cursor: zoom-out;
}
.vloer-lightbox-overlay.active { display: flex; }
.vloer-lightbox-overlay img {
    max-width: 90vw; max-height: 88vh;
    border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,.6);
    pointer-events: none;
}
.vloer-lightbox-close {
    position: absolute; top: 18px; right: 22px;
    color: #fff; font-size: 32px; line-height: 1;
    cursor: pointer; opacity: .8;
}
.vloer-lightbox-close:hover { opacity: 1; }

/* ---------- Summary dimension badges ---------- */
.vloer-configurator .summary__dims {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 8px 0 10px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 2px;
}
.vloer-configurator .summary__dim-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 30px;
    padding: 3px 8px 3px 3px;
    font-size: 12px;
    white-space: nowrap;
}
.vloer-configurator .summary__dim-num {
    background: #e30613;
    color: #fff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.vloer-configurator .summary__dim-val {
    font-weight: 600;
    color: #333;
    font-size: 12px;
}
/* Remove old absolute-positioned icon styles if leftover */
.vloer-configurator .vloer-sum-icon { display: none !important; }

/* ---------- Sidebar image overlay labels ---------- */
.vloer-configurator .sum-img-wrap {
    position: relative;
    display: block;
    line-height: 0;
    margin-bottom: 10px;
    border-radius: 6px;
    overflow: hidden;
    cursor: zoom-in;
}
.vloer-configurator .sum-img-wrap .summary__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}
/* Dimension label pill */
.vloer-configurator .sum-lbl {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.93);
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 2px 8px 2px 2px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    transform: translate(0, -50%);
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    z-index: 2;
}
/* Orange numbered circle */
.vloer-configurator .sum-lbl-num {
    background: #e30613;
    color: #fff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}
/* Value text */
.vloer-configurator .sum-lbl-val {
    color: #222;
    font-size: 11px;
    font-weight: 600;
}
/* Derived labels (no number, just text in plain box) */
.vloer-configurator .sum-lbl--derived {
    background: rgba(255,255,255,0.85);
    border-color: #bbb;
    padding: 10px 8px;
    border-radius: 4px;
}

/* ---------- Step 2 diagram labels — match sidebar pill style ---------- */
.vloer-configurator .size__box {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.93);
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 3px 10px 3px 3px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 5px rgba(0,0,0,0.13);
    z-index: 2;
}
.vloer-configurator .size__icon {
    background: #e30613;
    color: #fff;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}
.vloer-configurator .size__unit {
    color: #222;
    font-size: 12px;
    font-weight: 700;
}
/* Derived readonly boxes (sides 5,6 on L-vorm) — plain white box, no badge */
.vloer-configurator .size__box--readonly {
    background: rgba(255,255,255,0.88);
    border-radius: 5px;
    padding: 4px 10px;
}
.vloer-configurator .size__unit--readonly {
    color: #555;
    font-weight: 600;
}