/* ==========================================
   A1 : Global
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    direction:rtl;

    background:#F8F8FC;

    font-family:'Vazirmatn',sans-serif;

    color:#222;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

    color:inherit;

}

button{

    font-family:inherit;

    cursor:pointer;

}


/* ==========================================
   A2 : Container
========================================== */

.container{

    width:92%;

    max-width:430px;

    margin:auto;

    padding-bottom:120px;

}


/* ==========================================
   B1 : Header
========================================== */

.header{

    display:flex;

    flex-direction:column;

    align-items:center;

    margin-top:40px;

}

.logo{

    width:220px;

}

.subtitle{

    margin-top:14px;

    font-size:18px;

    color:#6B6B6B;

}

.header h1{

    margin-top:35px;

    font-size:34px;

    font-weight:700;

    color:#22195C;

    text-align:center;

    line-height:55px;

}


/* ==========================================
   C1 : Search Box
========================================== */

.search-box{

    width:100%;

    height:72px;

    background:#ffffff;

    margin-top:35px;

    border-radius:24px;

    border:2px solid #EAE4FF;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 18px;

    box-shadow:0 15px 35px rgba(88,62,255,.08);

}

.search-box input{

    flex:1;

    border:none;

    outline:none;

    background:none;

    font-size:17px;

    font-family:'Vazirmatn',sans-serif;

    text-align:center;

}

.search-box input::placeholder{

    color:#999;

}

.filter-btn,
.search-btn{

    width:48px;

    height:48px;

    border:none;

    background:none;

    color:#684CFF;

    font-size:22px;

}


/* ==========================================
   D1 : Suggested Searches
========================================== */

.suggestions{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:12px;

    margin-top:25px;

}

.tag{

    padding:12px 22px;

    border-radius:30px;

    border:1px solid #E7E2FF;

    background:#ffffff;

    color:#4A4A4A;

    font-size:15px;

    font-family:'Vazirmatn',sans-serif;

    transition:.3s;

}

.tag:hover{

    background:#684CFF;

    color:#ffffff;

    border-color:#684CFF;

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(104,76,255,.25);

}


/* ==========================================
   E1 : Categories
========================================== */

.categories-section{

    position:relative;

    display:flex;

    align-items:center;

    margin-top:35px;

}

.categories{

    display:flex;

    gap:15px;

    overflow-x:auto;

    scroll-behavior:smooth;

    flex:1;

    padding:10px 0;

    scrollbar-width:none;

    -ms-overflow-style:none;

}

.categories::-webkit-scrollbar{

    display:none;

}

.category-card{

    flex:0 0 auto;

    width:130px;

    height:95px;

    background:#ffffff;

    border-radius:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:10px;

    font-size:16px;

    font-weight:600;

    color:#22195C;

    text-decoration:none;

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

    transition:.25s;

    cursor:pointer;

}

.category-card:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 28px rgba(104,76,255,.18);

}

.category-card:active{

    transform:scale(.97);

}

.scroll-btn{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#684CFF;

    color:#ffffff;

    font-size:16px;

    cursor:pointer;

    flex-shrink:0;

    z-index:2;

    transition:.25s;

}

.scroll-btn:hover{

    background:#4F37D9;

}

.left{

    margin-left:10px;

}

.right{

    margin-right:10px;

}


/* ==========================================
   F1 : Statistics Card
========================================== */





/* ==========================================
   G1 : Stores
========================================== */





/* ==========================================
   H1 : Bottom Navigation
========================================== */

.bottom-navigation{

    position:fixed;

    bottom:20px;

    right:50%;

    transform:translateX(50%);

    width:92%;

    max-width:430px;

    height:75px;

    background:#ffffff;

    border-radius:25px;

    display:flex;

    align-items:center;

    justify-content:space-around;

    box-shadow:0 10px 35px rgba(0,0,0,.12);

    z-index:100;

}

.nav-item{

    flex:1;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:6px;

    color:#888;

    font-size:13px;

    transition:.3s;

}

.nav-item i{

    font-size:22px;

}

.nav-item.active{

    color:#684CFF;

}

.nav-item:hover{

    color:#684CFF;

}

