/* =========================
 TG CommerceX Quiz Isolated
========================= */


#tgx-help-button{

position:fixed!important;
right:0;
top:50%;
transform:translateY(-50%);

background:#2b1200!important;
color:#f6d57b!important;

padding:18px 10px;

border-radius:16px 0 0 16px;

border:2px solid #d4a647;

writing-mode:vertical-rl;

font-weight:800;

letter-spacing:1px;

z-index:999999;

cursor:pointer;

box-shadow:0 10px 30px rgba(0,0,0,.5);

}



/* Overlay */


#tgx-quiz-popup{

display:none;

position:fixed!important;

inset:0;

background:rgba(0,0,0,.65);

backdrop-filter:blur(8px);

z-index:9999999;

align-items:flex-end;

justify-content:center;

}




/* Box */


#tgx-quiz-popup .tgx-quiz-box{

width:100%;

max-width:520px;

background:#050403!important;

color:white;

padding:45px 28px 35px;

border-radius:35px 35px 0 0;

position:relative;

text-align:center;

box-sizing:border-box;

animation:tgxUp .35s ease;

}




/* handle */


#tgx-quiz-popup .tgx-quiz-box:before{

content:"";

position:absolute;

top:14px;

left:50%;

transform:translateX(-50%);

width:55px;

height:5px;

background:#8c7044;

border-radius:30px;

}



/* Close */


#tgx-close{

position:absolute;

right:20px;

top:22px;

width:40px;

height:40px;

border-radius:50%;

border:0;

background:#191919;

color:white;

font-size:24px;

cursor:pointer;

}



/* Title */


#tgx-quiz-popup h2,
#tgx-quiz-popup h3{

color:white!important;

font-family:Georgia,serif;

}



#tgx-quiz-popup h2{

font-size:34px;

line-height:1.15;

}



#tgx-quiz-popup p{

color:#b8aa94;

font-size:16px;

}




/* Icons */


#tgx-quiz-popup .tgx-icons{

display:flex;

justify-content:center;

gap:15px;

margin:35px 0;

}




#tgx-quiz-popup .tgx-icons span{

width:95px;

height:95px;

border-radius:50%;

background:
linear-gradient(
145deg,
#1b1209,
#4b321b
);

border:1px solid #5d4425;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

color:#d2ae68;

font-size:12px;

font-weight:700;

}




#tgx-quiz-popup .tgx-icons i{

font-style:normal;

font-size:24px;

}



/* Steps */


#tgx-steps{

display:none;

}


#tgx-quiz-popup .tgx-step{

display:none;

}


#tgx-quiz-popup .tgx-step.active{

display:block;

}




/* Option */


#tgx-quiz-popup label{

display:flex!important;

align-items:center;

gap:12px;

background:#fff7eb;

color:#442711;

padding:17px;

border-radius:16px;

margin-bottom:14px;

border:1px solid #ead7bd;

}



/* Inputs */


#tgx-quiz-popup input:not([type="radio"]){

width:100%;

height:52px;

border-radius:15px;

border:1px solid #ead7bd;

background:#fff7eb;

padding:0 15px;

box-sizing:border-box;

margin-bottom:15px;

}




/* Buttons */


#tgx-start,
.tgx-next,
.tgx-wa{

display:block;

width:100%;

padding:18px;

border-radius:18px;

border:0;

background:
linear-gradient(
90deg,
#c79538,
#ffe58d
)!important;

color:#000!important;

font-weight:800;

text-decoration:none;

box-sizing:border-box;

cursor:pointer;

}




/* animation */


@keyframes tgxUp{

from{

transform:translateY(100%);

}

to{

transform:translateY(0);

}

}



/* Desktop */


@media(min-width:768px){

#tgx-quiz-popup{

align-items:center;

}


#tgx-quiz-popup .tgx-quiz-box{

border-radius:35px;

}

}


#tgx-dynamic-quiz{
display:none;
}


.tgx-dynamic-step{

display:none;

}


.tgx-dynamic-step.active{

display:block;

}


.tgx-dynamic-step label{

display:block;

background:#fff7eb;

padding:15px;

border-radius:15px;

margin-bottom:12px;

}