:root,
[data-theme='light'] {
  --bg-page: #f6f4ee;
  --bg-panel: #fff;
  --bg-card: #fff;
  --text-main: #15181a;
  --text-secondary: #5c6168;
  --text-muted: #8e9298;
  --border: rgba(15, 20, 18, 0.08);
  --shadow: rgba(15, 30, 25, 0.08);
  --accent: #1e5f4f;
  --accent-soft: #2c8068;
  --autocomplete-selected-bg: rgba(30, 95, 79, 0.16);
  --accent-ink: #0b2e25;
  --accent-bg: rgba(30, 95, 79, 0.08);
  --accent-glow: rgba(30, 95, 79, 0.3);
  --accent-bright: #2c8068;
  --accent-warm: #c97b4f;
  --accent-gold: #a88147;
  --accent-danger: #d4384a;
  --serif: 'Instrument Serif', georgia, serif;
  --mono: 'Geist Mono', ui-monospace, sfmono-regular, menlo, monospace;
  --shadow-soft: 0 1px 0 rgba(15, 20, 18, 0.03), 0 6px 18px rgba(15, 20, 18, 0.05);
  --shadow-lift: 0 1px 0 rgba(15, 20, 18, 0.04), 0 4px 18px rgba(15, 20, 18, 0.06);
  --radius-xl: 22px;
  --radius-lg: 22px;
  --radius-md: 18px;
  --radius-sm: 14px;
  --homepage-stack-gap: 18px;
  --page-left-inset: 18px;
  --safe-area-inset-top: env(safe-area-inset-top, 0);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
  --for-you-heading-gap: 16px;
  --search-section-padding-y: 0;
  --search-section-padding-top: 0;
  --widget-card-body-padding: 12px 14px;
  --bg-chip: rgba(15, 20, 18, 0.06);
}

[data-theme='dark'] {
  --bg-page: #0f1311;
  --bg-panel: #1e293b;
  --bg-card: #1a2120;
  --text-main: #ecede7;
  --text-secondary: #9aa09c;
  --text-muted: #6a6f6c;
  --border: rgba(255, 255, 255, 0.07);
  --shadow: rgba(0, 0, 0, 0.5);
  --accent: #3b8068;
  --accent-soft: #4fa688;
  --autocomplete-selected-bg: rgba(79, 166, 136, 0.22);
  --accent-ink: #d4eddf;
  --accent-bg: rgba(59, 128, 104, 0.1);
  --accent-glow: rgba(59, 128, 104, 0.35);
  --accent-bright: #4fa688;
  --accent-warm: #d88758;
  --accent-gold: #d4b176;
  --accent-danger: #e25c50;
  --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.04), 0 6px 18px rgba(0, 0, 0, 0.4);
  --shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 18px rgba(0, 0, 0, 0.45);
  --bg-chip: rgba(245, 242, 234, 0.06);
}

/* Eager widget skeletons: reserved space + shimmer shown between first paint
   and widget-loader.js populating the container, so speeding up first paint
   doesn't turn into an empty-box layout jump. Removed by widget-loader.js
   once real content is injected. Heights match each widget's typical
   rendered size on a 390px viewport. */
.widget-skeleton {
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--bg-panel) 25%, var(--border) 37%, var(--bg-panel) 63%);
  background-size: 400% 100%;
  animation: widget-skeleton-shimmer 1.4s ease infinite;
}

#widget-protection.widget-skeleton {
  min-height: 32px;
}

#widget-search.widget-skeleton {
  min-height: 56px;
}

#widget-favorites.widget-skeleton {
  min-height: 62px;
}

#widget-islamic-carousel.widget-skeleton {
  min-height: 165px;
}

@keyframes widget-skeleton-shimmer {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .widget-skeleton {
    animation: none;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family:
    'Inter',
    'Noto Sans Arabic',
    'Geeza Pro',
    Tahoma,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    sans-serif;
  color: var(--text-main);
  background: transparent;
  overflow-x: hidden;
  font-weight: 430;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-width: none;
}

html[dir='rtl'] body {
  text-align: right;
}

body[data-language='ar'] {
  font-family:
    'Inter',
    'Noto Sans Arabic',
    'Geeza Pro',
    Tahoma,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    sans-serif;
}

* {
  scrollbar-width: none;
}

*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

button,
a,
[role='button'],
.autocomplete-item,
.dropdown-item,
.favorite-item,
.dailystar-rss-card {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

.hidden {
  display: none !important;
}

.background {
  position: fixed;
  inset: 0;

  /* Ambient aurora so frosted-glass surfaces have colour to refract */
  background:
    radial-gradient(115% 70% at 6% -6%, rgba(240, 198, 120, 0.62) 0%, rgba(240, 198, 120, 0) 52%),
    radial-gradient(110% 66% at 104% 0%, rgba(104, 220, 184, 0.55) 0%, rgba(104, 220, 184, 0) 54%),
    radial-gradient(120% 80% at 88% 108%, rgba(44, 128, 104, 0.28) 0%, rgba(44, 128, 104, 0) 60%),
    radial-gradient(120% 80% at -8% 66%, rgba(146, 166, 236, 0.34) 0%, rgba(146, 166, 236, 0) 56%),
    radial-gradient(140% 120% at 50% 46%, rgba(255, 246, 228, 0.5) 0%, rgba(255, 246, 228, 0) 70%),
    var(--bg-page);
  z-index: -2;
}

body.theme-dark .background,
body[data-theme='dark'] .background {
  background:
    radial-gradient(125% 80% at 8% -4%, rgba(59, 128, 104, 0.36) 0%, rgba(59, 128, 104, 0) 46%),
    radial-gradient(115% 72% at 102% 2%, rgba(46, 104, 138, 0.34) 0%, rgba(46, 104, 138, 0) 48%),
    radial-gradient(130% 90% at 50% 110%, rgba(59, 128, 104, 0.2) 0%, rgba(59, 128, 104, 0) 55%),
    var(--bg-page);
}

.background-overlay {
  position: absolute;
  inset: 0;
  background: none;
}

.build-stamp {
  position: fixed;
  right: max(10px, env(safe-area-inset-right, 0));
  bottom: calc(10px + var(--safe-area-inset-bottom));
  z-index: 5;
  max-width: min(72vw, 280px);
  padding: 6px 9px;
  border-radius: 999px;
  background: rgb(249 249 251 / 88%);
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-align: right;
  box-shadow: 0 8px 24px rgb(27 36 54 / 8%);
  backdrop-filter: blur(10px);
  pointer-events: none;
}

.app-container {
  width: min(430px, 100%);
  margin: 0 auto;

  /* Transparent so the ambient aurora shows through and glass surfaces refract it */
  background: transparent;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.home-scroll {
  flex: 1;
  overflow-x: hidden;
}

.home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 8px;

  /* Frosted top bar so content glides underneath */
  background: linear-gradient(180deg, rgba(246, 244, 238, 0.72) 0%, rgba(246, 244, 238, 0.42) 100%);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  position: sticky;
  top: 0;
  z-index: 10;
}

body.theme-dark .home-header {
  background: linear-gradient(180deg, rgba(15, 19, 17, 0.74) 0%, rgba(15, 19, 17, 0.44) 100%);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.home-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-logo-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.home-logo-img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}

.home-logo-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: -0.2px;
}

.home-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 100%);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  box-shadow:
    0 4px 12px -4px rgba(31, 45, 61, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.home-icon-btn:active {
  transform: scale(0.92);
}

body.theme-dark .home-icon-btn {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(150deg, rgba(60, 78, 74, 0.5) 0%, rgba(18, 24, 22, 0.35) 100%);
  box-shadow:
    0 4px 12px -4px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.surface-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: visible;
  isolation: isolate;
  box-shadow: var(--shadow-soft);
}

.surface-card > [id^='widget-'] {
  /* padding: 14px 16px; */
}

.hero-zone {
  display: flex;
  flex-direction: column;

  /* Roomier hero: 16px between protection/search/favorites blocks (was 12). */
  gap: 16px;
  padding: 6px 20px 0;
}

.content-sections {
  display: flex;
  flex-direction: column;
  gap: 18px;

  /* Extra breathing room below the frequently-visited icons: the hero-zone
     ends after the favorites row, so this top padding is the gap between the
     icons and the first content card (was 18px). */
  padding: 28px 20px calc(24px + env(safe-area-inset-bottom));
}

.dashboard-grid {
  --dash-row-h: 232px;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
}

/* A widget that reports itself empty (e.g. no Wafilife books) sets the
   `hidden` attribute — force it off so it doesn't leave an empty glass tile.
   Needed because `.dashboard-widget { display: flex }` otherwise wins over
   the UA `[hidden]` rule. */
.dashboard-widget[hidden] {
  display: none !important;
}

.dashboard-widget {
  aspect-ratio: 1 / 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.14) 46%,
    rgba(255, 255, 255, 0.22) 100%
  ) !important;
  backdrop-filter: blur(22px) saturate(185%);
  -webkit-backdrop-filter: blur(22px) saturate(185%);
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow:
    0 10px 30px -8px rgba(31, 45, 61, 0.16),
    0 2px 6px rgba(31, 45, 61, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18) !important;
  transition:
    transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 0.22s ease;
  padding: 0 !important;
}

/* Signature liquid-glass sheen — a soft light streak across the top-left */
.dashboard-widget::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(
    148deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.12) 20%,
    rgba(255, 255, 255, 0) 42%
  );
  mix-blend-mode: screen;
}

