/**
 * KINVA Artist OS - Studio Mockup Tool CSS
 * 
 * Enteriőr Stúdió styles
 * 
 * @package KINVA_Artist_OS
 * @family studio
 * @since 1.30.13
 */

/* ══════════════════════════════════════════════════════════════════════════
   VARIABLES
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-mockup {
    --mockup-primary: #9333ea;
    --mockup-primary-light: #a855f7;
    --mockup-primary-dark: #7e22ce;
    --mockup-bg: #ffffff;
    --mockup-bg-alt: #f8fafc;
    --mockup-border: #e2e8f0;
    --mockup-text: #1e293b;
    --mockup-text-muted: #64748b;
    --mockup-radius: 12px;
    --mockup-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* ══════════════════════════════════════════════════════════════════════════
   MAIN CONTAINER
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-mockup {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ══════════════════════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-mockup__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.kinva-mockup__title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.kinva-mockup__icon {
    font-size: 2.5rem;
    line-height: 1;
}

.kinva-mockup__title h1 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--mockup-text);
}

.kinva-mockup__subtitle {
    margin: 4px 0 0;
    color: var(--mockup-text-muted);
    font-size: 0.9375rem;
}

.kinva-mockup__pro-badge {
    background: linear-gradient(135deg, #fef3c7 0%, #fef9c3 100%);
    border: 1px solid #f59e0b;
    color: #b45309;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════════
   LAYOUT - Canvas Left, Sidebar Right
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-mockup__layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    align-items: start;
}

/* ══════════════════════════════════════════════════════════════════════════
   CANVAS AREA
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-mockup__canvas-area {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kinva-mockup__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    background: var(--mockup-bg-alt);
    border: 1px solid var(--mockup-border);
    border-radius: var(--mockup-radius);
    overflow: hidden;
    box-shadow: var(--mockup-shadow);
    transition: aspect-ratio 0.3s ease;
}

/* Portrait mode (v1.30.19) - for vertical background images */
.kinva-mockup__stage--portrait {
    aspect-ratio: 10/16;
    max-height: 70vh;
    width: auto;
    margin: 0 auto;
}

/* Square mode (v1.30.28) - for square crops */
.kinva-mockup__stage--square {
    aspect-ratio: 1/1;
    max-height: 70vh;
    width: auto;
    margin: 0 auto;
}

.kinva-mockup__room-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.kinva-mockup__artwork-container {
    position: absolute;
    cursor: move;
    transition: box-shadow 0.2s;
    z-index: 10;
}

.kinva-mockup__artwork-container.dragging {
    cursor: grabbing;
    opacity: 0.9;
}

.kinva-mockup__artwork-frame {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff;
}

.kinva-mockup__artwork-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Placeholder */
.kinva-mockup__artwork-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 40px;
    color: var(--mockup-text-muted);
}

