/* ============================================================
   🌅 سماء وِرْدِي — بطاقة الأذكار الذكية
   يستخدم data-period="" — يجب أن يُحمَّل بعد smart-adhkar.css
   ============================================================ */

/* ═══════════════════════════════════════════
   إلغاء الخلفيات القديمة من smart-adhkar.css
   ═══════════════════════════════════════════ */
#smartHero {
  background: transparent !important;
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
  transition: all .8s ease;
}

#smartHero::before {
  display: none !important;
}

/* ═══════════════════════════════════════════
   🌅 الصباح — شروق الشمس
   ═══════════════════════════════════════════ */
#smartHero[data-period="morning"] {
  background: linear-gradient(180deg,
    #FDF9F0 0%,
    #FCECC4 18%,
    #F8DCA0 38%,
    #F2C475 62%,
    #E8A855 82%,
    #DC8A3A 100%) !important;
  box-shadow: 0 14px 40px rgba(220, 138, 58, .22) !important;
  border: 1px solid rgba(201, 162, 39, 0.35);
}

/* 🌅 وهج الشمس الصباحية (قوس ناعم في الأسفل) */
#smartHero[data-period="morning"]::after {
  content: '';
  position: absolute;
  bottom: -150px;
  left: 50%;
  transform: translateX(-50%);
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 245, 200, 1) 0%,
    rgba(255, 220, 140, 0.7) 20%,
    rgba(255, 190, 100, 0.35) 45%,
    transparent 72%);
  pointer-events: none;
  z-index: 0;
  animation: skyPulse 6s ease-in-out infinite;
}

/* ═══════════════════════════════════════════
   🌆 المساء — غروب الشمس
   ═══════════════════════════════════════════ */
#smartHero[data-period="evening"] {
  background: linear-gradient(180deg,
    #1F1D3A 0%,
    #332A4E 18%,
    #4F3552 35%,
    #7A3D5C 55%,
    #B85A48 78%,
    #D4804A 100%) !important;
  box-shadow: 0 14px 40px rgba(31, 29, 58, .35) !important;
  border: 1px solid rgba(228, 204, 110, 0.28);
}

/* 🌅 وهج الشمس الغاربة (برتقالي دافئ) */
#smartHero[data-period="evening"]::after {
  content: '';
  position: absolute;
  bottom: -150px;
  left: 50%;
  transform: translateX(-50%);
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 210, 140, 0.95) 0%,
    rgba(255, 150, 90, 0.6) 22%,
    rgba(200, 90, 80, 0.28) 45%,
    transparent 72%);
  pointer-events: none;
  z-index: 0;
  animation: skyPulse 7s ease-in-out infinite;
}

@keyframes skyPulse {
  0%, 100% { opacity: .85; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.06); }
}

/* ═══════════════════════════════════════════
   رفع المحتوى فوق وهج الشمس
   ═══════════════════════════════════════════ */
#smartHero .hero-top,
#smartHero .hero-time,
#smartHero .hero-adhkar,
#smartHero .hero-cta {
  position: relative;
  z-index: 2;
}

/* ═══════════════════════════════════════════
   الأيقونة
   ═══════════════════════════════════════════ */
#smartHero[data-period="morning"] .hero-icon {
  filter: drop-shadow(0 6px 16px rgba(220, 138, 58, 0.4));
}
#smartHero[data-period="evening"] .hero-icon {
  filter: drop-shadow(0 6px 16px rgba(255, 180, 120, 0.4));
}

/* ═══════════════════════════════════════════
   العنوان
   ═══════════════════════════════════════════ */
#smartHero[data-period="morning"] .hero-title {
  color: #4A2E10;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
}

#smartHero[data-period="morning"] .hero-sub {
  color: #6B4A25;
}

#smartHero[data-period="evening"] .hero-title {
  color: #FFF4D6;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

#smartHero[data-period="evening"] .hero-sub {
  color: #F5D89A;
}

/* ═══════════════════════════════════════════
   سطر الوقت
   ═══════════════════════════════════════════ */
#smartHero[data-period="morning"] .hero-time {
  border-top-color: rgba(139, 90, 30, 0.2);
  border-bottom-color: rgba(139, 90, 30, 0.2);
  color: #4A2E10;
}

#smartHero[data-period="evening"] .hero-time {
  border-top-color: rgba(228, 204, 110, 0.25);
  border-bottom-color: rgba(228, 204, 110, 0.25);
  color: #FFF4D6;
}

/* ═══════════════════════════════════════════
   حاوية الأذكار
   ═══════════════════════════════════════════ */
#smartHero[data-period="morning"] .hero-adhkar {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(201, 162, 39, 0.3);
  box-shadow: 0 4px 14px rgba(220, 138, 58, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#smartHero[data-period="morning"] .hero-adhkar-head {
  background: rgba(255, 255, 255, 0.6);
  color: #4A2E10;
  border-bottom-color: rgba(201, 162, 39, 0.25);
}

