/* START OF FILE css/konfab3d-style.css */
/* Updated for WordPress Plugin - v1.2 */
/* Changes from v1.1:
 *   - Desktop wrapper: 75vh -> 100vh fullscreen
 *   - Mobile: FAB button (bottom-right) replaces visible controls
 *   - Mobile: controls become a slide-up bottom sheet modal
 *   - New elements: .k3d-fab, .k3d-backdrop, .k3d-controls-close
 *
 * Note on theme headers: if your WordPress theme has a fixed header, the wrapper
 * will start behind it. Use `height: calc(100vh - Xpx)` with X = header height
 * to compensate, or use `position: fixed; top: 0; left: 0; z-index: 9999` to
 * overlay everything (add the shortcode to a full-width page template in that case).
 */


/* ============================================================
   WRAPPER
   ============================================================ */

.konfab3d-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;   /* fallback */
    height: 100dvh;  /* respects mobile browser chrome (address bar, etc.) */
    overflow: hidden;
    background-color: #0a0a14;
    color: #e0e0ff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box;
}


/* ============================================================
   CANVAS CONTAINER
   ============================================================ */

.konfab3d-wrapper .canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}


/* ============================================================
   TITLES
   ============================================================ */

.konfab3d-wrapper h1 {
    position: absolute;
    top: 15px;
    left: 0;
    width: 100%;
    font-weight: 300;
    font-size: 1.8em;
    text-align: center;
    color: #9fa8ff;
    margin: 0;
    padding: 0 10px;
    box-sizing: border-box;
    text-shadow: 0 0 10px rgba(100, 149, 237, 0.8);
    z-index: 10;
    pointer-events: none;
}

.konfab3d-wrapper .subtitle {
    position: absolute;
    top: 55px;
    left: 0;
    width: 100%;
    font-style: italic;
    font-size: 0.9em;
    color: #7a88cc;
    text-align: center;
    margin: 0;
    padding: 0 10px;
    box-sizing: border-box;
    z-index: 10;
    pointer-events: none;
}


/* ============================================================
   CONTROLS (desktop layout - absolute band at bottom)
   ============================================================ */

.konfab3d-wrapper .controls {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 98%;
    max-width: 1100px;
    z-index: 10;
}

.konfab3d-wrapper .control-group {
    display: flex;
    flex-direction: column;
    background: rgba(30, 30, 60, 0.75);
    padding: 10px;
    border-radius: 6px;
    min-width: 200px;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    flex: 1;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.konfab3d-wrapper .control-group h3 {
    margin-top: 0;
    color: #b0b8ff;
    font-weight: 400;
    text-align: center;
    margin-bottom: 10px;
    font-size: 0.9em;
    border-bottom: 1px solid rgba(176, 184, 255, 0.2);
    padding-bottom: 5px;
}


/* ============================================================
   SLIDERS & LABELS
   ============================================================ */

.konfab3d-wrapper .slider-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
}

.konfab3d-wrapper label {
    margin-bottom: 3px;
    display: block;
    font-size: 12px;
    color: #9fa8ff;
    line-height: 1.2;
}

.konfab3d-wrapper input[type="range"] {
    width: 100%;
    margin-bottom: 3px;
    background: transparent;
    cursor: pointer;
    height: 18px;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    margin-top: 2px;
    padding: 0;
    box-sizing: border-box;
}

.konfab3d-wrapper input[type="range"]:focus {
    outline: none;
}

/* Track */
.konfab3d-wrapper input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: #252550;
    border-radius: 3px;
    border: 1px solid #404070;
}

.konfab3d-wrapper input[type="range"]::-moz-range-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: #252550;
    border-radius: 3px;
    border: 1px solid #404070;
}

/* Thumb */
.konfab3d-wrapper input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid #404070;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    background: #9fa8ff;
    cursor: pointer;
    margin-top: -5px;
}

.konfab3d-wrapper input[type="range"]::-moz-range-thumb {
    height: 14px;
    width: 14px;
    border-radius: 50%;
    background: #9fa8ff;
    cursor: pointer;
    border: none;
}

/* Value display */
.konfab3d-wrapper .value-display {
    font-family: monospace;
    color: #ff9fb0;
    font-size: 12px;
    align-self: flex-end;
    background: rgba(0, 0, 0, 0.2);
    padding: 1px 4px;
    border-radius: 3px;
    margin-top: -2px;
}


/* ============================================================
   INFO PANEL
   ============================================================ */

.konfab3d-wrapper .info-panel {
    position: absolute;
    top: 85px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 20, 40, 0.8);
    border-radius: 6px;
    padding: 10px;
    width: 95%;
    max-width: 360px;
    text-align: center;
    opacity: 0.9;
    transition: opacity 0.3s;
    z-index: 10;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    font-size: 12px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.konfab3d-wrapper .info-panel:hover {
    opacity: 1;
}


/* ============================================================
   RESET BUTTON (inside control groups)
   ============================================================ */

.konfab3d-wrapper button {
    background: linear-gradient(135deg, #5f4b8b, #4d4dff);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 6px 12px;
    border-radius: 15px;
    cursor: pointer;
    font-size: 12px;
    margin-top: 5px;
    transition: all 0.3s;
    align-self: center;
    appearance: none;
    -webkit-appearance: none;
}

.konfab3d-wrapper button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 8px rgba(100, 149, 237, 0.5);
}

.konfab3d-wrapper button:focus {
    outline: 1px dotted #fff;
    outline-offset: 2px;
}


/* ============================================================
   GPU INFO & LOADING
   ============================================================ */

.konfab3d-wrapper .gpu-info {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(20, 20, 40, 0.8);
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 10px;
    color: #9fa8ff;
    z-index: 100;
}

