/* =====================================================
   NAMAZ INTERACTIVE GUIDE — nig.css v6.0
   Defensive: high specificity, resets all theme interference
   Mobile-First | NamazVaxtiaz.com
   ===================================================== */

/* ══ HARD RESET — override any theme interference ══ */
#nig-root,
#nig-root *,
#nig-root *::before,
#nig-root *::after {
  box-sizing: border-box !important;
  -webkit-box-sizing: border-box !important;
}
#nig-root * {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: normal;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
#nig-root a { text-decoration: none; color: inherit; }
#nig-root button { cursor: pointer; -webkit-appearance: none; appearance: none; background: none; border: none; }
#nig-root ul, #nig-root ol { list-style: none; }
#nig-root img { max-width: 100%; display: block; }

/* Articles reset */
.nig-articles * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: normal;
}

/* SEO hidden block */
#nig-root .nig-seo {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

/* ══════════════════════════════════════════════════
   ROOT WRAPPER
══════════════════════════════════════════════════ */
#nig-root {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 820px !important;
  margin: 24px auto !important;
  background: #faf7f0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 24px rgba(13,53,32,.12), 0 12px 48px rgba(13,53,32,.10) !important;
  border: 1px solid rgba(200,168,75,.18) !important;
  font-size: 16px !important;
}

/* ══════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════ */
#nig-root .nig-header {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  background: linear-gradient(148deg, #071910 0%, #0d3520 50%, #1a5c38 100%) !important;
  padding: 20px 24px 18px !important;
  position: relative !important;
  overflow: hidden !important;
}
#nig-root .nig-header::after {
  content: "" !important;
  position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, #c8a84b 40%, #e2c97e 50%, #c8a84b 60%, transparent) !important;
  pointer-events: none !important;
}
#nig-root .nig-hinner {
  flex: 1 !important;
  min-width: 0 !important;
}
#nig-root .nig-har {
  display: block !important;
  font-family: "Amiri", "Traditional Arabic", Georgia, serif !important;
  font-size: 14px !important;
  color: rgba(200,168,75,.55) !important;
  margin-bottom: 5px !important;
  direction: rtl !important;
  line-height: 1.4 !important;
}
#nig-root .nig-htitle {
  display: block !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
  margin-bottom: 4px !important;
  letter-spacing: -.01em !important;
}
#nig-root .nig-hsub {
  display: block !important;
  font-size: 12px !important;
  color: rgba(255,255,255,.48) !important;
  line-height: 1.4 !important;
}

/* Share btn in header */
#nig-root .nig-share-btn {
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(200,168,75,.14) !important;
  border: 1.5px solid rgba(200,168,75,.35) !important;
  border-radius: 10px !important;
  color: #e2c97e !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 9px 14px !important;
  transition: background .22s ease, border-color .22s ease !important;
  -webkit-tap-highlight-color: transparent !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
#nig-root .nig-share-btn:hover {
  background: rgba(200,168,75,.26) !important;
  border-color: #c8a84b !important;
}
#nig-root .nig-share-btn svg {
  width: 16px !important; height: 16px !important;
  flex-shrink: 0 !important;
  stroke: currentColor !important;
  fill: none !important;
}

/* ══════════════════════════════════════════════════
   PROGRESS BAR
══════════════════════════════════════════════════ */
#nig-root .nig-prog-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: #0d3520 !important;
  padding: 10px 24px !important;
  border-bottom: 1px solid rgba(200,168,75,.10) !important;
}
#nig-root .nig-prog-track {
  flex: 1 !important;
  height: 5px !important;
  background: rgba(255,255,255,.12) !important;
  border-radius: 99px !important;
  overflow: hidden !important;
}
#nig-root .nig-prog-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #c8a84b, #e2c97e) !important;
  border-radius: 99px !important;
  transition: width .45s cubic-bezier(.4,0,.2,1) !important;
  box-shadow: 0 0 8px rgba(200,168,75,.45) !important;
}
#nig-root .nig-prog-lbl {
  font-size: 12px !important;
  color: rgba(255,255,255,.45) !important;
  white-space: nowrap !important;
  min-width: 44px !important;
  text-align: right !important;
}
#nig-root .nig-prog-lbl strong {
  color: #e2c97e !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════
   PILLS NAV
══════════════════════════════════════════════════ */
#nig-root .nig-pills {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  background: #0d3520 !important;
  padding: 0 24px 16px !important;
  gap: 7px !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  scrollbar-color: #c8a84b transparent !important;
}
#nig-root .nig-pills::-webkit-scrollbar { height: 3px !important; }
#nig-root .nig-pills::-webkit-scrollbar-thumb { background: #c8a84b !important; border-radius: 99px !important; }

