body,.athba-modal{font-family:'Cairo',sans-serif}

.athba-entry{display:flex;align-items:center;gap:12px;margin-top:20px}
.athba-open{background:none;border:0;font-size:22px;font-weight:700;color:#6d4c41;cursor:pointer}

.athba-modal{
display:none;
position:fixed !important;
inset:0;
background:rgba(0,0,0,.7);
z-index:2147483647 !important;
padding:10px;
overflow:auto;
isolation:isolate;
}

.athba-box{
background:#fff;
max-width:1000px;
margin:auto;
border-radius:28px;
padding:25px;
display:flex;
gap:30px;
direction:rtl;
position:relative;
z-index:2147483647;
}

.athba-close{
position:absolute;
top:15px;
left:15px;
width:44px;
height:44px;
border-radius:50%;
border:0;
background:#6d4c41;
color:#fff;
font-size:22px;
cursor:pointer;
}

.athba-sidebar{
width:170px;
display:flex;
flex-direction:column;
gap:15px
}

.athba-step-nav{
padding:16px;
border-radius:18px;
background:#f3f3f3;
text-align:center;
font-weight:700;
cursor:pointer;
position:relative;
transition:.2s;
}

.athba-step-nav.active{
background:#6d4c41;
color:#fff;
}

.athba-step-nav.active:after{
content:'➜';
position:absolute;
left:-18px;
top:50%;
transform:translateY(-50%);
font-size:22px;
color:#6d4c41;
}

.athba-content{flex:1}

.athba-step{display:none;animation:fade .25s ease}
.athba-step.active{display:block}

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

.athba-step h2{
font-size:40px;
margin-bottom:25px;
color:#222;
}

.athba-step input{
width:100%;
padding:16px;
border:1px solid #ddd;
border-radius:16px;
margin-bottom:18px;
font-size:16px;
}

.athba-actions{
display:flex;
gap:12px;
margin-top:20px;
}

.athba-next,.athba-prev,.athba-submit{
border:0;
padding:15px 24px;
border-radius:16px;
cursor:pointer;
font-weight:700;
font-size:16px;
}

.athba-next,.athba-submit{
background:#6d4c41;
color:#fff;
}

.athba-prev{
background:#ececec;
}

.athba-colors{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-bottom:25px;
}

.athba-color input{display:none}

.athba-color span{
padding:14px 18px;
border:1px solid #ddd;
border-radius:16px;
display:block;
cursor:pointer;
transition:.2s;
}

.athba-color input:checked+span{
background:#6d4c41;
color:#fff;
border-color:#6d4c41;
}

.athba-review{
background:#fafafa;
padding:20px;
border-radius:18px;
border:1px solid #eee;
margin-bottom:20px;
}

.athba-review-table{
width:100%;
border-collapse:collapse;
direction:rtl;
}

.athba-review-table td{
padding:14px;
border-bottom:1px solid #eee;
font-size:15px;
}

.athba-review-table td:first-child{
font-weight:700;
color:#333;
width:40%;
}

.athba-note{
background:#f6f1ed;
padding:14px;
border-radius:14px;
color:#6d4c41;
margin-bottom:20px;
text-align:center;
font-weight:600;
}

.athba-success{
display:none;
font-size:30px;
font-weight:700;
text-align:center;
color:#6d4c41;
padding:60px 0;
}

@media(max-width:768px){

.athba-box{
flex-direction:column;
padding:20px;
}

.athba-sidebar{
width:100%;
flex-direction:row;
overflow:auto;
}

.athba-step-nav{
min-width:100px;
}

.athba-step h2{
font-size:28px;
}

}