#smartHero[data-period="evening"] .hero-adhkar {
  background: rgba(15, 12, 30, 0.72);
  border: 1px solid rgba(228, 204, 110, 0.35);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(228, 204, 110, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#smartHero[data-period="evening"] .hero-adhkar-head {
  background: rgba(20, 15, 35, 0.5);
  color: #FFF4D6;
  border-bottom-color: rgba(228, 204, 110, 0.2);
}

/* ═══════════════════════════════════════════
   عنصر الذكر
   ═══════════════════════════════════════════ */
#smartHero[data-period="morning"] .hero-adhkar-item {
  color: #2B2B2B;
}

#smartHero[data-period="morning"] .hero-adhkar-item:nth-child(even) {
  background: rgba(255, 255, 255, 0.35);
}

#smartHero[data-period="morning"] .hero-adhkar-item:hover {
  background: rgba(255, 255, 255, 0.65);
}

#smartHero[data-period="morning"] .hero-adhkar-item:not(:last-child) {
  border-bottom-color: rgba(139, 90, 30, 0.15);
}

#smartHero[data-period="morning"] .ha-text {
  color: #2B2B2B;
}

#smartHero[data-period="morning"] .ha-num {
  background: rgba(201, 162, 39, 0.9);
  color: #FFF8E7;
}

#smartHero[data-period="morning"] .ha-count {
  background: rgba(31, 78, 61, 0.85);
  color: #FFF8E7;
}

/* المساء */
#smartHero[data-period="evening"] .hero-adhkar-item {
  color: #FBF8F1;
}

#smartHero[data-period="evening"] .hero-adhkar-item:nth-child(even) {
  background: rgba(228, 204, 110, 0.05);
}
#smartHero[data-period="evening"] .hero-adhkar-item:not(:last-child) {
  border-bottom-color: rgba(228, 204, 110, 0.12);
}

#smartHero[data-period="evening"] .hero-adhkar-item:hover {
  background: rgba(228, 204, 110, 0.15);
}

#smartHero[data-period="evening"] .hero-adhkar-item:not(:last-child) {
  border-bottom-color: rgba(228, 204, 110, 0.15);
}

#smartHero[data-period="evening"] .ha-text {
  color: #FBF8F1;
}

#smartHero[data-period="evening"] .ha-num {
  background: linear-gradient(135deg, #E4CC6E, #C9A227);
  color: #1F1D3A;
  box-shadow: 0 2px 8px rgba(228, 204, 110, 0.35);
}

#smartHero[data-period="evening"] .ha-count {
  background: rgba(228, 204, 110, 0.85);
  color: #1F1D3A;
}

/* ═══════════════════════════════════════════
   زر CTA
   ═══════════════════════════════════════════ */
#smartHero[data-period="morning"] .hero-cta {
  background: #1F4E3D;
  color: #FFF8E7;
  box-shadow: 0 8px 22px rgba(31, 78, 61, 0.3);
}

#smartHero[data-period="morning"] .hero-cta:hover {
  background: #2C6B54;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(31, 78, 61, 0.4);
}

#smartHero[data-period="evening"] .hero-cta {
  background: rgba(255, 255, 255, 0.1);
  color: #FFF4D6;
  border: 1.5px solid #E4CC6E;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

#smartHero[data-period="evening"] .hero-cta:hover {
  background: rgba(228, 204, 110, 0.22);
  border-color: #F5E5A0;
  color: #FFF8E7;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(255, 220, 140, 0.35);
}

/* ═══════════════════════════════════════════
   الوضع الليلي — تعميق
   ═══════════════════════════════════════════ */
body.dark #smartHero[data-period="morning"] {
  background: linear-gradient(180deg,
    #1A1410 0%,
    #2A2015 20%,
    #4A3520 45%,
    #6B4A28 70%,
    #8B5A30 90%,
    #A0672A 100%) !important;
}

body.dark #smartHero[data-period="morning"] .hero-adhkar {
  background: rgba(20, 15, 10, 0.4);
  border-color: rgba(228, 204, 110, 0.2);
}

body.dark #smartHero[data-period="morning"] .hero-adhkar-head {
  background: rgba(20, 15, 10, 0.55);
  color: #F5D89A;
}

body.dark #smartHero[data-period="morning"] .hero-title {
  color: #F5D89A;
}

body.dark #smartHero[data-period="morning"] .hero-sub {
  color: #E4CC6E;
}

body.dark #smartHero[data-period="morning"] .hero-time {
  color: #F5D89A;
  border-color: rgba(228, 204, 110, 0.2);
}

body.dark #smartHero[data-period="morning"] .ha-text {
  color: #FBF8F1;
}

body.dark #smartHero[data-period="evening"] {
  background: linear-gradient(180deg,
    #0F0E20 0%,
    #1F1830 20%,
    #3A2040 45%,
    #5A2F48 65%,
    #8A4545 85%,
    #A85540 100%) !important;
}

/* ═══════════════════════════════════════════
   الجوال
   ═══════════════════════════════════════════ */
@media (max-width: 700px) {
  #smartHero[data-period]::after {
    width: 320px;
    height: 320px;
    bottom: -120px;
  }
  #smartHero[data-period="morning"] .hero-title,
  #smartHero[data-period="evening"] .hero-title {
    font-size: 22px;
  }
}