#nig-root .nig-pill {
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1.5px solid rgba(255,255,255,.09) !important;
  border-radius: 9px !important;
  color: rgba(255,255,255,.42) !important;
  font-size: 10px !important;
  padding: 9px 9px 8px !important;
  min-width: 60px !important;
  max-width: 78px !important;
  min-height: 54px !important;
  transition: background .22s ease, color .22s ease, border-color .22s ease !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
  text-align: center !important;
}
#nig-root .nig-pill:hover {
  background: rgba(200,168,75,.14) !important;
  color: #e2c97e !important;
  border-color: rgba(200,168,75,.38) !important;
}
#nig-root .nig-pill.nig-on {
  background: rgba(200,168,75,.16) !important;
  border-color: #c8a84b !important;
  color: #c8a84b !important;
}
#nig-root .nig-pill-n {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important; height: 26px !important;
  background: rgba(255,255,255,.10) !important;
  border-radius: 50% !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  transition: background .22s ease, color .22s ease !important;
  flex-shrink: 0 !important;
}
#nig-root .nig-pill.nig-on .nig-pill-n {
  background: #c8a84b !important;
  color: #0d3520 !important;
}
#nig-root .nig-pill-l {
  font-size: 9px !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 68px !important;
  width: 100% !important;
}

/* ══════════════════════════════════════════════════
   PANELS
══════════════════════════════════════════════════ */
#nig-root .nig-panels {
  display: block !important;
  padding: 24px 24px 18px !important;
  background: #faf7f0 !important;
}
#nig-root .nig-panel {
  display: none !important;
}
#nig-root .nig-panel.nig-on {
  display: block !important;
  animation: nig6In .30s cubic-bezier(.4,0,.2,1) both !important;
}
@keyframes nig6In {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Takbir bar */
#nig-root .nig-takbir-bar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(200,168,75,.10) !important;
  border: 1px solid rgba(200,168,75,.28) !important;
  border-left: 3px solid #c8a84b !important;
  border-radius: 9px !important;
  padding: 10px 14px !important;
  margin-bottom: 16px !important;
  flex-wrap: wrap !important;
}
#nig-root .nig-takbir-ar {
  font-family: "Amiri", "Traditional Arabic", Georgia, serif !important;
  font-size: 18px !important;
  color: #c8a84b !important;
  direction: rtl !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  line-height: 1.5 !important;
}
#nig-root .nig-takbir-txt {
  font-size: 13px !important;
  color: #2a4030 !important;
  line-height: 1.45 !important;
}
#nig-root .nig-takbir-txt strong {
  color: #0d3520 !important;
  font-weight: 700 !important;
}

/* Panel top */
#nig-root .nig-panel-top {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  margin-bottom: 18px !important;
}
#nig-root .nig-badge {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important; height: 44px !important;
  background: linear-gradient(135deg, #c8a84b 0%, #9a7820 100%) !important;
  border-radius: 50% !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #0d3520 !important;
  box-shadow: 0 3px 10px rgba(200,168,75,.38) !important;
  line-height: 1 !important;
}
#nig-root .nig-ptitle {
  display: block !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #0f2018 !important;
  line-height: 1.3 !important;
  margin-bottom: 5px !important;
}
#nig-root .nig-psub {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
  font-size: 12px !important;
  color: #5a6e5c !important;
  line-height: 1.4 !important;
}
#nig-root .nig-psub-dot { opacity: .5 !important; }
#nig-root .nig-psub-ar {
  font-family: "Amiri", "Traditional Arabic", Georgia, serif !important;
  font-size: 14px !important;
  color: #c8a84b !important;
  direction: rtl !important;
  line-height: 1.4 !important;
}

/* Arabic block */
#nig-root .nig-arabic {
  display: block !important;
  background: linear-gradient(148deg, #0d3520 0%, #1a5c38 100%) !important;
  border-radius: 12px !important;
  padding: 18px 20px 16px !important;
  margin-bottom: 16px !important;
  direction: rtl !important;
  text-align: right !important;
  position: relative !important;
  overflow: hidden !important;
}
#nig-root .nig-arabic::after {
  content: "" !important;
  position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(200,168,75,.38), transparent) !important;
  pointer-events: none !important;
}
#nig-root .nig-arabic-lbl {
  display: block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  color: rgba(200,168,75,.50) !important;
  margin-bottom: 10px !important;
  direction: ltr !important;
  text-align: left !important;
  line-height: 1 !important;
}
#nig-root .nig-arabic-txt {
  display: block !important;
  font-family: "Amiri", "Scheherazade New", "Traditional Arabic", "Noto Naskh Arabic", Georgia, serif !important;
  font-size: 22px !important;
  line-height: 2.2 !important;
  color: #e2c97e !important;
  letter-spacing: .02em !important;
  word-spacing: .10em !important;
}

