/* الحاوية العامة — تبدأ من اليمين وتُفسح يسار الصفحة */
.ptw-container {
  direction: rtl;
  font-family: 'Tajawal', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #111;

  /* عرض سطح المكتب ومحاذاة من اليمين */
  width: 1200px;
  margin-right: 0;
  margin-left: auto;
}

/* رأس الودجت (المدينة فقط) */
.ptw-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
}

/* صف البطاقات: صف واحد على الديسكتوب، وبنفس ترتيب الـ HTML */
.ptw-times {
  display: flex;
  flex-wrap: nowrap;          /* صف واحد على الشاشات العريضة */
  gap: 14px;
  flex-direction: row;        /* مهم: العرض بنفس ترتيب عناصر DOM */
  justify-content: flex-start;
  align-items: stretch;
}

/* بطاقات الصلاة + بطاقة التاريخ */
.ptw-prayer,
.ptw-date-card {
  position: relative;
  background: #fff;
  border: 2px solid #E6E6E6;
  border-radius: 12px;
  padding: 14px 18px;
  text-align: center;
  box-sizing: border-box;
  transition: background .2s ease, border-color .2s ease;

  /* 6 صناديق في الصف على الديسكتوب */
  flex: 1 1 calc(16.66% - 14px);
  min-width: 160px;
}

/* اسم الصلاة بالعربية */
.ptw-prayer-ar {
  font-weight: 800;
  margin-bottom: 6px;
  color: #111;
  /* حجم الخط يُحقن من الإعدادات عبر wp_add_inline_style */
}

/* إخفاء السطر الإنجليزي إن وُجد (احتياط) */
.ptw-prayer-en { display: none !important; }

/* وقت الصلاة */
.ptw-time {
  font-weight: 800;
  color: #111;
  /* حجم الخط يُحقن من الإعدادات عبر wp_add_inline_style */
}

/* البطاقة الفعّالة (الصلاة القادمة) */
.ptw-prayer.active {
  background: #DDCFAE;
  border-color: #C7B48B;
}

/* شارة العد التنازلي */
.ptw-next-banner {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  background: #7DA78F;
  color: #fff;
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid rgba(0,0,0,.05);
}

/* بطاقة اليوم/التاريخ */
.ptw-date-card {
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #DDCFAE;
  border-color: #C7B48B;
  font-weight: 800;
}
.ptw-date-card .ptw-day  { font-size: 20px; }
.ptw-date-card .ptw-date { font-size: 18px; }

/* ——— تجاوب ——— */
@media (max-width: 1240px) {
  .ptw-container {
    width: 100%;
    max-width: 1200px;
    padding-inline: 12px;
    box-sizing: border-box;
    margin-right: 0;
    margin-left: auto;
  }
  .ptw-times { flex-wrap: wrap; }
  .ptw-prayer, .ptw-date-card { flex-basis: calc(25% - 14px); }
}

@media (max-width: 992px) {
  .ptw-prayer, .ptw-date-card { flex-basis: calc(33.333% - 14px); }
}

@media (max-width: 768px) {
  /* 📱 على الجوال: مربعين بجانب بعض */
  .ptw-prayer,
  .ptw-date-card {
    flex-basis: calc(50% - 14px);
  }

  .ptw-next-banner {
    top: -14px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  /* شاشات صغيرة جداً: واحد تحت الآخر */
  .ptw-prayer,
  .ptw-date-card {
    flex-basis: 100%;
  }
  .ptw-time, .ptw-prayer-ar { font-size: 18px; }
}