.nav-item span{

    font-size:12px;

}


/* ==========================================
   I1 : Floating Button
========================================== */


/* ==========================================
   K1 : Register Header
========================================== */

.register-header{

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    margin-top:35px;

}

.register-header h1{

    font-size:26px;

    color:#22195C;

}

.back-btn{

    position:absolute;

    right:0;

    width:45px;

    height:45px;

    border-radius:50%;

    background:#ffffff;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#684CFF;

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

}


/* ==========================================
   K2 : Register Steps
========================================== */

.steps{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-top:40px;

    position:relative;

}

.step{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;

    flex:1;

    color:#999;

    font-size:12px;

    text-align:center;

}

.step span{

    width:35px;

    height:35px;

    border-radius:50%;

    background:#EAE4FF;

    color:#684CFF;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

}

.step.active span{

    background:#684CFF;

    color:#fff;

}

.step.active{

    color:#684CFF;

}


/* ==========================================
   K3 : Register Form
========================================== */

.store-form{

    margin-top:35px;

    background:#fff;

    border-radius:25px;

    padding:25px 20px;

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

}

.store-form label{

    display:block;

    margin-bottom:10px;

    margin-top:20px;

    color:#333;

    font-size:15px;

    font-weight:600;

}

.store-form input,

.store-form select,

.store-form textarea{

    width:100%;

    border:none;

    outline:none;

    background:#F8F8FC;

    border-radius:18px;

    padding:15px;

    font-family:'Vazirmatn',sans-serif;

    font-size:15px;

}

.store-form textarea{

    height:120px;

    resize:none;

}


/* ==========================================
   K4 : Register Button
========================================== */

.next-btn{

    margin-top:30px;

    width:100%;

    height:55px;

    border:none;

    border-radius:18px;

    background:#684CFF;

    color:#fff;

    font-family:'Vazirmatn',sans-serif;

    font-size:17px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

}
/* ==========================================
   L : Category Page
========================================== */


/* ==========================================
   L1 : Header
========================================== */

.category-header{

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    margin-top:35px;

}

.category-header h1{

    font-size:28px;

    color:#22195C;

}


/* ==========================================
   L2 : Description
========================================== */

.category-description{

    text-align:center;

    margin-top:18px;

    margin-bottom:30px;

}

.category-description p{

    color:#777;

    font-size:15px;

}


/* ==========================================
   L3 : Sub Categories
========================================== */

.subcategories{

    display:flex;

    flex-direction:column;

    gap:15px;

}


/* ==========================================
   L4 : Sub Category Card
========================================== */

.subcategory-card{

    width:100%;

    min-height:70px;

    background:#ffffff;

    border-radius:22px;

    padding:20px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    font-size:17px;

    font-weight:600;

    color:#22195C;

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

    transition:.25s;

}

.subcategory-card::after{

    content:"\f054";

    font-family:"Font Awesome 6 Free";

    font-weight:900;

    color:#684CFF;

    font-size:18px;

}

.subcategory-card:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(104,76,255,.18);

}

.subcategory-card:active{

    transform:scale(.98);

}


.category-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 20px;

    cursor:pointer;

    user-select:none;

}

.category-header span{

    font-size:16px;

    font-weight:700;

    color:#22195C;

}

.category-header i{

    color:#684CFF;

    transition:.3s;

}

.category-content{

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease;

    background:#FAFAFF;

}

.category-item.active .category-content{

    max-height:500px;

}

.category-item.active .category-header i{

    transform:rotate(180deg);

}

.check-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 20px;

    border-top:1px solid #ECECFA;

    cursor:pointer;

}

.check-item span{

    flex:1;

    font-size:15px;

}

.check-item input{

    width:18px;

    height:18px;

    accent-color:#684CFF;

}

.selected-categories{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:18px;

}

.selected-categories .chip{

    background:#684CFF;

    color:#fff;

    padding:8px 16px;

    border-radius:25px;

    font-size:13px;

}
/* ==========================================
   K1 : Category Accordion
========================================== */

.category-accordion{

    margin-top:15px;

}

