/* =============================================================
   QuranSphere Growth Engine — frontend styles
   Scoped to the plugin's own components. Inherits the theme's
   CSS variables when present, with safe fallbacks so it also
   looks right on any other theme.
   ============================================================= */

:root {
  --qsg-emerald: var(--emerald-500, #10b981);
  --qsg-gold: var(--gold-500, #d4af37);
  --qsg-gold-300: var(--gold-300, #f3dd9a);
  --qsg-ink: var(--ink, #e8f3ee);
  --qsg-dim: var(--ink-soft, #a9c6ba);
  --qsg-glass-bg: rgba(255, 255, 255, 0.045);
  --qsg-glass-brd: rgba(212, 175, 55, 0.28);
}

/* ---------- Breadcrumbs ---------- */
.qs-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0 0 1rem; padding: 0; font-size: .85rem; }
.qs-breadcrumbs li { color: var(--qsg-dim); }
.qs-breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: .4rem; opacity: .5; }
.qs-breadcrumbs a { color: var(--qsg-gold-300); text-decoration: none; }
.qs-breadcrumbs a:hover { text-decoration: underline; }

/* ---------- App CTA (auto-inserted) ---------- */
.qs-app-cta {
  display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; justify-content: space-between;
  padding: 1.6rem 1.8rem; margin: 2rem 0; border-radius: 18px;
  background: var(--qsg-glass-bg); border: 1px solid var(--qsg-glass-brd);
  backdrop-filter: blur(14px);
}
.qs-app-cta h3 { margin: 0 0 .3rem; color: #fff; font-size: 1.2rem; }
.qs-app-cta p { margin: 0; color: var(--qsg-dim); font-size: .95rem; }
.qs-store-row { display: flex; gap: .7rem; flex-wrap: wrap; }
.qs-store {
  display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-radius: 12px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); text-decoration: none;
  transition: transform .25s ease, border-color .25s;
}
.qs-store:hover { transform: translateY(-2px); border-color: var(--qsg-glass-brd); }
.qs-store svg { width: 24px; height: 24px; flex: none; }
.qs-store small { display: block; font-size: .64rem; color: var(--qsg-dim); }
.qs-store b { color: #fff; font-size: .9rem; }

/* ---------- Newsletter (plugin form) ---------- */
.qs-newsletter { padding: 1.8rem; margin: 2rem 0; border-radius: 18px; background: var(--qsg-glass-bg); border: 1px solid rgba(255,255,255,.10); }
.qs-newsletter h3 { margin: 0 0 .3rem; color: #fff; }
.qs-newsletter p { margin: 0 0 1rem; color: var(--qsg-dim); font-size: .92rem; }
.qs-newsletter .newsletter { display: flex; gap: .6rem; flex-wrap: wrap; max-width: 460px; }
.qs-newsletter input[type=email] {
  flex: 1; min-width: 200px; padding: .85rem 1.1rem; border-radius: 999px; font: inherit; color: var(--qsg-ink);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
}
.qs-newsletter input[type=email]:focus { outline: none; border-color: var(--qsg-gold); }
.qs-newsletter .nl-note { width: 100%; font-size: .8rem; color: var(--qsg-dim); margin-top: .3rem; }
.qs-newsletter .nl-ok { color: var(--emerald-300, #6ee7b7); font-weight: 600; }

/* Shared button fallbacks (when not on the QuranSphere theme) */
.qs-newsletter .btn, .qs-ayah-card .btn {
  display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.4rem; border-radius: 999px;
  font-weight: 600; cursor: pointer; border: 1px solid transparent; text-decoration: none;
}
.qs-newsletter .btn-gold, .qs-ayah-card .btn-gold { background: linear-gradient(135deg, var(--qsg-gold-300), #b8860b); color: #2a1f00; }
.qs-ayah-card .btn-ghost { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: var(--qsg-ink); }

/* ---------- Share buttons ---------- */
.qs-share { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 1.6rem 0; }
.qs-share__label { color: var(--qsg-dim); font-size: .85rem; margin-right: .3rem; }
.qs-share__btn {
  padding: .45rem .9rem; border-radius: 999px; font-size: .82rem; font-weight: 600; text-decoration: none;
  color: var(--qsg-ink); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  transition: transform .2s ease, border-color .2s;
}
.qs-share__btn:hover { transform: translateY(-2px); border-color: var(--qsg-glass-brd); color: var(--qsg-gold-300); }

/* ---------- Viral Ayah card ---------- */
.qs-ayah-card { max-width: 540px; margin: 2rem auto; }
.qs-ayah-card__preview { border-radius: 18px; overflow: hidden; box-shadow: 0 20px 60px -20px rgba(0,0,0,.6); }
.qs-ayah-card__preview canvas { width: 100%; height: auto; display: block; }
.qs-ayah-card__actions { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: center; margin-top: 1.2rem; }

@media (max-width: 600px) {
  .qs-app-cta { flex-direction: column; align-items: flex-start; }
}

/* =============================================================
   v1.1 — discovery rails, knowledge graph, Islamic tools
   ============================================================= */

/* ---------- Horizontal discovery rails ---------- */
.qs-rail { margin: 2.5rem 0; }
.qs-rail__title { font-size: 1.3rem; color: #fff; margin: 0 0 1rem; }
.qs-rail__track { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .6rem; scroll-snap-type: x proximity; scrollbar-width: thin; }
.qs-rail__track::-webkit-scrollbar { height: 6px; }
.qs-rail__track::-webkit-scrollbar-thumb { background: rgba(212,175,55,.4); border-radius: 6px; }
.qs-tile-card { flex: 0 0 160px; scroll-snap-align: start; text-decoration: none; transition: transform .25s ease; }
.qs-tile-card:hover { transform: translateY(-4px); }
.qs-tile-card__img { display: block; height: 200px; border-radius: 14px; background-size: cover; background-position: center; position: relative; box-shadow: 0 12px 30px -12px rgba(0,0,0,.6); }
.qs-tile-card__img--ph { display: grid; place-items: center; background: linear-gradient(160deg, var(--qsg-emerald, #10b981), #0a1512); }
.qs-tile-card__img--ph svg { width: 40px; height: 40px; stroke: rgba(243,221,154,.55); }
.qs-tile-card__badge { position: absolute; bottom: 8px; left: 8px; font-size: .68rem; background: rgba(0,0,0,.55); color: #f3dd9a; padding: .15rem .5rem; border-radius: 999px; }
.qs-tile-card__title { display: block; margin-top: .6rem; color: var(--qsg-ink, #e8f3ee); font-size: .9rem; font-weight: 600; line-height: 1.3; }

/* ---------- Knowledge graph ---------- */
.qs-graph { margin: 2.5rem 0; padding: 1.8rem; border-radius: 18px; background: var(--qsg-glass-bg); border: 1px solid var(--qsg-glass-brd); }
.qs-graph__heading { font-size: 1.2rem; color: #fff; margin: 0 0 1.2rem; }
.qs-graph__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.4rem; }
.qs-graph__group h3 { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--qsg-gold, #d4af37); margin: 0 0 .7rem; }
.qs-graph__group ul { list-style: none; margin: 0; padding: 0; }
.qs-graph__group li { margin-bottom: .5rem; }
.qs-graph__group a { color: var(--qsg-dim, #a9c6ba); text-decoration: none; font-size: .92rem; }
.qs-graph__group a:hover { color: var(--qsg-gold-300, #f3dd9a); }

/* ---------- Islamic tools ---------- */
.qs-tool { max-width: 460px; margin: 2rem auto; padding: 1.8rem; border-radius: 18px; background: var(--qsg-glass-bg); border: 1px solid rgba(255,255,255,.1); color: var(--qsg-ink); }
.qs-tool h3 { color: #fff; margin: 0 0 1rem; }
.qs-tool__hint { font-size: .78rem; color: var(--qsg-dim); margin-top: 1rem; }
.qs-tool label { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .7rem; font-size: .9rem; color: var(--qsg-dim); }
.qs-tool input[type=number], .qs-tool input[type=date] { width: 140px; padding: .55rem .7rem; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); color: var(--qsg-ink); font: inherit; }

/* Tasbih */
.qs-tasbih { text-align: center; }
.qs-tasbih__phrase { font-size: 1.6rem; color: var(--qsg-gold-300); font-family: var(--font-arabic, serif); margin-bottom: 1.2rem; }
.qs-tasbih__count { width: 150px; height: 150px; border-radius: 50%; font-size: 2.6rem; font-weight: 700; color: #2a1f00; margin: 0 auto 1.2rem; display: block; background: radial-gradient(circle at 35% 30%, #f3dd9a, #b8860b); box-shadow: 0 16px 40px -12px rgba(212,175,55,.6); border: none; cursor: pointer; transition: transform .08s ease; }
.qs-tasbih__count:active { transform: scale(.95); }
.qs-tasbih__row { display: flex; gap: .6rem; justify-content: center; }

/* Zakat */
.qs-zakat__out { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.1); }
.qs-zakat__due { font-size: 1.2rem; color: #fff; margin-top: .4rem; }
.qs-zakat__due b { color: var(--qsg-gold-300); }
.qs-zakat__note { font-size: .85rem; color: var(--qsg-dim); margin-top: .6rem; }

/* Countdown */
.qs-countdown { text-align: center; }
.qs-countdown__grid { display: flex; gap: .8rem; justify-content: center; }
.qs-countdown__grid > div { flex: 1; padding: 1rem .4rem; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.qs-countdown__grid b { display: block; font-size: 1.8rem; color: var(--qsg-gold-300); }
.qs-countdown__grid span { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--qsg-dim); }

/* Qibla */
.qs-qibla { text-align: center; }
.qs-qibla__dial { width: 200px; height: 200px; margin: 0 auto 1rem; border-radius: 50%; border: 3px solid var(--qsg-glass-brd); display: grid; place-items: center; position: relative; background: radial-gradient(circle, rgba(16,185,129,.12), transparent 70%); }
.qs-qibla__needle { font-size: 3rem; transition: transform .2s ease; }
.qs-qibla__readout { color: var(--qsg-dim); margin-bottom: 1rem; }

/* Prayer */
.qs-prayer__city { color: var(--qsg-dim); font-size: .85rem; margin: .8rem 0; }
.qs-prayer__list { list-style: none; margin: 0; padding: 0; }
.qs-prayer__list li { display: flex; justify-content: space-between; padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.qs-prayer__list b { color: var(--qsg-gold-300); }

/* Tools hub */
.qs-tools-hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 1rem; margin: 2rem 0; }
.qs-tool-link { display: flex; flex-direction: column; gap: .3rem; padding: 1.3rem; border-radius: 14px; text-decoration: none; transition: transform .25s ease; }
.qs-tool-link:hover { transform: translateY(-4px); }
.qs-tool-link b { color: #fff; }
.qs-tool-link span { color: var(--qsg-dim); font-size: .85rem; }

/* =============================================================
   v1.2 — ayah reader, retention, smart install banner
   ============================================================= */

/* ---------- Ayah reader ---------- */
.qs-ayahs { max-width: 760px; margin: 1.5rem auto; }
.qs-ayah { padding: 1.1rem 0; border-bottom: 1px dashed rgba(255,255,255,.08); }
.qs-ayah__ar { font-family: var(--font-arabic, 'Amiri', serif); font-size: 1.9rem; line-height: 2.2; text-align: right; color: var(--qsg-ink); }
.qs-ayah__n { display: inline-grid; place-items: center; width: 28px; height: 28px; font-size: .72rem; border-radius: 50%; border: 1px solid var(--qsg-glass-brd); color: var(--qsg-gold, #d4af37); margin-right: .3rem; }
.qs-ayah__tr { color: var(--qsg-dim); font-size: .98rem; margin-top: .5rem; }
.qs-ayahs__empty, .qs-library__empty { color: var(--qsg-dim); font-size: .9rem; }

/* ---------- Streak ---------- */
.qs-streak { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: 999px; background: rgba(212,175,55,.1); border: 1px solid var(--qsg-glass-brd); }
.qs-streak__num { font-weight: 700; color: var(--qsg-gold-300); font-size: 1.2rem; }
.qs-streak__lbl { color: var(--qsg-dim); font-size: .85rem; }

/* ---------- Achievements ---------- */
.qs-achievements h3 { color: #fff; margin: 0 0 1rem; }
.qs-achievements__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1rem; }
.qs-badge { text-align: center; padding: 1.2rem .8rem; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); opacity: .45; filter: grayscale(.6); transition: opacity .3s, filter .3s, transform .3s; }
.qs-badge.is-earned { opacity: 1; filter: none; border-color: var(--qsg-glass-brd); transform: translateY(-2px); }
.qs-badge__icon { font-size: 2rem; display: block; margin-bottom: .4rem; }
.qs-badge b { display: block; color: #fff; font-size: .9rem; }
.qs-badge small { color: var(--qsg-dim); font-size: .72rem; }

/* ---------- Bookmark button ---------- */
.qs-bookmark.is-saved { color: var(--qsg-gold-300); border-color: var(--qsg-glass-brd); }
.qs-bookmark.is-saved svg { fill: var(--qsg-gold-300); }

/* ---------- Smart install banner ---------- */
.qsg-banner { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 95; display: none; align-items: center; gap: .8rem; padding: .7rem .9rem; border-radius: 16px; background: rgba(6,13,11,.96); border: 1px solid var(--qsg-glass-brd); box-shadow: 0 18px 50px -16px rgba(0,0,0,.8); backdrop-filter: blur(14px); }
.qsg-banner__icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg, #066a4f, #042f23); }
.qsg-banner__icon svg { width: 22px; height: 22px; }
.qsg-banner__txt { flex: 1; line-height: 1.2; }
.qsg-banner__txt b { display: block; color: #fff; font-size: .92rem; }
.qsg-banner__txt small { color: var(--qsg-dim); font-size: .76rem; }
.qsg-banner__cta { flex: none; padding: .55rem 1.1rem; border-radius: 999px; background: linear-gradient(135deg, var(--qsg-gold-300), #b8860b); color: #2a1f00; font-weight: 700; text-decoration: none; font-size: .88rem; }
.qsg-banner__x { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; background: #1a2a24; color: #fff; border: 1px solid rgba(255,255,255,.2); cursor: pointer; font-size: 14px; line-height: 1; }
/* Only show the banner on small screens */
@media (min-width: 781px) { .qsg-banner { display: none !important; } }
@media (max-width: 780px) { .qsg-banner:not([hidden]) { display: flex; } }