/* سامانه موکب — استایل اصلی v1.2 */
:root {
  --mokeb-blue: #1a3a6b;
  --mokeb-blue-light: #2a5298;
  --mokeb-gold: #c9a84c;
  --mokeb-gold-dark: #a8892e;
  --mokeb-bg: #f5f7fa;
  --mokeb-card: #fff;
  --mokeb-text: #1a1a2e;
  --mokeb-muted: #6b7280;
  --mokeb-border: #e5e7eb;
  --mokeb-radius: 12px;
  --mokeb-shadow: 0 4px 24px rgba(26,58,107,.10);
}

.mokeb-wrap { font-family: 'Vazirmatn', Tahoma, sans-serif; direction: rtl; max-width: 680px; margin: 32px auto; padding: 0 16px; color: var(--mokeb-text); }

/* Progress Bar */
.mokeb-progress-bar { width: 100%; height: 6px; background: var(--mokeb-border); border-radius: 3px; margin-bottom: 16px; overflow: hidden; }
.mokeb-progress-inner { height: 100%; background: linear-gradient(90deg, var(--mokeb-blue), var(--mokeb-gold)); border-radius: 3px; transition: width .4s; }

/* Steps Indicator */
.mokeb-steps-indicator { display: flex; justify-content: center; gap: 6px; margin-bottom: 28px; flex-wrap: wrap; }
.mokeb-step-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--mokeb-border); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--mokeb-muted); transition: all .3s; cursor: default; }
.mokeb-step-dot.active { background: var(--mokeb-blue); color: #fff; box-shadow: 0 0 0 3px rgba(26,58,107,.2); }
.mokeb-step-dot.done { background: var(--mokeb-gold); color: #fff; }

/* Steps */
.mokeb-step { display: none; background: var(--mokeb-card); border-radius: var(--mokeb-radius); box-shadow: var(--mokeb-shadow); padding: 28px; }
.mokeb-step.active { display: block; animation: mokebFadeIn .3s; }
@keyframes mokebFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

.mokeb-step-header { margin-bottom: 24px; }
.mokeb-step-header h2 { font-size: 20px; font-weight: 700; color: var(--mokeb-blue); margin: 0 0 6px; }
.mokeb-step-header p { color: var(--mokeb-muted); font-size: 14px; margin: 0; }

/* Fields */
.mokeb-field { margin-bottom: 16px; }
.mokeb-field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.mokeb-input { width: 100%; padding: 10px 14px; border: 1.5px solid var(--mokeb-border); border-radius: 8px; font-family: inherit; font-size: 14px; direction: rtl; transition: border-color .2s; box-sizing: border-box; }
.mokeb-input:focus { outline: none; border-color: var(--mokeb-blue); box-shadow: 0 0 0 3px rgba(26,58,107,.10); }
textarea.mokeb-input { resize: vertical; }
select.mokeb-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 12px center; padding-left: 36px; }

.mokeb-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .mokeb-grid-2 { grid-template-columns: 1fr; } }