.kinva-mockup__placeholder-icon {
    font-size: 4rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.kinva-mockup__artwork-placeholder p {
    margin: 0;
    font-size: 0.9375rem;
}

/* Watermark (v1.30.22 - configurable from admin) */
.kinva-mockup__watermark {
    position: absolute;
    padding: 5px 10px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 3px;
    z-index: 20;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    /* Default values - overridden by inline styles from PHP */
    bottom: 12px;
    right: 12px;
    background: #9333ea;
    color: #ffffff;
    opacity: 0.7;
}

/* FREE badge for non-pro users */
.kinva-mockup__free-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    padding: 3px 6px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: 2px;
    z-index: 20;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   PRO FRAME STYLES (v1.30.20) - Photorealistic CSS Frames
   ══════════════════════════════════════════════════════════════════════════ */

/* Base frame styling */
.kinva-mockup__artwork-frame {
    position: relative;
    box-sizing: border-box;
}

/* No frame */
.kinva-mockup__artwork-frame.frame-none {
    border: none;
    box-shadow: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   THIN BLACK - Minimalist Gallery Style
   ───────────────────────────────────────────────────────────────────────── */
.kinva-mockup__artwork-frame.frame-thin-black {
    border: 3px solid #1a1a1a;
    box-shadow: 
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ─────────────────────────────────────────────────────────────────────────
   MUSEUM BLACK - Matt Fekete with subtle depth
   ───────────────────────────────────────────────────────────────────────── */
.kinva-mockup__artwork-frame.frame-thick-black {
    border: 12px solid #1a1a1a;
    box-shadow: 
        /* Inner highlight (top-left light) */
        inset 2px 2px 0 rgba(60, 60, 60, 0.8),
        /* Inner shadow (bottom-right depth) */
        inset -2px -2px 0 rgba(0, 0, 0, 0.9),
        /* Frame depth */
        inset 4px 4px 8px rgba(0, 0, 0, 0.5),
        /* Outer shadow on wall */
        4px 6px 20px rgba(0, 0, 0, 0.4),
        2px 3px 8px rgba(0, 0, 0, 0.3);
}

/* ─────────────────────────────────────────────────────────────────────────
   GALLERY WHITE - Modern fehér with depth
   ───────────────────────────────────────────────────────────────────────── */
.kinva-mockup__artwork-frame.frame-white {
    border: 14px solid #fdfbf7;
    background: linear-gradient(145deg, #ffffff, #f5f3f0);
    box-shadow: 
        /* Inner profile highlight */
        inset 2px 2px 0 rgba(255, 255, 255, 1),
        /* Inner shadow for depth */
        inset -2px -2px 4px rgba(0, 0, 0, 0.08),
        inset 3px 3px 6px rgba(0, 0, 0, 0.05),
        /* Strong outer shadow (important on white walls!) */
        6px 8px 25px rgba(0, 0, 0, 0.25),
        3px 4px 10px rgba(0, 0, 0, 0.15);
}

/* ─────────────────────────────────────────────────────────────────────────
   VINTAGE GOLD - Antik Arany with metallic sheen
   ───────────────────────────────────────────────────────────────────────── */
.kinva-mockup__artwork-frame.frame-gold {
    border: 16px solid transparent;
    background: 
        linear-gradient(145deg, 
            #bf953f 0%, 
            #fcf6ba 25%, 
            #b38728 50%, 
            #fbf5b7 75%, 
            #aa771c 100%
        );
    background-clip: padding-box;
    position: relative;
    box-shadow: 
        /* Inner ornate depth */
        inset 3px 3px 0 rgba(255, 248, 200, 0.6),
        inset -3px -3px 0 rgba(120, 80, 20, 0.5),
        inset 5px 5px 10px rgba(0, 0, 0, 0.3),
        /* Outer shadow */
        5px 7px 20px rgba(0, 0, 0, 0.35),
        2px 3px 8px rgba(139, 90, 43, 0.3);
}

/* Gold frame inner edge detail */
.kinva-mockup__artwork-frame.frame-gold::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid rgba(255, 215, 0, 0.3);
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   WALNUT WOOD - Diófa with realistic grain texture
   ───────────────────────────────────────────────────────────────────────── */
.kinva-mockup__artwork-frame.frame-wood {
    border: 18px solid #5d3a1a;
    background: 
        /* Wood grain effect */
        repeating-linear-gradient(
            92deg,
            rgba(93, 58, 26, 1) 0px,
            rgba(74, 45, 18, 1) 2px,
            rgba(93, 58, 26, 1) 4px,
            rgba(60, 35, 12, 0.9) 6px,
            rgba(93, 58, 26, 1) 8px
        ),
        /* Base color gradient */
        linear-gradient(
            180deg,
            #6b4423 0%,
            #5d3a1a 30%,
            #4a2d12 70%,
            #3d2510 100%
        );
    background-blend-mode: overlay;
    box-shadow: 
        /* Inner profile - convex curve simulation */
        inset 4px 4px 0 rgba(139, 90, 43, 0.5),
        inset -3px -3px 0 rgba(30, 15, 5, 0.6),
        inset 6px 6px 12px rgba(0, 0, 0, 0.4),
        inset -4px -4px 8px rgba(0, 0, 0, 0.3),
        /* Outer shadow on wall */
        5px 7px 20px rgba(0, 0, 0, 0.4),
        2px 3px 8px rgba(0, 0, 0, 0.25);
}

/* ─────────────────────────────────────────────────────────────────────────
   SILVER FRAME (v1.30.24) - Modern metallic silver
   ───────────────────────────────────────────────────────────────────────── */
.kinva-mockup__artwork-frame.frame-silver {
    border: 16px solid transparent;
    background: 
        linear-gradient(
            145deg, 
            #e8e8e8 0%, 
            #c0c0c0 25%, 
            #d8d8d8 50%, 
            #a8a8a8 75%, 
            #b0b0b0 100%
        );
    background-clip: padding-box;
    position: relative;
    box-shadow: 
        inset 3px 3px 0 rgba(255, 255, 255, 0.7),
        inset -3px -3px 0 rgba(100, 100, 100, 0.5),
        inset 5px 5px 10px rgba(0, 0, 0, 0.2),
        5px 7px 20px rgba(0, 0, 0, 0.3),
        2px 3px 8px rgba(120, 120, 120, 0.3);
}

/* ─────────────────────────────────────────────────────────────────────────
   BRONZE FRAME (v1.30.24) - Warm antique bronze
   ───────────────────────────────────────────────────────────────────────── */
.kinva-mockup__artwork-frame.frame-bronze {
    border: 16px solid transparent;
    background: 
        linear-gradient(
            145deg, 
            #cd7f32 0%, 
            #e8b87a 25%, 
            #cd7f32 50%, 
            #8b5a2b 75%, 
            #a67c52 100%
        );
    background-clip: padding-box;
    position: relative;
    box-shadow: 
        inset 3px 3px 0 rgba(255, 200, 150, 0.6),
        inset -3px -3px 0 rgba(80, 40, 10, 0.5),
        inset 5px 5px 10px rgba(0, 0, 0, 0.25),
        5px 7px 20px rgba(0, 0, 0, 0.35),
        2px 3px 8px rgba(139, 90, 50, 0.3);
}

/* ─────────────────────────────────────────────────────────────────────────
   MAHOGANY FRAME (v1.30.24) - Rich reddish-brown wood
   ───────────────────────────────────────────────────────────────────────── */
.kinva-mockup__artwork-frame.frame-mahogany {
    border: 18px solid #4a0e0e;
    background: 
        repeating-linear-gradient(
            88deg,
            rgba(74, 14, 14, 1) 0px,
            rgba(92, 20, 20, 1) 2px,
            rgba(74, 14, 14, 1) 4px,
            rgba(58, 10, 10, 0.9) 6px,
            rgba(74, 14, 14, 1) 8px
        ),
        linear-gradient(
            180deg,
            #5c1414 0%,
            #4a0e0e 30%,
            #3a0808 70%,
            #2d0505 100%
        );
    background-blend-mode: overlay;
    box-shadow: 
        inset 4px 4px 0 rgba(140, 40, 40, 0.5),
        inset -3px -3px 0 rgba(20, 5, 5, 0.6),
        inset 6px 6px 12px rgba(0, 0, 0, 0.4),
        inset -4px -4px 8px rgba(0, 0, 0, 0.3),
        5px 7px 20px rgba(0, 0, 0, 0.4),
        2px 3px 8px rgba(0, 0, 0, 0.25);
}

/* ─────────────────────────────────────────────────────────────────────────
   OAK FRAME (v1.30.24) - Light natural oak wood
   ───────────────────────────────────────────────────────────────────────── */
.kinva-mockup__artwork-frame.frame-oak {
    border: 18px solid #b5894e;
    background: 
        repeating-linear-gradient(
            90deg,
            rgba(181, 137, 78, 1) 0px,
            rgba(160, 120, 65, 1) 2px,
            rgba(181, 137, 78, 1) 4px,
            rgba(145, 108, 55, 0.9) 6px,
            rgba(181, 137, 78, 1) 8px
        ),
        linear-gradient(
            180deg,
            #c9a05f 0%,
            #b5894e 30%,
            #a07840 70%,
            #8a6835 100%
        );
    background-blend-mode: overlay;
    box-shadow: 
        inset 4px 4px 0 rgba(210, 175, 120, 0.5),
        inset -3px -3px 0 rgba(100, 70, 30, 0.5),
        inset 6px 6px 12px rgba(0, 0, 0, 0.3),
        inset -4px -4px 8px rgba(0, 0, 0, 0.2),
        5px 7px 20px rgba(0, 0, 0, 0.35),
        2px 3px 8px rgba(0, 0, 0, 0.2);
}

/* ─────────────────────────────────────────────────────────────────────────
   FLOAT FRAME (v1.30.24) - Canvas floating frame with gap
   ───────────────────────────────────────────────────────────────────────── */
.kinva-mockup__artwork-frame.frame-float {
    border: 16px solid #1a1a1a;
    position: relative;
    box-shadow: 
        /* Inner gap simulation - light background visible */
        inset 0 0 0 6px #f5f5f5,
        inset 0 0 0 7px #ddd,
        /* Depth shadows */
        inset 8px 8px 0 rgba(0, 0, 0, 0.1),
        inset -2px -2px 0 rgba(255, 255, 255, 0.1),
        /* Outer shadow */
        5px 7px 20px rgba(0, 0, 0, 0.35),
        2px 3px 8px rgba(0, 0, 0, 0.2);
}

/* Float frame inner edge - creates visible gap effect */
.kinva-mockup__artwork-frame.frame-float::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   LINER / INNER FILLET (v1.30.23) - Decorative inner strip between frame and matte
   ══════════════════════════════════════════════════════════════════════════ */

/* Liner sits inside frame, wrapping around the matte */
.kinva-mockup__liner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 2;
    box-sizing: border-box;
}

/* Liner options buttons */
.kinva-mockup__liner-options {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.kinva-mockup__liner-btn {
    width: 32px;
    height: 32px;
    padding: 4px;
    background: var(--mockup-bg);
    border: 2px solid var(--mockup-border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kinva-mockup__liner-btn:hover {
    border-color: var(--mockup-primary);
}

.kinva-mockup__liner-btn.active {
    border-color: var(--mockup-primary);
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.15);
}

/* ══════════════════════════════════════════════════════════════════════════
   FRAME PROFILES (v1.30.25) - Different frame cross-section styles
   ══════════════════════════════════════════════════════════════════════════ */

/* Profile button styles */
.kinva-mockup__profile-options {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.kinva-mockup__profile-btn {
    width: 40px;
    height: 32px;
    padding: 4px;
    background: var(--mockup-bg);
    border: 2px solid var(--mockup-border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kinva-mockup__profile-btn:hover {
    border-color: var(--mockup-primary);
}

.kinva-mockup__profile-btn.active {
    border-color: var(--mockup-primary);
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.15);
}

.kinva-mockup__profile-btn svg {
    width: 28px;
    height: 20px;
}

/* Profile: Flat (default) - simple flat frame */
.kinva-mockup__artwork-frame.profile-flat {
    /* Default - no additional styling needed */
}

/* Profile: Scoop - concave curve, light center */
.kinva-mockup__artwork-frame.profile-scoop {
    box-shadow: 
        /* Concave inner shadow - darker at edges, lighter in center */
        inset 8px 8px 12px rgba(0, 0, 0, 0.4),
        inset -8px -8px 12px rgba(0, 0, 0, 0.3),
        inset 0 0 20px rgba(255, 255, 255, 0.15),
        /* Outer shadow */
        5px 7px 20px rgba(0, 0, 0, 0.35),
        2px 3px 8px rgba(0, 0, 0, 0.2);
}

/* Profile: Reverse - convex curve, shadow in center */
.kinva-mockup__artwork-frame.profile-reverse {
    box-shadow: 
        /* Convex inner shadow - lighter at edges, darker in center */
        inset 4px 4px 0 rgba(255, 255, 255, 0.3),
        inset -4px -4px 0 rgba(255, 255, 255, 0.2),
        inset 0 0 30px rgba(0, 0, 0, 0.35),
        /* Outer shadow */
        5px 7px 20px rgba(0, 0, 0, 0.35),
        2px 3px 8px rgba(0, 0, 0, 0.2);
}

/* Profile: Ornate - multi-layered decorative */
.kinva-mockup__artwork-frame.profile-ornate {
    box-shadow: 
        /* Multiple inner ridges */
        inset 3px 3px 0 rgba(255, 255, 255, 0.4),
        inset 6px 6px 0 rgba(0, 0, 0, 0.15),
        inset 9px 9px 0 rgba(255, 255, 255, 0.2),
        inset -3px -3px 0 rgba(0, 0, 0, 0.3),
        inset -6px -6px 0 rgba(255, 255, 255, 0.1),
        inset -9px -9px 0 rgba(0, 0, 0, 0.2),
        /* Outer shadow */
        5px 7px 20px rgba(0, 0, 0, 0.4),
        2px 3px 8px rgba(0, 0, 0, 0.25);
}

/* ══════════════════════════════════════════════════════════════════════════
   CANVAS TEXTURE (v1.30.25, v1.30.27) - Dense fabric weave on passepartout
   ══════════════════════════════════════════════════════════════════════════ */

/* Canvas texture applied to matte-wrapper - only visible on matte padding area */
/* v1.30.27: Made 10-20x denser for realistic linen/canvas appearance */
.kinva-mockup__matte-wrapper.has-canvas-texture.has-matte {
    /* Override the default cardboard texture with dense canvas weave */
    background-image: 
        /* Horizontal threads - fine weave (0.2px period = ~15x denser than before) */
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 0.12px,
            rgba(60, 45, 30, 0.12) 0.12px,
            rgba(60, 45, 30, 0.12) 0.2px
        ),
        /* Vertical threads - fine weave */
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 0.12px,
            rgba(60, 45, 30, 0.12) 0.12px,
            rgba(60, 45, 30, 0.12) 0.2px
        ),
        /* Secondary diagonal texture for depth */
        repeating-linear-gradient(
            45deg,
            transparent 0px,
            transparent 0.3px,
            rgba(255, 255, 255, 0.04) 0.3px,
            rgba(255, 255, 255, 0.04) 0.4px
        ),
        /* Counter-diagonal for cross-hatch effect */
        repeating-linear-gradient(
            -45deg,
            transparent 0px,
            transparent 0.3px,
            rgba(0, 0, 0, 0.03) 0.3px,
            rgba(0, 0, 0, 0.03) 0.4px
        ),
        /* Base noise texture */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.06'/%3E%3C/svg%3E");
}

/* Canvas field UI */
.kinva-mockup__canvas-field {
    border-top: 1px solid var(--mockup-border);
    padding-top: 12px;
    margin-top: 8px;
}

.kinva-mockup__canvas-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ══════════════════════════════════════════════════════════════════════════
   GLASS EFFECT (v1.30.23) - Realistic glass reflection
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-mockup__glass {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 15;
    overflow: hidden;
}

/* Main diagonal shine streak */
.kinva-mockup__glass-shine {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        125deg,
        transparent 0%,
        transparent 40%,
        rgba(255, 255, 255, 0.08) 45%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.08) 55%,
        transparent 60%,
        transparent 100%
    );
    transform: rotate(-15deg);
    animation: glass-shimmer 8s ease-in-out infinite;
}

@keyframes glass-shimmer {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
}

/* Edge reflection - subtle highlight at top-left */
.kinva-mockup__glass-edge {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.06) 0%,
        transparent 100%
    );
}

/* Glass toggle UI */
.kinva-mockup__glass-field {
    border-top: 1px solid var(--mockup-border);
    padding-top: 12px;
    margin-top: 8px;
}

.kinva-mockup__glass-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kinva-field-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--mockup-text-muted);
    margin-top: 4px;
}

