/* ==========================================================================
   استایل عمومی سایت - راست‌چین، موبایل‌فرست
   ========================================================================== */
:root{
    --primary:#1f6feb;
    --primary-dark:#1552b0;
    --success:#1a8a4a;
    --danger:#d1373f;
    --warn:#b9770e;
    --bg:#f4f6f9;
    --card:#ffffff;
    --border:#e1e6ec;
    --text:#1c2530;
    --muted:#6b7684;
    --radius:12px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
    direction:rtl;
    text-align:right;
    font-family:"Vazirmatn","Tahoma",sans-serif;
    background:var(--bg);
    color:var(--text);
    font-size:16px;
    line-height:1.8;
}
a{color:var(--primary);text-decoration:none;}
img{max-width:100%;display:block;}
button, .btn{
    font-family:inherit;
    font-size:16px;
    cursor:pointer;
}
h1,h2,h3{margin:0 0 12px;}

/* ---------- Layout ---------- */
.wrap{max-width:720px;margin:0 auto;padding:12px;}
.topbar{
    background:var(--card);
    border-bottom:1px solid var(--border);
    padding:14px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:sticky;top:0;z-index:20;
}
.topbar .brand{font-weight:800;font-size:18px;color:var(--primary-dark);}
.topbar nav a{margin-inline-start:14px;font-size:14px;color:var(--muted);}