.dashboard-widget:active {
  transform: scale(0.966);
  box-shadow:
    0 4px 14px -6px rgba(31, 45, 61, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

body.theme-dark .dashboard-widget {
  background: linear-gradient(
    150deg,
    rgba(60, 78, 74, 0.4) 0%,
    rgba(18, 24, 22, 0.32) 48%,
    rgba(30, 40, 38, 0.36) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 12px 34px -10px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03) !important;
}

body.theme-dark .dashboard-widget::before {
  background: linear-gradient(
    148deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.04) 22%,
    rgba(255, 255, 255, 0) 44%
  );
}

.dashboard-widget > div,
.dashboard-widget > section {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;

  /* Sit above the card's glass sheen backdrop */
  position: relative;
  z-index: 1;
}

/* Ensure child elements do not break out of the dashboard widget using 100vw */
.dashboard-widget .wafilife-books-carousel-wrapper,
.dashboard-widget .islamic-carousel-wrapper {
  position: static !important;
  transform: none !important;
  width: 100% !important;
  left: auto !important;
  height: 100%;
  overflow: hidden;
}

.dashboard-widget .deen-ai-section,
.dashboard-widget .wafilife-books-section,
.dashboard-widget .kahf-ad-section,
.dashboard-widget .islamic-carousel-section {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Islamic AI card — distribute content top-to-bottom so there are no dead
   gaps: header pinned top, topic shortcuts pinned bottom. */

/* Islamic AI card — distribute content top-to-bottom so there are no dead
   gaps: header pinned top, topic shortcuts pinned bottom. */
.dashboard-widget .deen-ai-section {
  justify-content: space-between;
  gap: 9px;
  padding: 13px !important;
}

/* Offers card — same 13px content inset as the Islamic AI card above, so the
   ad sits inside the glass card like every other widget's content instead of
   bleeding to its edges. Overrides the shared `padding: 0` further up. */
.dashboard-widget .kahf-ad-section {
  padding: 13px !important;
}

.dashboard-widget .deen-ai-hero {
  border: none !important;

  /* Let the card's frosted glass show through instead of a solid fill */
  background: transparent !important;
  flex: 0 0 auto;
  height: auto;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  justify-content: flex-start;
}

/* Header on one tidy line; BETA tag floats to the card corner so the
   "Islamic AI" title never wraps or collides with it. */
.dashboard-widget .deen-ai-header {
  padding: 0 !important;
  margin-bottom: 0 !important;
}

.dashboard-widget .deen-ai-title-group {
  flex-wrap: nowrap;
  gap: 7px;
  min-width: 0;
}

.dashboard-widget .deen-ai-sparkle {
  width: 26px;
  height: 26px;
}

.dashboard-widget .deen-ai-hero .deen-ai-header h2 {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Keep BETA inline with the title so it sits on the same baseline/centre */
.dashboard-widget .deen-ai-beta {
  flex-shrink: 0;
  align-self: center;
  padding: 2px 5px;
  font-size: 8px;
  line-height: 1.45;
}

/* Inner query pill rendered as a nested glass surface */
.dashboard-widget .deen-ai-launcher {
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dashboard-widget .deen-ai-launcher-input {
  font-size: 12.5px;
}

.dashboard-widget .deen-ai-launcher-send {
  width: 20px;
  height: 20px;
  border-radius: 6px;
}

/* The base 14px icon nearly fills the smaller button — scale it down so the
   arrow keeps its breathing room inside the pill. */
.dashboard-widget .deen-ai-launcher-send svg {
  width: 12px;
  height: 12px;
}

body.theme-dark .dashboard-widget .deen-ai-launcher {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.dashboard-widget .ic-card {
  height: 100% !important;
  border-radius: 0 !important;
}

/* ── Prayer slide, compact fixes inside the square dashboard tile ── */

/* Remove the auto-advance progress line */
.dashboard-widget .ic-progress {
  display: none !important;
}

/* Five columns share the tile width; keep the time compact enough that the
   widest realistic value ("12:34 PM") never collides with its neighbour. */
.dashboard-widget .ic-prayer-t {
  font-size: 10.5px;
}

.dashboard-widget .ic-prayer-hijri {
  font-size: 9px;
}

.dashboard-widget .ic-prayer-link {
  font-size: 10px;
}

.dashboard-widget .section-header {
  padding: 12px 12px 0;
  margin-bottom: 8px;
}

/* Every dashboard section is its own full-width row (single-column stack)
   rather than a 2-up square grid. (section-islamic-ai no longer appears here:
   it is a carousel cell INSIDE section-islamic — see .islamic-strip below.) */
#section-islamic,
#section-offers,
#section-wafilife-books {
  grid-column: 1 / -1;
  aspect-ratio: auto;
}

/* ── Islamic strip: prayer/verse/hadith/dua + Islamic AI in one horizontal
   carousel ── */

/* The strip is a scroller: one card-width cell per widget, snap to each. */
#section-islamic.islamic-strip {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
  overflow: auto hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;

  /* Fixed height like the old #section-islamic card: the carousel slides are
     position:absolute, so a content-height strip would collapse to 0. */
  height: 158px;
}

#section-islamic.islamic-strip::-webkit-scrollbar {
  display: none;
}

/* The islamic-carousel widget's root fills the first cell; the carousel's
   card + dots render inside it. */
#section-islamic.islamic-strip > #widget-islamic-carousel {
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

/* NB: do NOT give the widget root's children (icCard + icDots) height:100% —
   that would make the dots box swallow the whole strip and collapse the card
   to 0. The card's flex:1 and the dots' content height split the strip. */

/* The old #section-islamic > div rule, re-targeted one level deeper. */
#section-islamic.islamic-strip .ic-card {
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
}

/* Every slide: let the card's frosted-cream glass show through instead of an
   opaque white panel, matching the Islamic AI card. The prayer slide joins the
   group now that it is a flat card rather than an opaque sky gradient. */
#section-islamic .ic-prayer,
#section-islamic .ic-content,
#section-islamic .ic-last-tab,
#section-islamic .ic-footer {
  background: transparent;
  border-color: transparent;
}

/* Content slides (verse / hadith / dua): clamp long text so it never overflows
   into the footer — e.g. the long Hisn al-Muslim dua (Surah An-Nas). The
   translation fills the remaining space and the footer stays pinned, clear. */
#section-islamic .ic-content {
  overflow: hidden;
}

#section-islamic .ic-arabic {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#section-islamic .ic-translation {
  flex: 1 1 auto;
  min-height: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#section-islamic .ic-footer {
  position: static;
  flex: 0 0 auto;
  margin-top: 0;
  padding-top: 4px;
}

/* Islamic AI becomes the strip's second carousel cell (was its own full-width
   card). Height matches the strip; width = one strip cell. The custom-togglable
   id stays so the customize switch keeps working. Hide the card chrome — the
   strip carries it. */
#section-islamic-ai.islamic-strip-ai-cell {
  position: static;
  flex: 0 0 100%;
  min-width: 100%;
  height: 100%;
  scroll-snap-align: start;
  overflow: visible;
}

/* The AI cell's own carousel-card height override no longer applies; the cell
   fills the strip height instead. */
#section-islamic-ai.islamic-strip-ai-cell > div,
#section-islamic-ai.islamic-strip-ai-cell .deen-ai-section {
  height: 100%;
}

#section-islamic-ai.islamic-strip-ai-cell .deen-ai-section {
  justify-content: center;
  gap: 10px;
}

#section-islamic-ai.islamic-strip-ai-cell .deen-ai-launcher {
  padding: 8px 12px;
}

#section-wafilife-books {
  height: var(--dash-row-h);
}

/* Offers sizes itself to its content: header + the 230px ad box (plus the
   card's own 13px content inset, so it is a touch narrower than a full-bleed
   "For You" slot while matching its height). */
#section-offers {
  height: auto;
}

/* The generic widget wrapper (`.dashboard-widget > div { flex: 1 1 0;
   height: 100% }`) is built for fixed-height cards — inside an auto-height
   card its 0 flex-basis collapses the wrapper to nothing. Size by content. */
#section-offers > #widget-kahf-ad {
  flex: 0 0 auto;
  height: auto;
}

/* Islamic carousel — let the slide area fill the card; dots sit beneath it. */
#section-islamic > div {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#section-islamic .ic-card {
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
}

/* Every slide: let the card's frosted-cream glass show through instead of an
   opaque white panel, matching the Islamic AI card. The prayer slide joins the
   group now that it is a flat card rather than an opaque sky gradient. */
#section-islamic .ic-prayer,
#section-islamic .ic-content,
#section-islamic .ic-last-tab,
#section-islamic .ic-footer {
  background: transparent;
  border-color: transparent;
}

/* Content slides (verse / hadith / dua): clamp long text so it never overflows
   into the footer — e.g. the long Hisn al-Muslim dua (Surah An-Nas). The
   translation fills the remaining space and the footer stays pinned, clear. */
#section-islamic .ic-content {
  overflow: hidden;
}

#section-islamic .ic-arabic {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#section-islamic .ic-translation {
  flex: 1 1 auto;
  min-height: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#section-islamic .ic-footer {
  position: static;
  flex: 0 0 auto;
  margin-top: 0;
  padding-top: 4px;
}

/* Islamic AI — header pinned top, query launcher below it. With the topic
   chips gone the card is a slim header + single launcher row. */
#section-islamic-ai > div,
#section-islamic-ai .deen-ai-section {
  height: 100%;
}

#section-islamic-ai .deen-ai-section {
  justify-content: flex-start;
  gap: 10px;
}

#section-islamic-ai .deen-ai-hero {
  flex: 0 0 auto;
  gap: 10px;
}

#section-islamic-ai .deen-ai-launcher {
  padding: 8px 12px;
}

/* Offers — the card now carries the content inset itself (see
   `.dashboard-widget .kahf-ad-section`), so the header drops the shared
   `padding: 12px 12px 0`; keeping both would push the title twice as far in
   as the ad beneath it. Mirrors how `.deen-ai-header` is zeroed. */
#section-offers .section-header {
  padding: 0;
  margin-bottom: 8px;
}