/* Slider row for frame width */
.kinva-mockup__slider-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kinva-mockup__slider-row .kinva-range {
    flex: 1;
}

.kinva-mockup__slider-value {
    min-width: 45px;
    text-align: right;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mockup-text);
}

/* ══════════════════════════════════════════════════════════════════════════
   PRO PASSEPARTOUT / MATTE (v1.30.20) - Realistic Bevel Cut Effect
   ══════════════════════════════════════════════════════════════════════════ */

/* Matte wrapper - sits between frame and artwork image */
.kinva-mockup__matte-wrapper {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: padding 0.3s ease, background-color 0.3s ease;
}

.kinva-mockup__matte-wrapper.has-matte {
    background-color: #fdfbf7; /* Default off-white */
    /* Bevel cut simulation - light comes from top-left */
    box-shadow: 
        /* Outer bevel - light edge (top, left) */
        inset 3px 3px 0 rgba(255, 255, 255, 0.7),
        /* Outer bevel - shadow edge (bottom, right) */
        inset -2px -2px 0 rgba(180, 175, 165, 0.5),
        /* Inner depth shadow */
        inset 4px 4px 8px rgba(0, 0, 0, 0.12),
        inset -2px -2px 4px rgba(0, 0, 0, 0.05);
    /* Subtle cardboard texture */
    background-image: 
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
}

