/*
 * Optional wardrobe 3D viewer.
 * Removing this file and constructor-3d.js restores the constructor to its
 * original 2D-only presentation; none of the calculation styles live here.
 */

.wardrobe-builder__canvas-wrap {
    position: relative;
}

/* Keep the switch in its own strip instead of laying it over the 2D drawing. */
.wardrobe-builder[data-wardrobe-3d-ready="true"]:not([data-render-mode="3d"]) .wardrobe-builder__canvas-wrap {
    padding-top: 64px;
}

/* On short screens the field may move up to stay visible. On tall screens
   centring must not push the entire toolbar below the adjacent settings. */
@media (min-width: 901px) {
    .wardrobe-builder[data-wardrobe-3d-ready="true"] .wardrobe-builder__stage {
        position: sticky;
        z-index: 2;
        top: min(12px, var(--wardrobe-3d-sticky-top, 12px));
        align-self: start;
        background: var(--wb-white);
    }
}

.wardrobe-3d-toggle {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 9;
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border: 1px solid #c8d1d6;
    border-radius: 9px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 5px 18px rgba(31, 48, 58, .14);
    backdrop-filter: blur(7px);
}

.wardrobe-3d-toggle button {
    min-width: 45px;
    height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #50616b;
    font: 700 14px/34px Arial, sans-serif;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.wardrobe-3d-toggle button:hover {
    color: #263a46;
    background: #eef2f3;
}

.wardrobe-3d-toggle button:focus-visible {
    outline: 2px solid #374f5d;
    outline-offset: 2px;
}

.wardrobe-3d-toggle button.is-active {
    color: #1d303b;
    background: #ffca05;
    box-shadow: 0 1px 4px rgba(78, 61, 0, .18);
}

.wardrobe-3d-layer {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: none;
    overflow: hidden;
    min-height: 100%;
    border-radius: inherit;
    background:
        radial-gradient(circle at 48% 36%, rgba(255, 255, 255, .98) 0, rgba(247, 246, 242, .96) 42%, rgba(225, 230, 232, .96) 100%);
    touch-action: none;
    user-select: none;
}

.wardrobe-builder[data-render-mode="3d"] .wardrobe-3d-layer {
    display: block;
}

.wardrobe-builder[data-render-mode="3d"] .wardrobe-builder__canvas {
    visibility: hidden;
}

/* The existing core editor remains the only dimension editor in both modes. */
.wardrobe-builder[data-render-mode="3d"] .wardrobe-builder__dimension-editor:not([hidden]) {
    top: 64px;
    right: 14px;
    z-index: 10;
}

.wardrobe-3d-layer canvas {
    display: block;
    width: 100%;
    height: 100%;
    outline: 0;
    cursor: grab;
}

.wardrobe-3d-layer canvas:focus-visible {
    outline: 3px solid var(--wb-accent, #ffca05);
    outline-offset: -4px;
}

.wardrobe-3d-layer canvas.is-dragging {
    cursor: grabbing;
}

.wardrobe-3d-layer__status {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 70px 28px 28px;
    color: #52636d;
    font: 600 14px/1.45 Arial, sans-serif;
    text-align: center;
    pointer-events: none;
}

.wardrobe-3d-layer__status[hidden] {
    display: none;
}

.wardrobe-3d-layer__status.is-error {
    color: #7b3030;
}

.wardrobe-3d-layer__notice {
    position: absolute;
    top: 62px;
    left: 14px;
    z-index: 2;
    max-width: min(430px, calc(100% - 28px));
    padding: 8px 11px;
    border: 1px solid rgba(202, 168, 46, .5);
    border-radius: 7px;
    background: rgba(255, 248, 218, .92);
    color: #5c4c16;
    box-shadow: 0 3px 12px rgba(70, 57, 18, .1);
    font: 500 12px/1.4 Arial, sans-serif;
    pointer-events: none;
}

.wardrobe-3d-layer__notice[hidden] {
    display: none;
}

.wardrobe-3d-layer__dimensions {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    display: flex;
    max-width: calc(100% - 155px);
    gap: 6px;
    align-items: center;
    padding: 3px;
    border: 1px solid rgba(167, 180, 187, .9);
    border-radius: 8px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 3px 12px rgba(34, 51, 60, .1);
    backdrop-filter: blur(6px);
}

.wardrobe-3d-layer__dimensions[hidden] {
    display: none;
}

.wardrobe-3d-layer__dimensions strong {
    padding: 0 7px;
    color: #42555f;
    font: 700 12px/32px Arial, sans-serif;
}

.wardrobe-3d-layer__dimensions button {
    min-height: 32px;
    padding: 0 9px;
    border: 0;
    border-radius: 5px;
    background: #f0f3f4;
    color: #314752;
    font: 600 12px/32px Arial, sans-serif;
    white-space: nowrap;
    cursor: pointer;
}

.wardrobe-3d-layer__dimensions button:hover {
    background: #ffca05;
    color: #1d303b;
}

.wardrobe-3d-layer__dimensions button:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.wardrobe-3d-layer__dimensions button:focus-visible {
    outline: 2px solid #374f5d;
    outline-offset: 1px;
}

.wardrobe-3d-layer__tools {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 2;
    display: flex;
    gap: 7px;
    align-items: center;
}

.wardrobe-3d-layer__tools button,
.wardrobe-3d-layer__hint {
    border: 1px solid rgba(167, 180, 187, .9);
    border-radius: 7px;
    background: rgba(255, 255, 255, .91);
    color: #42555f;
    box-shadow: 0 3px 12px rgba(34, 51, 60, .1);
    backdrop-filter: blur(6px);
}

.wardrobe-3d-layer__tools button {
    min-height: 34px;
    padding: 0 11px;
    font: 600 13px/32px Arial, sans-serif;
    cursor: pointer;
}

.wardrobe-3d-layer__tools button:hover {
    background: #fff;
    color: #1f3541;
}

.wardrobe-3d-layer__tools button:focus-visible {
    outline: 2px solid #374f5d;
    outline-offset: 2px;
}

.wardrobe-3d-layer__hint {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    padding: 7px 10px;
    font: 500 12px/1.3 Arial, sans-serif;
    pointer-events: none;
}

@media (max-width: 700px) {
    .wardrobe-builder[data-wardrobe-3d-ready="true"]:not([data-render-mode="3d"]) .wardrobe-builder__canvas-wrap {
        padding-top: 56px;
    }

    .wardrobe-3d-toggle {
        top: 9px;
        right: 9px;
    }

    .wardrobe-3d-toggle button {
        min-width: 39px;
        height: 31px;
        padding: 0 9px;
        line-height: 31px;
    }

    .wardrobe-3d-layer__tools {
        left: 9px;
        bottom: 9px;
    }

    .wardrobe-3d-layer__notice {
        top: 96px;
        left: 9px;
        max-width: calc(100% - 18px);
    }

    .wardrobe-3d-layer__dimensions {
        top: 49px;
        left: 9px;
        max-width: calc(100% - 18px);
        overflow-x: auto;
    }

    .wardrobe-3d-layer__dimensions strong {
        display: none;
    }

    .wardrobe-builder[data-render-mode="3d"] .wardrobe-builder__dimension-editor:not([hidden]) {
        top: 96px;
        right: 8px;
    }

    .wardrobe-3d-layer__hint {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wardrobe-3d-toggle button {
        transition: none;
    }
}