/*==============================================================
Interactive Colour Preview
==============================================================*/

    /*==============================================================
    COLOUR VISUALIZER
    ==============================================================*/
    .visualizer-section{
        position:relative;
        background:#fafafa;
        overflow:hidden;
    }

    .visualizer-wrapper{
        display:grid;
        grid-template-columns:1.35fr .9fr;
        gap:60px;
        align-items:center;
        margin-top:60px;
    }

    /*==============================================================
    ROOM PREVIEW
    ==============================================================*/
    .visualizer-preview{
        position:relative;
    }

    .room-preview{
        position:relative;
        height:620px;
        border-radius:34px;
        overflow:hidden;
        background:#f3f3f3;
        box-shadow:
            0 30px 70px rgba(0,0,0,.10);
    }

    /*==============================================================
    CEILING
    ==============================================================*/
    .room-ceiling{
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:80px;
        background:#fdfdfd;
        border-bottom:1px solid rgba(0,0,0,.05);
    }

    /*==============================================================
    WALL
    ==============================================================*/
    .room-wall{
        position:absolute;
        left:0;
        top:80px;
        width:100%;
        height:380px;
        background:#F7F7F2;
        transition:
            background .45s ease;
    }

    /*==============================================================
    WINDOW
    ==============================================================*/
    .room-window{
        position:absolute;
        right:80px;
        top:120px;
        width:150px;
        height:170px;
        background:#dfefff;
        border-radius:8px;
        overflow:hidden;
        border:8px solid #fff;
        box-shadow:0 12px 30px rgba(0,0,0,.10);
    }

    .window-frame{
        position:absolute;
        inset:0;
        border:3px solid #fff;
    }

    .window-frame::before{
        content:"";
        position:absolute;
        left:50%;
        top:0;
        width:3px;
        height:100%;
        background:#fff;
    }

    .window-frame::after{
        content:"";
        position:absolute;
        top:50%;
        left:0;
        width:100%;
        height:3px;
        background:#fff;
    }

    .window-light{
        position:absolute;
        inset:0;
        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,.55),
                transparent
            );
    }

    /*==============================================================
    PAINTING
    ==============================================================*/
    .room-painting{
        position:absolute;
        left:80px;
        top:140px;
    }

    .painting-frame{
        width:130px;
        height:100px;
        background:#fff;
        border:8px solid #7f5c39;
        display:flex;
        justify-content:center;
        align-items:center;
        box-shadow:0 10px 25px rgba(0,0,0,.12);
    }

    .painting-frame i{
        font-size:36px;
        color:#bbb;
    }

    /*==============================================================
    PLANT
    ==============================================================*/
    .room-plant{
        position:absolute;
        left:70px;
        bottom:110px;
        width:70px;
        height:100px;
        display:flex;
        justify-content:center;
        align-items:flex-end;
        font-size:54px;
        color:#4CAF50;
    }

    /*==============================================================
    SOFA
    ==============================================================*/
    .room-sofa{
        position:absolute;
        left:50%;
        bottom:70px;
        transform:translateX(-50%);
        width:320px;
        height:170px;
    }

    .sofa-back{
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:85px;
        background:#b68d63;
        border-radius:22px 22px 10px 10px;
    }

    .sofa-seat{
        position:absolute;
        left:0;
        bottom:30px;
        width:100%;
        height:75px;
        background:#9f7651;
        border-radius:14px;
    }

    .sofa-leg{
        position:absolute;
        bottom:0;
        width:12px;
        height:32px;
        background:#555;
        border-radius:6px;
    }

    .sofa-leg.left{
        left:40px;
    }

    .sofa-leg.right{
        right:40px;
    }

    /*==============================================================
    FLOOR
    ==============================================================*/
    .room-floor{
        position:absolute;
        left:0;
        bottom:0;
        width:100%;
        height:90px;
        background:
            linear-gradient(
                #ccb08c,
                #b38d64
            );
    }

    /*==============================================================
    SIDEBAR
    ==============================================================*/
    .visualizer-sidebar{
        display:flex;
        flex-direction:column;
    }

    .visualizer-tag{
        display:inline-flex;
        width:max-content;
        padding:8px 18px;
        border-radius:999px;
        background:#fff1f1;
        color:var(--primary);
        font-size:12px;
        font-weight:700;
        letter-spacing:1px;
        text-transform:uppercase;
        margin-bottom:18px;
    }

    .visualizer-sidebar h3{
        font-size:40px;
        line-height:1.2;
        margin-bottom:20px;
    }

    .visualizer-sidebar p{
        color:#666;
        line-height:1.9;
        margin-bottom:35px;
    }

    /*==============================================================
    ROOM BUTTONS
    ==============================================================*/
    .room-selector{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:16px;
        margin-bottom:35px;
    }

    .room-btn{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:10px;
        min-height:58px;
        padding:12px 22px;
        border:none;
        border-radius:999px;
        background:#fff;
        color:#222;
        font-size:14px;
        font-weight:600;
        line-height:1.2;
        cursor:pointer;
        box-shadow:0 10px 25px rgba(0,0,0,.06);
        transition:all .3s ease;
    }

    .room-btn i{
        font-size:18px;
        flex-shrink:0;
    }

    /* Hover */
    .room-btn:hover{
        background:#E31E24;
        color:#fff;
        transform:translateY(-3px);
        box-shadow:0 15px 35px rgba(227,30,36,.25);
    }

    /* Active */
    .room-btn.active{
        background:#E31E24;
        color:#fff;
        box-shadow:0 15px 35px rgba(227,30,36,.30);
    }

    .room-btn.active i{
        color:#fff;
        transform:scale(1.1);
    }

    .room-btn.active,
    .room-btn:hover{
        background:var(--primary);
        color:#fff;
    }

    @media (max-width:991px){
            .room-selector{
                grid-template-columns:repeat(2,1fr);
            }
        }
    @media (max-width:576px){
        .room-selector{
            grid-template-columns:1fr;
        }
    }

    /*==============================================================
    COLOUR PALETTE
    ==============================================================*/
    .visualizer-palette{
        background:#fff;
        border-radius:24px;
        padding:28px;
        border:1px solid #ececec;
        box-shadow:0 15px 40px rgba(0,0,0,.05);
        margin-bottom:28px;
    }

    .palette-header{
        display:flex;
        justify-content:space-between;
        align-items:flex-end;
        margin-bottom:24px;
    }

    .palette-header h5{
        margin:0;
        font-size:22px;
        font-weight:700;
    }

    .palette-header span{
        font-size:13px;
        color:#888;
    }

    .palette-grid{
        display:grid;
        grid-template-columns:repeat(6,1fr);
        gap:18px;
    }

    .colour-swatch{
        width:58px;
        height:58px;
        border-radius:50%;
        border:4px solid #fff;
        cursor:pointer;
        position:relative;
        transition:.35s;
        box-shadow:0 8px 20px rgba(0,0,0,.12);
    }

    .colour-swatch:hover{
        transform:scale(1.18);
    }

    .colour-swatch.active{
        transform:scale(1.18);
        box-shadow:
            0 0 0 4px var(--primary),
            0 10px 28px rgba(0,0,0,.18);
    }

    .colour-swatch::after{
        content:"";
        position:absolute;
        inset:-8px;
        border-radius:50%;
        border:2px dashed rgba(227,30,36,.25);
        opacity:0;
        transition:.35s;
    }

    .colour-swatch.active::after{
        opacity:1;
    }

    /*==============================================================
    SELECTED COLOUR
    ==============================================================*/
    .selected-colour{
        background:#fff;
        border-radius:22px;
        padding:26px;
        border:1px solid #ececec;
        margin-bottom:25px;
        box-shadow:0 10px 35px rgba(0,0,0,.05);
    }

    .selected-colour span{
        display:block;
        font-size:12px;
        text-transform:uppercase;
        letter-spacing:2px;
        color:var(--primary);
        font-weight:700;
        margin-bottom:10px;
    }

    .selected-colour h4{
        margin:0;
        font-size:30px;
        font-weight:700;
    }

    .selected-colour small{
        display:block;
        margin-top:8px;
        color:#888;
        font-size:15px;

    }

    .selected-hex{
        margin-top:20px;
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:14px 18px;
        border-radius:16px;
        background:#fafafa;
    }

    .selected-hex span{
        margin:0;
        color:#222;
        font-size:16px;
        letter-spacing:1px;
    }

    #copyHex{
        width:42px;
        height:42px;
        border:none;
        border-radius:12px;
        background:var(--primary);
        color:#fff;
        transition:.3s;
    }

    #copyHex:hover{
        transform:scale(1.08);
    }

    /*==============================================================
    ACTION BUTTONS
    ==============================================================*/
    .visualizer-action{
        display:flex;
        gap:16px;
        margin-bottom:35px;
    }

    .visualizer-action .visualizer-btn-primary{
        flex:1;
    }

    .visualizer-btn{
        border:none;
        border-radius:16px;
        padding:14px 24px;
        font-weight:600;
        transition:.35s;
        cursor:pointer;
    }

    .visualizer-btn-primary{
        flex:1;
        background:var(--primary);
        color:#fff;
    }

    .visualizer-action .visualizer-btn-outline{
        flex:1;
    }

    .visualizer-btn-outline{
        flex:1;
        background:#fff;
        border:2px solid #ddd;
        color:#222;
    }

    .visualizer-link{
        display:inline-flex;
        align-items:center;
        gap:10px;
        color:var(--primary);
        font-weight:700;
        text-decoration:none;
    }

    .room-btn,
    .colour-swatch,
    #copyHex,
    #applyColour,
    #resetColour{
        appearance:none;
        -webkit-appearance:none;
        outline:none;
        border:none;
    }

    .room-bed,
    .room-office,
    .room-house{
        display:none;
    }

    /*==============================================================
    FEATURES
    ==============================================================*/
    .visualizer-feature{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:14px;
        margin-bottom:35px;
    }

    .visualizer-feature div{
        display:flex;
        align-items:center;
        gap:12px;
        background:#fff;
        border:1px solid #eee;
        border-radius:16px;
        padding:16px;
        font-weight:600;
        transition:.3s;
    }

    .visualizer-feature div:hover{
        transform:translateY(-4px);
        border-color:rgba(227,30,36,.25);
        box-shadow:0 12px 28px rgba(0,0,0,.08);
    }

    .visualizer-feature i{
        color:var(--primary);
        font-size:18px;
    }

    /*==============================================================
    FOOTER
    ==============================================================*/
    .visualizer-footer{
        padding-top:10px;
    }

    .visualizer-footer .btn-link{
        display:inline-flex;
        align-items:center;
        gap:10px;
        color:var(--primary);
        font-weight:700;
        transition:.3s;
    }

    .visualizer-footer .btn-link i{
        transition:.3s;
    }

    .visualizer-footer .btn-link:hover i{
        transform:translateX(6px);
    }

    /*==============================================================
    RESPONSIVE
    ==============================================================*/
    @media(max-width:1200px){

        .visualizer-wrapper{
            grid-template-columns:1fr;
            gap:40px;
        }

    }

    @media(max-width:768px){
        .palette-grid{
            grid-template-columns:repeat(4,1fr);
            justify-items:center;
        }

        .visualizer-action{
            flex-direction:column;
        }

        .visualizer-feature{
            grid-template-columns:1fr;
        }

        .selected-colour h4{
            font-size:24px;
        }

        .visualizer-sidebar h3{
            font-size:30px;
        }

    }

    @media(max-width:480px){

        .palette-grid{
            grid-template-columns:repeat(3,1fr);
        }

        .colour-swatch{
            width:52px;
            height:52px;
        }
    }

    /*==============================================================
    ACTIVE BUTTON
    ==============================================================*/
    #applyColour,
    #resetColour{
        transition:.35s;
    }

    #applyColour:hover{
        transform:translateY(-3px);
    }

    #resetColour:hover{
        transform:translateY(-3px);
    }

    /*==============================================================
    ROOM
    ==============================================================*/
    .room-preview{
        transition:
            transform .25s ease,
            box-shadow .35s ease;
    }

    .room-wall{
        transition:
            background .45s ease;
    }

    .room-scene{
        display:none;
        animation:fadeRoom .35s;
    }

    .room-scene.active{
        display:block;
    }

    @keyframes fadeRoom{
        from{
            opacity:0;
            transform:translateY(15px);
        }
        to{
            opacity:1;
            transform:none;
        }
    }

    .room-sofa,
    .room-bed,
    .room-office,
    .room-house{
        transition:.35s;
        animation:roomFade .35s;
    }

    @keyframes roomFade{
        from{
            opacity:0;
            transform:translateY(25px);
        }

        to{
            opacity:1;
            transform:none;
        }
    }


    /*==============================================================
    BEDROOM
    ==============================================================*/
    .room-bed{
        position:absolute;
        left:50%;
        bottom:70px;
        transform:translateX(-50%);
        width:360px;
        height:220px;
        z-index:10;
    }

    /*==============================================================
    HEADBOARD
    ==============================================================*/
    .bed-head{
        position:absolute;
        top:0;
        left:50%;
        transform:translateX(-50%);
        width:300px;
        height:65px;
        background:#8B6B4A;
        border-radius:22px 22px 8px 8px;
        box-shadow:
            0 12px 25px rgba(0,0,0,.15);
    }

    /*==============================================================
    MATTRESS
    ==============================================================*/
    .bed-body{
        position:absolute;
        top:45px;
        left:50%;
        transform:translateX(-50%);
        width:330px;
        height:135px;
        background:#f6f6f6;
        border-radius:16px;
        box-shadow:
            0 12px 30px rgba(0,0,0,.12);
    }

    .bed-body::before{
        content:"";
        position:absolute;
        inset:10px;
        border-radius:12px;
        background:#ffffff;
    }

    /*==============================================================
    PILLOW
    ==============================================================*/
    .bed-pillow{
        position:absolute;
        top:62px;
        width:72px;
        height:36px;
        background:#fff;
        border-radius:10px;
        box-shadow:
            0 6px 15px rgba(0,0,0,.08);
    }

    .bed-pillow.left{
        left:80px;
    }

    .bed-pillow.right{
        right:80px;
    }

    /*==============================================================
    BLANKET
    ==============================================================*/
    .bed-body::after{
        content:"";
        position:absolute;
        left:12px;
        right:12px;
        bottom:12px;
        height:72px;
        border-radius:12px;
        background:linear-gradient(
            180deg,
            #D7E6F8,
            #B8D4F0
        );
    }

    /*==============================================================
    BEDSIDE TABLE
    ==============================================================*/
    .bed-table{
        position:absolute;
        bottom:48px;
        width:58px;
        height:60px;
        background:#A17852;
        border-radius:8px;
    }

    .bed-table.left{
        left:-35px;
    }

    .bed-table.right{
        right:-35px;
    }

    .bed-table::before{
        content:"";
        position:absolute;
        left:10px;
        right:10px;
        bottom:-18px;
        height:18px;
        background:#6E4E31;
    }

    /*==============================================================
    LAMP
    ==============================================================*/
    .bed-lamp{
        position:absolute;
        bottom:60px;
        width:16px;
        height:45px;
        background:#555;
    }

    .bed-lamp.left{
        left:-8px;
    }

    .bed-lamp.right{
        right:-8px;
    }

    .bed-lamp::before{
        content:"";
        position:absolute;
        left:-14px;
        top:-22px;
        width:44px;
        height:24px;
        background:#FFF3D6;
        border-radius:50% 50% 6px 6px;
        box-shadow:
            0 0 20px rgba(255,235,170,.4);
    }

    /*==============================================================
    CARPET
    ==============================================================*/
    .room-bed::after{
        content:"";
        position:absolute;
        left:50%;
        bottom:-22px;
        transform:translateX(-50%);
        width:390px;
        height:32px;
        border-radius:50%;
        background:rgba(0,0,0,.10);
        filter:blur(8px);
    }

    /*==============================================================
    ANIMATION
    ==============================================================*/
    .room-bed{
        animation:fadeRoom .45s;
    }

    .room-bed *{
        transition:.35s;
    }

    .room-bed:hover{
        transform:
            translateX(-50%)
            translateY(-5px);
    }

    /*==============================================================
    OFFICE
    ==============================================================*/
    .room-office{
        position:absolute;
        left:50%;
        bottom:65px;
        transform:translateX(-50%);
        width:420px;
        height:260px;
        z-index:15;
    }

    /*==============================================================
    DESK
    ==============================================================*/
    .office-table{
        position:absolute;
        bottom:40px;
        left:50%;
        transform:translateX(-50%);
        width:330px;
        height:18px;
        background:#A67C52;
        border-radius:10px;
        box-shadow:0 10px 20px rgba(0,0,0,.15);
    }

    .office-table::before,
    .office-table::after{
        content:"";
        position:absolute;
        width:12px;
        height:90px;
        background:#555;
        bottom:-90px;
    }

    .office-table::before{
        left:25px;
    }

    .office-table::after{
        right:25px;
    }

    /*==============================================================
    MONITOR
    ==============================================================*/
    .office-monitor{
        position:absolute;
        left:50%;
        bottom:70px;
        transform:translateX(-50%);
        width:120px;
        height:78px;
        background:#1f2937;
        border-radius:10px;
        box-shadow:0 8px 18px rgba(0,0,0,.18);
    }

    .office-monitor::before{
        content:"";
        position:absolute;
        left:50%;
        transform:translateX(-50%);
        bottom:-22px;
        width:10px;
        height:22px;
        background:#444;
    }

    .office-monitor::after{
        content:"";
        position:absolute;
        left:50%;
        transform:translateX(-50%);
        bottom:-30px;
        width:60px;
        height:8px;
        border-radius:8px;
        background:#666;
    }

    .office-screen{
        position:absolute;
        left:50%;
        bottom:76px;
        transform:translateX(-50%);
        width:102px;
        height:60px;
        border-radius:6px;
        background:linear-gradient(
            135deg,
            #8ED6FF,
            #D8F3FF
        );
    }

    /*==============================================================
    KEYBOARD
    ==============================================================*/
    .office-keyboard{
        position:absolute;
        left:50%;
        bottom:50px;
        transform:translateX(-50%);
        width:110px;
        height:12px;
        border-radius:5px;
        background:#d7d7d7;
    }

    .office-mouse{
        position:absolute;
        left:270px;
        bottom:52px;
        width:18px;
        height:24px;
        border-radius:10px;
        background:#ddd;
    }

    /*==============================================================
    CHAIR
    ==============================================================*/
    .office-chair{
        position:absolute;
        left:70px;
        bottom:25px;
        width:90px;
        height:130px;
    }

    .chair-back{
        width:70px;
        height:60px;
        margin:auto;
        border-radius:14px;
        background:#3B82F6;
    }

    .chair-seat{
        width:80px;
        height:22px;
        margin:8px auto;
        border-radius:10px;
        background:#2563EB;
    }

    .chair-leg{
        width:6px;
        height:40px;
        margin:auto;
        background:#555;
    }

    .chair-leg::before,
    .chair-leg::after{
        content:"";
        position:absolute;
        width:45px;
        height:5px;
        background:#666;
        top:32px;
    }

    .chair-leg::before{
        left:-20px;
        transform:rotate(25deg);
    }

    .chair-leg::after{
        right:-20px;
        transform:rotate(-25deg);
    }

    /*==============================================================
    BOOKSHELF
    ==============================================================*/
    .office-bookshelf{
        position:absolute;
        right:15px;
        top:20px;
        width:55px;
        height:120px;
        border-radius:8px;
        background:#8B6B4A;
        padding:10px;
    }

    .office-bookshelf span{
        display:block;
        width:100%;
        height:18px;
        margin-bottom:10px;
        border-radius:4px;
    }

    .office-bookshelf span:nth-child(1){
        background:#E31E24;
    }

    .office-bookshelf span:nth-child(2){
        background:#4CAF50;
    }

    .office-bookshelf span:nth-child(3){
        background:#1976D2;
    }

    /*==============================================================
    PLANT
    ==============================================================*/
    .office-plant{
        position:absolute;
        right:90px;
        bottom:45px;
        font-size:42px;
        color:#43A047;
    }

    /*==============================================================
    SHADOW
    ==============================================================*/
    .room-office::after{
        content:"";
        position:absolute;
        left:50%;
        bottom:-18px;
        transform:translateX(-50%);
        width:360px;
        height:24px;
        background:rgba(0,0,0,.12);
        border-radius:50%;
        filter:blur(8px);
    }

    /*==============================================================
    HOVER
    ==============================================================*/
    .room-office{
        animation:fadeRoom .4s;
        transition:.35s;
    }

    .room-office:hover{
        transform:
            translateX(-50%)
            translateY(-6px);
    }

    /*==============================================================
    EXTERIOR
    ==============================================================*/
    .room-house{
        position:absolute;
        left:50%;
        bottom:35px;
        transform:translateX(-50%);
        width:420px;
        height:320px;
        z-index:20;
    }

    /*==============================================================
    SKY
    ==============================================================*/
    .house-sky{
        position:absolute;
        inset:0;
        background:linear-gradient(
            #A9D8FF,
            #DDF4FF
        );
        border-radius:20px;
    }

    /*==============================================================
    SUN
    ==============================================================*/
    .house-sun{
        position:absolute;
        top:25px;
        right:35px;
        width:48px;
        height:48px;
        border-radius:50%;
        background:#FFD54F;
        box-shadow:0 0 35px rgba(255,213,79,.6);
    }

    /*==============================================================
    GROUND
    ==============================================================*/
    .house-ground{
        position:absolute;
        bottom:0;
        width:100%;
        height:70px;
        background:#66BB6A;
        border-radius:0 0 20px 20px;
    }

    /*==============================================================
    HOUSE BODY
    ==============================================================*/
    .house-body{
        position:absolute;
        left:50%;
        bottom:60px;
        transform:translateX(-50%);
        width:220px;
        height:150px;
        background:#F7F7F2;
        transition:background .35s;
        box-shadow:0 12px 30px rgba(0,0,0,.15);
    }

    /*==============================================================
    ROOF
    ==============================================================*/
    .house-roof{
        position:absolute;
        left:50%;
        bottom:205px;
        transform:translateX(-50%);
        width:260px;
        height:80px;
        background:#C62828;
        clip-path:polygon(
            50% 0,
            100% 100%,
            0 100%
        );
    }

    /*==============================================================
    DOOR
    ==============================================================*/
    .house-door{
        position:absolute;
        bottom:0;
        left:50%;
        transform:translateX(-50%);
        width:48px;
        height:82px;
        background:#795548;
    }

    .house-door::after{
        content:"";
        position:absolute;
        right:8px;
        top:40px;
        width:6px;
        height:6px;
        border-radius:50%;
        background:#FFD54F;
    }

    /*==============================================================
    WINDOW
    ==============================================================*/
    .house-window{
        position:absolute;
        top:32px;
        width:42px;
        height:42px;
        background:#BBDEFB;
        border:4px solid #fff;
    }

    .house-window.left{
        left:30px;
    }

    .house-window.right{
        right:30px;
    }

    .house-window::before{
        content:"";
        position:absolute;
        left:50%;
        width:3px;
        height:100%;
        background:#fff;
    }

    .house-window::after{
        content:"";
        position:absolute;
        top:50%;
        width:100%;
        height:3px;
        background:#fff;
    }

    /*==============================================================
    TREE
    ==============================================================*/
    .house-tree{
        position:absolute;
        left:30px;
        bottom:60px;
        width:70px;
        height:120px;
    }

    .tree-top{
        width:70px;
        height:70px;
        border-radius:50%;
        background:#43A047;
    }

    .tree-trunk{
        width:12px;
        height:50px;
        background:#795548;
        margin:auto;
    }

    /*==============================================================
    SHADOW
    ==============================================================*/
    .room-house::after{
        content:"";
        position:absolute;
        left:50%;
        bottom:48px;
        transform:translateX(-50%);
        width:230px;
        height:20px;
        border-radius:50%;
        background:rgba(0,0,0,.15);
        filter:blur(8px);
    }

    /*==============================================================
    ANIMATION
    ==============================================================*/
    .room-house{
        animation:fadeRoom .4s;
    }

    .room-house:hover{
        transform:
            translateX(-50%)
            translateY(-6px);
    }