/* =====================================================
   3-D Secure – MAX  |  compact header + dropdown
   ===================================================== */

/* ---------- أساسيات ---------- */
html,body{
  margin:0; height:100%;
  font-family:"Segoe UI",Tahoma,Arial,sans-serif,Helvetica;
  color:#212121;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace;}

/* ---------- تخطيط عام ---------- */
.flex-centered{display:flex;align-items:center;justify-content:center;}
.container{
  min-height:560px;
  max-width:600px;
  display:flex;flex-direction:column;
  padding:0 20px;
  background:#fff;
  border:1px solid #b5cde5;
  box-shadow:0 0 3px rgba(0,0,0,.12);
  box-sizing:border-box;
  overflow-y:auto;
}

/* ---------- الرأس ---------- */
.header{
  display:flex;justify-content:space-between;align-items:center;
  margin:5px -15px 0; padding-left:10px;
  background:#1273d0; color:#fff; line-height:40px;
}
.header div{font-size:16px;font-weight:700;text-transform:uppercase;}
/* ===== إصلاح زر الإغلاق في الـ header ===== */
/* === إعادة ضبط زر الإغلاق في الـ header تمامًا === */
.header .close{
    /* ألغِ كلّ شيء قد يرثه من أطر عمل أو المتصفح */
    all: unset;                     /* يمسح الخلفية، الحشو، الحدود، إلخ */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;                    /* مساحة كافية للنقر */
    height: 28px;
    margin-inline-start: auto;      /* يبقى في أقصى الطرف */
    color: transparent;             /* يلغي أي نص داخلي */
}

.header .close::before,
.header .close::after{
    all: unset;                     /* يوقف pseudo-elements للمتصفحات */
}

/* الأيقونة داخل الزر (SVG) */
.header .close svg{
    width: 16px;
    height: 16px;
}

.header .close svg *{
    fill: #ffffff !important;       /* إجبار كل المسارات على الأبيض */
    stroke: none !important;
}

/* إلغاء أي فئة أُخرى قد تلتصق بالزر (مثل bootstrap .btn) */
.header .close.btn,
.header .close.btn-primary,
.header .close.button{
    background: transparent !important;
    border: 0   !important;
    padding: 0  !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* ---------- شعارات البنك ---------- */
.bank-info{
  display:flex;justify-content:space-between;
  padding:20px 0; width:100%; flex-direction:row-reverse;
}
.bank-info img{height:30px;width:auto;}

/* ---------- نصوص ---------- */
.info-header{font-size:22px;font-weight:700;margin:0;padding-bottom:5px;}
.info-text  {font-size:16px;margin-bottom:20px;}
.scrollbar{
  overflow-y:auto; margin-bottom:20px; padding-right:10px;
}
.scrollbar::-webkit-scrollbar{width:7px;background:#f5f5f5;}
.scrollbar::-webkit-scrollbar-thumb{background:#778095;border-radius:5px;}

/* ---------- حقول وأزرار ---------- */
.input,.select{
  width:100%; height:40px; font-size:16px;
  border:1px solid #a7b3d1; border-radius:5px;
  box-sizing:border-box; text-indent:10px;
}
.like-password{-webkit-text-security:disc;}
.input:focus{outline:none;}
.invalid-input{border-color:red;background:#fffc89;}

.actions{display:flex;flex-direction:column;margin-bottom:10px;}
.submit-label{
  width:100%; min-height:50px; margin-top:20px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:700; color:#fff;
  background:#0d5499; border:0; border-radius:5px; cursor:pointer;
}
.submit-label-disable{background:#9cb7d1; cursor:default;}

.resend-label{
  margin:15px 0 32px;
  font-size:16px; line-height:1.35; padding:6px 0;
  background:none; border:0; color:#07c;
  text-decoration:underline; cursor:pointer;
}

/* ---------- التولتيب ---------- */
.tooltip-wrapper{position:relative;}
.tooltip{
  position:absolute; right:0; bottom:-1px; z-index:999999;
  padding:10px; font-size:13px; color:red;
  background:#fff; border:1px solid red; border-radius:5px;
}
.close-tooltip{position:absolute; left:5px; top:5px; background:none; border:0; cursor:pointer;}

/* ---------- الذيل + القائمة المنسدلة ---------- */
footer{display:flex; flex-direction:column; background:#fff; margin-top:auto;}

/* —  العبارة + السهم: خط واحد متقطّع فقط — */
.why-info-label{
  display:inline-flex; align-items:center;
  width:100%;
  padding:10px 0;
  background:#fff;
  border:none;
  border-top:1px dashed #d0d6e3;   /* الخط الوحيد الظاهر */
  color:#07c;
  text-decoration:underline;
  cursor:pointer;
}

/* سهم صغير أسود */
.why-info-label .arrow{
  width:4px; height:4px; margin:0 6px;
  border:solid #000; border-width:0 2px 2px 0;
  transform:rotate(-135deg); transition:transform .2s;
}
.why-info-label .arrow.rotated{transform:rotate(45deg);}  /* ↑ عند الفتح */

/* ---------- الصندوق المنسدل ---------- */
.expandable-text{
  display:none;                       /* يظهر بفئة .show */
  padding:14px;
  background:#fff;
  border:1px solid #d0d6e3;
  border-radius:0 0 4px 4px;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  max-height:120px; overflow-y:auto;
  margin:0;
}
.expandable-text.show{display:block;}

/* إخفاء شريط التمرير البصري */
.expandable-text::-webkit-scrollbar{width:0;height:0;}
.expandable-text{scrollbar-width:none;-ms-overflow-style:none;}

/* ---------- نصوص مساعدة ---------- */
.error-text{color:red;padding-top:5px;}

/* ---------- تجاوب ---------- */
@media (max-width:389px){
  .container{min-height:400px;padding:0 10px;}
  .info-header{font-size:16px;}
}

/* ---------- RTL ---------- */
[dir=rtl] .header{padding-right:10px;}
[dir=rtl] .scrollbar{padding-left:10px;padding-right:0;}
[dir=rtl] .arrow{margin-left:10px;margin-right:2px;}