/* Offers — header + the 230px ad box; content keeps its natural height. */
#section-offers > div,
#section-offers > section,
#section-offers .kahf-ad-section {
  height: auto;
}

/* Wafilife books — fill the shared row height. */
#section-wafilife-books > div,
#section-wafilife-books .wafilife-books-section,
#section-wafilife-books .wafilife-books-carousel-wrapper {
  height: 100%;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.section-header h2 {
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-main);
}

.section-header .section-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  opacity: 0.7;
}

/* Last Tab — "Continue with this tab". Rendered as the Islamic carousel's first
   slide (see .ic-last-tab further down for the slide shell); shown briefly on
   cold start, then auto-hidden by the widget. */
.last-tab-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  border-radius: var(--radius-sm);

  /* Translucent frosted-cream over the card's glass — matches the Islamic AI
     card's inner chips instead of an opaque white panel. */
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease;
}

.last-tab-card:active {
  transform: scale(0.985);
}

body.theme-dark .last-tab-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.last-tab-favicon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 6px;
  border-radius: 10px;
  background: rgba(127, 127, 127, 0.12);
  object-fit: contain;
}

.last-tab-body {
  flex: 1 1 auto;
  min-width: 0;
}

.last-tab-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-main);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.last-tab-domain {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pinned to the slide's top-right corner so it never squeezes the title, and
   sits clear of the eyebrow label on the left. */
.last-tab-dismiss {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.last-tab-dismiss:active {
  background: var(--border);
}

/* Protection row ("kp") — a transparent status line that expands a simple,
   inline breakdown of the three lifetime figures. Status-dot hues are held as
   custom props so dark can retint them. */
.kp {
  --kp-dot-ok: #18a06a;
  --kp-dot-warning: #d98324;
  --kp-dot-paused: #9a9a95;

  /* Sit close to the header above. */
  margin-top: 2px;
}

.kp-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  box-sizing: border-box;
  min-height: 32px;
  padding: 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;

  /* Inherit the start page's UI face (Inter). */
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-main);
  text-align: start;
}

.kp-row:hover {
  /* Stay transparent on hover — no highlight box. */
  background: transparent;
}

.kp-row:focus-visible {
  outline: 2px solid var(--kp-dot-ok);
  outline-offset: 2px;
}

/* Shield-check status icon; colour reflects state via currentColor (the SVG
   strokes with currentColor) instead of a filled dot. */
.kp-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--kp-dot-ok);
  flex-shrink: 0;
}

.kp-dot svg {
  display: block;
}

.kp-dot[data-state='warning'] {
  color: var(--kp-dot-warning);
}

.kp-dot[data-state='paused'] {
  color: var(--kp-dot-paused);
}

.kp-label {
  min-width: 0;

  /* Wrap to at most two lines so a long label stays readable instead of
     truncating; short labels stay on one centred line. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.kp-spacer {
  flex: 1;
}

.kp-figure {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
  white-space: nowrap;
}

.kp-figure b {
  margin-inline-end: 4px;
  font-family: var(--mono);
  font-weight: 500;
  color: var(--text-main);

  /* The numeral stays LTR even inside a mirrored RTL row. */
  direction: ltr;
  unicode-bidi: isolate;
}

.kp-figure b[hidden] {
  display: none;
}

.kp-caret {
  flex-shrink: 0;
  width: 10px;
  text-align: center;
  font-size: 15px;
  color: var(--text-muted);
}

/* Expanded breakdown — a compact card of the three lifetime figures. */
.kp-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 8px 0 10px;
  padding: 12px 14px;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgb(0 0 0 / 5%);
  animation: kp-pop 120ms ease-out both;
}

.kp-panel[hidden] {
  display: none;
}

.kp-panel b {
  display: block;
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-main);
  direction: ltr;
  unicode-bidi: isolate;
}

.kp-panel > div > span {
  display: block;
  margin-top: 5px;
  font-size: 10.5px;
  color: var(--text-secondary);
}

@keyframes kp-pop {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kp-panel {
    animation: none;
  }
}

/* Dark theme: brighter protected dot, no panel shadow. */
[data-theme='dark'] .kp {
  --kp-dot-ok: #4fd1a1;
}

[data-theme='dark'] .kp-panel {
  box-shadow: none;
}

/* Below 420px: keep the same three-across single row as the wider view, just
   with tighter spacing and smaller type so all three figures still fit. */
@media (max-width: 420px) {
  .kp-panel {
    gap: 6px;
    padding: 12px 10px;
  }

  .kp-panel b {
    font-size: 15px;
  }

  .kp-panel > div > span {
    font-size: 9.5px;
  }
}

.favorites-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.favorites-tabs {
  display: none;
}

.favorites-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 8px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.02em;
}

.favorites-tab svg {
  width: 14px;
  height: 14px;
}

.favorites-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.favorites-edit-btn {
  display: none;
}

.favorites-grid {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  flex-wrap: nowrap;

  /* `safe center` centers a short list but falls back to start-aligned when the
     list overflows, so the leftmost items stay reachable while scrolling. */
  justify-content: safe center;
  align-items: flex-start;
  scrollbar-width: none;
  -ms-overflow-style: none;

  /* Stay within the search-box column (no negative margin) so a long list
     scrolls inside this area instead of spilling to the screen edges. */
  padding: 10px 4px;
  margin: 0;
  max-width: 100%;
}

.favorites-grid::-webkit-scrollbar {
  display: none;
}

.favorites-grid.is-switching {
  opacity: 0;
  transform: translateX(-50%) translateY(6px) scale(0.985);
}

.favorites-grid.is-entering {
  animation: favoritesEnter 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes favoritesEnter {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

.favorite-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;

  /* Suppress the native long-press callout / text selection that some Android
     WebViews (Samsung One-UI, various Chinese ROMs) start on a long press,
     which otherwise captures touch input and freezes the context menu. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.favorite-icon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.favorite-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;

  /* Let touches fall through to the tile and never start an image drag/callout. */
  pointer-events: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.favorite-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: center;
  max-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.favorite-add-tile {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.favorite-add-tile svg {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  border: 1.5px dashed var(--border);
  color: var(--text-muted);
  padding: 14px;
  box-sizing: border-box;
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}

.favorite-add-tile:active svg {
  transform: scale(0.94);
}

body.theme-dark .favorite-add-tile svg,
[data-theme='dark'] .favorite-add-tile svg {
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--text-secondary);
}

.favorites-empty {
  width: 100%;
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.search-section {
  position: relative;
  z-index: 260;
}

.search-glow-wrapper {
  position: relative;
  z-index: 0;
}

.search-typewriter {
  display: none;
}

.search-container {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 58px;

  /* Frosted-glass fill, tinted to the page's cream (no pure white). Two
     background layers: a soft sheen in the top-left over a mostly-transparent
     frost so the wallpaper clearly refracts through the blur. Both paint behind
     the content, so no stacking/z-index juggling is needed. */
  background:
    radial-gradient(
      135% 135% at 16% -22%,
      rgba(246, 244, 238, 0.5) 0%,
      rgba(246, 244, 238, 0.2) 34%,
      rgba(246, 244, 238, 0) 64%
    ),
    linear-gradient(
      135deg,
      rgba(246, 244, 238, 0.28) 0%,
      rgba(246, 244, 238, 0.1) 55%,
      rgba(246, 244, 238, 0.16) 100%
    );
  backdrop-filter: blur(32px) saturate(210%);
  -webkit-backdrop-filter: blur(32px) saturate(210%);
  border-radius: 28px;

  /* Distinct accent-green rim so the field's edge reads clearly against the
     cream/green page. */
  border: 1.5px solid rgba(30, 95, 79, 0.42);
  padding-block: 0;
  padding-inline: 14px;

  /* Darker, grounded drop shadow so the glass sits with more weight, plus a
     faint accent halo just outside the border line to sharpen the edge. */
  box-shadow:
    0 8px 18px -6px rgba(17, 33, 27, 0.34),
    0 22px 44px -14px rgba(12, 22, 18, 0.4),
    0 0 0 1px rgba(30, 95, 79, 0.16);
  transition:
    box-shadow 220ms cubic-bezier(0.2, 0.7, 0.3, 1),
    border-color 220ms cubic-bezier(0.2, 0.7, 0.3, 1),
    background-color 220ms ease;
  overflow: hidden;
}

body.theme-dark .search-container {
  background: linear-gradient(
    150deg,
    rgba(60, 78, 74, 0.55) 0%,
    rgba(18, 24, 22, 0.46) 55%,
    rgba(30, 40, 38, 0.5) 100%
  );
  border: 1px solid rgba(79, 166, 136, 0.28);
  box-shadow:
    0 14px 34px -10px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(79, 166, 136, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.search-container:focus-within {
  /* Stay translucent on focus — brighten the cream frost and add a soft accent
     halo instead of flipping to a solid fill (which would break the glass). */
  background:
    radial-gradient(
      135% 135% at 16% -22%,
      rgba(246, 244, 238, 0.6) 0%,
      rgba(246, 244, 238, 0.26) 34%,
      rgba(246, 244, 238, 0) 64%
    ),
    linear-gradient(
      135deg,
      rgba(246, 244, 238, 0.36) 0%,
      rgba(246, 244, 238, 0.18) 55%,
      rgba(246, 244, 238, 0.24) 100%
    );
  border-color: rgba(30, 95, 79, 0.6);
  box-shadow:
    0 0 0 3px var(--accent-bg),
    0 10px 24px -6px rgba(17, 33, 27, 0.36),
    0 26px 50px -16px rgba(12, 22, 18, 0.42);
}

body.theme-dark .search-container:focus-within {
  background: rgba(20, 25, 30, 0.62);
  border-color: rgba(79, 166, 136, 0.5);
  box-shadow:
    0 0 0 4px var(--accent-bg),
    0 16px 38px -10px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.search-engine-btn,
.voice-search-btn {
  border: none;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
  cursor: pointer;
  gap: 2px;

  /* No focus ring: tapping to pick an engine was leaving a grey UA outline
     around the icon/button. */
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.search-engine-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 0;
  outline: none;
}

.search-icon-fallback {
  border-radius: 0;
  color: var(--text-secondary);
}

.search-engine-chevron {
  width: 14px;
  height: 14px;
  opacity: 0.5;
}

.search-engine-btn:hover .search-engine-chevron {
  opacity: 0.8;
}

.voice-search-btn svg {
  width: 20px;
  height: 20px;
}

/* Right-side mic: an icon button that shows when the field is empty (it swaps
   with the clear button once the user types — see updateSearchActionButtons). */
.voice-search-btn {
  padding: 6px;
  border-radius: 50%;
  color: var(--text-muted);
  transition:
    color 160ms ease,
    background-color 160ms ease;
}

.voice-search-btn:hover {
  color: var(--accent);
  background: var(--accent-bg);
}

/* Active recording state, toggled via updateVoiceSearchState(). */
.voice-search-btn.is-listening {
  color: var(--accent);
  background: var(--accent-bg);
  animation: voice-listening-pulse 1s ease-in-out infinite;
}

@keyframes voice-listening-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.55;
  }
}

.qr-scan-btn {
  margin-left: 4px;
}

.qr-scan-btn.is-scanning {
  opacity: 1;
  color: var(--accent-primary, #0f3d2e);
  animation: qr-scan-pulse 0.8s ease-in-out infinite alternate;
}

@keyframes qr-scan-pulse {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}

.clear-search-btn {
  border: none;
  background: transparent;
  padding: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: 50%;
  transition:
    color 160ms ease,
    background-color 160ms ease;
}

.clear-search-btn:hover {
  color: var(--text-secondary);
  background: var(--bg-chip);
}

.clear-search-btn svg {
  width: 18px;
  height: 18px;
}

.search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-main);
  font-family: inherit;
  font-size: 16px;
  font-weight: 430;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-input::placeholder {
  color: var(--text-secondary);
  font-size: 14px;
  text-overflow: ellipsis;
}

/* Narrow viewports: shrink fixed elements so placeholder text fits in all languages */
@media (max-width: 400px) {
  .search-container {
    gap: 4px;
    padding: 0 10px;
  }

  .search-engine-chevron {
    display: none;
  }

  .voice-search-btn {
    flex-shrink: 1;
    padding: 4px;
  }
}

.recent-visits-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 4px 4px;
  min-height: 44px;
}

.recent-visits-bar:empty {
  display: none;
}

.recent-visit-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
  padding: 0;
}

.recent-visit-item:hover,
.recent-visit-item:active {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lift);
}

.recent-visit-favicon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  pointer-events: none;
}

