/* ============================================================
   Lahijman Marketplace
   Add Store Page
   Premium UI Upgrade v4
   Compatible with existing HTML classes
============================================================ */


@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');



/* ============================================================
   RESET
============================================================ */


* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

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

}


body {

    direction: rtl;

    background:

        radial-gradient(circle at top right,
            #dbeafe 0,
            #f8fafc 35%,
            #ffffff 100%);


    color: #0f172a;

    min-height: 100vh;

}


button,
input,
textarea,
select {

    font-family: inherit;

}





/* ============================================================
   PAGE
============================================================ */


.page {

    min-height: 100vh;

    padding-bottom: 50px;

    animation:

        pageShow .6s ease;


}



@keyframes pageShow {


    from {

        opacity: 0;

        transform:

            translateY(25px);

    }


    to {

        opacity: 1;

        transform: none;

    }


}





/* ============================================================
   HEADER
============================================================ */


.page-header {


    position: relative;

    overflow: hidden;


    background:

        linear-gradient(135deg,
            #005bea,
            #00c6fb);


    padding:

        35px 22px 45px;


    border-radius:

        0 0 42px 42px;


    display: flex;

    align-items: center;

    gap: 18px;


    color: white;


    box-shadow:

        0 25px 60px rgba(0, 91, 234, .25);


}



.page-header::before {


    content: "";

    position: absolute;

    width: 230px;

    height: 230px;

    border-radius: 50%;


    background:

        rgba(255, 255, 255, .12);


    left: -90px;

    top: -80px;


}



.page-header::after {


    content: "";

    position: absolute;

    width: 170px;

    height: 170px;

    border-radius: 50%;


    background:

        rgba(255, 255, 255, .08);


    right: -50px;

    bottom: -70px;


}



.back-btn {


    position: relative;

    z-index: 2;


    width: 48px;

    height: 48px;


    border: none;


    border-radius: 18px;


    background:

        rgba(255, 255, 255, .18);


    color: white;


    font-size: 22px;


    backdrop-filter:

        blur(10px);


}




.header-title {


    position: relative;

    z-index: 2;


}



.header-title h1 {


    font-size: 25px;


    font-weight: 900;


    margin-bottom: 5px;


}



.header-title span {


    font-size: 13px;


    opacity: .9;


}







/* ============================================================
   MAIN CONTAINER
============================================================ */


.container {


    width: 100%;


    max-width: 850px;


    margin: auto;


    padding:

        20px;


}







/* ============================================================
   REMOVE OLD PROGRESS BAR
============================================================ */


.progress-card {


    display: none !important;


}








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


.form-card {


    background:

        rgba(255, 255, 255, .92);


    backdrop-filter:

        blur(18px);


    border-radius: 35px;


    padding: 24px;


    margin-bottom: 22px;


    box-shadow:


        0 18px 45px rgba(15, 23, 42, .08);


    border:

        1px solid rgba(255, 255, 255, .8);


    animation:

        cardEnter .5s ease;


}



@keyframes cardEnter {


    from {

        opacity: 0;

        transform:

            translateY(20px);

    }


    to {

        opacity: 1;

        transform: none;

    }


}







.section-title {


    display: flex;


    align-items: center;


    gap: 14px;


    margin-bottom: 25px;


}



.section-title i {


    width: 52px;


    height: 52px;


    border-radius: 20px;


    display: flex;


    justify-content: center;


    align-items: center;


    font-size: 25px;


    background:

        #dbeafe;


    color: #2563eb;


}



.section-title h2 {


    font-size: 19px;


    font-weight: 900;


}






/* ============================================================
   BUSINESS TYPE
============================================================ */


.business-selector {


    display: grid;


    grid-template-columns:

        repeat(2, 1fr);


    gap: 15px;


}



.business-card {


    position: relative;


    min-height: 160px;


    border-radius: 30px;


    background: #f8fafc;


    border:

        2px solid #e2e8f0;


    padding: 22px;


    cursor: pointer;


    display: flex;


    flex-direction: column;


    justify-content: center;


    align-items: center;


    gap: 12px;


    transition: .35s;


}



.business-card:hover {


    transform:

        translateY(-6px);


}



.business-card i {


    width: 65px;


    height: 65px;


    display: flex;


    justify-content: center;


    align-items: center;


    border-radius: 25px;


    font-size: 34px;


}



.business-card:nth-child(1) i {


    background: #dbeafe;

    color: #2563eb;


}



.business-card:nth-child(2) i {


    background: #f3e8ff;

    color: #9333ea;


}




.business-card h3 {


    font-size: 16px;


    font-weight: 900;


}



.business-card span {


    font-size: 12px;


    color: #64748b;


}




.business-card.active {


    border-color: #2563eb;


    background:

        linear-gradient(145deg,

            #eff6ff,

            #ffffff);


    box-shadow:


        0 15px 35px rgba(37, 99, 235, .2);


}





/* ============================================================
   INPUTS
============================================================ */


.input-group {


    margin-bottom: 18px;


}



.input-group label {


    display: block;


    margin-bottom: 9px;


    font-size: 14px;


    font-weight: 800;


}



.input-box {


    height: 60px;


    background: #f8fafc;


    border:

        2px solid #e5e7eb;


    border-radius: 22px;


    display: flex;


    align-items: center;


    gap: 12px;


    padding:

        0 18px;


    transition: .3s;


}



.input-box:focus-within {


    background: white;


    border-color: #2563eb;


    box-shadow:


        0 0 0 6px rgba(37, 99, 235, .1);


}



.input-box i {


    font-size: 22px;

    color: #2563eb;


}



.input-box input,
.input-box select {


    flex: 1;


    border: none;


    outline: none;


    background: none;


    font-size: 15px;


}




/* ============================================================
   CATEGORY TREE MARKETPLACE STYLE
============================================================ */


#categorySelect {

    display: none !important;

}



.category-tree {


    background: #f8fafc;


    border-radius: 30px;


    padding: 12px;


}




.category-parent {


    background: white;


    border-radius: 26px;


    margin-bottom: 14px;


    padding: 16px;


    display: flex;


    align-items: center;


    justify-content: space-between;


    cursor: pointer;


    box-shadow:


        0 8px 25px rgba(15, 23, 42, .06);


    transition: .3s;


}




.category-parent:hover {


    transform:

        translateY(-3px);


}




.category-parent .category-info {


    display: flex;


    align-items: center;


    gap: 14px;


}




.category-parent i {


    width: 55px;


    height: 55px;


    border-radius: 22px;


    display: flex;


    align-items: center;


    justify-content: center;


    font-size: 26px;


    background: #dbeafe;


    color: #2563eb;


}




.category-parent span {


    font-weight: 900;


    font-size: 16px;


}



.category-arrow {


    width: 35px;


    height: 35px;


    border-radius: 14px;


    background: #f1f5f9;


    display: flex;


    justify-content: center;


    align-items: center;


    transition: .35s;


}



.category-parent.open .category-arrow {


    transform: rotate(90deg);


}





.category-children {


    display: none;


    padding:

        0 15px 10px;


}




.category-parent.open+.category-children {


    display: block;


    animation:

        treeOpen .35s ease;


}



@keyframes treeOpen {


    from {


        opacity: 0;

        transform:

            translateY(-10px);


    }


    to {


        opacity: 1;

        transform: none;


    }


}




.category-child {


    background: white;


    border-radius: 22px;


    padding: 15px;


    margin-bottom: 10px;


    display: flex;


    align-items: center;


    gap: 12px;


    cursor: pointer;


    border:

        2px solid transparent;


    transition: .3s;


}




.category-child i {


    width: 38px;


    height: 38px;


    border-radius: 14px;


    display: flex;


    justify-content: center;


    align-items: center;


    background: #dcfce7;


    color: #16a34a;


}



.category-child:hover {


    background: #eff6ff;


    transform:

        translateX(-5px);


}



.category-child.active {


    border-color: #2563eb;


    background: #eff6ff;


}





/* ============================================================
   DESCRIPTION
============================================================ */


textarea {


    width: 100%;


    min-height: 140px;


    resize: none;


    padding: 18px;


    border-radius: 25px;


    background: #f8fafc;


    border:

        2px solid #e5e7eb;


    outline: none;


    font-size: 15px;


}



textarea:focus {


    background: white;


    border-color: #2563eb;


}






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


.upload-grid {


    display: grid;


    grid-template-columns:

        repeat(2, 1fr);


    gap: 15px;


}



.upload-card,
.gallery-upload {


    height: 150px;


    border-radius: 30px;


    background:


        linear-gradient(145deg,

            #eff6ff,

            #ffffff);


    border:

        2px dashed #93c5fd;


    display: flex;


    flex-direction: column;


    align-items: center;


    justify-content: center;


    gap: 12px;


    cursor: pointer;


    transition: .35s;


}



.upload-card:hover,
.gallery-upload:hover {


    transform:

        translateY(-7px);


    border-color: #2563eb;


}



.upload-card i,
.gallery-upload i {


    width: 60px;


    height: 60px;


    border-radius: 22px;


    display: flex;


    align-items: center;


    justify-content: center;


    background: #dbeafe;


    color: #2563eb;


    font-size: 30px;


}



.upload-card span,
.gallery-upload span {


    font-size: 13px;


    font-weight: 800;


}



.upload-card input,
.gallery-upload input {


    display: none;


}






/* ============================================================
   IMAGE PREVIEW
============================================================ */


.preview-area {


    display: flex;


    gap: 12px;


    flex-wrap: wrap;


    margin-top: 18px;


}



.preview-item {


    position: relative;


}



.preview-item img {


    width: 95px;


    height: 95px;


    object-fit: cover;


    border-radius: 25px;


    box-shadow:


        0 10px 25px rgba(0, 0, 0, .12);


}



.preview-remove {


    position: absolute;


    top: -8px;


    right: -8px;


    width: 28px;


    height: 28px;


    border-radius: 50%;


    border: none;


    background: #ef4444;


    color: white;


}





/* ============================================================
   MAP
============================================================ */


.map-placeholder {


    height: 280px;


    border-radius: 35px;


    background:


        linear-gradient(135deg,

            #dcfce7,

            #dbeafe);


    display: flex;


    flex-direction: column;


    align-items: center;


    justify-content: center;


    gap: 18px;


}



.map-placeholder i {


    width: 85px;


    height: 85px;


    border-radius: 30px;


    background: white;


    display: flex;


    align-items: center;


    justify-content: center;


    font-size: 45px;


    color: #16a34a;


    box-shadow:


        0 15px 35px rgba(0, 0, 0, .08);


}



.map-placeholder button {


    border: none;


    height: 50px;


    padding:

        0 28px;


    border-radius: 20px;


    background: #16a34a;


    color: white;


    font-weight: 900;


}

.submit-btn {
    width: 100%;
    height: 62px;
    margin-top: 25px;
    border: none;
    border-radius: 24px;
    background: linear-gradient(135deg, #0066ff, #00a8ff);
    color: white;
    font-size: 17px;
    font-weight: 900;
    box-shadow: 0 20px 40px rgba(0, 102, 255, .3);
    transition: .3s;
}

.submit-btn:hover {
    transform: translateY(-5px);
}

.hidden {
    display: none;
}

@media(min-width:700px) {
    .business-selector {
        grid-template-columns: 1fr 1fr;
    }

    .social-grid {
        margin-top: 12px;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================================
   IMAGE PREVIEW SYSTEM FIX
============================================================ */


.image-preview-box {

    margin-top:20px;

    display:grid;

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

    gap:15px;

}



.image-preview-card {

    position:relative;

    aspect-ratio:1;

    border-radius:25px;

    overflow:hidden;

    background:#f1f5f9;

    animation:

    previewAnimation .35s ease;

}



.image-preview-card img {

    width:100%;

    height:100%;

    object-fit:cover;

}



.image-preview-card button {

    position:absolute;

    top:8px;

    right:8px;

    width:32px;

    height:32px;

    border:none;

    border-radius:50%;

    background:#ef4444;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

}



.logo-preview-box {

    width:120px;

    height:120px;

    border-radius:35px;

    overflow:hidden;

    margin:20px auto;

    background:#f8fafc;

}



.logo-preview-box img {

    width:100%;

    height:100%;

    object-fit:cover;

}



.banner-preview-box {

    width:100%;

    height:180px;

    border-radius:30px;

    overflow:hidden;

    margin-top:20px;

}



.banner-preview-box img {

    width:100%;

    height:100%;

    object-fit:cover;

}



@keyframes previewAnimation {

    from {

        opacity:0;

        transform:scale(.8);

    }

    to {

        opacity:1;

        transform:scale(1);

    }

}



@media(max-width:500px){

    .image-preview-box {

        grid-template-columns:

        repeat(3,1fr);

    }

}

.preview-container{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-top:20px;

}


.preview-container .preview-item{

    position:relative;

}


.preview-container img{

    width:110px;

    height:110px;

    object-fit:cover;

    border-radius:25px;

}


.preview-remove{

    position:absolute;

    top:-8px;

    right:-8px;

    width:28px;

    height:28px;

    border-radius:50%;

    border:none;

    background:#ef4444;

    color:white;

}

.category-picker{
    position:relative;
}


.category-trigger{

    height:60px;

    background:#f8fafc;

    border:2px solid #e5e7eb;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 18px;

    cursor:pointer;

    transition:.3s;

}


.category-trigger div{

    display:flex;

    align-items:center;

    gap:12px;

}


.category-trigger i{

    color:#2563eb;

    font-size:22px;

}



.category-dropdown{

    display:none;

    margin-top:12px;

    animation:.3s ease;

}



.category-dropdown.open{

    display:block;

}



.category-trigger.active{

    border-color:#2563eb;

    background:white;

}



.category-dropdown .category-tree{

    max-height:400px;

    overflow-y:auto;

}

/* ==========================
   Store Map
========================== */


.map-container {

    position:relative;

    width:100%;

    height:350px;

    border-radius:32px;

    overflow:hidden;

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

}



#storeMap {

    width:100%;

    height:100%;

}



.confirm-location {


    position:absolute;

    bottom:20px;

    right:20px;

    left:20px;


    height:55px;


    border:none;


    border-radius:20px;


    background:

    linear-gradient(
        135deg,
        #16a34a,
        #22c55e
    );


    color:white;


    font-size:16px;


    font-weight:900;


    z-index:1000;


}



.confirm-location i {

    margin-left:8px;

}



.hidden {

    display:none!important;

}

/* ================================
   Store Message Toast
================================ */

.store-message {

    position: fixed;

    bottom: 30px;

    right: 50%;

    transform: translateX(50%);

    min-width: 280px;

    max-width: 90%;

    padding: 16px 22px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    font-family: Vazirmatn, sans-serif;

    font-size: 14px;

    font-weight: 600;

    color: white;

    z-index: 99999;

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

    animation: messageShow .3s ease;

}


.store-message i {

    font-size: 22px;

}



.store-message.success {

    background: linear-gradient(
        135deg,
        #16a34a,
        #22c55e
    );

}



.store-message.error {

    background: linear-gradient(
        135deg,
        #dc2626,
        #ef4444
    );

}



@keyframes messageShow {


    from {

        opacity:0;

        transform:
        translate(50%,30px);

    }


    to {

        opacity:1;

        transform:
        translate(50%,0);

    }


}