/* ===================================================
                FEEL ME - VIRTUAL TRY ON
=================================================== */

.tryon-btn{

    width:100%;

    height:58px;

    border:none;

    border-radius:16px;

    background:linear-gradient(135deg,#b5c4af,#8ea387);

    color:#fff;

    font-size:17px;

    font-weight:600;

    letter-spacing:.3px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    cursor:pointer;

    transition:.35s;

    box-shadow:0 14px 35px rgba(140,160,135,.28);

}

.tryon-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 45px rgba(140,160,135,.40);

}

.tryon-btn:active{

    transform:scale(.98);

}

.tryon-icon{

    width:38px;

    height:38px;

    border-radius:50%;

    background:rgba(255,255,255,.18);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:15px;

}

/* ===================================================
                    MODAL
=================================================== */

.tryon-modal{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    background:rgba(18,18,18,.82);

    backdrop-filter:blur(14px);

    z-index:999999;

    animation:fadeIn .35s ease;

}

.tryon-modal.active{

    display:flex;

}

.tryon-container{

    width:95%;

    max-width:1150px;

    background:#fff;

    border-radius:28px;

    overflow:hidden;

    box-shadow:0 40px 90px rgba(0,0,0,.30);

    animation:popup .35s ease;

    position:relative;

}

/* ===================================================
                    HEADER
=================================================== */

.tryon-header{

    padding:32px;

    text-align:center;

    background:#faf9f7;

    border-bottom:1px solid #ececec;

}

.tryon-header h2{

    margin:0;

    font-size:34px;

    font-weight:700;

    color:#222;

}

.tryon-header p{

    margin-top:10px;

    color:#666;

    font-size:16px;

    line-height:28px;

}

/* ===================================================
                  CLOSE BUTTON
=================================================== */

.tryon-close{

    position:absolute;

    right:22px;

    top:18px;

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:#fff;

    color:#222;

    font-size:28px;

    cursor:pointer;

    transition:.35s;

    z-index:999;

    box-shadow:0 8px 20px rgba(0,0,0,.15);

}

.tryon-close:hover{

    background:#111;

    color:#fff;

    transform:rotate(90deg);

}

/* ===================================================
                    CAMERA
=================================================== */

.camera-wrapper{

    position:relative;

    width:100%;

    height:650px;

    background:#111;

    overflow:hidden;

}

#camera{

    width:100%;

    height:100%;

    object-fit:cover;


}

/* ===================================================
                JEWELRY OVERLAY
=================================================== */

#threeCanvas{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    pointer-events:none;

    z-index:20;

}
/* ===================================================
                CAMERA INFO
=================================================== */

.tryon-status{

    position:absolute;

    top:20px;

    left:20px;

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(10px);

    color:#fff;

    padding:10px 18px;

    border-radius:50px;

    font-size:14px;

    display:flex;

    align-items:center;

    gap:10px;

}

.tryon-status span{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#00ff80;

    animation:pulse 1.3s infinite;

}

.camera-stage{

    position:absolute;

    inset:0;

    transform:scaleX(-1);

}

/* ===================================================
                ACTIONS
=================================================== */

.tryon-actions{

    background:#faf9f7;

    padding:28px;

    display:flex;

    justify-content:center;

    gap:18px;

    border-top:1px solid #ececec;

}

.tryon-actions button{

    border:none;

    border-radius:50px;

    padding:15px 34px;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.tryon-capture{

    background:#111;

    color:#fff;

}

.tryon-capture:hover{

    background:#333;

    transform:translateY(-2px);

}

.tryon-download{

    background:#95a88e;

    color:#fff;

}

.tryon-download:hover{

    background:#7f9278;

    transform:translateY(-2px);

}

/* ===================================================
                ANIMATIONS
=================================================== */

@keyframes popup{

    from{

        opacity:0;

        transform:scale(.90);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes pulse{

    0%{

        transform:scale(.8);

        opacity:.5;

    }

    50%{

        transform:scale(1.2);

        opacity:1;

    }

    100%{

        transform:scale(.8);

        opacity:.5;

    }

}

/* ===================================================
                RESPONSIVE
=================================================== */

@media(max-width:992px){

    .camera-wrapper{

        height:520px;

    }

}

@media(max-width:768px){

    .tryon-container{

        width:100%;

        height:100%;

        border-radius:0;

    }

    .camera-wrapper{

        height:420px;

    }

    #necklaceOverlay{

        width:180px;

    }

    .tryon-header{

        padding:22px;

    }

    .tryon-header h2{

        font-size:28px;

    }

    .tryon-actions{

        flex-direction:column;

        padding:20px;

    }

    .tryon-actions button{

        width:100%;

    }

}

@media(max-width:480px){

    .camera-wrapper{

        height:360px;

    }

    #necklaceOverlay{

        width:150px;

    }

    .tryon-btn{

        font-size:16px;

        height:54px;

    }

}





#trackingCanvas{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    pointer-events:none;

    z-index:5;

}

#camera{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:1;

}

#necklaceOverlay{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:240px;

    pointer-events:none;

    z-index:10;

}