.recent-visit-label {
  display: none;
}

/* Dark mode: flat icon + label, no button decoration */
body.theme-dark .recent-visit-item,
[data-theme='dark'] .recent-visit-item {
  width: auto;
  height: auto;
  min-width: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 4px 8px;
  gap: 6px;
}

body.theme-dark .recent-visit-item:hover,
body.theme-dark .recent-visit-item:active,
[data-theme='dark'] .recent-visit-item:hover,
[data-theme='dark'] .recent-visit-item:active {
  transform: none;
  box-shadow: none;
}

body.theme-dark .recent-visit-label,
[data-theme='dark'] .recent-visit-label {
  display: inline;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Dark mode: favorites flat icon + label, no button decoration */
body.theme-dark .favorite-item,
[data-theme='dark'] .favorite-item {
  gap: 8px;
}

/* Dark mode: keep the same 52px tile as light mode, but with a thick white
   outline around each icon so the tiles read clearly on the dark background. */
body.theme-dark .favorite-icon,
[data-theme='dark'] .favorite-icon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none !important;
  overflow: hidden;
  padding: 0;
  position: static;
}

body.theme-dark .favorite-icon::before,
[data-theme='dark'] .favorite-icon::before {
  display: none;
}

body.theme-dark .favorite-icon img,
[data-theme='dark'] .favorite-icon img {
  width: 32px;
  height: 32px;
}

body.theme-dark .favorite-name,
[data-theme='dark'] .favorite-name {
  font-size: 11px;
  color: var(--text-secondary);
}

.deen-ai-section {
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.deen-ai-hero {
  position: relative;
  background: linear-gradient(135deg, var(--bg-page) 0%, var(--accent-bg) 100%);
  border: 1px solid var(--border);
  padding: 16px 16px 18px;
  overflow: hidden;
}

.deen-ai-hero-bg {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M20 0 L40 20 L20 40 L0 20Z' fill='none' stroke='%233b8068' stroke-width='0.6'/%3E%3Cpath d='M20 8 L32 20 L20 32 L8 20Z' fill='none' stroke='%233b8068' stroke-width='0.4'/%3E%3Ccircle cx='20' cy='20' r='5' fill='none' stroke='%233b8068' stroke-width='0.4'/%3E%3C/svg%3E");
  background-size: 40px 40px;
  pointer-events: none;
}

.deen-ai-header {
  margin-bottom: 13px;
  position: relative;
  z-index: 1;
}

.deen-ai-title-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.deen-ai-sparkle {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), var(--accent-soft));
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 12px rgb(59 128 104 / 55%);
}

.deen-ai-sparkle svg {
  width: 14px;
  height: 14px;
}

.deen-ai-hero .deen-ai-header h2 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--text-main);
}

.deen-ai-beta {
  font-size: 9px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.6px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--accent-bg);
}

.deen-ai-launcher {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-card);
  border-radius: 11px;
  border: 1px solid var(--border);
  position: relative;
  z-index: 1;
}

.deen-ai-launcher-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-main);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

.deen-ai-launcher-input::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.deen-ai-launcher-send {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgb(59 128 104 / 50%);
}

.deen-ai-launcher-send svg {
  width: 14px;
  height: 14px;
}

.autocomplete-dropdown {
  position: fixed;
  left: 0;
  top: 0;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;

  /* Both body-level dropdowns must clear `body.search-focus-mode
     #section-search` (z-index 360). They are re-parented to <body> at init, so
     in focus mode they are root-stacking-context siblings of the fixed search
     bar — anything below 360 gets painted over by the bar. 375 also keeps this
     clear of .context-menu (370) rather than tying with it. */
  z-index: 375;
}

@media (max-width: 767px) {
  body.search-focus-mode {
    overflow: hidden;
  }

  body.search-focus-mode .app-container {
    width: 100%;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    gap: 0;
    background: transparent;
  }

  /*
   * Fade the rest of the page out instead of cutting it instantly.
   * NB: #section-search lives inside .hero-zone, so we must NOT hide
   * .hero-zone itself (that would also hide/blur the search). Hide only
   * the hero-zone's non-search siblings.
   */
  .home-header,
  #section-protection,
  #section-favorites,
  .content-sections,
  .scroll-to-top,
  .build-stamp {
    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      display 0.2s allow-discrete;
  }

  body.search-focus-mode .home-header,
  body.search-focus-mode #section-protection,
  body.search-focus-mode #section-favorites,
  body.search-focus-mode .content-sections,
  body.search-focus-mode .scroll-to-top,
  body.search-focus-mode .build-stamp {
    display: none !important;
    opacity: 0;
    transform: translateY(6px);
  }

  /*
   * .hero-zone keeps a lingering `transform: translateY(0)` from its
   * pageFadeIn load animation (animation-fill-mode: both). A non-none
   * transform makes .hero-zone the containing block for the fixed search
   * bar below, so `top: 0` resolves to the hero-zone box (not the viewport)
   * and the bar snaps as the hero siblings collapse. Drop it in focus mode
   * so the fixed bar is anchored to the viewport from the first frame.
   */
  body.search-focus-mode .hero-zone {
    animation: none;
    transform: none;
  }

  body.search-focus-mode #section-search {
    position: fixed;
    inset: 0 0 auto;
    z-index: 360;
    padding: 16px 16px var(--search-section-padding-y);
    animation: search-focus-enter 0.22s ease-out both;
  }

  body.search-focus-mode .search-typewriter {
    display: none !important;
  }

  body.search-focus-mode #section-search .search-section {
    padding: 0;
  }

  @keyframes search-focus-enter {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .home-header,
    #section-protection,
    #section-favorites,
    .content-sections,
    .scroll-to-top,
    .build-stamp {
      transition: none;
    }

    body.search-focus-mode #section-search {
      animation: none;
    }
  }
}

.search-engine-dropdown {
  position: fixed;
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  overflow: hidden;

  /* Above the focus-mode search bar (360) and above the autocomplete dropdown
     (375), which stays open behind the engine picker. */
  z-index: 380;
  padding: 6px;
  min-width: 200px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: inherit;
  text-decoration: none;
  border-radius: 10px;
  transition: background 120ms ease;
  cursor: pointer;
}

.dropdown-item:hover {
  background: var(--accent-bg);
}

.dropdown-item.active {
  background: var(--accent-bg);
}

.dropdown-item-icon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  flex-shrink: 0;
}

.dropdown-item-label {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-main);
}

.dropdown-item-check {
  width: 18px;
  height: 18px;
  color: var(--accent);
  opacity: 0;
  transition: opacity 120ms ease;
  flex-shrink: 0;
}

.dropdown-item.active .dropdown-item-check {
  opacity: 1;
}

.autocomplete-section {
  border-bottom: 1px solid var(--border);
}

.autocomplete-section:last-child {
  border-bottom: 0;
}

.autocomplete-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  color: inherit;
  text-decoration: none;
}

html[dir='rtl'] .autocomplete-item {
  text-align: right;
}

