/* ─────────── آراء المعلمين — نافذة الإرسال + CTA ───────────
   يمتد قسم .voices مباشرةً من home-v2.css (نبنيه بنفس الأصناف)،
   وهذا الملف يضيف CTA الإضافة والنافذة فقط. */

/* شريط أسفل القسم: التلميح والزر بجوار بعضهما في المنتصف */
.voices .voices-foot{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:12px;
    margin-top:18px; text-align:center;
}
.voices .voices-foot .vgrab{ margin:0; }
.voices .voices-foot-empty{ padding-top:8px; }

.voices .voices-cta{ display:flex; }
.voices .voices-cta .btn{
    padding:10px 22px; font-weight:700;
    border-radius:999px;
    background:linear-gradient(135deg,#D46E2A,#F59E0B);
    border:0; color:#fff;
    display:inline-flex; align-items:center; gap:6px;
    box-shadow:0 8px 22px rgba(212,110,42,.28);
    transition:transform .15s, box-shadow .15s;
}
.voices .voices-cta .btn:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 30px rgba(212,110,42,.35);
}
.voices .voice-id b .ti-rosette-discount-check{
    color:#2563EB; font-size:14px; margin-inline-start:2px; vertical-align:middle;
}

/* ═════ نافذة الإرسال ═════ */
.voice-modal{
    position:fixed; inset:0; z-index:2000;
    display:none;
    align-items:center; justify-content:center;
    padding:16px;
}
.voice-modal.is-open{ display:flex; }

.voice-modal-backdrop{
    position:absolute; inset:0;
    background:rgba(15,23,42,.55);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    animation:vFade .18s ease-out;
}
@keyframes vFade  { from{ opacity:0 } to{ opacity:1 } }
@keyframes vRise  { from{ opacity:0; transform:translateY(12px) scale(.98) } to{ opacity:1; transform:none } }

.voice-modal-panel{
    position:relative;
    width:min(640px,100%);
    max-height:min(94vh,900px); overflow:auto;
    background:#fff; color:#0F172A;
    border-radius:20px;
    padding:28px 28px 24px;
    box-shadow:0 30px 80px rgba(15,23,42,.35);
    animation:vRise .22s cubic-bezier(.2,.8,.2,1);
}
html.dark-style .voice-modal-panel{ background:#0F172A; color:#F1F5F9; }

.voice-modal-close{
    position:absolute; top:12px; left:12px;
    width:36px; height:36px; border:0; border-radius:50%;
    background:#F1F5F9; color:#475569;
    display:grid; place-items:center; cursor:pointer;
    transition:background .15s;
}
.voice-modal-close:hover{ background:#E2E8F0; }
html.dark-style .voice-modal-close{ background:rgba(255,255,255,.08); color:#CBD5E1; }
html.dark-style .voice-modal-close:hover{ background:rgba(255,255,255,.14); }

.voice-modal-head{
    display:flex; gap:14px; align-items:flex-start;
    margin-bottom:20px;
}
.voice-modal-icon{
    width:52px; height:52px; border-radius:16px;
    background:linear-gradient(135deg,#D46E2A,#F59E0B);
    color:#fff; display:grid; place-items:center;
    font-size:24px; flex-shrink:0;
    box-shadow:0 10px 26px rgba(212,110,42,.35);
}
.voice-modal-head h3{ margin:0; font-size:1.15rem; font-weight:800; }
.voice-modal-head p{ margin:6px 0 0; font-size:.85rem; color:#64748B; line-height:1.6; }
html.dark-style .voice-modal-head p{ color:#94A3B8; }

/* الحقول */
.voice-form .voice-row{ display:grid; gap:12px; grid-template-columns:1fr 1fr; margin-bottom:12px; }
@media (max-width: 560px){ .voice-form .voice-row{ grid-template-columns:1fr; } }

.voice-field{ display:block; margin-bottom:12px; }
.voice-field > span{
    display:block; font-size:.82rem; font-weight:600; color:#334155; margin-bottom:6px;
}
.voice-field > span em{ color:#DC2626; font-style:normal; font-weight:700; }
html.dark-style .voice-field > span{ color:#CBD5E1; }

.voice-field input[type="text"],
.voice-field input[type="email"],
.voice-field textarea{
    width:100%; padding:10px 14px;
    background:#F8FAFC; color:#0F172A;
    border:1px solid #E2E8F0; border-radius:12px;
    font-size:.9rem; line-height:1.5;
    transition:border-color .15s, box-shadow .15s;
}
.voice-field textarea{ resize:vertical; min-height:110px; }
.voice-field input:focus,
.voice-field textarea:focus{
    outline:0; border-color:#D46E2A;
    box-shadow:0 0 0 3px rgba(212,110,42,.18);
}
html.dark-style .voice-field input,
html.dark-style .voice-field textarea{
    background:rgba(255,255,255,.04); color:#F1F5F9; border-color:rgba(255,255,255,.08);
}
.voice-field input.is-invalid,
.voice-field textarea.is-invalid{
    border-color:#DC2626;
    box-shadow:0 0 0 3px rgba(220,38,38,.15);
}

/* النجوم */
.voice-stars-input{
    display:inline-flex; gap:6px;
    padding:6px 10px; background:#F8FAFC;
    border:1px solid #E2E8F0; border-radius:12px;
}
html.dark-style .voice-stars-input{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); }
.voice-stars-input .star{
    background:none; border:0; padding:2px; cursor:pointer;
    color:#CBD5E1; font-size:1.3rem;
    transition:color .12s, transform .12s;
}
.voice-stars-input .star:hover{ transform:scale(1.15); }
.voice-stars-input .star.on{ color:#F59E0B; }

/* الأزرار */
.voice-actions{
    display:flex; gap:10px; align-items:center;
    margin-top:6px;
}
.voice-actions .btn{ display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:999px; font-weight:700; }
.voice-actions .btn-primary{
    background:linear-gradient(135deg,#D46E2A,#F59E0B); border:0; color:#fff;
    box-shadow:0 8px 22px rgba(212,110,42,.32);
}
.voice-actions .btn-primary:hover{ transform:translateY(-1px); }
.voice-actions .btn-primary:active{ transform:translateY(0) scale(.985); }
.voice-actions .btn-ghost{ background:transparent; color:#475569; border:1px solid #E2E8F0; }
html.dark-style .voice-actions .btn-ghost{ color:#CBD5E1; border-color:rgba(255,255,255,.14); }

.voice-actions .btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

/* التنبيهات */
.voice-alert{
    margin-top:14px; padding:10px 14px;
    border-radius:12px; font-size:.85rem; font-weight:600;
    display:flex; align-items:center; gap:8px;
}
.voice-alert.is-success{ background:#E7F6EC; color:#16A34A; }
.voice-alert.is-error  { background:#FEE2E2; color:#DC2626; }
html.dark-style .voice-alert.is-success{ background:rgba(22,163,74,.15); }
html.dark-style .voice-alert.is-error  { background:rgba(220,38,38,.15); }

/* منع التمرير خلف النافذة */
body.voice-open{ overflow:hidden; }

/* دوّار انتظار داخل زر الإرسال */
.voice-actions .btn .ti-loader-2.spin{ animation:vSpin .8s linear infinite; }
@keyframes vSpin{ to{ transform:rotate(360deg); } }