/* Language tabs */
#nig-root .nig-tabs {
  display: flex !important;
  background: #f0ead8 !important;
  border-radius: 9px !important;
  padding: 4px !important;
  gap: 4px !important;
  margin-bottom: 14px !important;
}
#nig-root .nig-tab {
  flex: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 8px !important;
  color: #5a6e5c !important;
  transition: background .20s ease, color .20s ease, box-shadow .20s ease !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  min-height: 42px !important;
  cursor: pointer !important;
  line-height: 1 !important;
}
#nig-root .nig-tab:hover { color: #1a5c38 !important; background: rgba(26,92,56,.07) !important; }
#nig-root .nig-tab.nig-on {
  background: #ffffff !important;
  color: #0d3520 !important;
  box-shadow: 0 2px 8px rgba(13,53,32,.12) !important;
}

/* Translation text */
#nig-root .nig-trans {
  display: block !important;
  min-height: 70px !important;
}
#nig-root .nig-tr {
  display: none !important;
  font-size: 15px !important;
  line-height: 1.78 !important;
  color: #2a4030 !important;
  animation: nig6Fade .24s ease both !important;
}
#nig-root .nig-tr.nig-on { display: block !important; }
@keyframes nig6Fade {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════════════ */
#nig-root .nig-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 14px 24px 18px !important;
  background: #f0ead8 !important;
  border-top: 1px solid #e3d9c2 !important;
}
#nig-root .nig-nbtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  background: linear-gradient(135deg, #1a5c38 0%, #0d3520 100%) !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 13px 22px !important;
  min-width: 110px !important;
  min-height: 46px !important;
  transition: background .22s ease, transform .18s ease, box-shadow .22s ease !important;
  box-shadow: 0 3px 10px rgba(13,53,32,.22) !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
#nig-root .nig-nbtn svg {
  width: 15px !important; height: 15px !important;
  stroke: currentColor !important;
  fill: none !important;
  flex-shrink: 0 !important;
}
#nig-root .nig-nbtn:hover:not(:disabled) {
  background: linear-gradient(135deg, #2e8a57 0%, #1a5c38 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(13,53,32,.28) !important;
}
#nig-root .nig-nbtn:active:not(:disabled) { transform: translateY(0) !important; }
#nig-root .nig-nbtn:disabled {
  opacity: .28 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}
#nig-root .nig-next {
  background: linear-gradient(135deg, #c8a84b 0%, #9a7820 100%) !important;
  color: #0d3520 !important;
  box-shadow: 0 3px 10px rgba(200,168,75,.34) !important;
}
#nig-root .nig-next:hover:not(:disabled) {
  background: linear-gradient(135deg, #e2c97e 0%, #c8a84b 100%) !important;
  box-shadow: 0 6px 18px rgba(200,168,75,.44) !important;
}
#nig-root .nig-next.nig-done {
  background: linear-gradient(135deg, #236b44 0%, #0d3520 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(13,53,32,.22) !important;
}

/* Dots */
#nig-root .nig-dots {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  max-width: 220px !important;
}
#nig-root .nig-dot {
  display: inline-block !important;
  width: 9px !important; height: 9px !important;
  border-radius: 50% !important;
  background: rgba(26,92,56,.22) !important;
  padding: 0 !important;
  transition: background .22s ease, transform .22s ease, box-shadow .22s ease !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
  position: relative !important;
}
#nig-root .nig-dot::before {
  content: "" !important;
  position: absolute !important; inset: -7px !important;
}
#nig-root .nig-dot:hover { background: #236b44 !important; transform: scale(1.2) !important; }
#nig-root .nig-dot.nig-on {
  background: #c8a84b !important;
  transform: scale(1.4) !important;
  box-shadow: 0 0 6px rgba(200,168,75,.55) !important;
}