.autocomplete-item.selected {
  background: var(--autocomplete-selected-bg);
}

.autocomplete-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--bg-chip);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.autocomplete-icon img {
  width: 18px;
  height: 18px;
}

.autocomplete-text {
  font-size: 14px;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.autocomplete-text mark {
  background: transparent;
  color: var(--accent);
  font-weight: 640;
}

.autocomplete-subtitle,
.autocomplete-entity-description {
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.autocomplete-content {
  flex: 1;
  min-width: 0;
}

.autocomplete-entity-image {
  width: 60px;
  max-width: 60px;
  height: 60px;
  max-height: 60px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}

.autocomplete-entity-image img {
  width: 100%;
  max-width: 60px;
  height: 100%;
  max-height: 60px;
  object-fit: cover;
  display: block;
}

.autocomplete-entity-title {
  font-size: 14px;
  font-weight: 560;
}

.autocomplete-action {
  border: none;
  background: transparent;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.dailystar-rss-section,
.kahf-ad-section,
.youtube-feed-section,
.mahfil-horizontal-feed-section,
.mahfil-feed-section {
  padding: 8px 0;
}

.islamic-carousel-section {
  padding: 10px;
}

.islamic-carousel-wrapper {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
}

.islamic-carousel-track {
  display: flex;
  align-items: stretch;
  gap: 10px;
  overflow: auto hidden;
  padding: 0 12px 28px 0;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  direction: ltr;
}

.islamic-carousel-track.dragging {
  cursor: grabbing;
}

.islamic-widget-card {
  flex: 0 0 240px;
  border-radius: 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-soft);
  transition: box-shadow 220ms ease;
}

.islamic-widget-card:hover {
  box-shadow: 0 8px 16px rgba(24, 28, 46, 0.1);
}

.islamic-widget-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--icon-color) 20%, white);
  color: var(--icon-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.islamic-widget-icon svg {
  width: 20px;
  height: 20px;
}

.islamic-widget-text h3 {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text-main);
}

.islamic-widget-text p {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-secondary);
  opacity: 0.65;
}

/* ── Unified Islamic Carousel ── */

.ic-card {
  height: 150px;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
}

.ic-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(100%);
  transition:
    transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.45s ease;
  will-change: transform;
}

.ic-slide.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  z-index: 1;
}

/* Outgoing slide slides out to the left, so the motion reads right-to-left. */
.ic-slide.ic-exit {
  opacity: 0;
  transform: translateX(-100%);
}

/* Inactive (off-screen) slides still exist in the DOM for the slide-in
   transition, so any infinite animation they carry would otherwise keep
   running and burning CPU. Pause them until the slide becomes active. */
.ic-slide:not(.active) * {
  animation-play-state: paused;
}

/* Full stop for the behind-the-browser-screen / hidden case: when the RN app
   (or visibilitychange) pauses the carousel, freeze EVERY animation including
   the active slide's, so the WebView compositor stops producing frames. */
#icCard.ic-anim-paused * {
  animation-play-state: paused;
}

/* ── Prayer slide ── */

/* Flat card on the app's own card surface, so it themes with everything else
   instead of carrying a per-time-of-day sky gradient.

   A title, then a row of the five daily prayers (name, sun-arc marker, time),
   then the hijri date + prayer-times link. Mirrors the content slides' box:
   no bottom padding here, the footer owns the bottom gap so it lands in the
   exact same spot as the verse/hadith/dua footer as the carousel rotates. */
.ic-prayer {
  display: flex;
  flex-direction: column;
  padding: 14px 16px 0;
  background: var(--bg-card);
}

/* Card heading — matches the verse/hadith/dua slides' type label (.ic-type):
   accent colour, uppercase, same weight/size/tracking. */
.ic-prayer-title {
  font-size: 9px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.ic-prayer-row {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  margin: 6px 0;
}

/* Each prayer stacks name, marker, time (and, when active, the bar). Colour is
   set here and inherited by the marker (currentColor) and text. */
.ic-prayer-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: var(--text-secondary);
}

.ic-prayer-col.active {
  color: var(--accent);
}

.ic-prayer-name {
  font-size: 11px;
  font-weight: 500;
  color: inherit;
}

.ic-prayer-col.active .ic-prayer-name {
  font-weight: 700;
}

.ic-prayer-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  color: inherit;
}

.ic-prayer-ico svg {
  display: block;
}

/* Warm sun marker on the arc + mosque band; the mosque door is cut back to the
   card surface so it reads as an opening. */
.ic-arc-dot,
.ic-mosque-band {
  fill: var(--accent-warm);
}

.ic-mosque-door {
  fill: var(--bg-card);
}

.ic-prayer-t {
  font-size: 11px;
  font-weight: 400;
  color: inherit;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ic-prayer-col.active .ic-prayer-t {
  font-weight: 600;
}

.ic-prayer-bar {
  width: 16px;
  height: 2px;
  border-radius: 100px;
  background: var(--accent);
  margin-top: 1px;
}

.ic-prayer-skeleton {
  opacity: 0.3;
}

/* Same box as the content slides' footer (.ic-footer) so the hijri date and
   read-more link line up with the verse number and read-more across slides:
   pushed to the bottom, its own 4px 16px padding on top of the slide's 16px. */
.ic-prayer-foot {
  margin-top: auto;
  padding: 4px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Match the content cards' reference (ic-ref): accent, uppercase, dimmed. */
.ic-prayer-hijri {
  font-size: 9px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  opacity: 0.55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Match the content cards' read-more (ic-readmore): accent, dimmed. */
.ic-prayer-link {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  opacity: 0.75;
  white-space: nowrap;
}

.ic-prayer-link:hover {
  opacity: 1;
}

/* ── Content slides (verse / hadith / dua) ── */

.ic-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 14px 16px 0;
  gap: 5px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ic-content::-webkit-scrollbar {
  display: none;
}

.ic-type {
  font-size: 9px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  flex-shrink: 0;
}

.ic-arabic {
  font-family: 'SF Arabic', 'Geeza Pro', 'Amiri', 'Arabic Typesetting', serif;
  font-size: 15px;
  color: var(--text-main);
  direction: rtl;
  text-align: right;
  line-height: 1.5;
  flex-shrink: 0;
}

.ic-translation {
  font-size: 11px;
  color: var(--text-secondary);
  font-style: normal;
  line-height: 1.4;
  flex-shrink: 0;
}

.ic-footer {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding: 4px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-radius: 0 0 18px 18px;
}

.ic-ref {
  font-size: 9px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  opacity: 0.55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}

.ic-readmore {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  flex-shrink: 0;
  opacity: 0.75;
}

.ic-readmore:hover {
  opacity: 1;
}

/* ── Last-tab slide ("Continue with this tab") ──
   The carousel's optional first slide, inserted at runtime by the last-tab
   widget. Shares the content slides' panel so it reads as one of the set; the
   row itself is styled by the .last-tab-* rules above. */

.ic-last-tab {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
}

.ic-last-tab .ic-type {
  padding-right: 32px;
}

/* ── Progress bar ── */

@keyframes icProgress {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

.ic-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--accent);
  opacity: 0.35;
  border-radius: 0 0 0 18px;
  animation: icProgress var(--ic-dur, 5s) linear;
}

/* ── Dots ── */

.ic-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
}

.ic-dot {
  width: 5px;
  height: 5px;
  border-radius: 3px;
  background: var(--border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition:
    width 0.25s ease,
    background 0.25s ease;
}

.ic-dot.active {
  width: 14px;
  background: var(--accent);
}

.dailystar-rss-carousel-wrapper {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
}

.dailystar-rss-carousel {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0 var(--page-left-inset) 20px var(--page-left-inset);
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  direction: ltr;
}

.dailystar-rss-carousel::-webkit-scrollbar {
  display: none;
}

.dailystar-rss-carousel.dragging {
  cursor: grabbing;
}

.dailystar-rss-card {
  flex: 0 0 280px;
  color: inherit;
  text-decoration: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.dailystar-rss-card-content {
  border-radius: 18px;
  background: var(--bg-card);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  transition:
    transform 220ms ease,
    box-shadow 220ms ease;
}

.dailystar-rss-card:hover .dailystar-rss-card-content {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(24, 28, 46, 0.11);
}

.dailystar-rss-card-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.dailystar-rss-card-media-placeholder {
  display: block;
  background: linear-gradient(135deg, var(--bg-chip), var(--bg-panel));
}

.dailystar-rss-card-text {
  padding: var(--widget-card-body-padding);
}

.dailystar-rss-card-title {
  font-size: 15px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--text-main);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dailystar-rss-card-description,
.dailystar-rss-card-time {
  display: none;
}

.carousel-scroll-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--text-main);
  box-shadow: 0 10px 24px rgba(24, 28, 46, 0.18);
  transform: translateY(-50%);
  cursor: pointer;
}

/* Left (previous) arrow — mirror of the default right arrow, so once the strip
   is scrolled the reader can get back. */
.carousel-scroll-btn--prev {
  right: auto;
  left: 8px;
}

.carousel-scroll-btn:hover {
  background: #fff;
}

.carousel-scroll-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.carousel-scroll-btn svg {
  width: 18px;
  height: 18px;
}

.dailystar-rss-loader,
.mahfil-feed-loader {
  display: flex;
  justify-content: center;
  padding: 16px;
}

.mahfil-feed-loader.is-idle {
  padding: 0;
  min-height: 32px;
  opacity: 0;
}

.spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid rgba(15, 61, 46, 0.18);
  border-top-color: var(--accent);
  animation: spin 0.85s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.kahf-ad-carousel-wrapper {
  position: relative;
  width: 100%;
}

/* The offers ad box. 230px tall — the same height as a "For You" ad slot, so
   the two placements read alike; the width is inset by the card's 13px content
   padding, matching the other widgets. Doubles as a horizontally scrollable strip
   when the structured-native tiles render instead of a single banner. The
   whole Offers card stays hidden until a creative renders, so this box is
   never seen empty. */
.kahf-ad-container {
  display: flex;
  gap: 10px;
  width: 100%;
  height: 230px;
  overflow: auto hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  direction: ltr;
}

.kahf-ad-container::-webkit-scrollbar {
  display: none;
}

/* Legacy KahfAds slot, mounted only when the native endpoint returns no fill.
   It is then the strip's only child, so it takes the whole row. */
.kahf-ad-legacy-frame {
  flex: 1 0 100%;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--radius-sm);
}

