/*
|--------------------------------------------------------------------------
| Ajormarket Smart Finder V2
| Style
|--------------------------------------------------------------------------
*/


*{
box-sizing:border-box;
}



.amsf-container{

max-width:900px;

margin:40px auto;

padding:30px;

background:#fffaf5;

border-radius:30px;

font-family:inherit;

direction:rtl;

}




/*
|--------------------------------------------------------------------------
| Progress Steps
|--------------------------------------------------------------------------
*/


.amsf-progress{

display:flex;

align-items:center;

justify-content:center;

margin-bottom:40px;

}



.amsf-circle{


width:55px;

height:55px;

border-radius:50%;

background:#e8ded5;

color:#7d421d;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

font-weight:bold;

transition:.3s;


}



.amsf-circle.active{


background:#a9541b;

color:white;

box-shadow:

0 8px 20px rgba(169,84,27,.35);


}



.amsf-line{


height:4px;

width:80px;

background:#e8ded5;


}






/*
|--------------------------------------------------------------------------
| Steps
|--------------------------------------------------------------------------
*/


.amsf-step{

display:none;

animation:fadeIn .4s ease;

}



.amsf-step.active{

display:block;

}



@keyframes fadeIn{


from{

opacity:0;

transform:translateY(20px);

}


to{

opacity:1;

transform:translateY(0);

}


}






.amsf-step h2{


font-size:32px;

color:#39241a;

margin-bottom:10px;

text-align:center;


}



.amsf-step p{


text-align:center;

color:#777;

margin-bottom:30px;


}






/*
|--------------------------------------------------------------------------
| Cards
|--------------------------------------------------------------------------
*/


.amsf-options{


display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;


}





.amsf-card{


background:white;

border:1px solid #eee;

border-radius:22px;

padding:25px 15px;

cursor:pointer;

font-size:18px;

color:#39241a;

box-shadow:

0 8px 25px rgba(0,0,0,.06);


transition:.3s;


}





.amsf-card:hover{


transform:translateY(-5px);

border-color:#b45b22;


}




.amsf-card.selected{


border:3px solid #b45b22;

background:#fff5ec;


}





.amsf-card span{


display:block;

margin-top:12px;

}




.budget{


display:flex;

flex-direction:column;

gap:10px;


}



.budget small{


color:#888;

font-size:14px;


}






/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/


.amsf-next,
.amsf-back,
.amsf-reset{


margin-top:30px;

padding:15px 40px;

border:none;

border-radius:15px;

background:#a9541b;

color:white;

font-size:17px;

cursor:pointer;

transition:.3s;


}



.amsf-next:hover,
.amsf-back:hover,
.amsf-reset:hover{


background:#813c12;


}



.amsf-back{


background:#777;

margin-left:15px;


}





/*
|--------------------------------------------------------------------------
| Products
|--------------------------------------------------------------------------
*/


.amsf-product{


display:flex;

align-items:center;

gap:25px;

background:white;

padding:20px;

margin:15px 0;

border-radius:22px;


box-shadow:

0 8px 25px rgba(0,0,0,.08);


}



.amsf-image img{


width:120px;

height:120px;

object-fit:cover;

border-radius:15px;


}




.amsf-info h3{


font-size:20px;

color:#39241a;


}



.amsf-info a{


display:inline-block;

background:#a9541b;

color:white;

padding:10px 25px;

border-radius:12px;

text-decoration:none;


}




.amsf-loading{


text-align:center;

padding:40px;

font-size:20px;

color:#a9541b;


}






/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/


@media(max-width:768px){


.amsf-container{

padding:20px;

}



.amsf-options{


grid-template-columns:1fr;


}



.amsf-circle{


width:45px;

height:45px;

font-size:18px;


}



.amsf-line{


width:40px;


}



.amsf-step h2{


font-size:24px;


}



.amsf-product{


flex-direction:column;

text-align:center;


}


}