/* Matte inner - contains the actual artwork */
.kinva-mockup__matte-inner {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* Artwork casts shadow onto the matte */
.kinva-mockup__matte-wrapper.has-matte .kinva-mockup__matte-inner {
    box-shadow: 
        /* Drop shadow from artwork onto matte */
        2px 2px 6px rgba(0, 0, 0, 0.2),
        1px 1px 3px rgba(0, 0, 0, 0.15);
}

/* Inner bevel line - the 45° cut edge */
.kinva-mockup__matte-wrapper.has-matte .kinva-mockup__matte-inner::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px solid transparent;
    border-top-color: rgba(255, 255, 255, 0.4);
    border-left-color: rgba(255, 255, 255, 0.3);
    border-bottom-color: rgba(0, 0, 0, 0.1);
    border-right-color: rgba(0, 0, 0, 0.08);
    pointer-events: none;
}

/* Toggle Switch */
.kinva-mockup__matte-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.kinva-toggle {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}

.kinva-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.kinva-toggle__slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e5e7eb;
    border-radius: 26px;
    transition: 0.3s;
}

.kinva-toggle__slider::before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.kinva-toggle input:checked + .kinva-toggle__slider {
    background-color: var(--mockup-primary);
}

.kinva-toggle input:checked + .kinva-toggle__slider::before {
    transform: translateX(22px);
}

