/* ═══════════════════════════════════════════
   IRT — Frontend (fullscreen, responsive)
═══════════════════════════════════════════ */

/* ── Reset for test page ── */
#irt-app, #irt-app * { box-sizing: border-box; }

#irt-app {
    --p:    #7c3aed;
    --pk:   #db2777;
    --grad: linear-gradient(135deg, var(--p), var(--pk));
    --bg:   #0a0f1e;
    --c1:   #111827;
    --c2:   #162032;
    --bdr:  #1e2d45;
    --tx:   #e2e8f0;
    --mt:   #94a3b8;
    --grn:  #22c55e;
    --ylw:  #eab308;
    --org:  #f97316;
    --red:  #ef4444;
    --rad:  14px;

    font-family: 'Vazirmatn', Tahoma, Arial, sans-serif !important;
    direction: rtl;
    background: var(--bg);
    color: var(--tx);
    min-height: 100vh;
    width: 100%;
    padding: 0;
    margin: 0;
}

/* ── Screen wrapper ── */
.irt-screen { display: none; }
.irt-screen.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 32px 16px 60px;
    animation: irt-in .35s ease;
}
@keyframes irt-in {
    from { opacity:0; transform:translateY(14px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ── Inner container (max-width) ── */
.irt-screen > * { width: 100%; max-width: 620px; }

/* ── Header ── */
.irt-header { text-align: center; margin-bottom: 28px; }
.irt-logo {
    width: 76px; height: 76px; font-size: 34px;
    background: var(--c2); border: 2px solid var(--bdr);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px;
    box-shadow: 0 0 32px rgba(124,58,237,.35);
}
.irt-title {
    font-size: clamp(22px,5vw,34px); font-weight: 900; margin: 0 0 8px;
    background: var(--grad); -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; background-clip: text;
}
.irt-sub { color: var(--mt); font-size: 14px; margin: 0; }

/* ── Two-card layout ── */
.irt-two-cards {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px;
}
@media (max-width: 500px) {
    .irt-two-cards { grid-template-columns: 1fr; }
}

/* ── Card ── */
.irt-card {
    background: var(--c1); border: 1px solid var(--bdr);
    border-radius: var(--rad); padding: 18px 16px;
    box-shadow: 0 6px 24px rgba(0,0,0,.45);
}

/* ── Label / Input / Error ── */
.irt-label {
    display: block; font-size: 13px; font-weight: 700;
    color: #a78bfa; margin-bottom: 8px;
}
.irt-input {
    width: 100%; background: var(--c2); border: 1.5px solid var(--bdr);
    border-radius: 10px; padding: 13px 14px; color: var(--tx);
    font-family: inherit; font-size: 15px; text-align: right;
    transition: border-color .2s, box-shadow .2s;
}
.irt-input::placeholder { color: #475569; }
.irt-input:focus {
    outline: none; border-color: var(--p);
    box-shadow: 0 0 0 3px rgba(124,58,237,.2);
}
.irt-err { display: block; color: var(--red); font-size: 12px; margin-top: 5px; min-height: 16px; }

/* ── Confidential ── */
.irt-conf {
    text-align: center; color: var(--mt); font-size: 13px;
    padding: 11px 16px; margin-bottom: 16px;
    background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.2);
    border-radius: 10px;
}

/* ── Buttons ── */
.irt-btn {
    display: block; width: 100%; padding: 15px 20px;
    border-radius: 12px; border: none; font-family: inherit;
    font-size: 16px; font-weight: 700; cursor: pointer;
    text-align: center; text-decoration: none; transition: all .2s;
}
.irt-btn:disabled { opacity: .4; cursor: not-allowed; }
.irt-btn-primary {
    background: var(--grad); color: #fff;
    box-shadow: 0 4px 20px rgba(124,58,237,.4);
}
.irt-btn-primary:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
.irt-btn-outline {
    background: transparent; border: 1.5px solid var(--bdr); color: var(--mt);
}
.irt-btn-outline:hover { border-color: var(--p); color: var(--tx); }
.irt-btn-save {
    background: linear-gradient(135deg,#0ea5e9,#06b6d4); color:#fff;
    box-shadow: 0 4px 16px rgba(14,165,233,.3); margin-bottom: 12px;
}
.irt-btn-cta {
    /* background & color set dynamically via JS from admin settings */
    background: #16a34a;
    color: #fff;
    display: inline-block;
    width: auto;
    padding: 14px 28px;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
    border-radius: 12px;
}
.irt-mt { margin-top: 12px; font-size: 14px; }

/* ── Nav ── */
.irt-nav { display: flex; gap: 12px; margin-top: 18px; }
.irt-nav .irt-btn { flex: 1; }
@media (max-width: 420px) {
    .irt-nav { flex-direction: column-reverse; }
}

/* ── Progress bar ── */
.irt-prog-wrap {
    width: 100%; height: 5px; background: var(--bdr);
    border-radius: 5px; margin-bottom: 20px; overflow: hidden;
}
.irt-prog {
    height: 100%; background: var(--grad); border-radius: 5px;
    transition: width .5s ease;
}

/* ── Question card ── */
.irt-qcard {
    background: var(--c1); border: 1px solid var(--bdr);
    border-radius: var(--rad); padding: 18px 16px; margin-bottom: 14px;
}
.irt-badge {
    display: inline-block; background: rgba(124,58,237,.2); color: #a78bfa;
    border: 1px solid rgba(124,58,237,.3); border-radius: 20px;
    padding: 3px 12px; font-size: 12px; font-weight: 700; margin-bottom: 10px;
}
.irt-qtext {
    font-size: clamp(15px,3.5vw,19px); font-weight: 700;
    line-height: 1.65; margin: 0 0 4px;
}
.irt-qsub { color: var(--mt); font-size: 13px; margin: 0; }

/* ── Options ── */
.irt-opts { display: flex; flex-direction: column; gap: 9px; }
.irt-opt {
    background: var(--c1); border: 1.5px solid var(--bdr);
    border-radius: 12px; padding: 13px 14px; color: var(--tx);
    font-family: inherit; font-size: 14px; font-weight: 500;
    cursor: pointer; text-align: right; display: flex;
    align-items: center; gap: 10px; transition: all .2s;
}
.irt-opt:hover { border-color: var(--p); background: rgba(124,58,237,.1); }
.irt-opt.sel   { border-color: var(--p); background: rgba(124,58,237,.2); color: #fff; }
.irt-onum {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    background: var(--c2); border: 1px solid var(--bdr); color: var(--mt);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; transition: all .2s;
}
.irt-opt.sel .irt-onum { background: var(--p); color: #fff; border-color: var(--p); }

/* ── Result ── */
.irt-res-hdr { text-align: center; margin-bottom: 18px; }
.irt-res-title {
    font-size: clamp(18px,4vw,24px); font-weight: 800; margin: 0 0 6px;
    background: var(--grad); -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; background-clip: text;
}
.irt-res-name { color: var(--mt); font-size: 14px; margin: 0; }

/* ── Gauge ── */
.irt-gauge-box {
    background: var(--c1); border: 1px solid var(--bdr);
    border-radius: var(--rad); padding: 18px 12px 12px;
    text-align: center; margin-bottom: 16px;
    box-shadow: 0 6px 24px rgba(0,0,0,.4);
}
#gauge-svg { width: 100%; max-width: 280px; display: block; margin: 0 auto; }
.irt-risk-label {
    font-size: clamp(16px,4vw,20px); font-weight: 800; padding: 8px 0 4px;
}

/* ── Capital ── */
.irt-cap-row { text-align: center; margin-bottom: 14px; }
.irt-cap-badge {
    display: inline-block; background: rgba(234,179,8,.12);
    border: 1px solid rgba(234,179,8,.3); color: var(--ylw);
    border-radius: 20px; padding: 7px 18px; font-size: 13px; font-weight: 600;
}

/* ── Suggestions ── */
.irt-sugg-box {
    background: var(--c1); border: 1px solid var(--bdr);
    border-radius: var(--rad); padding: 18px 16px; margin-bottom: 16px;
}
.irt-sugg-title { font-size: 15px; font-weight: 700; margin: 0 0 12px; }
.irt-sugg-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 12px; }
.irt-sugg-item  {
    background: var(--c2); border: 1px solid var(--bdr);
    border-radius: 10px; padding: 11px 12px;
    display: flex; align-items: center; gap: 9px;
    font-size: 13px; font-weight: 600;
}
.irt-sugg-item .ico { font-size: 20px; flex-shrink: 0; }
.irt-sugg-desc { color: var(--mt); font-size: 13px; line-height: 1.8; margin: 0; }

/* ── CTA ── */
.irt-cta-box {
    background: linear-gradient(135deg,rgba(22,163,74,.14),rgba(34,197,94,.07));
    border: 1px solid rgba(34,197,94,.28); border-radius: var(--rad);
    padding: 18px 16px; text-align: center; margin-bottom: 14px;
}
.irt-cta-box p { font-size: 14px; font-weight: 600; margin: 0 0 12px; }

.irt-res-actions { margin-bottom: 12px; }

/* ── Branding footer ── */
.irt-brand-footer {
    width: 100%;
    text-align: center;
    padding: 20px 0 10px;
    color: rgba(148,163,184,.5);
    font-size: 12px;
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    direction: rtl;
    background: var(--bg);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    border-top: 1px solid rgba(30,45,69,.6);
    backdrop-filter: blur(6px);
}
.irt-brand-footer a {
    color: rgba(167,139,250,.7);
    text-decoration: none;
    font-weight: 600;
}
.irt-brand-footer a:hover { color: #a78bfa; text-decoration: underline; }

/* ── Branding inside image capture ── */
.irt-capture-brand {
    text-align: center;
    color: rgba(148,163,184,.45);
    font-size: 11px;
    padding: 10px 0 4px;
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    direction: rtl;
    border-top: 1px solid rgba(30,45,69,.5);
    margin-top: 12px;
}

/* Extra bottom padding so branding footer doesn't cover content */
.irt-screen.active { padding-bottom: 80px; }

/* ── CTA button hover ── */
.irt-btn-cta { transition: opacity .2s, transform .2s; }
.irt-btn-cta:hover { opacity: .88; transform: translateY(-1px); }