/* حاوية المودال */
.otp-popup{
  border-radius: 18px !important;
  padding: clamp(16px, 3vw, 24px) !important;
}
.otp-title{ font-weight: 800 !important; }
.swal-subtitle{ color:#64748b; margin: 0 0 clamp(8px, 2vw, 12px); }

/* صف خانات OTP */
.otp-row{
  display:flex;
  justify-content:center;
  gap: clamp(6px, 2.2vw, 12px);
  margin: clamp(8px, 2.5vw, 14px) 0 clamp(6px, 2vw, 10px);
  flex-wrap: nowrap;
}

/* الخانات نفسها (Fluid) */
.otp-cell{
  /* عرض/ارتفاع مرنين عبر clamp */
  width: clamp(2.4rem, 8vw, 3.4rem);
  height: clamp(3.0rem, 10vw, 4.0rem);
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  text-align: center;
  font-size: clamp(1.2rem, 4vw, 1.6rem);
  font-weight: 700;
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease, transform .08s ease;
  background: #fff;
  line-height: 1;
  /* تحسين اللمس */
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.otp-cell:focus{
  border-color:#94a3b8;
  box-shadow: 0 0 0 3px rgba(148,163,184,.25);
  transform: translateY(-1px);
}

/* أزرار إضافية */
.otp-actions{
  margin-top: clamp(8px, 2.2vw, 12px);
  display:flex;
  justify-content:center;
}

.swal2-styled.swal2-default-outline{
  background:#f8fafc !important;
  color:#0f172a !important;
  border:1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: clamp(.5rem, 1.8vw, .65rem) clamp(.8rem, 2.4vw, 1rem) !important;
  font-weight: 600 !important;
}

/* أزرار التأكيد والإلغاء */
.otp-confirm{
  font-weight: 800 !important;
  border-radius: 12px !important;
  padding: clamp(.6rem, 2.5vw, .75rem) clamp(1rem, 3vw, 1.2rem) !important;
}
.otp-cancel{ border-radius: 12px !important; }

/* 👇 تحسينات Responsiveness إضافية */

/* شاشات صغيرة جدًا (<= 360px) */
@media (max-width: 360px){
  .otp-row{ gap: 6px; }
  .otp-cell{
    width: 2.4rem;
    height: 3.0rem;
    font-size: 1.2rem;
  }
  .otp-popup{ padding: 16px !important; }
}

/* جوالات عامة (<= 480px) */
@media (max-width: 480px){
  .otp-row{ gap: 8px; }
  .otp-cell{
    width: 2.7rem;
    height: 3.4rem;
    font-size: 1.3rem;
  }
}

/* تابلت وأعلى (>= 768px) */
@media (min-width: 768px){
  .otp-row{ gap: 12px; }
  .otp-cell{
    width: 3.2rem;
    height: 3.8rem;
    font-size: 1.5rem;
  }
}

/* أجهزة لمس (تكبير قليل للخانات) */
@media (pointer: coarse){
  .otp-cell{
    width: clamp(2.8rem, 9vw, 3.6rem);
    height: clamp(3.4rem, 11vw, 4.2rem);
    font-size: clamp(1.3rem, 4.5vw, 1.7rem);
  }
}

/* تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .otp-cell{ transition: none; }
}

/* دعم الوضع الداكن (اختياري) */
@media (prefers-color-scheme: dark){
  .otp-cell{
    background: #0b1220;
    color: #e5e7eb;
    border-color: #334155;
  }
  .otp-cell:focus{
    border-color:#64748b;
    box-shadow: 0 0 0 3px rgba(100,116,139,.35);
  }
  .swal2-styled.swal2-default-outline{
    background:#0f172a !important;
    color:#e2e8f0 !important;
    border-color:#334155 !important;
  }
}

/* كثافة بكسلات عالية (تحسين الحواف) */
@media (min-resolution: 2dppx){
  .otp-cell{ border-width: 1px; }
}