.category-item{

    background:#fff;

    border:1px solid #ECE8FF;

    border-radius:18px;

    overflow:hidden;

    margin-bottom:12px;

    transition:.3s;

}

.category-item:hover{

    box-shadow:0 8px 20px rgba(104,76,255,.08);

}

.category-header{

    height:56px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 18px;

    cursor:pointer;

    user-select:none;

}

.category-header span{

    font-size:15px;

    font-weight:700;

    color:#22195C;

}

.category-header i{

    color:#684CFF;

    transition:.3s;

}

.category-item.active .category-header i{

    transform:rotate(180deg);

}

.category-content{

    max-height:0;

    overflow:hidden;

    transition:.35s ease;

    background:#FAFAFF;

}

.category-item.active .category-content{

    max-height:500px;

    padding:10px;

}

.category-content{

    display:grid;

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

    gap:8px;

}

.check-item{

    display:flex;

    align-items:center;

    gap:8px;

    background:#fff;

    border:1px solid #ECE8FF;

    border-radius:12px;

    padding:10px;

    cursor:pointer;

    transition:.25s;

}

.check-item:hover{

    border-color:#684CFF;

}

.check-item input{

    accent-color:#684CFF;

}

.check-item span{

    font-size:13px;

}

.selected-categories{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:15px;

}

.selected-chip{

    background:#684CFF;

    color:#fff;

    border-radius:30px;

    padding:7px 14px;

    font-size:12px;

}
/* ==========================================
   M1 : My Store Empty Page
========================================== */

.my-store-page{

    margin-top:40px;

    background:#ffffff;

    border-radius:30px;

    padding:35px 25px;

    box-shadow:0 15px 35px rgba(0,0,0,.06);

    text-align:center;

}


/* ==========================================
   M2 : Store Icon
========================================== */

.store-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    background:#F3F0FF;

    color:#684CFF;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:42px;

}


/* ==========================================
   M3 : Title
========================================== */

.my-store-page h2{

    margin-top:22px;

    font-size:24px;

    color:#22195C;

}


/* ==========================================
   M4 : Description
========================================== */

.my-store-page p{

    margin-top:12px;

    color:#777;

    line-height:30px;

    font-size:15px;

}


/* ==========================================
   M5 : Benefits
========================================== */

.store-benefits{

    margin-top:30px;

    text-align:right;

}

.store-benefits li{

    list-style:none;

    margin-bottom:14px;

    display:flex;

    align-items:center;

    gap:10px;

    color:#444;

    font-size:14px;

}

.store-benefits i{

    color:#2ECC71;

}


/* ==========================================
   M6 : Register Button
========================================== */

.register-store-btn{

    width:100%;

    height:56px;

    background:#684CFF;

    color:#fff;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:17px;

    font-weight:700;

    margin-top:35px;

    transition:.3s;

}

.register-store-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 25px rgba(104,76,255,.28);

}


/* ==========================================
   M7 : Login Button
========================================== */

.login-store-btn{

    width:100%;

    height:54px;

    margin-top:15px;

    border:2px solid #684CFF;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#684CFF;

    font-weight:700;

    transition:.3s;

}

.login-store-btn:hover{

    background:#684CFF;

    color:#fff;

}
/* ==========================================
   OTP Page
========================================== */

/* ==========================================
   Success Page
========================================== */

.success-page{

    min-height:80vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}

.success-icon{

    font-size:80px;

    color:#29b44b;

    margin-bottom:25px;

}

.success-page h1{

    margin-bottom:20px;

}

.success-page p{

    color:#666;

    line-height:2;

    margin-bottom:40px;

}
/* ==========================================
   OTP PAGE
========================================== */

.otp-card{

    background:#fff;

    border-radius:20px;

    padding:30px;

    margin-top:20px;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

    text-align:center;

}

.otp-logo{

    width:80px;

    height:80px;

    margin:auto;

    border-radius:50%;

    background:#1F6BFF;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:32px;

    margin-bottom:20px;

}

.otp-card h2{

    font-size:24px;

    margin-bottom:10px;

}

.otp-desc{

    color:#666;

    margin-bottom:20px;

}

.phone-preview{

    font-size:22px;

    font-weight:700;

    color:#111;

    margin-bottom:20px;

}

