/* استایل اختصاصی و مدرن برای صفحه my-store.html
   این فایل فقط استایل‌های مربوط به این صفحه را دارد تا تداخل حداقلی با style.css موجود داشته باشد. */

:root{
    --brand:#6C5CE7;
    --brand-2: #8B6CFF;
    --muted-2:#8f9aa8;
    --card-bg: #ffffff;
    --glass: rgba(255,255,255,0.8);
}

/* Header */
.my-store-header{
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    padding:22px 0 8px;
    background: linear-gradient(180deg, rgba(108,92,231,0.06), rgba(255,255,255,0));
    border-bottom: 1px solid rgba(110,103,184,0.04);
}

.my-store-header .page-title{
    font-size:22px;
    font-weight:700;
    color:var(--brand);
    margin:0;
}

/* Container main area adjustments */
#accountArea{
    margin-top:18px;
    margin-bottom:100px; /* for bottom nav */
}

/* Centered card / login card */
.login-card, .store-card-wrapper{
    background: linear-gradient(180deg, #fff, #fbfbff);
    border-radius:18px;
    padding:20px;
    box-shadow: 0 12px 30px rgba(47,32,88,0.08);
}

/* login */
.login-card{
    max-width:720px;
    margin:auto;
    text-align:center;
}

.login-card h2{
    font-size:20px;
    margin-bottom:4px;
    color:#222;
    font-weight:700;
}

.login-card p.lead{
    color:#6b7280;
    margin-bottom:18px;
}

.login-form{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:6px;
}

.login-form input{
    padding:14px 16px;
    border-radius:12px;
    border:1px solid #eee;
    background:#fff;
    font-size:15px;
    outline:none;
}

.login-actions{
    display:flex;
    gap:12px;
    margin-top:8px;
    flex-direction:column;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 16px;
    border-radius:14px;
    border:none;
    font-weight:700;
    cursor:pointer;
    font-size:15px;
}

.btn-primary{
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    color:#fff;
    box-shadow:0 8px 20px rgba(108,92,231,0.14);
}

.btn-ghost{
    background:transparent;
    color:var(--brand);
    border:1px solid rgba(108,92,231,0.12);
}

/* store card */
.store-card-wrapper{
    max-width:820px;
    margin:auto;
    padding:18px;
    display:flex;
    gap:16px;
    align-items:flex-start;
}

.store-avatar{
    width:92px;
    height:92px;
    border-radius:20px;
    overflow:hidden;
    flex-shrink:0;
    background:linear-gradient(180deg,#fff,#f4f5ff);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 30px rgba(108,92,231,0.06);
}

.store-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:16px;
}

/* store content */
.store-content{
    flex:1;
}

.store-content h2{
    margin:0;
    font-size:20px;
    color:#1f1f2b;
    font-weight:800;
}

.store-meta{
    color:var(--muted-2);
    margin-top:6px;
    font-size:14px;
}

/* chips */
.chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:10px;
}
.chip{
    background:#f5f6ff;
    color:#4b3fb8;
    padding:6px 10px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
}

/* stats */
.stats{
    display:flex;
    gap:12px;
    margin-top:12px;
    align-items:center;
}
.stat{
    background:#fff;
    border-radius:12px;
    padding:8px 12px;
    box-shadow:0 6px 18px rgba(48,40,112,0.04);
    display:flex;
    gap:10px;
    align-items:center;
    font-size:13px;
    color:#333;
}

/* actions column */
.store-actions{
    width:120px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.action-ghost{
    background:#fff;
    border-radius:12px;
    padding:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 20px rgba(0,0,0,0.04);
    cursor:pointer;
    color:var(--brand);
}

.action-danger{
    background:#ffecec;
    color:#b71c1c;
    border-radius:12px;
    padding:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

/* small responsive tweaks */
@media (max-width:720px){
    .store-card-wrapper{
        flex-direction:column;
        align-items:center;
        padding:16px;
    }
    .store-actions{ width:100%; flex-direction:row; justify-content:space-between; }
    .store-avatar{ width:82px; height:82px; border-radius:16px; }
}

/* modal */
.modal{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
}
.modal[aria-hidden="false"]{ display:flex; }

.modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(12,12,20,0.45);
    backdrop-filter: blur(2px);
}

.modal-content{
    position:relative;
    width:92%;
    max-width:480px;
    background:var(--card-bg);
    border-radius:16px;
    padding:18px;
    box-shadow:0 20px 50px rgba(0,0,0,0.25);
    z-index:2;
}

.modal-content h2{ margin:0 0 10px 0; font-size:18px; color:#222; }
.modal-content input{ width:100%; padding:12px; border-radius:10px; border:1px solid #eee; margin-top:8px; }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px; }

.form-msg{ margin-top:10px; font-size:14px; color:#e53935; min-height:18px; }

/* helper */
.muted{ color:#6b7280; font-size:13px; }