/* QA System v2 – frontend */
.qas-wrap{
    --qas-bg:       #1e1e1e;
    --qas-surface:  #272727;
    --qas-surface2: #2e2e2e;
    --qas-border:   #3a3a3a;
    --qas-text:     #e8e8e8;
    --qas-muted:    #888;
    --qas-accent:   #e8b84b;
    --qas-btn-text: #111;
    --qas-success:  #3ecf8e;
    --qas-error:    #e85555;
    --qas-font:     'IRANYekan','Vazirmatn',Tahoma,sans-serif;
    --qas-fbase:    15px;
    --qas-ftitle:   22px;
    --qas-r:        10px;
    --qas-rsm:      7px;
    --qas-gap:      16px;

    font-family: var(--qas-font);
    font-size:   var(--qas-fbase);
    color:       var(--qas-text);
    max-width:   800px;
    margin:      0 auto;
    display:     flex;
    flex-direction: column;
    gap:         28px;
}

/* ── FORM CARD ─────────────────────── */
.qas-ask-section{
    background:    var(--qas-surface);
    border:        1px solid var(--qas-border);
    border-radius: var(--qas-r);
    padding:       32px 28px;
}
.qas-ask-head{ margin-bottom:24px; padding-bottom:18px; border-bottom:1px solid var(--qas-border); }
.qas-ask-title{ font-size:var(--qas-ftitle); font-weight:700; margin:0 0 8px; color:var(--qas-text); }
.qas-ask-desc{ font-size:.88rem; color:var(--qas-muted); margin:0; line-height:1.7; }

/* ── GRID 2-COL ────────────────────── */
.qas-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--qas-gap); margin-bottom:var(--qas-gap); }