/* Primary v3 banner creative, hosted as a srcdoc iframe. In the Offers strip
   it is the only child and fills the 200px row; in a feed slot it starts at
   the reserved 230px and the frame script reports the width-scaled creative
   height, which lands as an inline height. Transparent: the frame script
   clears the creative's own body background, so whatever the creative doesn't
   cover shows the host card instead of dead white. */
.house-frame {
  flex: 1 0 100%;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
}

.content-feed-spot .house-frame {
  height: 230px;
  border-radius: 20px;
}

/* ---------------------------------------------------------------------------
   Native ads — one creative, two placements: the Offers strip (`--offer`) and
   the in-feed "For You" slot (`--feed`). Built in JS by shared/native-ads.js.
   Dimensions follow docs/ads-sizing.md.
   ------------------------------------------------------------------------ */

.house-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease;
}

.house-card:active {
  transform: scale(0.98);
}

.house-card-media {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;

  /* Shows through until the creative decodes (and stays if it fails to load),
     so the slot never flashes as a blank rectangle. */
  background: linear-gradient(135deg, #0f3d2e 0%, #1b5e20 45%, #2e7d32 100%);
}

.house-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Paid-placement disclosure — required by ad policy, so it sits on the media
   box where it cannot be scrolled out of view. */
.house-card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(20, 24, 28, 0.62);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.house-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px 12px;
}

.house-card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-main);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.house-card-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.house-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  /* Pin the CTA to the bottom so cards of different copy lengths line up. */
  margin-top: auto;
  padding-top: 6px;
}

.house-card-advertiser {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.house-card-cta {
  flex: 0 0 auto;
  padding: 4px 10px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
}

/* Offer variant — a fixed-width tile in the horizontal strip. 260px shows the
   next tile peeking in on a 320px phone, which is what makes the row read as
   scrollable. */
.house-card--offer {
  flex: 0 0 260px;
  height: 100%;
  scroll-snap-align: start;
}

/* The media box takes every pixel the text doesn't need — a fixed height here
   left the body stretching instead, which read as a white band between the
   title and the CTA row. The floor keeps very long titles from squeezing the
   image into a sliver. */
.house-card--offer .house-card-media {
  flex: 1 1 auto;
  min-height: 104px;
}

.house-card--offer .house-card-body {
  flex: 0 0 auto;
}

.house-card--offer .house-card-title {
  font-size: 13px;
}

/* 200px of card height only fits the title and the CTA row. */
.house-card--offer .house-card-desc {
  display: none;
}

/* Feed variant — full-width card matching the surrounding feed cards. */
.house-card--feed {
  width: 100%;
  border-radius: 20px;
}

.house-card--feed .house-card-media {
  height: 160px;
}

/* Media-only house fallbacks (banner-medium / banner-large / native-video) —
   no text body, the creative covers the whole card. In a feed slot that is
   the reserved 230px; in the Offers strip, the full tile height. */
.house-card--media .house-card-media {
  flex: 1 1 auto;
  height: auto;
}

/* House creatives come in wild aspect ratios (3.2:1 banners, 5:4 squares) —
   a cover-fit cropped more than half of a wide banner out of the 230px box.
   Contain the creative fully instead, and fill whatever it doesn't reach with
   a blurred cover copy of itself (mounted under it by createFallbackCard), so
   the card still reads full-bleed with nothing cut off and no white bands. */
.house-card-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(18px) saturate(1.15) brightness(0.92);
  transform: scale(1.15);
}

.house-card--media .house-card-img {
  position: relative;
  object-fit: contain;
}

.house-card--feed.house-card--media {
  height: 230px;
}

.house-card--offer.house-card--media .house-card-media {
  height: 100%;
}

.house-card-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mahfil-feed-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mahfil-horizontal-feed-carousel-wrapper {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
}

/* Video (mahfil) carousel lives in its own full-width card — like the Offers
   and Islamic-book sections — so the horizontal scroll stays contained inside
   the card instead of bleeding to the viewport edge. */
#section-videos-horizontal.surface-card {
  overflow: hidden;
  padding: 14px 0 6px;
}

/* When the video widget reports itself empty / not applicable, it sets the
   `hidden` attribute — collapse the card entirely so no empty shell shows. */
#section-videos-horizontal[hidden] {
  display: none !important;
}

#section-videos-horizontal .mahfil-horizontal-feed-section {
  padding: 0;
}

#section-videos-horizontal .section-header {
  padding: 0 16px;
}

/* Cancel the base 100vw full-bleed so the track scrolls within the card. */
#section-videos-horizontal .mahfil-horizontal-feed-carousel-wrapper {
  position: static;
  left: auto;
  transform: none;
  width: 100%;
}

#section-videos-horizontal .mahfil-horizontal-feed-container {
  padding: 0 16px 12px;
}

.wafilife-books-section {
  padding: 6px;
}

.wafilife-books-carousel-wrapper {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
}

.youtube-feed-carousel-wrapper {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
}

.youtube-feed-container {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0 var(--page-left-inset) 20px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  direction: ltr;
}

.youtube-feed-loader.mahfil-feed-loader.is-idle {
  display: none;
  min-height: 0;
}

#mahfilFeedLoader.mahfil-feed-loader.is-idle,
#mahfilHorizontalFeedLoader.mahfil-feed-loader.is-idle,
.wafilife-books-loader.mahfil-feed-loader.is-idle {
  display: none;
  min-height: 0;
}

.youtube-feed-container.dragging {
  cursor: grabbing;
}

.youtube-video-card {
  flex: 0 0 280px;
  height: auto;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  -webkit-user-drag: none;
  user-drag: none;
}

.youtube-video-content {
  height: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-soft);
  transition:
    transform 220ms ease,
    box-shadow 220ms ease;
}

.youtube-video-card:hover .youtube-video-content {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(24, 28, 46, 0.11);
}

.youtube-video-thumb-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
}

.youtube-video-thumb {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
}

.youtube-video-thumb-placeholder {
  display: block;
  background: linear-gradient(135deg, var(--bg-chip), var(--bg-panel));
}

.youtube-video-play-btn {
  display: none !important;
}

.youtube-video-duration {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 10px;
}

.youtube-video-text {
  flex: 1;
  padding: var(--widget-card-body-padding);
}

.youtube-video-title {
  font-size: 14px;
  line-height: 1.16;
  font-weight: 570;
  color: var(--text-main);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.youtube-video-date {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-secondary);
}

.mahfil-horizontal-feed-container {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0 var(--page-left-inset) 20px var(--page-left-inset);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  direction: ltr;
}

.mahfil-horizontal-feed-container.dragging {
  cursor: grabbing;
}

.mahfil-horizontal-video-card {
  flex: 0 0 280px;
  height: auto;
  text-decoration: none;
  color: inherit;
  -webkit-user-drag: none;
  user-drag: none;
}

.mahfil-horizontal-video-content {
  height: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-soft);
  transition:
    transform 220ms ease,
    box-shadow 220ms ease;
}

.mahfil-horizontal-video-card:hover .mahfil-horizontal-video-content {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(24, 28, 46, 0.11);
}

.wafilife-books-container {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0 var(--page-left-inset) 20px var(--page-left-inset);
  direction: ltr;
}

/* min-width:0 — flex items default to min-width:auto (min-content), so a long
   title or the nowrap author name stretched the FIRST card past its 180px basis
   and pushed the rest of the books off-screen until you scrolled. Pin it so
   every card is exactly 180px and the title/author clamp instead. */
.wafilife-book-card {
  flex: 0 0 180px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.wafilife-book-card-inner {
  height: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition:
    transform 220ms ease,
    box-shadow 220ms ease;
}

.wafilife-book-card:hover .wafilife-book-card-inner {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(24, 28, 46, 0.11);
}

.wafilife-book-cover-wrap {
  position: relative;
  height: 189px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-panel) 100%);
}

.wafilife-book-cover {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}

.wafilife-book-cover-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(135deg, rgba(182, 139, 76, 0.18), rgba(126, 85, 33, 0.1)),
    linear-gradient(180deg, var(--bg-panel), var(--bg-card));
}

.wafilife-book-cover-fallback-initial {
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-secondary);
  user-select: none;
}

.wafilife-book-discount {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--accent-warm);
  color: #fff8f1;
  font-size: 10px;
  font-weight: 600;
}

.wafilife-book-content {
  padding: 8px 10px 10px;
}

.wafilife-book-title {
  min-height: 2em;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 650;
  color: var(--text-main);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wafilife-book-author {
  min-height: 1rem;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wafilife-book-author-empty {
  visibility: hidden;
}

.wafilife-book-price-row {
  display: flex;
  gap: 4px;
  align-items: baseline;
  flex-wrap: wrap;
  margin-top: 4px;
}

.wafilife-book-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-warm);
}

.wafilife-book-original-price {
  font-size: 12px;
  color: var(--text-secondary);
}

.mahfil-horizontal-video-thumb-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.mahfil-horizontal-video-thumb {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
}

.mahfil-horizontal-video-thumb-placeholder {
  display: block;
  background: linear-gradient(135deg, var(--bg-chip), var(--bg-panel));
}

