/* ============================================================
   Zoalk — components/frm.css
   النماذج: حقول · حالات خطأ · بطاقات اختيار (خيارات المنتج)
   · منطقة رفع ملف (إشعار الدفع)
   ============================================================ */

/* -------- المجموعة والتسمية -------- */
.frm-group{margin-block-end:var(--sp-5);}
.frm-label{
  display:block;
  font-weight:700;
  font-size:var(--fs-sm);
  margin-block-end:var(--sp-2);
}
.frm-label small{font-weight:400;color:var(--text-dim);}
.frm-hint{
  display:block;
  font-size:var(--fs-xs);
  color:var(--text-dim);
  margin-block-start:var(--sp-1);
}

/* -------- الحقول -------- */
.frm-input{
  width:100%;
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:.8rem 1rem;
  color:var(--text);
  font-size:var(--fs-body);
  transition:border-color var(--dur-fast) var(--ease-in-out),
             background var(--dur-fast) var(--ease-in-out);
}
.frm-input::placeholder{color:var(--text-dim);}
.frm-input:focus{
  outline:none;
  border-color:var(--primary);
  background:var(--surface);
}
textarea.frm-input{min-height:7rem;line-height:1.6;}
select.frm-input{appearance:none;cursor:pointer;}

/* حالة الخطأ + رسالتها
   <input class="frm-input is-invalid" aria-describedby="err-phone">
   <p class="frm-error" id="err-phone">…</p>                    */
.frm-input.is-invalid{border-color:var(--danger);}
.frm-error{
  display:flex;
  align-items:center;
  gap:.4em;
  font-size:var(--fs-xs);
  color:var(--danger);
  margin-block-start:var(--sp-1);
}

/* حقل الهاتف/الكود: أرقام مصطفة واتجاه LTR داخل صفحة RTL */
.frm-input--ltr{direction:ltr;text-align:end;font-variant-numeric:tabular-nums;}

/* -------- بطاقات الاختيار (خيارات المنتج: نوع السيرة، اللغة) --------
   راديو/تشيكبوكس مخفي + بطاقة قابلة للنقر:
   <label class="choice">
     <input type="radio" name="cv_type" class="choice__input">
     <span class="choice__body">
       <b class="choice__title">ATS</b>
       <span class="choice__desc">لأنظمة التوظيف</span>
       <span class="choice__price num">+0 ج</span>
     </span>
   </label>                                                     */
.choice{display:block;cursor:pointer;}
.choice__input{position:absolute;opacity:0;pointer-events:none;}
.choice__body{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:var(--sp-4);
  background:var(--bg-elevated);
  transition:border-color var(--dur-fast) var(--ease-in-out),
             background var(--dur-fast) var(--ease-in-out);
}
.choice:hover .choice__body{border-color:var(--border-strong);}
.choice__input:checked + .choice__body{
  border-color:var(--primary);
  background:var(--primary-tint);
  box-shadow:0 0 0 1px var(--primary);
}
.choice__input:focus-visible + .choice__body{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.choice__title{font-weight:700;font-size:var(--fs-sm);}
.choice__desc{font-size:var(--fs-xs);color:var(--text-muted);}
.choice__price{
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--accent);
  margin-block-start:.2rem;
}

/* -------- منطقة رفع الملف (إشعار الدفع) --------
   <label class="drop" for="receipt">
     …أيقونة ونص…
     <input type="file" id="receipt" class="drop__input">
   </label>
   حالة is-filled تضاف بالـ JS بعد اختيار ملف                  */
.drop{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  text-align:center;
  border:2px dashed var(--border-strong);
  border-radius:var(--r-lg);
  padding:var(--sp-8) var(--sp-4);
  color:var(--text-muted);
  font-size:var(--fs-sm);
  cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-in-out),
             background var(--dur-fast) var(--ease-in-out);
}
.drop:hover,.drop.is-dragover{
  border-color:var(--primary);
  background:var(--primary-tint);
  color:var(--primary);
}
.drop.is-filled{
  border-style:solid;
  border-color:var(--success);
  background:var(--success-bg);
  color:var(--success);
}
.drop__input{position:absolute;opacity:0;pointer-events:none;}
.drop svg{width:2rem;height:2rem;}
.drop__preview{
  max-height:10rem;
  border-radius:var(--r-md);
  margin-block-start:var(--sp-2);
}

/* -------- حقل الـ PIN (التحقق في صفحة المتابعة) -------- */
.frm-input--pin{
  direction:ltr;
  text-align:center;
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:800;
  letter-spacing:.5em;
  padding-inline-start:.5em; /* موازنة الـ letter-spacing */
}

/* -------- بطاقة وسيلة الدفع: التفاصيل تظهر عند الاختيار --------
   <label class="choice">
     <input class="choice__input" type="radio" name="method" …>
     <span class="choice__body">
       <b class="choice__title">بنكك</b>
       <span class="pm-details">…بيانات الحساب…</span>
     </span>
   </label>                                                       */
.pm-details{
  display:none;
  margin-block-start:var(--sp-3);
  padding-block-start:var(--sp-3);
  border-block-start:1px dashed var(--border-strong);
  font-size:var(--fs-sm);
}
.choice__input:checked + .choice__body .pm-details{display:block;}
.pm-details b{
  display:block;
  font-family:var(--font-display);
  font-size:1.15rem;
  letter-spacing:.05em;
  color:var(--accent);
  direction:ltr;
  text-align:end;
}