/* Buttons */
.mokeb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 24px; border-radius: 8px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; border: none; transition: all .2s; }
.mokeb-btn-primary { background: var(--mokeb-blue); color: #fff; }
.mokeb-btn-primary:hover { background: var(--mokeb-blue-light); }
.mokeb-btn-outline { background: transparent; color: var(--mokeb-blue); border: 2px solid var(--mokeb-blue); }
.mokeb-btn-outline:hover { background: var(--mokeb-blue); color: #fff; }
.mokeb-btn-success { background: #16a34a; color: #fff; }
.mokeb-btn-success:hover { background: #15803d; }
.mokeb-btn-gold { background: var(--mokeb-gold); color: #fff; }
.mokeb-btn-gold:hover { background: var(--mokeb-gold-dark); }
.mokeb-btn-outline-white { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.7); }
.mokeb-btn-outline-white:hover { background: rgba(255,255,255,.15); }
.mokeb-btn-sm { padding: 7px 14px; font-size: 12px; }

/* Navigation */
.mokeb-step-nav { display: flex; justify-content: space-between; margin-top: 24px; gap: 12px; }

/* Type Cards */
.mokeb-type-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }
@media (max-width: 480px) { .mokeb-type-cards { grid-template-columns: 1fr; } }
.mokeb-type-card { border: 2px solid var(--mokeb-border); border-radius: var(--mokeb-radius); padding: 20px 12px; text-align: center; cursor: pointer; transition: all .2s; }
.mokeb-type-card:hover { border-color: var(--mokeb-blue); }
.mokeb-type-card.selected { border-color: var(--mokeb-gold); background: rgba(201,168,76,.08); }
.mokeb-type-icon { font-size: 32px; margin-bottom: 8px; }
.mokeb-type-card h3 { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.mokeb-type-card p { margin: 0; font-size: 12px; color: var(--mokeb-muted); }

/* Checkbox */
.mokeb-checkbox-group { display: flex; flex-direction: column; gap: 12px; }
.mokeb-checkbox { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.mokeb-checkbox input { width: 18px; height: 18px; accent-color: var(--mokeb-blue); }

/* Docs List */
.mokeb-docs-list { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.mokeb-doc-item { padding: 12px 16px; background: rgba(26,58,107,.05); border-radius: 8px; font-size: 14px; font-weight: 500; }

/* Info Box */
.mokeb-info-box { background: rgba(201,168,76,.1); border: 1px solid rgba(201,168,76,.3); border-radius: 8px; padding: 14px 16px; font-size: 13px; }

/* Review Box */
.mokeb-review-box { background: var(--mokeb-bg); border-radius: 8px; padding: 16px; }
.mokeb-review-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--mokeb-border); font-size: 14px; }
.mokeb-review-row:last-child { border: none; }
.mokeb-review-row label { color: var(--mokeb-muted); }
.mokeb-review-row span { font-weight: 600; }

/* Success */
.mokeb-success-box { text-align: center; padding: 24px 0; }
.mokeb-success-icon { font-size: 56px; margin-bottom: 16px; }
.mokeb-success-box h2 { font-size: 22px; font-weight: 700; color: #16a34a; }
.mokeb-tracking-code { font-family: monospace; font-size: 28px; font-weight: 800; letter-spacing: 3px; background: var(--mokeb-bg); border: 2px dashed var(--mokeb-gold); border-radius: 8px; padding: 14px 24px; margin: 12px auto; display: inline-block; color: var(--mokeb-blue); }
.mokeb-note { font-size: 13px; color: var(--mokeb-muted); }

/* Message */
.mokeb-msg { margin-top: 10px; font-size: 13px; border-radius: 6px; padding: 8px 12px; display: none; }
.mokeb-msg.success { background: #dcfce7; color: #15803d; display: block; }
.mokeb-msg.error   { background: #fee2e2; color: #b91c1c; display: block; }
.mokeb-msg.info    { background: #dbeafe; color: #1d4ed8; display: block; }

/* Loading */
.mokeb-loading { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9999; color: #fff; }
.mokeb-spinner { width: 40px; height: 40px; border: 4px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: mokebSpin .8s linear infinite; margin-bottom: 12px; }
@keyframes mokebSpin { to { transform: rotate(360deg); } }

/* Status Page */
.mokeb-status-card { background: var(--mokeb-card); border-radius: var(--mokeb-radius); box-shadow: var(--mokeb-shadow); overflow: hidden; }
.mokeb-status-header { background: var(--mokeb-blue); color: #fff; padding: 24px; text-align: center; }
.mokeb-status-header h2 { margin: 0 0 4px; font-size: 20px; }
.mokeb-status-body { padding: 24px; }
.mokeb-status-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--mokeb-bg); border-radius: 8px; margin-bottom: 10px; }
.mokeb-status-label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.mokeb-badge { padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.mokeb-badge-green  { background: #dcfce7; color: #15803d; }
.mokeb-badge-yellow { background: #fef9c3; color: #a16207; }
.mokeb-badge-red    { background: #fee2e2; color: #b91c1c; }
.mokeb-badge-gray   { background: var(--mokeb-border); color: var(--mokeb-muted); }
.mokeb-badge-blue   { background: #dbeafe; color: #1d4ed8; }
.mokeb-qr-wrap { text-align: center; margin: 20px 0; }
.mokeb-qr-wrap img { max-width: 180px; border: 4px solid var(--mokeb-border); border-radius: 8px; padding: 8px; background: #fff; }

/* Home Page */
.mokeb-home .mokeb-hero { background: linear-gradient(135deg, var(--mokeb-blue) 0%, var(--mokeb-blue-light) 100%); color: #fff; padding: 56px 32px; border-radius: var(--mokeb-radius); text-align: center; margin-bottom: 32px; }
.mokeb-home .mokeb-hero h1 { font-size: 28px; font-weight: 800; margin: 0 0 12px; }
.mokeb-home .mokeb-hero p { font-size: 15px; opacity: .88; margin: 0 0 28px; line-height: 1.7; }
.mokeb-hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.mokeb-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; }
@media (max-width: 600px) { .mokeb-features { grid-template-columns: 1fr 1fr; } }
.mokeb-feature { background: var(--mokeb-card); border-radius: var(--mokeb-radius); padding: 24px 16px; text-align: center; box-shadow: var(--mokeb-shadow); }
.mokeb-feature span { font-size: 32px; }
.mokeb-feature h3 { font-size: 14px; font-weight: 700; margin: 10px 0 4px; }
.mokeb-feature p { font-size: 12px; color: var(--mokeb-muted); margin: 0; }

.mokeb-announcements-strip { display: flex; flex-direction: column; gap: 10px; }
.mokeb-ann-item { background: var(--mokeb-card); border-right: 4px solid var(--mokeb-gold); padding: 14px 18px; border-radius: 8px; box-shadow: var(--mokeb-shadow); }
.mokeb-ann-item strong { font-size: 14px; }
.mokeb-ann-item p { font-size: 13px; color: var(--mokeb-muted); margin: 4px 0 0; }

/* News */
.mokeb-news-card { background: var(--mokeb-card); border-radius: var(--mokeb-radius); padding: 20px; margin-bottom: 16px; box-shadow: var(--mokeb-shadow); }
.mokeb-news-card h3 { margin: 4px 0 8px; font-size: 16px; font-weight: 700; }
.mokeb-news-card small { color: var(--mokeb-muted); font-size: 12px; }
.mokeb-pin-badge { background: var(--mokeb-gold); color: #fff; padding: 2px 10px; border-radius: 20px; font-size: 11px; margin-left: 8px; }
.mokeb-empty { text-align: center; color: var(--mokeb-muted); padding: 40px; }
.mokeb-loading-text { text-align: center; color: var(--mokeb-muted); padding: 40px; }

/* ===== بنر تبلیغاتی ===== */
/* ابعاد پیشنهادی: دسکتاپ 970×90px | موبایل 320×50px */
.mokeb-banner-wrap { width: 100%; margin-bottom: 24px; text-align: center; overflow: hidden; border-radius: var(--mokeb-radius); box-shadow: var(--mokeb-shadow); }
.mokeb-banner-wrap a { display: block; }
.mokeb-banner-img { width: 100%; max-width: 970px; height: auto; max-height: 90px; object-fit: cover; display: block; margin: 0 auto; border-radius: var(--mokeb-radius); }
@media (max-width: 480px) { .mokeb-banner-img { max-height: 50px; } }

/* ===== تقویم شمسی ===== */
.mokeb-datepicker-wrap { position: relative; }
.mokeb-datepicker-input { cursor: pointer; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat left 12px center; padding-left: 40px; }
.mokeb-datepicker { position: absolute; top: calc(100% + 4px); right: 0; z-index: 9000; background: #fff; border: 1.5px solid var(--mokeb-border); border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.15); width: 280px; padding: 12px; font-family: 'Vazirmatn', Tahoma, sans-serif; direction: rtl; }
.mokeb-datepicker-float { position: fixed !important; }
.mokeb-dp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mokeb-dp-nav { background: none; border: 1.5px solid var(--mokeb-border); border-radius: 6px; width: 32px; height: 32px; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; color: var(--mokeb-blue); transition: all .2s; }
.mokeb-dp-nav:hover { background: var(--mokeb-blue); color: #fff; }
.mokeb-dp-title { display: flex; gap: 6px; }
.mokeb-dp-select { padding: 5px 8px; border: 1.5px solid var(--mokeb-border); border-radius: 6px; font-family: inherit; font-size: 13px; cursor: pointer; }
.mokeb-dp-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 6px; }
.mokeb-dp-weekdays span { text-align: center; font-size: 11px; font-weight: 700; color: var(--mokeb-muted); padding: 4px 0; }
.mokeb-dp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mokeb-dp-day { text-align: center; padding: 6px 2px; font-size: 12px; border-radius: 6px; cursor: pointer; transition: all .15s; }
.mokeb-dp-day:hover { background: var(--mokeb-blue); color: #fff; }
.mokeb-dp-day.empty { cursor: default; }
.mokeb-dp-footer { margin-top: 10px; text-align: center; }
.mokeb-dp-close { background: var(--mokeb-bg); border: 1.5px solid var(--mokeb-border); border-radius: 6px; padding: 6px 20px; font-family: inherit; font-size: 13px; cursor: pointer; color: var(--mokeb-muted); }
.mokeb-dp-close:hover { background: var(--mokeb-border); }

/* ===== اعضای گروه ===== */
.mokeb-members-section { background: var(--mokeb-bg); border-radius: 10px; padding: 16px; margin-top: 12px; }
.mokeb-members-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mokeb-members-header h3 { margin: 0; font-size: 15px; color: var(--mokeb-blue); }
.mokeb-members-note { font-size: 12px; color: var(--mokeb-muted); background: rgba(201,168,76,.1); border: 1px solid rgba(201,168,76,.3); border-radius: 6px; padding: 8px 12px; margin-bottom: 12px; }
.mokeb-members-list { display: flex; flex-direction: column; gap: 10px; }
.mokeb-members-empty { text-align: center; color: var(--mokeb-muted); font-size: 13px; padding: 16px; }
.mokeb-member-row { background: #fff; border: 1.5px solid var(--mokeb-border); border-radius: 8px; padding: 12px; display: flex; align-items: flex-start; gap: 10px; }
.mokeb-member-num { width: 28px; height: 28px; min-width: 28px; background: var(--mokeb-blue); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 5px; }
.mokeb-member-fields { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 480px) { .mokeb-member-fields { grid-template-columns: 1fr; } }
.mokeb-remove-member { background: none; border: 1.5px solid #fee2e2; border-radius: 6px; width: 30px; height: 30px; cursor: pointer; color: #b91c1c; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .2s; }
.mokeb-remove-member:hover { background: #fee2e2; }