.mahfil-horizontal-video-duration {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 10px;
}

.mahfil-horizontal-video-text {
  flex: 1;
  padding: var(--widget-card-body-padding);
  overflow: hidden;
  min-height: 0;
}

.mahfil-horizontal-video-title {
  font-size: 14px;
  line-height: 1.16;
  font-weight: 570;
  color: var(--text-main);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mahfil-horizontal-video-meta {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.mahfil-video-item {
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  transition:
    transform 220ms ease,
    box-shadow 220ms ease;
}

.mahfil-video-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(24, 28, 46, 0.1);
}

.mahfil-video-thumbnail-wrapper {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #111;
}

.mahfil-video-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mahfil-video-thumbnail-placeholder {
  display: block;
  background: linear-gradient(135deg, #2a2f3a, #1c2238);
}

.mahfil-video-duration {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 10px;
}

.mahfil-video-play-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #1c2238;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mahfil-video-info {
  padding: var(--widget-card-body-padding);
}

.mahfil-video-title {
  font-size: 11px;
  line-height: 1.25;
  font-weight: 560;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mahfil-video-meta {
  margin-top: 4px;
  display: flex;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 9px;
}

.mahfil-feed-error,
.dailystar-rss-error {
  border-radius: 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  padding: 14px;
  color: var(--text-secondary);
  text-align: center;
}

.hero-zone,
.search-section,
.surface-card,
.mahfil-feed-section {
  animation: pageFadeIn 480ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.search-section {
  animation-delay: 40ms;
}

.content-sections .surface-card:nth-child(1) {
  animation-delay: 110ms;
}

.content-sections .surface-card:nth-child(2) {
  animation-delay: 150ms;
}

@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scroll-to-top {
  position: fixed;
  right: 22px;
  bottom: calc(18px + var(--safe-area-inset-bottom));
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
  z-index: 50;
}

html[dir='rtl'] .scroll-to-top {
  right: auto;
  left: 22px;
}

.scroll-to-top.visible {
  display: inline-flex;
}

.scroll-to-top svg {
  width: 22px;
  height: 22px;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 350;
  display: flex;
  align-items: flex-end;
}

.customize-modal {
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.customize-modal .modal-backdrop {
  opacity: 0;
  transition: opacity 220ms ease;
}

.customize-modal .customize-content {
  transform: translateY(18px) scale(0.985);
  opacity: 0;
  transition:
    transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 220ms ease;
}

.customize-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.customize-modal.is-open .modal-backdrop {
  opacity: 1;
}

.customize-modal.is-open .customize-content {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 17, 26, 0.5);
}

.modal-content {
  position: relative;
  width: min(720px, 100%);
  margin: 0 auto;
  background: #fff;
  border-radius: 22px 22px 0 0;
  padding: 20px;
}

.modal-content h3 {
  font-size: 20px;
  margin-bottom: 14px;
}

html[dir='rtl'] .modal-content,
html[dir='rtl'] .customize-content,
html[dir='rtl'] .favorites-empty,
html[dir='rtl'] .dailystar-rss-error,
html[dir='rtl'] .mahfil-feed-error {
  text-align: right;
}

.form-group {
  margin-bottom: 12px;
}

.form-group label {
  font-size: 13px;
  color: var(--text-secondary);
}

.form-group input {
  width: 100%;
  margin-top: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  font-family: inherit;
}

html[dir='rtl'] .form-group input,
html[dir='rtl'] .search-input,
html[dir='rtl'] .deen-ai-launcher-input {
  text-align: right;
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

html[dir='rtl'] .form-actions {
  flex-direction: row-reverse;
}

.btn-cancel,
.btn-primary {
  flex: 1;
  border: none;
  border-radius: 12px;
  padding: 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 620;
}

.btn-cancel {
  background: #eff1f6;
  color: var(--text-main);
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.context-menu {
  position: fixed;
  min-width: 148px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  z-index: 370;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.context-menu-item {
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  color: var(--text-main);
}

html[dir='rtl'] .context-menu-item {
  text-align: right;
}

html[dir='rtl'] .dailystar-rss-card-text,
html[dir='rtl'] .youtube-video-text,
html[dir='rtl'] .mahfil-horizontal-video-text,
html[dir='rtl'] .mahfil-video-info,
html[dir='rtl'] .islamic-widget-text,
html[dir='rtl'] .section-header,
html[dir='rtl'] .customize-row,
html[dir='rtl'] .customize-text {
  text-align: right;
}

html[dir='rtl'] .deen-ai-launcher-send svg {
  transform: scaleX(-1);
}

.context-menu-item.delete {
  color: #d7263d;
}

@media (max-width: 840px) {
  .favorites-tab {
    font-size: clamp(12px, 3.2vw, 13px);
  }

  .section-header h2 {
    font-size: clamp(14px, 4.3vw, 16px);
  }

  .mahfil-feed-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  :root {
    --page-left-inset: 9px;
  }
}

.homepage-section-hidden {
  display: none !important;
}

.islamic-widget-section {
  padding: 10px;
}

.islamic-widget-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.islamic-widget-standalone {
  border-radius: 14px;
  background: var(--bg-card);
  text-decoration: none;
  color: inherit;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: box-shadow 220ms ease;
}

.islamic-widget-standalone:hover {
  box-shadow: 0 8px 16px rgba(24, 28, 46, 0.1);
}

.customize-content {
  max-height: 82vh;
  overflow-y: auto;
  background: var(--bg-card);
  color: var(--text-main);
}

.customize-group {
  background: rgba(255, 255, 255, 0.42);
  border-radius: 14px;
  padding: 10px;
  margin-bottom: 12px;
}

.customize-group h4 {
  font-size: 12px;
  font-weight: 620;
  margin-bottom: 8px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.customize-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
}

.customize-row + .customize-row {
  border-top: 1px solid rgba(136, 144, 168, 0.15);
}

.customize-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.customize-label {
  font-size: 13px;
  font-weight: 560;
  color: var(--text-main);
}

.customize-subtext {
  font-size: 11px;
  color: var(--text-secondary);
}

.customize-select {
  flex-shrink: 0;
  max-width: 46%;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 560;
  color: var(--text-main);
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-color, rgba(15, 20, 18, 0.12));
  border-radius: 10px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.customize-select:focus-visible {
  outline: 2px solid var(--accent, #2d9a6f);
  outline-offset: 1px;
}

.switch {
  position: relative;
  width: 44px;
  height: 24px;
  display: inline-block;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #c7cede;
  transition: background 180ms ease;
}

.switch-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  transition: transform 180ms ease;
}

.switch input:checked + .switch-slider {
  background: var(--accent);
}

.switch input:checked + .switch-slider::before {
  transform: translateX(20px);
}

body.theme-dark .surface-card,
body.theme-dark .dailystar-rss-card-content,
body.theme-dark .youtube-video-content,
body.theme-dark .modal-content,
body.theme-dark .context-menu,
body.theme-dark .customize-group {
  background: var(--bg-card);
  color: var(--text-main);
  border-color: var(--border);
}

body.theme-dark .surface-card {
  box-shadow: none;
}

body.theme-dark .section-header .section-link {
  color: var(--text-secondary);
}

body.theme-dark .carousel-scroll-btn {
  background: rgba(245, 242, 234, 0.1);
  border: 1px solid var(--border);
  color: var(--text-main);
  box-shadow: none;
}

body.theme-dark .carousel-scroll-btn:hover {
  background: rgba(245, 242, 234, 0.16);
}

/* Islamic horizontal tall cards override */
.islamic-widget-section {
  --islamic-carousel-max-height: 190px;

  padding: 4px 0;
}

.islamic-carousel-wrapper {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-height: calc(var(--islamic-carousel-max-height) + 30px);
}

.islamic-carousel-track {
  display: flex;
  align-items: stretch;
  gap: 10px;
  overflow: auto hidden;
  padding: 2px max(var(--page-left-inset), calc(50vw - 201px)) 28px;
  max-height: calc(var(--islamic-carousel-max-height) + 10px);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

.islamic-carousel-track.dragging {
  cursor: grabbing;
}

.islamic-widget-tall {
  flex: 0 0 auto;
  width: 210px;
  height: 190px;
  margin-bottom: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 4px 20px rgba(20, 40, 30, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  text-decoration: none;
  color: var(--text-main);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  transition: box-shadow 220ms ease;
}

.islamic-widget-tall:hover {
  box-shadow:
    0 8px 24px rgba(20, 40, 30, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.islamic-widget-featured {
  position: relative;
  overflow: hidden;
}

.islamic-widget-featured::before {
  content: none;
}

.islamic-widget-featured::after {
  content: none;
}

.islamic-widget-featured > * {
  position: relative;
  z-index: 1;
}

.islamic-widget-featured .islamic-widget-icon {
  background: rgba(255, 255, 255, 0.4);
  color: var(--text-main);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.islamic-widget-featured .islamic-widget-text h3,
.islamic-widget-featured .islamic-widget-text p {
  color: var(--text-main);
  text-shadow: none;
}

.islamic-widget-featured .islamic-widget-text p {
  color: var(--text-secondary);
}

.islamic-widget-quran {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.18)),
    rgba(176, 140, 60, 0.18);
}

.islamic-widget-hadith {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.18)),
    rgba(63, 122, 240, 0.16);
}

.islamic-widget-tall .islamic-widget-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.islamic-widget-tall .islamic-widget-text h3 {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.025em;
}

.islamic-widget-tall .islamic-widget-text p {
  font-family: inherit;
  font-size: 13px;
  line-height: 1.35;
  margin-top: 4px;
  opacity: 0.6;
}

.switch input:disabled + .switch-slider {
  background: #b9bfd0;
  opacity: 0.7;
}

.switch input:disabled + .switch-slider::before {
  box-shadow: none;
}

@media (max-width: 840px) {
  .islamic-widget-tall {
    width: 210px;
    height: 190px;
  }
}

/* Prayer widget — tinted-glass */
.islamic-widget-prayer {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.15)),
    rgba(46, 139, 127, 0.22);
  color: var(--text-main);
  border-color: rgba(255, 255, 255, 0.55);
  overflow: hidden;
  position: relative;
}

.islamic-widget-prayer::before {
  content: none;
}

.islamic-widget-prayer::after {
  content: none;
}

.islamic-widget-prayer[data-prayer='Maghrib'] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.15)),
    rgba(184, 92, 74, 0.2);
}

.islamic-widget-prayer[data-prayer='Isha'],
.islamic-widget-prayer[data-prayer='Dawn'] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.15)),
    rgba(107, 74, 138, 0.18);
}