/* Matte Options Panel */
.kinva-mockup__matte-options {
    padding: 12px;
    background: var(--mockup-bg-alt);
    border-radius: 8px;
    margin-top: 8px;
}

.kinva-mockup__matte-width-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.kinva-label-sm {
    font-size: 0.75rem;
    color: var(--mockup-text-muted);
    min-width: 60px;
}

.kinva-range--sm {
    flex: 1;
    height: 6px;
}

.kinva-mockup__matte-value {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mockup-text);
    min-width: 40px;
    text-align: right;
}

/* Matte Color Picker */
.kinva-mockup__matte-colors {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.kinva-mockup__matte-color {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--mockup-border);
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.kinva-mockup__matte-color:hover {
    transform: scale(1.1);
}

.kinva-mockup__matte-color.active {
    border-color: var(--mockup-primary);
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.2),
                inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* Matte Field Container */
.kinva-mockup__matte-field {
    border-top: 1px solid var(--mockup-border);
    padding-top: 16px;
    margin-top: 8px;
}

/* Matte Color Row (v1.30.24) */
.kinva-mockup__matte-color-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

/* Double Matte Section (v1.30.24) */
.kinva-mockup__double-matte {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--mockup-border);
}

.kinva-mockup__double-matte-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kinva-mockup__inner-matte-options {
    margin-top: 8px;
}