/* ---------- Card / Step ---------- */
.card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:16px;
    margin-bottom:14px;
    box-shadow:0 1px 3px rgba(20,30,50,.04);
}
.step-title{font-size:18px;font-weight:800;margin-bottom:4px;}
.step-desc{color:var(--muted);font-size:14px;margin-bottom:14px;}
.badge{
    display:inline-block;
    font-size:12px;
    padding:2px 8px;
    border-radius:20px;
    margin-inline-start:6px;
}
.badge.required{background:#fdeaea;color:var(--danger);}
.badge.optional{background:#eaf3ff;color:var(--primary-dark);}

/* ---------- Form elements ---------- */
label{display:block;font-size:14px;font-weight:700;margin:10px 0 6px;}
input[type=text],
input[type=number],
input[type=password],
select,
textarea{
    width:100%;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:10px;
    background:#fbfcfe;
    font-size:16px;
    color:var(--text);
}
textarea{resize:vertical;min-height:70px;}
.field-with-btn{display:flex;gap:8px;}
.field-with-btn input{flex:1;}

.options{display:flex;flex-direction:column;gap:8px;}
.option-item{
    border:1px solid var(--border);
    border-radius:10px;
    padding:12px 14px;
    display:flex;
    align-items:center;
    gap:10px;
    background:#fbfcfe;
}
.option-item input{width:auto;}
.option-item.selected{border-color:var(--primary);background:#eef5ff;}

/* ---------- Buttons ---------- */
.btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:12px 18px;
    border-radius:10px;
    border:1px solid var(--border);
    background:#fff;
    color:var(--text);
    font-weight:700;
}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-dark);}
.btn-outline{background:#fff;border-color:var(--primary);color:var(--primary);}
.btn-success{background:var(--success);border-color:var(--success);color:#fff;}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff;}
.btn-sm{padding:8px 12px;font-size:13px;border-radius:8px;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}

.wizard-actions{
    position:sticky;bottom:0;
    background:linear-gradient(to top, var(--bg) 60%, transparent);
    padding:14px 0 6px;
    display:flex;gap:10px;justify-content:space-between;
}
.wizard-actions .btn{flex:1;padding:14px;font-size:16px;}

/* ---------- Progress ---------- */
.progress-track{height:6px;background:var(--border);border-radius:6px;overflow:hidden;margin-bottom:14px;}
.progress-bar{height:100%;background:var(--primary);transition:width .25s ease;}
.progress-label{font-size:12px;color:var(--muted);margin-bottom:6px;}

/* ---------- Gallery / modal for sample viewing ---------- */
.gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    max-height:60vh;
    overflow-y:auto;
}
.gallery-item{
    border:2px solid var(--border);
    border-radius:8px;
    overflow:hidden;
    cursor:pointer;
    text-align:center;
    background:#fff;
}
.gallery-item img{aspect-ratio:1/1;object-fit:contain;background:#fff;}
.gallery-item .code{font-size:12px;padding:4px;color:var(--muted);}
.gallery-item.active{border-color:var(--primary);}

.modal-backdrop{
    position:fixed;inset:0;background:rgba(10,15,25,.55);
    display:flex;align-items:flex-end;justify-content:center;
    z-index:100;
}
.modal-box{
    background:#fff;width:100%;max-width:720px;
    border-radius:16px 16px 0 0;
    padding:16px;max-height:85vh;overflow-y:auto;
}
@media(min-width:760px){
    .modal-backdrop{align-items:center;}
    .modal-box{border-radius:16px;}
    .gallery-grid{grid-template-columns:repeat(5,1fr);}
}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.modal-close{font-size:22px;background:none;border:none;color:var(--muted);}

/* ---------- Canvas / sleeve preview ---------- */
.sleeve-preview{
    background:#fff;
    border:1px dashed var(--border);
    border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    padding:10px;
    margin-bottom:12px;
}
#sleeveCanvas{max-width:100%;height:auto;}

/* ---------- Invoice ---------- */
.invoice-table{width:100%;border-collapse:collapse;font-size:14px;}
.invoice-table th,.invoice-table td{padding:8px 6px;border-bottom:1px solid var(--border);text-align:right;}
.invoice-total{font-size:18px;font-weight:800;color:var(--primary-dark);text-align:left;}

/* ---------- Auth pages ---------- */
.auth-page{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:16px;}
.auth-box{
    background:#fff;border:1px solid var(--border);border-radius:16px;
    padding:24px;width:100%;max-width:380px;
}
.auth-box button{margin-top:16px;}
.msg-error{color:var(--danger);background:#fdeaea;padding:10px;border-radius:8px;font-size:14px;}
.msg-success{color:var(--success);background:#e9f7ef;padding:10px;border-radius:8px;font-size:14px;}
.msg-warning{color:var(--warn);background:#fdf3e2;padding:10px;border-radius:8px;font-size:14px;}

/* ---------- Admin ---------- */
.admin-shell{display:flex;min-height:100vh;}
.admin-sidebar{
    width:220px;background:#101826;color:#cfd8e3;flex-shrink:0;
    padding:16px 10px;
}
.admin-sidebar a{
    display:block;color:#cfd8e3;padding:10px 12px;border-radius:8px;font-size:14px;margin-bottom:4px;
}
.admin-sidebar a:hover,.admin-sidebar a.active{background:#1f2a3d;color:#fff;}
.admin-sidebar .brand{color:#fff;font-weight:800;padding:10px 12px 18px;font-size:16px;}
.admin-main{flex:1;padding:20px;max-width:1100px;}
.data-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.data-table th,.data-table td{padding:10px;border-bottom:1px solid var(--border);font-size:14px;text-align:right;}
.data-table th{background:#f0f3f7;}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:8px;}
.step-row{display:flex;gap:8px;align-items:center;border:1px solid var(--border);border-radius:8px;padding:8px;margin-bottom:6px;background:#fbfcfe;}
.step-row .grip{cursor:grab;color:var(--muted);}
.pill{font-size:12px;padding:2px 8px;border-radius:20px;background:#eef1f5;color:var(--muted);}

@media(max-width:760px){
    .admin-shell{flex-direction:column;}
    .admin-sidebar{width:100%;display:flex;overflow-x:auto;padding:8px;}
    .admin-sidebar .brand{display:none;}
    .admin-sidebar a{white-space:nowrap;margin-inline-end:4px;margin-bottom:0;}
    .admin-main{padding:12px;}
}