/* ── FIELD ─────────────────────────── */
.qas-field{ display:flex; flex-direction:column; gap:7px; margin-bottom:var(--qas-gap); }
.qas-row-2 .qas-field{ margin-bottom:0; }
.qas-label{ font-size:.8rem; font-weight:600; color:#ccc; letter-spacing:.2px; }
.qas-req{ color:var(--qas-accent); }

.qas-input,
.qas-textarea{
    background:    var(--qas-surface2);
    border:        1px solid var(--qas-border);
    border-radius: var(--qas-rsm);
    color:         var(--qas-text);
    font-family:   var(--qas-font);
    font-size:     var(--qas-fbase);
    padding:       12px 14px;
    width:         100%;
    box-sizing:    border-box;
    outline:       none;
    transition:    border-color .2s, box-shadow .2s;
}
.qas-input::placeholder,.qas-textarea::placeholder{ color:#555; }
.qas-input:focus,.qas-textarea:focus{
    border-color: var(--qas-accent);
    box-shadow:   0 0 0 3px color-mix(in srgb,var(--qas-accent) 18%,transparent);
}
.qas-textarea{ resize:vertical; min-height:120px; line-height:1.7; }

.qas-char-count{ font-size:.75rem; color:var(--qas-muted); text-align:left; margin-top:3px; display:block; }

/* ── CAPTCHA ────────────────────────── */
.qas-cap-wrap{ margin-bottom:var(--qas-gap); }

.qas-cap-box{
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
    background:      var(--qas-surface2);
    border:          1px solid var(--qas-border);
    border-radius:   var(--qas-rsm);
    padding:         12px 16px;
    max-width:       320px;
    cursor:          pointer;
    user-select:     none;
    transition:      border-color .2s;
}
.qas-cap-box:hover{ border-color:#4285f4; }
.qas-cap-box:focus{ outline:2px solid #4285f4; outline-offset:2px; }

/* checkbox circle */
.qas-cap-cb{
    width:26px; height:26px;
    border-radius:4px;
    border:2px solid var(--qas-border);
    background:var(--qas-surface);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    transition:border-color .2s, background .2s;
}
/* states */
.qas-cap-box[data-state="idle"] .qas-cap-cb{ border-color:#555; }
.qas-cap-box[data-state="checking"] .qas-cap-cb{ border-color:#4285f4; }
.qas-cap-box[data-state="done"] .qas-cap-cb{ background:#4285f4; border-color:#4285f4; }
.qas-cap-box[data-state="fail"] .qas-cap-cb{ border-color:var(--qas-error); background:rgba(232,85,85,.12); animation:qas-shake .4s ease; }

/* spinner / check icons */
.qas-cap-spinner,.qas-cap-check{ display:none; }
.qas-cap-box[data-state="checking"] .qas-cap-spinner{ display:block; }
.qas-cap-box[data-state="checking"] .qas-cap-spinner circle{ animation:qas-spin .75s linear infinite; transform-origin:center; }
.qas-cap-box[data-state="done"] .qas-cap-check{ display:block; animation:qas-pop .25s cubic-bezier(.34,1.56,.64,1) both; }

/* label */
.qas-cap-lbl{ flex:1; font-size:.9rem; }
.qas-cap-l-idle,.qas-cap-l-done,.qas-cap-l-fail{ display:none; }
.qas-cap-box:not([data-state]) .qas-cap-l-idle,
.qas-cap-box[data-state="idle"] .qas-cap-l-idle,
.qas-cap-box[data-state="checking"] .qas-cap-l-idle{ display:block; color:var(--qas-text); }
.qas-cap-box[data-state="done"] .qas-cap-l-done{ display:block; color:#4285f4; font-weight:600; }
.qas-cap-box[data-state="fail"] .qas-cap-l-fail{ display:block; color:var(--qas-error); font-size:.82rem; }

/* logo */
.qas-cap-logo{ display:flex; flex-direction:column; align-items:center; gap:2px; flex-shrink:0; }
.qas-cap-logo-txt{ font-size:8.5px; color:var(--qas-muted); text-align:center; line-height:1.4; }
.qas-cap-logo-txt small{ font-size:7.5px; }

/* ── PRIVACY & SUBMIT ───────────────── */
.qas-privacy{ font-size:.8rem; color:var(--qas-muted); margin:0 0 20px; line-height:1.6; }
.qas-submit-row{ display:flex; justify-content:flex-end; }

.qas-btn-submit{
    display:       inline-flex;
    align-items:   center;
    gap:           8px;
    background:    var(--qas-accent);
    color:         var(--qas-btn-text);
    font-family:   var(--qas-font);
    font-size:     1rem;
    font-weight:   700;
    border:        none;
    border-radius: var(--qas-rsm);
    padding:       13px 32px;
    cursor:        pointer;
    transition:    opacity .2s, transform .15s;
    min-width:     160px;
    justify-content: center;
}
.qas-btn-icon{ display:inline-flex; align-items:center; flex-shrink:0; }
.qas-btn-icon svg{ width:17px; height:17px; }
.qas-btn-submit:hover{ opacity:.88; transform:translateY(-1px); }
.qas-btn-submit:active{ transform:translateY(0); }
.qas-btn-submit:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

/* ── ALERTS ─────────────────────────── */
.qas-alert{
    display:flex; align-items:center; gap:10px;
    margin-top:14px; padding:12px 16px;
    border-radius:var(--qas-rsm); font-size:.88rem;
}
.qas-alert-ok{  background:rgba(62,207,142,.1);  color:var(--qas-success); border:1px solid rgba(62,207,142,.25); }
.qas-alert-err{ background:rgba(232,85,85,.1);   color:var(--qas-error);   border:1px solid rgba(232,85,85,.25); }
.qas-hidden{ display:none !important; }

/* ════════════════════════════════════════
   LIST SECTION — matches Figma node 40287-1569
   ════════════════════════════════════════ */

/* ── سربرگ لیست ── */
.qas-list-head{
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             8px;
    margin-bottom:   28px;
    direction:       rtl;
}
.qas-list-title{
    font-size:   1.45rem;
    font-weight: 700;
    margin:      0;
    color:       var(--qas-text);
    direction:   rtl;
}
.qas-list-cnt{
    font-size:    .78rem;
    color:        var(--qas-muted);
    padding:      3px 10px;
    border-radius:20px;
    border:       1px solid var(--qas-border);
}
.qas-list{ display:flex; flex-direction:column; }

/* ── آیتم — خط نازک جداکننده ── */
.qas-item{
    background:    transparent;
    border:        none;
    border-top:    1px solid var(--qas-border);
    padding:       0;
}
.qas-item:first-child{ border-top: none; }

/* ── ردیف سؤال — سؤال یک‌طرف، تاریخ طرف مخالف ── */
.qas-item-row{
    display:         flex;
    flex-direction:  row;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             40px;
    padding:         28px 0 24px;
}

/* تاریخ — سمت مخالف سؤال */
.qas-item-date{
    display:     flex;
    align-items: center;
    gap:         7px;
    font-size:   .8rem;
    color:       var(--qas-muted);
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 3px;
    direction:   ltr;
    order:       2;
}
.qas-item-date svg,
.qas-item-date .qas-date-icon{ flex-shrink:0; display:inline-flex; align-items:center; }

/* سؤال — راست‌چین */
.qas-item-q-text{
    margin:      0;
    font-size:   1.05rem;
    font-weight: 600;
    line-height: 1.7;
    color:       var(--qas-text);
    text-align:  right;
    direction:   rtl;
    flex:        1;
    order:       1;
    display:     flex;
    align-items: flex-start;
    gap:         8px;
}

/* آیکون داخل سؤال — بدون کادر/border */
.qas-q-icon{
    display:     inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-top:  3px;
    color:       var(--qas-muted);
}
.qas-q-icon svg{ width:16px; height:16px; }

/* ── بلاک پاسخ ── */
.qas-item-a{
    background:    var(--qas-surface);
    border-radius: 8px;
    padding:       24px 32px 22px;
    margin-bottom: 28px;
}

/* هدر پاسخ — بدون کادر دور آیکون */
.qas-item-a-head{
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    gap:             10px;
    margin-bottom:   20px;
    direction:       rtl;
}
.qas-item-a-badge{
    display:     inline-flex;
    align-items: center;
    gap:         8px;
    font-size:   .95rem;
    font-weight: 700;
    color:       var(--qas-text);
    direction:   rtl;
}
/* آیکون پاسخ — بدون border، بدون کادر */
.qas-badge-icon{
    display:     inline-flex;
    align-items: center;
    flex-shrink: 0;
    color:       var(--qas-muted);
}
.qas-badge-icon svg{ width:16px; height:16px; }

/* متن پاسخ */
.qas-item-a-text{
    margin:      0 0 18px;
    font-size:   .97rem;
    line-height: 1.9;
    color:       var(--qas-text);
    text-align:  center;
    direction:   rtl;
}

/* امضا */
.qas-item-a-sig{
    margin:      0;
    font-size:   .88rem;
    color:       var(--qas-muted);
    text-align:  right;
    direction:   rtl;
}

/* footer پاسخ: امضا + تاریخ پاسخ */
.qas-item-a-footer{
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
    direction:       rtl;
    flex-wrap:       wrap;
}
.qas-ans-date{
    font-size:  .75rem;
    color:      var(--qas-muted);
    opacity:    .65;
    direction:  ltr;
    white-space: nowrap;
}

/* در انتظار */
.qas-item-pending{
    display:         flex;
    align-items:     center;
    gap:             7px;
    padding:         14px 0;
    font-size:       .83rem;
    color:           var(--qas-muted);
    font-style:      italic;
    justify-content: flex-end;
    direction:       rtl;
    margin-bottom:   20px;
}

/* ── LTR ── */
.qas-wrap[dir="ltr"] .qas-item-row    { flex-direction:row-reverse; }
.qas-wrap[dir="ltr"] .qas-item-date   { order:2; direction:ltr; }
.qas-wrap[dir="ltr"] .qas-item-q-text { order:1; text-align:left; direction:ltr; }
.qas-wrap[dir="ltr"] .qas-item-a-head { justify-content:flex-start; direction:ltr; }
.qas-wrap[dir="ltr"] .qas-item-a-badge{ direction:ltr; }
.qas-wrap[dir="ltr"] .qas-item-a-text { text-align:left; direction:ltr; }
.qas-wrap[dir="ltr"] .qas-item-a-sig  { text-align:left; direction:ltr; }
.qas-wrap[dir="ltr"] .qas-item-pending{ justify-content:flex-start; direction:ltr; }

/* ── موبایل ── */
@media(max-width:640px){
    .qas-item-row    { flex-direction:column-reverse; gap:8px; padding:20px 0 16px; }
    .qas-item-date   { order:unset; }
    .qas-item-q-text { order:unset; font-size:1rem; display:block; }
    .qas-item-a      { padding:20px 18px 16px; }
}

/* ── ANIMATIONS ─────────────────────── */
@keyframes qas-spin{ to{ transform:rotate(360deg); } }
@keyframes qas-pop{ from{transform:scale(0)} to{transform:scale(1)} }
@keyframes qas-shake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-4px)} 40%{transform:translateX(4px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }

.qas-spin-el{ display:inline-block; animation:qas-spin .7s linear infinite; vertical-align:middle; }

/* ── RESPONSIVE ─────────────────────── */
@media(max-width:600px){
    .qas-ask-section{ padding:22px 16px; }
    .qas-row-2{ grid-template-columns:1fr; }
    .qas-btn-submit{ width:100%; }
    .qas-cap-box{ max-width:100%; }
}