.otp-test{

    display:inline-flex;

    gap:8px;

    background:#FFF4D6;

    padding:10px 18px;

    border-radius:12px;

    margin-bottom:30px;

}

.otp-test strong{

    color:#E67E22;

}

.otp-box{

    display:flex;

    justify-content:center;

    gap:12px;

    margin-bottom:30px;

}

.otp-input{

    width:58px;

    height:58px;

    border:2px solid #E5E7EB;

    border-radius:14px;

    font-size:24px;

    text-align:center;

    transition:.25s;

}

.otp-input:focus{

    border-color:#1F6BFF;

    outline:none;

    transform:translateY(-3px);

    box-shadow:0 10px 20px rgba(31,107,255,.18);

}

.otp-timer{

    color:#666;

    margin-bottom:25px;

}

.resend-btn{

    background:none;

    border:none;

    color:#1F6BFF;

    cursor:pointer;

    margin-top:15px;

    font-size:15px;

}

/* ==========================================
   J1 : Responsive
========================================== */

.otp-box{

    display:flex;

    justify-content:center;

    gap:12px;

    margin:40px 0;

}

.otp-input{

    width:58px;

    height:58px;

    border:1px solid #dcdcdc;

    border-radius:14px;

    text-align:center;

    font-size:24px;

    font-weight:700;

    outline:none;

    transition:.3s;

}

.otp-input:focus{

    border-color:#c89d2a;

    box-shadow:0 0 0 3px rgba(200,157,42,.15);

}

.otp-timer{

    text-align:center;

    color:#777;

    margin-bottom:30px;

    font-size:14px;

}

@media (max-width:768px){

}
/* ==========================================
   Error Messages
========================================== */

.error-text{

    color:#e53935;

    font-size:13px;

    margin-top:6px;

    margin-bottom:12px;

    font-weight:500;

}

/* ==========================================
   Logo Upload
========================================== */

.logo-upload{

    margin-top:20px;

}

.upload-box{

    display:block;

    cursor:pointer;

}

.upload-content{

    width:180px;

    height:180px;

    margin:auto;

    border:2px dashed #D7DCE5;

    border-radius:22px;

    background:#FAFBFC;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    transition:.3s;

    overflow:hidden;

}

.upload-content:hover{

    border-color:#1F6BFF;

    background:#F4F8FF;

}

#logoPreview{

    width:100%;

    height:100%;

    object-fit:cover;

    display:none;

}

#cameraIcon{

    font-size:38px;

    color:#1F6BFF;

    margin-bottom:12px;

}

#uploadText{

    font-size:15px;

    color:#666;

    font-weight:500;

}

/* ==========================================
   Location Box
========================================== */

.location-box{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px;

    border:1px solid #E4E8EF;

    border-radius:18px;

    background:#FAFBFC;

    margin-top:14px;

    margin-bottom:28px;

}

.location-icon{

    width:54px;

    height:54px;

    border-radius:50%;

    background:#EAF2FF;

    color:#1F6BFF;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

}

.location-info{

    flex:1;

    margin-right:16px;

}

.location-title{

    display:block;

    font-size:15px;

    font-weight:700;

    color:#222;

}

.location-subtitle{

    display:block;

    margin-top:6px;

    font-size:13px;

    color:#888;

}

.location-btn{

    border:none;

    background:#1F6BFF;

    color:#fff;

    padding:10px 18px;

    border-radius:12px;

    cursor:pointer;

    font-family:inherit;

    transition:.25s;

}

.location-btn:hover{

    background:#1257dd;

}

/* ==========================================
   Success Page
========================================== */

.success-page{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:80vh;

}

.success-card{

    background:#fff;

    border-radius:24px;

    padding:40px 30px;

    text-align:center;

    box-shadow:0 12px 40px rgba(0,0,0,.08);

}

.success-icon{

    font-size:90px;

    color:#22C55E;

    margin-bottom:20px;

}

.success-title{

    font-size:18px;

    font-weight:600;

    color:#333;

    margin-top:20px;

}

.success-desc{

    color:#777;

    line-height:2;

    margin:25px 0 35px;

}