/* =========================================================
   37 — خانة عرض الطلب: بيانات الاشتراك
   الخادم · اسم المستخدم · كلمة المرور (بدون شرح التثبيت)
   ========================================================= */

/* ---------- العنوان فوق كل خانة ---------- */
.font-mono>span:not([class]){display:block!important}
.font-mono>span:not([class]):nth-child(odd){font-size:0!important}

.font-mono>span:not([class])::before,
div.font-mono:not(.text-ellipsis)::before{
  display:block!important;
  margin:18px 0 8px!important;
  font-family:var(--font-main),DINNextLTArabic,-apple-system,sans-serif!important;
  font-size:13.5px!important;
  font-weight:700!important;
  line-height:1.5!important;
  letter-spacing:normal!important;
  color:var(--ssq-muted)!important;
  text-align:start;
  opacity:1!important;
}
.font-mono>span:not([class]):first-child::before{margin-top:0!important}

.font-mono>span:not([class]):nth-child(1)::before{content:"الخادم"}
.font-mono>span:not([class]):nth-child(3)::before{content:"اسم المستخدم"}
.font-mono>span:not([class]):nth-child(5)::before,
div.font-mono:not(.text-ellipsis)::before{content:"كلمة المرور"}

/* ---------- إخفاء صف شرح التثبيت (العنوان 7 والقيمة 8 وما بعدهما) ---------- */
.font-mono>span:not([class]):nth-child(n+7),
.font-mono>:is(a,span,div,.inline-flex):nth-child(n+7){display:none!important}

/* ---------- الخانة نفسها ---------- */
.font-mono>.inline-flex,
.font-mono>a,
div.font-mono:not(.text-ellipsis)>.inline-flex{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  width:100%!important;
  min-height:54px!important;
  box-sizing:border-box!important;
  padding:9px 16px 9px 9px!important;
  background:linear-gradient(145deg,#194B5D,#164253)!important;
  border:1px solid rgba(127,220,248,.18)!important;
  border-radius:14px!important;
  box-shadow:0 4px 14px rgba(0,0,0,.16)!important;
  text-decoration:none!important;
  transform:none!important;
  transition:border-color .2s ease,background .2s ease!important;
}
.font-mono>.inline-flex:hover,
.font-mono>a:hover,
div.font-mono:not(.text-ellipsis)>.inline-flex:hover{
  background:linear-gradient(145deg,#1C5366,#184858)!important;
  border-color:rgba(127,220,248,.34)!important;
  transform:none!important;
}

/* شارة "الكود" مكرّرة بلا معنى وتكسر الرابط سطرين */
.font-mono .font-mono.mx-1{display:none!important}

/* ---------- القيمة ---------- */
.font-mono .break-all{
  flex:1 1 auto!important;
  min-width:0!important;
  direction:ltr!important;
  text-align:right!important;
  font-size:16px!important;
  font-weight:700!important;
  letter-spacing:.3px!important;
  line-height:1.5!important;
  color:var(--ssq-cyan-light)!important;
  word-break:normal!important;
  overflow-wrap:anywhere!important;
  user-select:all;
}

/* ---------- زر النسخ ---------- */
.font-mono .copy-icon,
.font-mono i[class*="sicon-copy"]{
  flex:none!important;
  order:-1;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:38px!important;
  height:38px!important;
  padding:0!important;
  margin:0!important;
  background:rgba(127,220,248,.08)!important;
  border:1px solid rgba(127,220,248,.22)!important;
  border-radius:10px!important;
  color:var(--ssq-cyan)!important;
  font-size:17px!important;
  opacity:1!important;
  cursor:pointer;
  transform:none!important;
  transition:background .2s ease,color .2s ease,transform .12s ease!important;
}
.font-mono .copy-icon i[class*="sicon-copy"]{
  width:auto!important;height:auto!important;
  background:none!important;border:0!important;
}
.font-mono .copy-icon:hover,
.font-mono i[class*="sicon-copy"]:hover{
  background:rgba(127,220,248,.18)!important;
  color:#fff!important;
}
.font-mono .copy-icon:active,
.font-mono i[class*="sicon-copy"]:active{transform:scale(.92)!important}

/* ---------- الجوال ---------- */
@media(max-width:640px){
  .font-mono>.inline-flex,
  .font-mono>a,
  div.font-mono:not(.text-ellipsis)>.inline-flex{
    min-height:50px!important;
    padding:7px 12px 7px 7px!important;
    gap:8px!important;
    border-radius:12px!important;
  }
  .font-mono .break-all{font-size:15px!important;letter-spacing:0!important}
  .font-mono .copy-icon,
  .font-mono i[class*="sicon-copy"]{width:36px!important;height:36px!important;font-size:16px!important}
}