/* فونت محلی وزیرمتن — فایل‌های woff2 را در پوشه public/fonts/ قرار بده.
   تا آن زمان Tahoma به‌عنوان جایگزین استفاده می‌شود. */
@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* قفل سخت‌افزاری عرض صفحه — تضمین می‌کند صرف‌نظر از هر عاملی، هیچ اسکرول
   افقی روی برگه‌ای که این فرم در آن قرار دارد ممکن نباشد. این محدودیت
   فقط روی همین برگه (جایی که شورت‌کد نبض بارگذاری شده) اعمال می‌شود. */
html, body {
    max-width: 100%;
    overflow-x: hidden !important;
}

.nabz-form-wrapper {
    --nabz-primary: #5b4fe8;
    --nabz-primary-dark: #4436d4;
    --nabz-primary-light: #a89bff;
    --nabz-accent: #00c2a8;
    --nabz-warn: #ff9f43;
    --nabz-danger: #ef5675;
    --nabz-bg: #f6f5ff;
    --nabz-text: #262347;
    --nabz-muted: #7a7796;

    width: 100%;
    max-width: 780px;
    margin: 30px auto;
    font-family: 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif;
    direction: rtl;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(91,79,232,0.12), 0 2px 8px rgba(0,0,0,0.04);
    padding: 0;
    overflow: hidden;
    color: var(--nabz-text);
    box-sizing: border-box;
}

/* ریست باکس‌مدل برای همه فرزندان — رایج‌ترین علت نیاز به اسکرول افقی در موبایل.
   توجه: max-width عمومی این‌جا اعمال نمی‌شود چون جدول برنامه ۳۰ روزه
   عمداً از حداقل عرض بیشتر استفاده می‌کند و باید داخل کادر خودش اسکرول شود. */
.nabz-form-wrapper,
.nabz-form-wrapper *,
.nabz-form-wrapper *::before,
.nabz-form-wrapper *::after {
    box-sizing: border-box;
}

.nabz-header {
    text-align: center;
    padding: 34px 30px 26px;
    background: linear-gradient(135deg, var(--nabz-primary) 0%, var(--nabz-primary-dark) 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.nabz-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.16), transparent 45%),
                radial-gradient(circle at 85% 80%, rgba(0,194,168,0.25), transparent 40%);
    pointer-events: none;
}

.nabz-header h2 {
    color: #fff;
    margin: 0 0 8px;
    font-size: 1.7rem;
    font-weight: 800;
    position: relative;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.nabz-header p {
    color: rgba(255,255,255,0.88);
    margin: 0;
    font-size: 0.98rem;
    position: relative;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.nabz-header .nabz-badge {
    display: inline-block;
    margin-top: 14px;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.35);
    font-size: 0.8rem;
    position: relative;
}

.nabz-body {
    padding: 30px 32px 34px;
}

.nabz-progress {
    margin-bottom: 30px;
}

.nabz-progress-bar {
    height: 10px;
    background: #ece9ff;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.nabz-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--nabz-primary), var(--nabz-accent));
    border-radius: 999px;
    transition: width 0.4s cubic-bezier(.4,0,.2,1);
}

.nabz-steps-indicator {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    gap: 4px;
}

.nabz-step-dot {
    flex: 1;
    text-align: center;
    font-size: 0.68rem;
    color: var(--nabz-muted);
    position: relative;
    padding-top: 4px;
}

.nabz-step-dot span.dot {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #dedaff;
    margin: 0 auto 6px;
    transition: all 0.3s;
}

.nabz-step-dot.is-current span.dot {
    background: var(--nabz-primary);
    box-shadow: 0 0 0 4px rgba(91,79,232,0.18);
    transform: scale(1.2);
}

.nabz-step-dot.is-done span.dot {
    background: var(--nabz-accent);
}

.nabz-step {
    display: none;
}

.nabz-step.active {
    display: block;
    animation: nabzFadeIn 0.35s ease;
}

@keyframes nabzFadeIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

.nabz-step h3 {
    color: var(--nabz-text);
    margin: 0 0 6px;
    font-size: 1.3rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nabz-step h3 .nabz-step-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--nabz-primary), var(--nabz-primary-light));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.nabz-step-desc {
    color: var(--nabz-muted);
    font-size: 0.85rem;
    margin: 0 0 22px 46px;
    letter-spacing: 0.3px;
}