/* ══════════════════════════════════════════════════
   COMPLETION BANNER
══════════════════════════════════════════════════ */
#nig-root .nig-done-bar {
  display: none !important;
  align-items: center !important;
  gap: 14px !important;
  background: linear-gradient(135deg, #0d3520 0%, #1a5c38 100%) !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin: 0 24px 20px !important;
  border: 1px solid rgba(200,168,75,.22) !important;
  flex-wrap: wrap !important;
  animation: nig6Fade .38s ease !important;
}
#nig-root .nig-done-bar.show { display: flex !important; }
#nig-root .nig-done-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 !important;
  min-width: 0 !important;
}
#nig-root .nig-done-icon { font-size: 28px !important; flex-shrink: 0 !important; line-height: 1 !important; }
#nig-root .nig-done-left strong {
  display: block !important;
  color: #e2c97e !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  margin-bottom: 2px !important;
  line-height: 1.3 !important;
}
#nig-root .nig-done-left span {
  display: block !important;
  color: rgba(255,255,255,.55) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}
#nig-root .nig-restart {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(200,168,75,.16) !important;
  border: 1.5px solid rgba(200,168,75,.35) !important;
  border-radius: 8px !important;
  color: #e2c97e !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 9px 18px !important;
  min-height: 40px !important;
  white-space: nowrap !important;
  transition: background .22s ease !important;
  -webkit-tap-highlight-color: transparent !important;
  cursor: pointer !important;
}
#nig-root .nig-restart:hover { background: rgba(200,168,75,.28) !important; }

/* ══════════════════════════════════════════════════
   SHARE SECTION
══════════════════════════════════════════════════ */
#nig-root .nig-share-section {
  display: block !important;
  padding: 20px 24px 26px !important;
  background: #ffffff !important;
  border-top: 2px solid #f0ead8 !important;
}
#nig-root .nig-share-msg {
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
  background: linear-gradient(148deg, #0d3520 0%, #1a5c38 100%) !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  margin-bottom: 16px !important;
  position: relative !important;
  overflow: hidden !important;
}
#nig-root .nig-share-msg::after {
  content: "" !important;
  position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, #c8a84b, transparent) !important;
  pointer-events: none !important;
}
#nig-root .nig-share-icon-wrap {
  font-size: 30px !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  padding-top: 2px !important;
}
#nig-root .nig-share-text { flex: 1 !important; min-width: 0 !important; }
#nig-root .nig-share-text strong {
  display: block !important;
  color: #e2c97e !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
  line-height: 1.35 !important;
}
#nig-root .nig-share-text p {
  font-size: 13px !important;
  color: rgba(255,255,255,.65) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* Share buttons grid */
#nig-root .nig-share-btns {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
#nig-root .nig-sbtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 14px 16px !important;
  min-height: 50px !important;
  text-decoration: none !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
  letter-spacing: .01em !important;
  line-height: 1 !important;
}
#nig-root .nig-sbtn svg {
  width: 20px !important; height: 20px !important;
  flex-shrink: 0 !important;
  fill: currentColor !important;
}
#nig-root .nig-sbtn-wa {
  background: #25D366 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 12px rgba(37,211,102,.30) !important;
}
#nig-root .nig-sbtn-wa:hover {
  background: #1da851 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(37,211,102,.40) !important;
}
#nig-root .nig-sbtn-tg {
  background: #0088cc !important;
  color: #ffffff !important;
  box-shadow: 0 3px 12px rgba(0,136,204,.28) !important;
}
#nig-root .nig-sbtn-tg:hover {
  background: #006ea6 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(0,136,204,.38) !important;
}
#nig-root .nig-sbtn-fb {
  background: #1877f2 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 12px rgba(24,119,242,.26) !important;
}
#nig-root .nig-sbtn-fb:hover {
  background: #1460c4 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(24,119,242,.36) !important;
}
#nig-root .nig-sbtn-copy {
  background: #f0ead8 !important;
  color: #0f2018 !important;
  border: 1.5px solid #e3d9c2 !important;
  box-shadow: 0 2px 8px rgba(13,53,32,.08) !important;
}
#nig-root .nig-sbtn-copy:hover {
  background: #e3d9c2 !important;
  transform: translateY(-1px) !important;
}
#nig-root .nig-sbtn-copy svg {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
}
#nig-root .nig-copy-ok {
  display: none !important;
  margin-top: 12px !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1a5c38 !important;
  background: rgba(46,138,87,.10) !important;
  border: 1px solid rgba(46,138,87,.24) !important;
  border-radius: 8px !important;
  padding: 10px !important;
  animation: nig6Fade .24s ease !important;
  line-height: 1.4 !important;
}
#nig-root .nig-copy-ok.show { display: block !important; }

