/* =====================================
   VIVALA LUXURY QUIZ UI
===================================== */


.vivala-open{

background:#d6b14c;

border:0;

padding:18px 45px;

font-size:14px;

letter-spacing:3px;

cursor:pointer;

}



/* POPUP */


.vivala-popup{


position:fixed;

inset:0;

background:#080808;

z-index:999999;

}





.vivala-close{


position:absolute;

right:35px;

top:20px;

font-size:45px;

color:#d6b14c;

cursor:pointer;

z-index:99;

}





.vivala-box{


display:flex;

height:100vh;


}





/* =====================================
 LEFT IMAGE
===================================== */


.vivala-side{


width:45%;

height:100vh;

position:sticky;

top:0;

overflow:hidden;


}




.vivala-side img{


width:100%;

height:100%;

object-fit:cover;


}





.vivala-side:after{


content:"";

position:absolute;

inset:0;


background:

linear-gradient(

transparent,

rgba(0,0,0,.85)

);


}






.vivala-brand{


position:absolute;

bottom:80px;

left:55px;

z-index:2;

color:white;


}




.vivala-brand h1{


font-family:Georgia,serif;

font-size:60px;

font-weight:400;

color:#d6b14c;

margin:0;


}





.vivala-brand p{


letter-spacing:5px;

font-size:13px;


}







/* =====================================
 RIGHT AREA
===================================== */


.vivala-main{


width:55%;

height:100vh;

overflow-y:auto;

padding:55px;


background:#111;

color:white;

position:relative;


}





.vivala-main h2{


font-family:Georgia,serif;

font-size:36px;

font-weight:400;

color:#d6b14c;

margin-bottom:35px;


}








/* =====================================
 PROGRESS
===================================== */


.vivala-progress{


display:flex;

gap:8px;

margin-bottom:30px;


}



.progress-step{


flex:1;

text-align:center;

font-size:11px;

letter-spacing:2px;


color:#666;


padding:12px 5px;


border-bottom:

2px solid #333;


transition:.3s;


}



.progress-step.active{


color:#d6b14c;


border-color:#d6b14c;


}







/* =====================================
 LIVE SUMMARY
===================================== */


.live-summary{


background:#171717;

padding:22px;

margin-bottom:35px;


border:

1px solid rgba(214,177,76,.3);



position:sticky;

top:0;


z-index:10;


}




.live-summary h4{


margin:0 0 15px;


font-family:Georgia,serif;


color:#d6b14c;


font-size:22px;


}





.live-summary p{


margin:8px 0;

font-size:14px;


color:#ddd;


}








/* =====================================
 STEPS
===================================== */


.quiz-step{


display:none;


}




.quiz-step.active{


display:block;


animation:

vivalaSlide .35s ease;


}




@keyframes vivalaSlide{


from{


opacity:0;

transform:translateX(40px);


}


to{


opacity:1;

transform:translateX(0);


}



}









/* =====================================
 CARDS
===================================== */


.quiz-grid{


display:grid;

grid-template-columns:

repeat(2,1fr);


gap:25px;


}






.quiz-item{


height:230px;


border:

1px solid #333;


background:#171717;


cursor:pointer;


position:relative;


overflow:hidden;


transition:.35s;


}





.quiz-item:hover{


transform:translateY(-8px);


border-color:#d6b14c;


}







.quiz-item img{


width:100%;

height:100%;

object-fit:cover;


opacity:.55;


transition:.3s;


}





.quiz-item:hover img{


opacity:1;


}





.quiz-item span{


position:absolute;

bottom:22px;

left:25px;


font-size:22px;


font-family:Georgia,serif;


color:#d6b14c;


}






.quiz-item.selected{


border:

2px solid #d6b14c;


}








/* =====================================
 FINAL REVIEW
===================================== */


.summary-box{


display:flex;

gap:30px;


background:#171717;


padding:25px;


border:

1px solid rgba(214,177,76,.5);


margin-bottom:30px;


}





.summary-box img{


width:180px;

height:180px;


object-fit:cover;


}




.summary-box h3{


font-family:Georgia,serif;

font-size:30px;

color:#d6b14c;


}









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


#add-cart{


width:100%;


padding:20px;


background:#d6b14c;


border:0;


font-size:16px;


letter-spacing:4px;


cursor:pointer;


}





#add-cart:hover{


background:white;


}







#prev{


background:none;


border:

1px solid #d6b14c;


color:#d6b14c;


padding:14px 35px;


margin-top:35px;


cursor:pointer;


}








.success{


color:#6ee77a;

}



.error{


color:#ff6b6b;

}







/* =====================================
 LOADER
===================================== */


.loading:after{


content:"Creating your look...";


position:absolute;


top:50%;

left:50%;


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


background:#000;


border:

1px solid #d6b14c;


padding:25px 45px;


color:#d6b14c;


z-index:999;


font-family:Georgia,serif;


}









/* =====================================
 MOBILE
===================================== */



@media(max-width:900px){



.vivala-box{


display:block;


}



.vivala-side{


display:none;


}




.vivala-main{


width:100%;


padding:25px;


}





.quiz-grid{


grid-template-columns:1fr;


}




.vivala-main h2{


font-size:28px;


}




.live-summary{


position:relative;


}




.summary-box{


flex-direction:column;


}



.summary-box img{


width:100%;

height:250px;


}




}