/* Inner Matte Color Picker */
.kinva-mockup__inner-matte-color {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--mockup-border);
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.kinva-mockup__inner-matte-color:hover {
    transform: scale(1.1);
}

.kinva-mockup__inner-matte-color.active {
    border-color: var(--mockup-primary);
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.2),
                inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* Inner Matte Element (rendered by JS) */
.kinva-mockup__inner-matte {
    position: absolute;
    pointer-events: none;
    box-shadow: 
        inset 1px 1px 3px rgba(0, 0, 0, 0.15),
        inset -1px -1px 2px rgba(255, 255, 255, 0.2);
}

/* Small toggle for nested options */
.kinva-toggle--sm {
    transform: scale(0.85);
}

/* Wall Color Picker (v1.30.20) */
.kinva-mockup__wall-colors {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.kinva-mockup__wall-color {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--mockup-border);
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.kinva-mockup__wall-color:hover {
    transform: scale(1.15);
}

.kinva-mockup__wall-color.active {
    border-color: var(--mockup-primary);
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.2),
                inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* Dark wall colors need light border */
.kinva-mockup__wall-color[data-wall-color="#2d3436"],
.kinva-mockup__wall-color[data-wall-color="#1a1a2e"],
.kinva-mockup__wall-color[data-wall-color="#4a6741"] {
    border-color: rgba(255, 255, 255, 0.3);
}

.kinva-mockup__wall-color-field {
    border-top: 1px solid var(--mockup-border);
    padding-top: 12px;
}

/* Original wall color button - special styling (v1.30.27) */
.kinva-mockup__wall-color--original {
    background: linear-gradient(135deg, #e8e8e8 25%, #d0d0d0 25%, #d0d0d0 50%, #e8e8e8 50%, #e8e8e8 75%, #d0d0d0 75%);
    background-size: 8px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   GUIDES / SEGÉDVONALAK (v1.30.21)
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-mockup__guides {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 5;
}

.kinva-mockup__guide {
    position: absolute;
    background: rgba(147, 51, 234, 0.5);
}

/* Center lines - more visible */
.kinva-mockup__guide--h-center {
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: rgba(147, 51, 234, 0.7);
    box-shadow: 0 0 4px rgba(147, 51, 234, 0.5);
}

.kinva-mockup__guide--v-center {
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(147, 51, 234, 0.7);
    box-shadow: 0 0 4px rgba(147, 51, 234, 0.5);
}

/* Rule of thirds - less visible */
.kinva-mockup__guide--h-third-1 {
    left: 0;
    right: 0;
    top: 33.33%;
    height: 1px;
    background: rgba(147, 51, 234, 0.3);
}

.kinva-mockup__guide--h-third-2 {
    left: 0;
    right: 0;
    top: 66.66%;
    height: 1px;
    background: rgba(147, 51, 234, 0.3);
}

.kinva-mockup__guide--v-third-1 {
    top: 0;
    bottom: 0;
    left: 33.33%;
    width: 1px;
    background: rgba(147, 51, 234, 0.3);
}

.kinva-mockup__guide--v-third-2 {
    top: 0;
    bottom: 0;
    left: 66.66%;
    width: 1px;
    background: rgba(147, 51, 234, 0.3);
}

/* Guides toggle */
.kinva-mockup__guides-toggle {
    margin-top: 8px;
}

.kinva-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--mockup-text-muted);
    cursor: pointer;
}

.kinva-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.kinva-checkbox-label:hover {
    color: var(--mockup-text);
}

/* ══════════════════════════════════════════════════════════════════════════
   RESIZE HANDLES (v1.30.28)
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-mockup__resize-handles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 25;
}

.kinva-mockup__resize-handle {
    position: absolute;
    width: 16px;
    height: 16px;
    background: var(--mockup-primary);
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s, background 0.15s;
    opacity: 0;
}

.kinva-mockup__artwork:hover .kinva-mockup__resize-handle,
.kinva-mockup__artwork.resizing .kinva-mockup__resize-handle {
    opacity: 1;
}

.kinva-mockup__resize-handle:hover {
    transform: scale(1.2);
    background: #7c3aed;
}

.kinva-mockup__resize-handle--nw {
    top: -8px;
    left: -8px;
    cursor: nwse-resize;
}

.kinva-mockup__resize-handle--ne {
    top: -8px;
    right: -8px;
    cursor: nesw-resize;
}

.kinva-mockup__resize-handle--sw {
    bottom: -8px;
    left: -8px;
    cursor: nesw-resize;
}

.kinva-mockup__resize-handle--se {
    bottom: -8px;
    right: -8px;
    cursor: nwse-resize;
}

.kinva-mockup__artwork.resizing {
    cursor: grabbing;
}

.kinva-mockup__artwork.resizing .kinva-mockup__resize-handle {
    background: #7c3aed;
}

/* ══════════════════════════════════════════════════════════════════════════
   CROP MODE → ASPECT RATIO SYSTEM (v1.30.28 - Gemini Fix)
   ══════════════════════════════════════════════════════════════════════════ */

/* Remove old crop overlay styles - keeping for reference but won't be used */
.kinva-mockup__crop-overlay {
    display: none !important; /* Disabled - using aspect ratio instead */
}

/* Stage base - always cover and clip overflow */
/* Stage base - already has aspect-ratio: 16/10 defined above */
.kinva-mockup__stage {
    transition: aspect-ratio 0.3s ease, max-width 0.3s ease;
}

/* Aspect ratio presets (v1.30.28 - Gemini Fix) */
.kinva-mockup__stage.is-landscape {
    aspect-ratio: 16/10;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.kinva-mockup__stage.is-square {
    aspect-ratio: 1/1;
    width: 100%;
    max-width: 600px;
    height: auto;
    margin: 0 auto;
}

.kinva-mockup__stage.is-portrait-crop {
    aspect-ratio: 9/16;
    width: 100%;
    max-width: 400px;
    max-height: 70vh;
    height: auto;
    margin: 0 auto;
}

/* Background drag mode */
.kinva-mockup__stage.is-bg-dragging {
    cursor: grab;
}

.kinva-mockup__stage.is-bg-dragging:active {
    cursor: grabbing;
}

.kinva-mockup__stage.is-bg-dragging .kinva-mockup__artwork-container {
    pointer-events: none; /* Don't interfere with bg drag */
}

/* Aspect ratio toolbar */
.kinva-mockup__aspect-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
}

.kinva-mockup__aspect-label {
    font-size: 0.8rem;
    color: var(--mockup-text-muted);
    margin-right: 4px;
}

.kinva-mockup__aspect-btn {
    padding: 6px 12px;
    border: 1px solid var(--mockup-border);
    background: var(--mockup-surface);
    color: var(--mockup-text);
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.kinva-mockup__aspect-btn:hover {
    border-color: var(--mockup-primary);
    color: var(--mockup-primary);
}

.kinva-mockup__aspect-btn.active {
    background: var(--mockup-primary);
    border-color: var(--mockup-primary);
    color: #fff;
}

.kinva-mockup__aspect-icon {
    width: 16px;
    height: 16px;
    border: 1.5px solid currentColor;
    border-radius: 2px;
}

.kinva-mockup__aspect-btn[data-aspect="landscape"] .kinva-mockup__aspect-icon {
    width: 20px;
    height: 12px;
}

.kinva-mockup__aspect-btn[data-aspect="square"] .kinva-mockup__aspect-icon {
    width: 14px;
    height: 14px;
}

.kinva-mockup__aspect-btn[data-aspect="portrait"] .kinva-mockup__aspect-icon {
    width: 10px;
    height: 18px;
}

/* Background position button */
.kinva-mockup__bg-drag-btn {
    margin-left: auto;
}

.kinva-mockup__bg-drag-btn.active {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #fff;
}

/* Toolbar */
.kinva-mockup__toolbar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Info bar */
.kinva-mockup__info {
    display: flex;
    gap: 20px;
    font-size: 0.875rem;
    color: var(--mockup-text-muted);
}

.kinva-mockup__info-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ══════════════════════════════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-mockup__sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kinva-mockup__section {
    background: var(--mockup-bg);
    border: 1px solid var(--mockup-border);
    border-radius: var(--mockup-radius);
    padding: 16px;
}

.kinva-mockup__section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mockup-text);
}