/* ══════════════════════════════════════════════════
   ARTICLES  (outside #nig-root)
══════════════════════════════════════════════════ */
.nig-articles {
  max-width: 820px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.nig-articles .nig-article {
  background: #ffffff;
  border-radius: 14px;
  padding: 24px 24px 20px;
  margin-top: 16px;
  border: 1px solid #e3d9c2;
  box-shadow: 0 2px 12px rgba(13,53,32,.07);
}
.nig-articles .nig-art-title {
  font-size: 18px;
  font-weight: 700;
  color: #0f2018;
  line-height: 1.35;
  margin-bottom: 6px;
  padding-left: 12px;
  border-left: 3px solid #c8a84b;
}
.nig-articles .nig-art-meta {
  font-size: 12px;
  color: #5a6e5c;
  margin-bottom: 14px;
  padding-left: 12px;
}
.nig-articles .nig-art-body p {
  font-size: 14px;
  line-height: 1.78;
  color: #2a4030;
  margin-bottom: 12px;
}
.nig-articles .nig-art-body p:last-child { margin-bottom: 0; }
.nig-articles .nig-art-body strong { color: #0f2018; }
.nig-articles .nig-art-body em {
  font-style: italic;
  color: #1a5c38;
  background: rgba(26,92,56,.07);
  padding: 1px 5px;
  border-radius: 4px;
}
.nig-articles .nig-art-list {
  list-style: none;
  padding: 0;
  margin: 12px 0;
}
.nig-articles .nig-art-list li {
  font-size: 13px;
  line-height: 1.65;
  color: #2a4030;
  padding: 7px 12px 7px 14px;
  border-left: 2px solid rgba(200,168,75,.40);
  margin-bottom: 6px;
  background: #faf7f0;
  border-radius: 0 7px 7px 0;
}
.nig-articles .nig-art-list li strong { color: #0f2018; }

/* ══════════════════════════════════════════════════
   RESPONSIVE — TABLET ≤ 640px
══════════════════════════════════════════════════ */
@media screen and (max-width: 640px) {
  #nig-root { margin: 10px !important; border-radius: 14px !important; font-size: 15px !important; }
  #nig-root .nig-header { padding: 16px 18px 14px !important; }
  #nig-root .nig-htitle { font-size: 17px !important; }
  #nig-root .nig-share-btn .nig-share-btn-txt { display: none !important; }
  #nig-root .nig-prog-row { padding: 9px 18px !important; }
  #nig-root .nig-pills { padding: 0 18px 14px !important; gap: 5px !important; }
  #nig-root .nig-panels { padding: 18px 18px 14px !important; }
  #nig-root .nig-nav { padding: 12px 18px 16px !important; }
  #nig-root .nig-done-bar { margin: 0 18px 16px !important; }
  #nig-root .nig-share-section { padding: 16px 18px 22px !important; }
  .nig-articles .nig-article { padding: 18px 18px 16px; margin-top: 12px; }
}

/* ══════════════════════════════════════════════════
   RESPONSIVE — MOBILE ≤ 430px  (PRIMARY TARGET)
══════════════════════════════════════════════════ */
@media screen and (max-width: 430px) {
  #nig-root { margin: 8px !important; border-radius: 12px !important; }

  /* Header */
  #nig-root .nig-header { padding: 13px 14px 12px !important; gap: 10px !important; }
  #nig-root .nig-har { font-size: 12px !important; }
  #nig-root .nig-htitle { font-size: 15px !important; }
  #nig-root .nig-hsub { font-size: 11px !important; }
  #nig-root .nig-share-btn { padding: 8px 10px !important; }
  #nig-root .nig-share-btn svg { width: 16px !important; height: 16px !important; }

  /* Progress */
  #nig-root .nig-prog-row { padding: 8px 14px !important; gap: 8px !important; }
  #nig-root .nig-prog-lbl { font-size: 11px !important; min-width: 36px !important; }

  /* Pills */
  #nig-root .nig-pills { padding: 0 14px 12px !important; gap: 5px !important; }
  #nig-root .nig-pill { min-width: 52px !important; max-width: 64px !important; padding: 7px 6px !important; min-height: 50px !important; }
  #nig-root .nig-pill-n { width: 22px !important; height: 22px !important; font-size: 10px !important; }
  #nig-root .nig-pill-l { font-size: 8px !important; }

  /* Panels */
  #nig-root .nig-panels { padding: 14px 14px 12px !important; }
  #nig-root .nig-panel-top { gap: 11px !important; margin-bottom: 14px !important; }
  #nig-root .nig-badge { width: 38px !important; height: 38px !important; font-size: 14px !important; }
  #nig-root .nig-ptitle { font-size: 15px !important; }
  #nig-root .nig-psub { font-size: 11px !important; }

  /* Takbir bar */
  #nig-root .nig-takbir-bar { padding: 9px 12px !important; margin-bottom: 12px !important; }
  #nig-root .nig-takbir-ar { font-size: 16px !important; }
  #nig-root .nig-takbir-txt { font-size: 12px !important; }

  /* Arabic */
  #nig-root .nig-arabic { padding: 14px 14px 12px !important; margin-bottom: 13px !important; }
  #nig-root .nig-arabic-lbl { font-size: 9px !important; }
  #nig-root .nig-arabic-txt { font-size: 18px !important; line-height: 2.1 !important; }

  /* Tabs */
  #nig-root .nig-tabs { padding: 3px !important; gap: 3px !important; margin-bottom: 12px !important; }
  #nig-root .nig-tab { font-size: 12px !important; padding: 9px 6px !important; min-height: 40px !important; }

  /* Trans text */
  #nig-root .nig-tr { font-size: 13px !important; line-height: 1.72 !important; }

  /* Nav */
  #nig-root .nig-nav { padding: 11px 14px 15px !important; gap: 8px !important; }
  #nig-root .nig-nbtn { min-width: 0 !important; flex: 1 !important; padding: 12px 10px !important; font-size: 13px !important; min-height: 44px !important; }
  #nig-root .nig-dots { max-width: 140px !important; gap: 5px !important; }
  #nig-root .nig-dot { width: 7px !important; height: 7px !important; }

  /* Done bar */
  #nig-root .nig-done-bar { margin: 0 14px 14px !important; padding: 13px 14px !important; gap: 10px !important; }
  #nig-root .nig-done-icon { font-size: 24px !important; }
  #nig-root .nig-done-left strong { font-size: 13px !important; }
  #nig-root .nig-done-left span { font-size: 11px !important; }
  #nig-root .nig-restart { width: 100% !important; padding: 10px !important; margin-top: 2px !important; }

  /* Share */
  #nig-root .nig-share-section { padding: 14px 14px 20px !important; }
  #nig-root .nig-share-msg { padding: 14px 14px !important; gap: 11px !important; margin-bottom: 14px !important; }
  #nig-root .nig-share-icon-wrap { font-size: 24px !important; }
  #nig-root .nig-share-text strong { font-size: 13px !important; }
  #nig-root .nig-share-text p { font-size: 12px !important; }
  #nig-root .nig-share-btns { gap: 8px !important; }
  #nig-root .nig-sbtn { padding: 12px 10px !important; font-size: 13px !important; gap: 7px !important; min-height: 46px !important; }

  /* Articles */
  .nig-articles .nig-article { padding: 14px 14px 12px; border-radius: 12px; margin-top: 10px; }
  .nig-articles .nig-art-title { font-size: 15px; }
  .nig-articles .nig-art-body p { font-size: 13px; line-height: 1.70; }
  .nig-articles .nig-art-list li { font-size: 12px; }
}

/* ══ Very small screens ≤ 360px ══ */
@media screen and (max-width: 360px) {
  #nig-root .nig-htitle { font-size: 14px !important; }
  #nig-root .nig-arabic-txt { font-size: 16px !important; line-height: 2.0 !important; }
  #nig-root .nig-tab { font-size: 11px !important; padding: 8px 4px !important; }
  #nig-root .nig-nbtn { font-size: 12px !important; }
  #nig-root .nig-sbtn { font-size: 12px !important; padding: 11px 8px !important; }
  #nig-root .nig-pill { min-width: 46px !important; }
}

/* ══ Print ══ */
@media print {
  #nig-root .nig-pills,
  #nig-root .nig-nav,
  #nig-root .nig-prog-row,
  #nig-root .nig-done-bar,
  #nig-root .nig-share-btn,
  #nig-root .nig-share-section { display: none !important; }
  #nig-root .nig-panel { display: block !important; margin-bottom: 28px; page-break-inside: avoid; }
  #nig-root .nig-arabic { background: #f5f5ef !important; }
  #nig-root .nig-arabic-txt { color: #111 !important; }
  #nig-root { box-shadow: none !important; border: 1px solid #ccc !important; }
}