.nabz-intro-text {
    background: var(--nabz-bg);
    border: 1px solid #e7e4ff;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 24px;
    color: var(--nabz-muted);
    font-size: 0.9rem;
    line-height: 1.9;
}

.nabz-field {
    margin-bottom: 20px;
}

.nabz-field label {
    display: block;
    margin-bottom: 7px;
    font-weight: 600;
    color: var(--nabz-text);
    font-size: 0.92rem;
}

.nabz-field input[type="text"],
.nabz-field input[type="tel"],
.nabz-field textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #e5e2f5;
    border-radius: 12px;
    font-size: 0.95rem;
    font-family: inherit;
    background: #fbfaff;
    transition: all 0.2s;
    box-sizing: border-box;
}

.nabz-field input:focus,
.nabz-field textarea:focus {
    outline: none;
    border-color: var(--nabz-primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(91,79,232,0.12);
}

.required { color: var(--nabz-danger); }

.nabz-question {
    background: var(--nabz-bg);
    border-radius: 14px;
    padding: 18px 18px 16px;
    margin-bottom: 14px;
    border: 1.5px solid transparent;
    transition: border-color 0.2s;
}

.nabz-question.answered {
    border-color: #d7d1ff;
}

.nabz-q-text {
    margin: 0 0 14px;
    line-height: 1.75;
    color: var(--nabz-text);
    font-size: 0.95rem;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.nabz-q-text strong {
    color: var(--nabz-primary);
    margin-left: 4px;
}

.nabz-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.nabz-option {
    flex: 1 1 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #fff;
    border: 1.5px solid #e5e2f5;
    border-radius: 10px;
    padding: 11px 10px;
    cursor: pointer;
    transition: all 0.18s;
    font-size: 0.88rem;
    text-align: center;
}

.nabz-option:hover {
    border-color: var(--nabz-primary-light);
    background: #f3f0ff;
    transform: translateY(-1px);
}

.nabz-option input {
    accent-color: var(--nabz-primary);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* دو مسیر: :has برای مرورگرهای مدرن، کلاس is-selected (با JS) به‌عنوان فال‌بک */
.nabz-option:has(input:checked),
.nabz-option.is-selected {
    border-color: var(--nabz-primary);
    background: linear-gradient(135deg, #efecff, #e6f9f6);
    box-shadow: 0 2px 8px rgba(91,79,232,0.12);
}

.nabz-option input:checked + span {
    font-weight: 700;
    color: var(--nabz-primary-dark);
}

.nabz-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 28px;
    gap: 12px;
}

.nabz-btn {
    padding: 13px 30px;
    border: none;
    border-radius: 12px;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.nabz-next, .nabz-submit {
    background: linear-gradient(135deg, var(--nabz-primary), var(--nabz-primary-dark));
    color: #fff;
    margin-right: auto;
    box-shadow: 0 4px 14px rgba(91,79,232,0.32);
}

.nabz-next:hover, .nabz-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(91,79,232,0.4);
}

.nabz-prev {
    background: #f1f0fa;
    color: var(--nabz-text);
}

.nabz-prev:hover {
    background: #e4e1f5;
}

.nabz-submit {
    background: linear-gradient(135deg, var(--nabz-accent), #009d88);
    box-shadow: 0 4px 14px rgba(0,194,168,0.32);
}

.nabz-submit:hover {
    box-shadow: 0 6px 20px rgba(0,194,168,0.4);
}

.nabz-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.nabz-result {
    padding: 10px 4px 4px;
}

.nabz-success h3 {
    color: var(--nabz-accent);
    font-size: 1.35rem;
    font-weight: 800;
}

.nabz-success p { color: var(--nabz-muted); }

.nabz-type-badge {
    background: linear-gradient(135deg, #e7fbf7, #edeaff);
    border: 1px solid #d6f3ec;
    padding: 16px 20px;
    border-radius: 16px;
    text-align: center;
    margin: 18px 0 26px;
}

.nabz-type-badge strong {
    color: var(--nabz-primary-dark);
    font-size: 1.15rem;
}

.nabz-plan-table-wrap {
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid #ece9ff;
}

table.nabz-plan-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
    min-width: 640px;
}

table.nabz-plan-table thead tr {
    background: linear-gradient(135deg, var(--nabz-primary), var(--nabz-primary-dark));
    color: #fff;
}

table.nabz-plan-table th, table.nabz-plan-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #ece9ff;
    text-align: right;
    vertical-align: top;
}

table.nabz-plan-table tbody tr:nth-child(even) { background: #faf9ff; }
table.nabz-plan-table tbody tr:hover { background: #f3f0ff; }

.nabz-kpi-chip {
    display: inline-block;
    margin-top: 6px;
    background: #e7f9f5;
    color: #007a68;
    border-radius: 8px;
    padding: 4px 9px;
    font-size: 0.78rem;
}

.nabz-tips-box {
    background: linear-gradient(135deg, #fff6e6, #fff);
    border: 1px solid #ffe6b8;
    padding: 18px 18px 18px 36px;
    border-radius: 14px;
    margin: 8px 0;
}

.nabz-tips-box li { margin-bottom: 9px; line-height: 1.7; }

.nabz-checklist-progress {
    margin: 6px 0 22px;
}

.nabz-day-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.nabz-day-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff;
    border: 1.5px solid #e5e2f5;
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.nabz-day-item:hover {
    border-color: var(--nabz-primary-light, #a89bff);
    background: #f9f8ff;
}

.nabz-day-item.is-review {
    background: #fffaf0;
    border-color: #ffe6b8;
}

.nabz-day-item.is-done {
    background: linear-gradient(135deg, #e7fbf7, #f3f0ff);
    border-color: var(--nabz-accent, #00c2a8);
}

.nabz-day-checkbox {
    margin-top: 4px;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    accent-color: var(--nabz-accent, #00c2a8);
    cursor: pointer;
}

.nabz-day-checkbox:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.nabz-day-num {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--nabz-bg, #f6f5ff);
    color: var(--nabz-primary, #5b4fe8);
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nabz-day-item.is-done .nabz-day-num {
    background: var(--nabz-accent, #00c2a8);
    color: #fff;
}

.nabz-day-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.nabz-day-body strong {
    font-size: 0.92rem;
    color: var(--nabz-text, #262347);
}

.nabz-day-item.is-done .nabz-day-body strong {
    text-decoration: line-through;
    text-decoration-color: var(--nabz-accent, #00c2a8);
}

.nabz-day-desc {
    font-size: 0.82rem;
    color: var(--nabz-muted, #7a7796);
    line-height: 1.7;
}

.nabz-form-footer-note {
    margin-top: 26px;
    text-align: center;
    color: var(--nabz-muted);
    font-size: 0.85rem;
    line-height: 1.9;
}

.nabz-alert {
    padding: 12px 16px;
    border-radius: 10px;
    background: #fff0f2;
    border: 1px solid #ffd3da;
    color: #b3253f;
    font-size: 0.88rem;
    margin-bottom: 16px;
}

@media (max-width: 640px) {
    .nabz-form-wrapper {
        margin: 12px auto;
        width: calc(100% - 24px);
        border-radius: 16px;
    }
    .nabz-header { padding: 26px 20px 20px; }
    .nabz-header h2 { font-size: 1.35rem; }
    .nabz-body { padding: 22px 18px 26px; }
    .nabz-step-desc { margin-right: 0; }
    .nabz-options { flex-direction: column; }
    .nabz-option { flex: 1 1 auto; width: 100%; }
    .nabz-steps-indicator .nabz-step-dot span.label { display: none; }
    .nabz-btn { padding: 12px 20px; font-size: 0.92rem; }
    .nabz-nav { flex-wrap: wrap; }
    .nabz-nav .nabz-btn { flex: 1 1 auto; min-width: 0; }
}

@media (max-width: 420px) {
    .nabz-form-wrapper { margin: 8px auto; width: calc(100% - 16px); border-radius: 14px; }
    .nabz-header { padding: 20px 14px 16px; }
    .nabz-header h2 { font-size: 1.15rem; }
    .nabz-header p { font-size: 0.85rem; }
    .nabz-body { padding: 16px 12px 20px; }
    .nabz-question { padding: 14px 12px 12px; }
    .nabz-q-text { font-size: 0.88rem; }
    .nabz-option { padding: 10px 8px; font-size: 0.85rem; }
    .nabz-step h3 { font-size: 1.05rem; gap: 8px; }
    .nabz-step h3 .nabz-step-icon { width: 30px; height: 30px; font-size: 0.95rem; }
    .nabz-btn { padding: 11px 14px; font-size: 0.86rem; }
    .nabz-day-item { padding: 10px 10px; gap: 8px; }
}