/* =============================================================================
   Zahra premium browsing — shared styling for the category screens so the
   website matches the app: gold circular category + item icons, gold-accented
   cards, and two cards per row. Paired with premium-cards.js.
   ============================================================================= */

/* ---- Category header: gold circular icon beside the title ---- */
.zp-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.zp-head h3,
.zp-head span {
  min-width: 0;
}

.zp-cat-icon {
  /* !important so page rules like `.X-header span { flex:1 }` can't stretch
     the circle into an oval */
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(230, 194, 90, 0.16), rgba(230, 194, 90, 0.30));
  border: 1px solid rgba(230, 194, 90, 0.55);
  color: #C9A227;
  font-size: 1.1rem;
  padding: 0;
}
body.dark .zp-cat-icon {
  color: #E6C25A;
  background: linear-gradient(135deg, rgba(230, 194, 90, 0.18), rgba(230, 194, 90, 0.32));
}

/* ---- List item: small gold circular icon before the title ---- */
.zp-row-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
.zp-item-icon {
  /* !important so page rules like `.dua-item span { flex:1 }` can't stretch
     the circle into an oval */
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 30px !important;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(230, 194, 90, 0.14);
  border: 1px solid rgba(230, 194, 90, 0.40);
  color: #C9A227;
  font-size: 0.8rem;
  padding: 0;
}
body.dark .zp-item-icon {
  color: #E6C25A;
  background: rgba(230, 194, 90, 0.20);
}

/* Make every list row a flex container so the icon + text sit left and the
   favorite control stays on the right, regardless of each page's markup. */
.amal-step,
.dua-item,
.ziyarat-item,
.namaz-item,
.library-item {
  display: flex;
  align-items: center;
}

/* ---- Category titles use the app's emerald identity (not bright cyan) ----
   App: #00695C in light, #4DB6AC in dark. */
.cat-header span,
.dua-header h3,
.ziyarat-header h3,
.namaz-header span,
.library-header h3 {
  color: #00695C !important;
}
body.dark .cat-header span,
body.dark .dua-header h3,
body.dark .ziyarat-header h3,
body.dark .namaz-header span,
body.dark .library-header h3 {
  color: #4DB6AC !important;
}

/* ---- Nested (second-level) dropdown for A'mal sub-sections, like the app ---- */
.zp-subsection {
  margin: 4px 0 10px;
}
.zp-sub-head {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  padding: 8px 6px;
  border-radius: var(--radius-sm, 10px);
}
.zp-sub-head:hover {
  background: rgba(0, 150, 136, 0.06);
}
.zp-sub-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #00695C;
  letter-spacing: 0.2px;
}
body.dark .zp-sub-title {
  color: #4DB6AC;
}
.zp-sub-chevron {
  flex: 0 0 auto;
  color: var(--muted, #6B7B76);
  transition: transform var(--transition, 0.2s ease);
  font-size: 0.85rem;
}
.zp-subsection.open .zp-sub-chevron {
  transform: rotate(180deg);
}
.zp-sub-body {
  padding-left: 6px;
}
.zp-subsection:not(.open) .zp-sub-body {
  display: none;
}

/* ---- Gold accent on the category cards (matches the app's gold border) ---- */
.nav-card,
.dua-card,
.ziyarat-card,
.namaz-card,
.library-card {
  border-color: rgba(230, 194, 90, 0.42) !important;
}
body.dark .nav-card,
body.dark .dua-card,
body.dark .ziyarat-card,
body.dark .namaz-card,
body.dark .library-card {
  border-color: rgba(230, 194, 90, 0.30) !important;
}