/* Room Grid */
.kinva-mockup__room-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.kinva-mockup__room-thumb {
    position: relative;
    aspect-ratio: 16/10;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.kinva-mockup__room-thumb:hover {
    border-color: var(--mockup-primary-light);
    transform: scale(1.02);
}

.kinva-mockup__room-thumb.active {
    border-color: var(--mockup-primary);
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.2);
}

.kinva-mockup__room-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kinva-mockup__room-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4px 6px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kinva-mockup__room-width {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--mockup-text);
    font-size: 0.625rem;
    font-weight: 600;
    border-radius: 4px;
}

.kinva-mockup__custom-upload {
    margin-top: 12px;
}

/* Artwork Selector */
.kinva-mockup__artwork-select {
    width: 100%;
    padding: 10px 12px;
    font-size: 0.875rem;
    border: 1px solid var(--mockup-border);
    border-radius: 8px;
    background: var(--mockup-bg);
}

.kinva-mockup__artwork-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 10px;
    background: var(--mockup-bg-alt);
    border-radius: 8px;
}

.kinva-mockup__artwork-preview img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
}

.kinva-mockup__artwork-details {
    flex: 1;
    min-width: 0;
}

.kinva-mockup__artwork-details strong {
    display: block;
    font-size: 0.875rem;
    color: var(--mockup-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kinva-mockup__artwork-details span {
    font-size: 0.75rem;
    color: var(--mockup-text-muted);
}

/* Manual Dimensions */
.kinva-mockup__dims-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kinva-mockup__dims-row input {
    width: 70px;
    padding: 8px;
    text-align: center;
    font-size: 0.875rem;
}

.kinva-mockup__dims-row span {
    color: var(--mockup-text-muted);
    font-size: 0.875rem;
}

/* Direct Upload (v1.30.19) */
.kinva-mockup__direct-upload {
    margin-bottom: 12px;
}

.kinva-mockup__upload-btn {
    transition: all 0.2s;
}

.kinva-mockup__upload-btn:hover {
    background: var(--mockup-primary);
    color: white;
    border-color: var(--mockup-primary);
}

.kinva-mockup__uploaded-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #166534;
    background: #f0fdf4;
    border: 1px solid #86efac;
}

.kinva-mockup__separator {
    position: relative;
}

.kinva-mockup__separator::before,
.kinva-mockup__separator::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 35%;
    height: 1px;
    background: var(--mockup-border);
}

