/* =============================================================
   SalatiPal — Widgets premium paywall + settings entry (iOS).
   Paired with sp-widgets.js. Gated on html. Reuses the
   shared --sp-spring / --sp-dur-* motion tokens from
   sp-animations.css. All classes are .sp-wgt-* prefixed and fully
   self-contained (no dependency on the app's bundle CSS).
   ============================================================= */

/* ---------- paywall overlay + bottom sheet ---------- */
html .sp-wgt-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  transition: background var(--sp-dur-base, 240ms) var(--sp-ease, ease);
  -webkit-tap-highlight-color: transparent;
  /* When closed, the overlay stays in the DOM but MUST NOT intercept taps,
     otherwise it invisibly covers the screen and freezes the app. */
  pointer-events: none;
}
html .sp-wgt-overlay.sp-wgt-open {
  background: rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}

html .sp-wgt-sheet {
  width: 100%;
  max-width: 520px;
  background: #ffffff;
  border-radius: 22px 22px 0 0;
  padding: 8px 22px calc(26px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.25);
  transform: translateY(100%);
  transition: transform var(--sp-dur-slow, 360ms) var(--sp-spring, cubic-bezier(0.2,0.7,0.2,1));
  max-height: 92vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
html .sp-wgt-overlay.sp-wgt-open .sp-wgt-sheet {
  transform: translateY(0);
}
@media (prefers-color-scheme: dark) {
  html .sp-wgt-sheet { background: #1c1c1e; color: #f2f2f7; }
}

html .sp-wgt-handle {
  width: 38px;
  height: 5px;
  border-radius: 3px;
  background: rgba(120, 120, 128, 0.35);
  margin: 6px auto 14px;
}

/* ---------- hero ---------- */
html .sp-wgt-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  margin-bottom: 18px;
}
html .sp-wgt-badge {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2E7D32, #1B5E20);
  box-shadow: 0 6px 18px rgba(46, 125, 50, 0.4);
  margin-bottom: 4px;
}
html .sp-wgt-badge svg { width: 32px; height: 32px; color: #F6F3E9; }
html .sp-wgt-title {
  font-size: 21px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.2px;
}
html .sp-wgt-sub {
  font-size: 14px;
  color: #8a8a8e;
  margin: 0;
  line-height: 1.35;
}

/* ---------- feature list ---------- */
html .sp-wgt-features {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
html .sp-wgt-feat {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15px;
  line-height: 1.3;
}
html .sp-wgt-feat-ic {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(46, 125, 50, 0.12);
  color: #2E7D32;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
html .sp-wgt-feat-ic svg { width: 13px; height: 13px; }
@media (prefers-color-scheme: dark) {
  html .sp-wgt-feat-ic { background: rgba(76, 175, 80, 0.2); color: #7BD389; }
  html .sp-wgt-sub { color: #aeaeb2; }
}

/* ---------- buy button + restore ---------- */
html .sp-wgt-buy {
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 16px;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #2E7D32, #1B5E20);
  box-shadow: 0 4px 14px rgba(46, 125, 50, 0.35);
  cursor: pointer;
  transition: transform var(--sp-dur-fast, 160ms) var(--sp-spring, ease),
              opacity var(--sp-dur-fast, 160ms) var(--sp-ease, ease);
  -webkit-tap-highlight-color: transparent;
}
html .sp-wgt-buy:active { transform: scale(0.97); }
html .sp-wgt-buy[disabled] { opacity: 0.55; cursor: default; }

html .sp-wgt-buy-sub {
  text-align: center;
  font-size: 12px;
  color: #8a8a8e;
  margin: 9px 0 0;
}
html .sp-wgt-restore {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: #2E7D32;
  font-size: 15px;
  font-weight: 500;
  padding: 14px;
  margin-top: 4px;
  cursor: pointer;
}
@media (prefers-color-scheme: dark) {
  html .sp-wgt-restore { color: #7BD389; }
}
html .sp-wgt-fine {
  text-align: center;
  font-size: 11px;
  line-height: 1.4;
  color: #aaa;
  margin: 6px 0 0;
}

/* ---------- spinner / states ---------- */
html .sp-wgt-spin {
  display: inline-block;
  width: 17px; height: 17px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: sp-wgt-spin 0.7s linear infinite;
  vertical-align: middle;
}
@keyframes sp-wgt-spin { to { transform: rotate(360deg); } }

/* unlocked / success state */
html .sp-wgt-success {
  text-align: center;
  padding: 8px 0 4px;
}
html .sp-wgt-success .sp-wgt-badge {
  background: linear-gradient(135deg, #2E7D32, #43A047);
  margin: 0 auto 10px;
}
html .sp-wgt-success-title { font-size: 19px; font-weight: 700; margin: 0 0 4px; }
html .sp-wgt-success-sub { font-size: 14px; color: #8a8a8e; margin: 0 0 18px; }

/* ---------- settings entry card ----------
   Uniform with the other settings sections: white grouped-inset card with a
   hairline border + 12px radius (matches settings-native.css iOS cards),
   instead of the old green-tinted panel. */
/* Settings rows inherit the app's active theme (same tokens as the home cards)
   so they match every theme instead of being hardcoded white/black. */
html .sp-wgt-entry {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-radius: 14px;
  padding: 14px 16px;
  margin: 14px 0;
  background: var(--card, var(--sp-surface, #ffffff));
  border: 0.5px solid var(--border, var(--sp-line, rgba(60, 60, 67, 0.13)));
  color: var(--foreground, var(--sp-ink, #0f1f1c));
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--sp-dur-fast, 160ms) var(--sp-spring, ease), background var(--sp-dur-fast, 160ms) ease;
}
html .sp-wgt-entry:active { transform: scale(0.985); }
html .sp-wgt-entry-ic {
  flex: 0 0 40px;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--primary, #186B42), var(--primary-dark, var(--primary, #0d3f27)));
  display: flex; align-items: center; justify-content: center;
}
html .sp-wgt-entry-ic svg { width: 21px; height: 21px; color: #ffffff; }
html .sp-wgt-entry-txt { flex: 1 1 auto; min-width: 0; }
html .sp-wgt-entry-title { font-size: 16px; font-weight: 600; margin: 0; color: var(--foreground, var(--sp-ink, #0f1f1c)); }
html .sp-wgt-entry-desc { font-size: 13px; color: var(--muted-foreground, var(--sp-ink-2, #8a8a8e)); margin: 2px 0 0; }
html .sp-wgt-entry-pill {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--primary-dark, var(--primary, #2E7D32));
  color: #fff;
}
html .sp-wgt-entry-pill.sp-wgt-active {
  background: color-mix(in srgb, var(--primary, #2E7D32) 16%, transparent);
  color: var(--primary, #2E7D32);
}
@supports not (background: color-mix(in srgb, red, blue)) {
  html .sp-wgt-entry-pill.sp-wgt-active { background: rgba(46,125,50,0.15); color: #2E7D32; }
}

/* ---- Redeem a gift code (premium gifting Phase 2) ---- */
html .sp-wgt-gift {
  margin-top: 6px;
  text-align: center;
}
html .sp-wgt-gift-toggle {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  color: #2E7D32;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 4px;
  cursor: pointer;
}
html .sp-wgt-gift-form {
  display: flex;
  gap: 8px;
  margin: 4px auto 0;
  max-width: 320px;
}
html .sp-wgt-gift-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(120,120,128,0.3);
  border-radius: 12px;
  font-size: 16px;            /* 16px avoids iOS zoom-on-focus */
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  background: rgba(120,120,128,0.06);
  color: inherit;
}
html .sp-wgt-gift-btn {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: #2E7D32;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
html .sp-wgt-gift-btn:disabled { opacity: 0.55; }
html .sp-wgt-gift-msg {
  font-size: 13px;
  margin: 8px 0 0;
  min-height: 16px;
  color: #8a8a8e;
}
html .sp-wgt-gift-msg.ok { color: #2E7D32; }
html .sp-wgt-gift-msg.err { color: #c0392b; }
@media (prefers-color-scheme: dark) {
  html .sp-wgt-gift-input { background: rgba(120,120,128,0.18); border-color: rgba(120,120,128,0.4); }
  html .sp-wgt-gift-msg.err { color: #ff6b5e; }
}

/* ---- Gift Premium screen (sadaqa jariya, Phase 3) ---- */
html .sp-wgt-gift-label { font-size: 14px; font-weight: 600; margin: 8px 0 6px; text-align: center; color: #8a8a8e; }
html .sp-wgt-qty { display: flex; gap: 8px; justify-content: center; }
html .sp-wgt-qchip {
  flex: 1 1 0; min-width: 0; height: 46px; border-radius: 12px;
  border: 1px solid rgba(120,120,128,0.3); background: rgba(120,120,128,0.06);
  font-size: 16px; font-weight: 700; color: inherit; cursor: pointer;
}
html .sp-wgt-qchip.on { background: #2E7D32; color: #fff; border-color: #2E7D32; }
html .sp-wgt-qstep { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 10px; }
html .sp-wgt-qstep-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(120,120,128,0.3);
  background: rgba(120,120,128,0.06); font-size: 22px; font-weight: 700; color: inherit; cursor: pointer;
}
html .sp-wgt-qstep-val { font-size: 22px; font-weight: 800; min-width: 36px; text-align: center; }
html .sp-wgt-modes { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 4px; }
html .sp-wgt-mode {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  padding: 12px 14px; border-radius: 14px; border: 2px solid rgba(120,120,128,0.25);
  background: rgba(120,120,128,0.05); color: inherit; cursor: pointer;
}
html .sp-wgt-mode.on { border-color: #2E7D32; background: rgba(46,125,50,0.10); }
html .sp-wgt-mode-t { font-size: 15.5px; font-weight: 700; }
html .sp-wgt-mode-s { font-size: 12.5px; color: #8a8a8e; }
html .sp-wgt-codes { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
html .sp-wgt-code {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 12px; background: rgba(120,120,128,0.08);
}
html .sp-wgt-code-v { font-size: 17px; font-weight: 700; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
html .sp-wgt-code-copy { border: 0; background: #2E7D32; color: #fff; font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px; cursor: pointer; }
html .sp-wgt-gift-summary { font-size: 13px; color: #2E7D32; text-align: center; margin: 10px 0 0; font-weight: 600; }
@media (prefers-color-scheme: dark) {
  html .sp-wgt-qchip, html .sp-wgt-qstep-btn, html .sp-wgt-mode { background: rgba(120,120,128,0.18); border-color: rgba(120,120,128,0.4); }
  html .sp-wgt-code { background: rgba(120,120,128,0.22); }
  html .sp-wgt-mode-s, html .sp-wgt-gift-label { color: #aeaeb2; }
  html .sp-wgt-gift-summary { color: #7BD389; }
}

/* `hidden` attribute must win over the flex display rules above (the custom
   stepper and the redeem form are toggled via [hidden]). */
html .sp-wgt-qstep[hidden],
html .sp-wgt-gift-form[hidden] { display: none !important; }

/* ---------- home screen: gift card + claim banner ----------
   Injected into the home feed near the Daily Hadith card. Both surfaces are
   iOS grouped-inset cards that inherit the app's active theme via CSS custom
   properties (--card / --foreground / --primary …) so they retint with every
   theme. Text colours are set explicitly so they never inherit a light page
   foreground onto a light card (the old readability bug). */
html .sp-wgt-home-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 14px 0;
}
html .sp-wgt-home-card,
html .sp-wgt-home-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-radius: 16px;
  padding: 14px 16px;
  background: var(--card, var(--sp-surface, #ffffff));
  border: 0.5px solid var(--border, var(--sp-line, rgba(60, 60, 67, 0.13)));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  color: var(--foreground, var(--sp-ink, #0f1f1c));
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--sp-dur-fast, 160ms) var(--sp-spring, ease), background var(--sp-dur-fast, 160ms) ease;
}
html .sp-wgt-home-card:active,
html .sp-wgt-home-banner:active { transform: scale(0.985); }
html .sp-wgt-home-ic {
  flex: 0 0 40px;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--primary, #186B42), var(--primary-dark, var(--primary, #0d3f27)));
  display: flex; align-items: center; justify-content: center;
}
html .sp-wgt-home-ic svg { width: 21px; height: 21px; color: #ffffff; }
html .sp-wgt-home-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html .sp-wgt-home-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--foreground, var(--sp-ink, #0f1f1c)); }
html .sp-wgt-home-sub { font-size: 13px; color: var(--muted-foreground, var(--sp-ink-2, #8a8a8e)); line-height: 1.3; }
/* trailing chevron on the gift card */
html .sp-wgt-home-cta {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: var(--sp-ink-3, #b8bcba);
}
html .sp-wgt-home-cta svg { width: 16px; height: 16px; }

/* one-time claim banner (non-premium): a subtle primary tint distinguishes it
   from the gift card on iOS 16.2+ (color-mix); older iOS falls back to the
   plain card surface. The icon tile + Claim pill always carry the theme. */
@supports (background: color-mix(in srgb, red, blue)) {
  html .sp-wgt-home-banner {
    background: color-mix(in srgb, var(--primary, #186B42) 8%, var(--card, #ffffff));
    border-color: color-mix(in srgb, var(--primary, #186B42) 24%, transparent);
  }
}
html .sp-wgt-home-claim-cta {
  flex: 0 0 auto;
  font-size: 14px; font-weight: 600;
  letter-spacing: -0.01em;
  padding: 7px 16px; border-radius: 999px;
  background: var(--primary-dark, var(--primary, #186B42)); color: #ffffff;
}
html .sp-wgt-home-banner-x {
  flex: 0 0 auto;
  width: 24px; height: 24px; margin-left: 2px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px;
  background: var(--muted, rgba(120,120,128,0.12));
  color: var(--sp-ink-3, #8a8a8e); font-size: 12px; line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (prefers-color-scheme: dark) {
  html .sp-wgt-home-card,
  html .sp-wgt-home-banner { box-shadow: none; }
}