.islamic-widget-prayer .prayer-gold-label {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.islamic-widget-prayer .prayer-gold-bar {
  display: none;
}

.islamic-widget-prayer .prayer-name-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #0d3b33;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.islamic-widget-prayer .prayer-name-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c8a84b;
  box-shadow: 0 0 0 3px rgba(200, 168, 75, 0.25);
}

.islamic-widget-prayer .prayer-contextual-icon {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 22px;
  height: 22px;
  opacity: 0.35;
  color: #0d3b33;
  z-index: 1;
  pointer-events: none;
}

.islamic-widget-prayer .islamic-widget-text {
  position: relative;
  z-index: 1;
  width: 100%;
}

.islamic-widget-prayer .islamic-widget-text h3 {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #0d3b33;
}

.islamic-widget-prayer .islamic-widget-text p {
  font-size: 12px;
  margin-top: 4px;
  color: rgba(13, 59, 51, 0.7);
}

.widget-prayer-waqt {
  margin-top: 10px;
  width: 100%;
}

.widget-prayer-waqt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.widget-prayer-waqt-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(13, 59, 51, 0.55);
}

.widget-prayer-waqt-time {
  font-size: 11px;
  font-weight: 700;
  color: #0d3b33;
  font-variant-numeric: tabular-nums;
}

.widget-prayer-waqt-track {
  height: 3px;
  background: rgba(13, 59, 51, 0.12);
  border-radius: 2px;
  overflow: hidden;
}

.widget-prayer-waqt-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #c8a84b, #e8c86a);
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(200, 168, 75, 0.5);
  transition: width 1000ms linear;
}

.islamic-widget-prayer.waqt-active .widget-prayer-waqt-fill {
  animation: widgetGoldShimmer 2s ease-in-out infinite;
}

@keyframes widgetGoldShimmer {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.65;
  }
}

/* Match customize sheet width to app container */
.customize-modal .customize-content {
  width: min(430px, 100% - 18px);
  margin: 0 auto;
}

@media (max-width: 840px) {
  .customize-modal .customize-content {
    width: min(410px, 100% - 14px);
  }
}

@media (max-width: 480px) {
  .customize-modal .customize-content {
    width: calc(100% - 12px);
  }
}

.islamic-widget-dua {
  position: relative;
  overflow: hidden;
  padding: 0;
  width: 210px;
  justify-content: stretch;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.18)),
    rgba(123, 93, 246, 0.16);
  color: var(--text-main);
  border: 1px solid rgba(255, 255, 255, 0.55);
}

.islamic-widget-dua::after {
  content: '';
  position: absolute;
  top: -6px;
  right: -6px;
  width: 70px;
  height: 70px;
  pointer-events: none;
  opacity: 0.3;
  background: radial-gradient(circle, rgba(123, 93, 246, 0.35), transparent 65%);
}

.islamic-widget-dua .islamic-widget-dua-preview {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  width: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr;
  overflow: hidden;
}

.islamic-widget-dua #duaPreviewArabic {
  margin: 0;
  padding: 10px 12px 6px;
  align-self: end;
  color: #2a1f5a;
  font-family: 'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', serif;
  font-size: 13pt;
  line-height: 1.5;
  font-weight: 400;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.islamic-widget-dua-translation {
  margin: 0;
  padding: 6px 12px 10px;
  align-self: start;
  color: rgba(42, 31, 90, 0.72);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 400;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.islamic-widget-dua .islamic-widget-dua-label {
  display: none;
}

.dua-read-more {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: 10px;
  color: rgba(42, 31, 90, 0.55);
  letter-spacing: 0.03em;
  z-index: 2;
}

.islamic-widget-quran {
  padding: 0;
  flex-direction: column;
  justify-content: stretch;
  gap: 0;
}

.quran-verse-arabic {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 12px 6px;
  font-family: 'Amiri', 'Scheherazade New', 'Traditional Arabic', 'Noto Naskh Arabic', serif;
  font-size: 28px;
  line-height: 1.65;
  color: #5a4310;
  direction: rtl;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

.quran-verse-footer {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 12px 10px;
  box-sizing: border-box;
  justify-content: flex-end;
}

.quran-verse-divider {
  width: 100%;
  height: 1px;
  background: rgba(90, 67, 16, 0.18);
  margin-bottom: 5px;
}

.quran-verse-translation {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(90, 67, 16, 0.72);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.quran-verse-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quran-verse-ref {
  font-size: 10px;
  color: rgba(90, 67, 16, 0.55);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}

.quran-read-more {
  font-size: 10px;
  color: rgba(90, 67, 16, 0.65);
  letter-spacing: 0.03em;
}

.islamic-widget-tall {
  cursor: pointer;
}

.islamic-widget-tall:hover {
  cursor: pointer;
}

body {
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

body.page-transition-out {
  opacity: 0;
  transform: translateY(8px);
}

/* ==============================================
   Content Feed Widget
   ============================================== */

.content-feed-section {
  display: contents;
}

/* The feed widget sets `hidden` on itself and on its section shell whenever it
   has no cards to show. `display: contents` above is an author rule, so it wins
   over the UA `[hidden]` rule — both need an explicit override or the "For You"
   heading renders above an empty/failed feed. */
.content-feed-section[hidden] {
  display: none !important;
}

#section-content-feed[hidden] {
  display: none !important;
}

.content-feed-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: -0.2px;
  margin-bottom: 10px;
  padding: 0 2px;
}

.content-feed-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* In-feed ad slot — one after every 5 cards. The height is reserved before the
   creative arrives so dropping it in shifts nothing below it (and the feed's
   "seen" / infinite-scroll observers stay stable). A slot that comes back with
   no fill sets `hidden`, which also collapses the flex gap around it.
   230px matches a typical article card (140px hero + ~94px body), so the ads
   keep the exact rhythm — width AND height — of the cards around them. The
   width needs no cap of its own: .app-container already limits the whole
   column to 430px, so the slot spans precisely the article width. */
.content-feed-spot {
  min-height: 230px;
}

/* Until the creative mounts, shimmer like the boot-time widget skeletons — a
   fast scroll can reach a slot milliseconds before its (pooled) creative
   lands, and a bare glass box there reads as broken empty space. */
.content-feed-spot[data-spot-state='pending'],
.content-feed-spot[data-spot-state='loading'] {
  border-radius: 20px;
  background: linear-gradient(90deg, var(--bg-panel) 25%, var(--border) 37%, var(--bg-panel) 63%);
  background-size: 400% 100%;
  animation: widget-skeleton-shimmer 1.4s ease infinite;
}

.content-feed-spot[hidden] {
  display: none;
}

.content-feed-card {
  background: var(--bg-card, #fff);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;

  /* Skip rendering/painting off-screen feed cards — the feed can hold
     hundreds of cards, so this keeps scroll on the compositor thread.
     The intrinsic size matches a typical card (140px hero + ~120px body)
     so the scrollbar and anchoring stay stable while cards are skipped. */
  content-visibility: auto;
  contain-intrinsic-size: auto 260px;
}

.content-feed-card:active {
  transform: scale(0.98);
}

.content-feed-card-hero {
  position: relative;
  height: 140px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 14px;
  overflow: hidden;
}

.content-feed-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.content-feed-card-initial {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;

  /* Solid translucent fill instead of a blurred backdrop — the blurred variant
     forced a per-card offscreen-buffer repaint on every scroll frame, which
     was a primary cause of feed scroll jank (one badge per card). */
  background: rgba(20, 24, 28, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  z-index: 1;
}

.content-feed-card-content {
  padding: 14px 16px 16px;
}

.content-feed-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.35;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.content-feed-card-meta {
  display: flex;
  align-items: center;
  gap: 4px;
}

.content-feed-card-source {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.content-feed-card-time {
  font-size: 12px;
  color: var(--text-muted);
}

.content-feed-card-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  line-height: 1.4;
  vertical-align: middle;
  margin-left: 4px;
}

.content-feed-card-tag-location {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
}

.content-feed-card-tag-category {
  background: rgba(168, 85, 247, 0.12);
  color: #a855f7;
}

body.theme-dark .content-feed-card-tag-location {
  background: rgba(96, 165, 250, 0.15);
  color: #60a5fa;
}

body.theme-dark .content-feed-card-tag-category {
  background: rgba(192, 132, 252, 0.15);
  color: #c084fc;
}

.content-feed-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 0;
  color: var(--text-muted);
  font-size: 13px;
}

.content-feed-error {
  cursor: pointer;
}

.content-feed-status-text {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.content-feed-loader {
  width: 24px;
  height: 24px;
  border: 2.5px solid var(--border);
  border-top-color: var(--text-main);
  border-radius: 50%;
  animation: content-feed-spin 0.7s linear infinite;
  margin-bottom: 10px;
}

@keyframes content-feed-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Sentinel (infinite scroll trigger) */
.content-feed-sentinel {
  height: 1px;
}

body.theme-dark .content-feed-card {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

body.theme-dark body.theme-dark .content-feed-card-content {
  background: var(--bg-card);
}