.kinva-mockup__separator::before {
    left: 0;
}

.kinva-mockup__separator::after {
    right: 0;
}

/* Frame Options */
.kinva-mockup__frame-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.kinva-mockup__frame-btn {
    width: 40px;
    height: 40px;
    padding: 6px;
    background: var(--mockup-bg);
    border: 2px solid var(--mockup-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kinva-mockup__frame-btn:hover {
    border-color: var(--mockup-primary-light);
}

.kinva-mockup__frame-btn.active {
    border-color: var(--mockup-primary);
    background: rgba(147, 51, 234, 0.05);
}

/* Tips */
.kinva-mockup__tips {
    padding: 12px 16px;
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    border: 1px solid #93c5fd;
    border-radius: var(--mockup-radius);
    font-size: 0.8125rem;
    color: #1e40af;
}

.kinva-mockup__tips p {
    margin: 0;
    line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .kinva-mockup__layout {
        grid-template-columns: 1fr;
    }
    
    /* Sticky canvas on mobile */
    .kinva-mockup__canvas-area {
        position: sticky;
        top: 0;
        z-index: 100;
        background: var(--mockup-bg);
        padding: 12px;
        margin: -24px -24px 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    .kinva-mockup__stage {
        aspect-ratio: 4/3;
    }
    
    /* Portrait mode on mobile (v1.30.19) */
    .kinva-mockup__stage--portrait {
        aspect-ratio: 3/4;
        max-height: 50vh;
        width: auto;
    }
    
    .kinva-mockup__sidebar {
        padding-bottom: 60px;
    }
}

@media (max-width: 600px) {
    .kinva-mockup {
        padding: 12px;
    }
    
    .kinva-mockup__header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .kinva-mockup__room-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .kinva-mockup__toolbar {
        flex-direction: column;
    }
    
    .kinva-mockup__toolbar .kinva-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   DIVI FIXED HEADER COMPATIBILITY
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    --divi-header-height: 80px;
    --divi-header-height-mobile: 60px;
}

body.et_fixed_nav .kinva-mockup {
    padding-top: var(--divi-header-height);
}

@media (max-width: 980px) {
    body.et_fixed_nav .kinva-mockup {
        padding-top: var(--divi-header-height-mobile);
    }
    
    body.et_fixed_nav .kinva-mockup__canvas-area {
        top: var(--divi-header-height-mobile);
    }
}