/*
 * TWQB – Quick Buy CSS (Clean build)
 * مودال داكن أنيق + RTL + شاشة شكر
 * العنوان: "رصيدك" يمين (بواسطة ::before) + قيمة الرصيد في المنتصف (نص العنوان)
 */

/* ===== سلوك عام ===== */
.twqb-modal[hidden]{ display:none !important; }
#twqb-modal:not([data-ready="1"]) { display:none !important; }

/* ===== الخلفية الشفافة ===== */
.twqb-modal{
  position:fixed; inset:0;
  background:rgba(3,6,15,.72);
  backdrop-filter:saturate(140%) blur(6px);
  display:flex; align-items:center; justify-content:center;
  z-index:99999; animation: twqb-fade .16s ease-out;
}

/* ===== الحوار (الكارد) ===== */
.twqb-dialog{
  width:min(560px,94vw);
  background:linear-gradient(180deg,#101226 0%, #0A0D1B 100%);
  color:#E7EAF3; border:1px solid rgba(255,255,255,.06);
  border-radius:18px; box-shadow:0 22px 60px rgba(0,0,0,.48);
  overflow:hidden; position:relative;
}

/* ===== عنوان المودال: "رصيدك" يمين + الرصيد في المنتصف ===== */
.twqb-title{
  position:relative;
  margin:0; padding:14px 18px;
  font-size:1.08rem; font-weight:900;
  border-bottom:1px solid rgba(255,255,255,.06);
  text-align:center;

  /* إضافات لتحسين المظهر */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.twqb-title::before{
  content: attr(data-title-label);        /* نقرأ "رصيدك" من الـJS */
  position:absolute;
  inset-inline-start:18px;                /* يمين في RTL */
  top:50%; transform:translateY(-50%);
  font-weight:900; opacity:.9;
}

/* ===== جسم المودال ===== */
.twqb-body{ padding:16px 18px; }

/* ===== صف اسم المنتج والسعر تحت العنوان ===== */
.twqb-lines{ margin:.25rem 0 .5rem; }

/* اسم المنتج */
.twqb-product-row{
  display:flex; align-items:center; gap:.5rem;
  font-weight:800; margin:.35rem 0 .4rem;
}

/* الأسعار (الأساسي يمين، النهائي يسار عند وجود خصم) */
.twqb-price-row{
  display:flex; flex-direction:row-reverse; /* RTL: الأساسي يمين */
  align-items:center; justify-content:space-between; gap:1rem;
  padding:.35rem .2rem; border-radius:.6rem;
}
.twqb-price-base{
  font-size:1.1rem; font-weight:900; color:#cdd2e3;
}
.twqb-price-final{
  font-size:1.25rem; font-weight:900;
  background:linear-gradient(90deg,#FF3D3D 0%,#FF7A1F 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.twqb-price-row .twqb-price-base.has-strike{ opacity:.55; text-decoration:line-through; }

/* ===== حقول الإدخال ===== */
.twqb-fields{ margin-top:.9rem; display:grid; gap:.7rem; }
.twqb-field-row{ display:grid; gap:.4rem; }
.twqb-field-row label{ font-weight:700; color:#C9CFE2; font-size:.92rem; }
.twqb-field-row input{
  width:100%; background:#0E1223; color:#E7EAF3;
  border:1px solid rgba(255,255,255,.08); border-radius:.7rem;
  padding:.65rem .9rem; font-size:1rem;
  transition:border-color .15s, box-shadow .15s;
}
.twqb-field-row input::placeholder{ color:#6f7790; }
.twqb-field-row input:focus{
  outline:none; border-color:#3ea8ff;
  box-shadow:0 0 0 3px rgba(62,168,255,.18);
}
.twqb-field-row input:focus-visible{
  outline:none; border-color:#60a5fa;
  box-shadow:0 0 0 3px rgba(96,165,250,.28);
}
.twqb-field-error{ color:#ff9f9f; font-size:.86rem; }

/* ===== تنبيهات ===== */
.twqb-alert{
  margin-top:.8rem; padding:.8rem 1rem;
  background:rgba(255,76,76,.08); color:#ffd6d6;
  border:1px solid rgba(255,76,76,.22); border-radius:.6rem;
}

/* ===== الأزرار داخل المودال ===== */
.twqb-actions{
  display:flex; align-items:center;
  flex-direction: row-reverse;           /* التأكيد يسار */
  justify-content:flex-start;
  gap:.9rem; padding:14px 18px;
  border-top:1px solid rgba(255,255,255,.06);
}
.twqb-actions .twqb-confirm{
  background:linear-gradient(90deg,#ff4d4d 0%,#ff7a1f 100%);
  color:#fff; border:none; border-radius:.8rem;
  padding:.7rem 1.2rem; font-weight:900; font-size:1rem;
  cursor:pointer; box-shadow:0 6px 24px rgba(255,92,64,.35);
  transition:transform .08s ease, box-shadow .2s ease, opacity .15s;
  flex: 1 1 60%;                          /* أعرض */
  min-width: 12rem;
}
.twqb-actions .twqb-confirm:hover{ transform:translateY(-1px); }
.twqb-actions .twqb-confirm:active{ transform:translateY(0); }
.twqb-actions .twqb-confirm[disabled]{ opacity:.6; cursor:not-allowed; }

.twqb-actions .twqb-cancel{
  background:transparent; color:#E7EAF3; cursor:pointer;
  border-radius:.8rem; padding:.7rem 1.2rem; font-weight:800; font-size:1rem;
  border:1px solid transparent;
  background-image:linear-gradient(#0A0D1B,#0A0D1B),
                   linear-gradient(90deg,#ff4d4d 0%,#ff7a1f 100%);
  background-origin:border-box;
  background-clip:padding-box, border-box;
  flex: 0 0 auto;
  margin-inline-start: auto;              /* يدفعه لأقصى اليمين في RTL/LTR */
}
.twqb-actions .twqb-confirm:focus-visible,
.twqb-actions .twqb-cancel:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(96,165,250,.28);
}

/* زر الإغلاق أعلى اليمين */
.twqb-close{
  position:absolute; inset-inline-end:.75rem; top:.65rem;
  width:2rem; height:2rem; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.14); border-radius:.55rem;
  background:#0E1223; color:#E7EAF3; cursor:pointer; transition:opacity .15s, box-shadow .2s;
}
.twqb-close:hover{ opacity:.9; }
.twqb-close:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(96,165,250,.28); }

/* ===== رابط شحن المحفظة (اختياري) ===== */
.twqb-topup{ margin-top:.6rem; text-align:center; }
.twqb-topup a{ color:#99d2ff; text-decoration:underline; }

/* ===== شاشة الشكر بعد الشراء ===== */
.twqb-success{
  padding:1.35rem;
  text-align:center;
  background:linear-gradient(180deg, rgba(33,255,179,.08), rgba(33,255,179,.02));
  border:1px solid rgba(33,255,179,.15);
  border-radius:.9rem; margin-top:.4rem;
}
.twqb-success .twqb-thanks-title{
  font-size:1.35rem; font-weight:1000; margin-bottom:.35rem;
  background:linear-gradient(90deg,#22c55e 0%, #3b82f6 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.twqb-success .twqb-thanks-msg{ font-size:1.02rem; color:#dce4f3; margin-bottom:.9rem; }
.twqb-success .twqb-close-success{
  background:#111827; color:#fff; border:0; border-radius:.7rem;
  padding:.6rem 1.1rem; font-weight:800; cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.twqb-success .twqb-close-success:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(96,165,250,.28);
}

/* ===== تحميل الزر ===== */
.twqb-actions .twqb-confirm.is-loading{ position:relative }
.twqb-actions .twqb-confirm.is-loading::after{
  content:''; position:absolute; right:.85rem; top:50%; width:1.05rem; height:1.05rem;
  margin-top:-.525rem; border-radius:50%; border:2px solid rgba(255,255,255,.8);
  border-top-color:transparent; animation:twqb-spin .8s linear infinite;
}

/* ===== حركات واختزال الحركة ===== */
@keyframes twqb-fade { from{opacity:0} to{opacity:1} }
@keyframes twqb-spin { to{ transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce){
  .twqb-modal{ animation:none }
  .twqb-actions .twqb-confirm.is-loading::after{ animation:none }
}

/* ===== ثيم داكن (الافتراضي) مع دعم .twqb-dark ===== */
.twqb-dark .twqb-dialog{
  background:linear-gradient(180deg,#0C1020 0%, #090B18 100%);
}