.konfab3d-wrapper .loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    color: #9fa8ff;
    text-align: center;
    z-index: 1000;
    background: rgba(10, 10, 20, 0.85);
    padding: 15px 25px;
    border-radius: 6px;
    display: block;
}

.konfab3d-wrapper .loading span {
    font-size: 12px;
    opacity: 0.7;
    display: block;
    margin-top: 5px;
}


/* ============================================================
   FAB BUTTON
   Hidden on desktop, shown on mobile via the media query below.
   ============================================================ */

.konfab3d-wrapper .k3d-fab {
    display: none; /* hidden on desktop */
    position: absolute;
    bottom: 24px;
    right: 20px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5f4b8b, #4d4dff);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    cursor: pointer;
    z-index: 500;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(77, 77, 255, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    padding: 0;
    margin: 0;
}

.konfab3d-wrapper .k3d-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6), 0 0 18px rgba(77, 77, 255, 0.5);
}

.konfab3d-wrapper .k3d-fab:focus {
    outline: 2px solid rgba(159, 168, 255, 0.8);
    outline-offset: 3px;
}

/* Rotate icon when panel is open */
.konfab3d-wrapper.k3d-open .k3d-fab svg {
    transform: rotate(30deg);
    transition: transform 0.3s ease;
}

.konfab3d-wrapper .k3d-fab svg {
    transition: transform 0.3s ease;
}


/* ============================================================
   BACKDROP
   Hidden on desktop, shown on mobile via the media query below.
   ============================================================ */

.konfab3d-wrapper .k3d-backdrop {
    display: none; /* hidden on desktop */
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1990;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.konfab3d-wrapper.k3d-open .k3d-backdrop {
    opacity: 1;
    pointer-events: all;
}


/* ============================================================
   CLOSE BUTTON (inside the controls panel)
   Hidden on desktop, shown on mobile via the media query below.
   ============================================================ */

.konfab3d-wrapper .k3d-controls-close {
    display: none; /* hidden on desktop */
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    align-self: flex-end;
    background: transparent;
    border: 1px solid rgba(159, 168, 255, 0.25);
    color: #9fa8ff;
    padding: 5px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 12px;
    letter-spacing: 0.03em;
    margin: 0 0 4px;
    transition: background 0.2s, border-color 0.2s;
}

.konfab3d-wrapper .k3d-controls-close:hover {
    background: rgba(159, 168, 255, 0.1);
    border-color: rgba(159, 168, 255, 0.5);
    transform: none; /* override the generic button:hover scale */
    box-shadow: none;
}


/* ============================================================
   MOBILE LAYOUT  (max-width: 768px)
   The canvas stays fullscreen. Controls become a fixed bottom sheet.
   ============================================================ */

@media (max-width: 768px) {

    /* Keep wrapper fullscreen on mobile too */
    .konfab3d-wrapper {
        height: 100vh;   /* fallback */
        height: 100dvh;  /* respects address bar resize on mobile */
        overflow: hidden;
        display: block;  /* override any theme flex */
    }

    /* Slightly smaller titles on small screens */
    .konfab3d-wrapper h1 {
        font-size: 1.3em;
        top: 12px;
    }

    .konfab3d-wrapper .subtitle {
        font-size: 0.8em;
        top: 84px;
    }

    /* Info panel: stays at top-center, slightly more compact */
    .konfab3d-wrapper .info-panel {
        top: 116px;
        font-size: 11px;
        padding: 8px 10px;
        max-width: 90%;
    }

    /* Canvas still fills the whole wrapper */
    .konfab3d-wrapper .canvas-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* ---- FAB: visible on mobile ---- */
    .konfab3d-wrapper .k3d-fab {
        display: flex;
    }

    /* ---- Backdrop: visible on mobile ---- */
    .konfab3d-wrapper .k3d-backdrop {
        display: block;
    }

    /* ---- Controls: hidden bottom sheet by default ---- */
    .konfab3d-wrapper .controls {
        /* Override desktop absolute positioning */
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        max-height: 90vh;
        /* display: block (NOT flex) — flex containers with overflow-y scroll
           behave unreliably on iOS/Android. Block enables proper touch scrolling. */
        display: block;
        overflow-y: scroll;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        padding: 18px 16px 48px;
        box-sizing: border-box;

        /* Appearance */
        background: rgba(8, 8, 22, 0.97);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 18px 18px 0 0;
        border-top: 1px solid rgba(159, 168, 255, 0.15);
        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.6);

        /* Hidden state: slid fully below viewport */
        transform: translateX(0) translateY(100%);
        transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;

        z-index: 2000;
    }

    /* Drag-handle indicator at the top of the sheet */
    .konfab3d-wrapper .controls::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: rgba(255, 255, 255, 0.18);
        border-radius: 2px;
        margin: 0 auto 14px;
    }

    /* Open state */
    .konfab3d-wrapper.k3d-open .controls {
        transform: translateX(0) translateY(0);
        pointer-events: all;
    }

    /* Control groups: full-width blocks with spacing between them */
    .konfab3d-wrapper .control-group {
        display: flex;
        flex-direction: column;
        min-width: unset;
        width: 100%;
        flex: none;
        margin-bottom: 14px;
    }

    .konfab3d-wrapper .control-group:last-child {
        margin-bottom: 0;
    }

    /* Slightly larger touch targets for sliders */
    .konfab3d-wrapper input[type="range"] {
        height: 22px;
    }

    /* Close button: visible inside the sheet */
    .konfab3d-wrapper .k3d-controls-close {
        display: flex;
    }

} /* end @media (max-width: 768px) */

/* END OF FILE css/konfab3d-style.css */