/* SalatiPal — Early Prayer Reminder settings card. Namespaced .sppr-*. */
.sppr-card{border-radius:16px;border:1px solid var(--sp-line,#e2e8f0);background:var(--sp-card,#fff);
  padding:16px;margin:14px 0;box-shadow:0 1px 3px rgba(2,6,23,.06);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;}
html.dark .sppr-card,body[data-sp-qnight] .sppr-card{--sp-line:#27324a;--sp-card:#151c2c;color:#f1f5f9;}
.sppr-head{display:flex;align-items:center;gap:10px;}
.sppr-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff;}
.sppr-ico svg{width:19px;height:19px;}
.sppr-titles{flex:1;min-width:0;}
.sppr-title{font-size:15px;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;}
.sppr-sub{font-size:12.5px;color:var(--sp-sub,#64748b);margin-top:2px;line-height:1.35;}
html.dark .sppr-sub{color:#94a3b8;}
.sppr-badge{font-size:10px;font-weight:800;letter-spacing:.04em;padding:2px 7px;border-radius:6px;
  background:linear-gradient(135deg,#f59e0b,#f97316);color:#fff;text-transform:uppercase;}
/* toggle */
.sppr-switch{position:relative;width:46px;height:28px;border-radius:999px;background:#cbd5e1;flex:none;
  cursor:pointer;transition:background .2s;border:none;padding:0;}
html.dark .sppr-switch{background:#334155;}
.sppr-switch[aria-checked="true"]{background:linear-gradient(135deg,#2563eb,#06b6d4);}
.sppr-switch>i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;
  transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.25);}
.sppr-switch[aria-checked="true"]>i{transform:translateX(18px);}
/* minutes segmented */
.sppr-mins{display:flex;gap:6px;margin-top:14px;}
.sppr-min{flex:1;border:1px solid var(--sp-line,#e2e8f0);background:transparent;color:inherit;
  font-size:13px;font-weight:700;padding:9px 0;border-radius:10px;cursor:pointer;transition:.15s;}
.sppr-min.sppr-on{background:linear-gradient(135deg,#2563eb,#06b6d4);border-color:transparent;color:#fff;}
.sppr-card[data-locked="1"] .sppr-mins,.sppr-card[data-disabled="1"] .sppr-mins{opacity:.45;pointer-events:none;}
.sppr-unlock{margin-top:14px;width:100%;border:none;border-radius:12px;padding:12px;font-size:14px;font-weight:800;
  cursor:pointer;color:#fff;background:linear-gradient(135deg,#f59e0b,#f97316);display:flex;align-items:center;
  justify-content:center;gap:8px;}
.sppr-unlock:active{transform:scale(.98);}
.sppr-lockrow{display:flex;align-items:center;gap:8px;}

/* =============================================================
   2026-06-02 Per-prayer Notification SHEET (.spns-*) — opened from a
   prayer card's bell via window.__spOpenNotifSheet. Native-style bottom
   sheet, emerald accents. Replaces the old global Early-Reminder card.
   ============================================================= */
.spns-backdrop{
  position:fixed; inset:0; z-index:2147483000;
  background:rgba(0,0,0,.45);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; transition:opacity .2s ease;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.spns-backdrop.spns-show{opacity:1;}
.spns-sheet{
  width:100%; max-width:520px;
  background:#ffffff; color:#0f172a;
  border-radius:22px 22px 0 0;
  padding:10px 18px calc(18px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -10px 40px rgba(0,0,0,.28);
  transform:translateY(100%); transition:transform .24s cubic-bezier(.22,1,.36,1);
  font-family:inherit;
}
.spns-backdrop.spns-show .spns-sheet{transform:translateY(0);}
.spns-grip{width:38px; height:5px; border-radius:3px; background:#d1d5db; margin:2px auto 12px;}
.spns-title{display:flex; align-items:center; font-size:17px; font-weight:700; margin-bottom:6px;}
.spns-x{margin-left:auto; border:none; background:#f1f5f9; color:#475569; width:30px; height:30px; border-radius:50%; font-size:14px; cursor:pointer; line-height:1;}
.spns-sec-label{font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:#64748b; margin:14px 2px 8px;}
.spns-hint{text-transform:none; font-weight:500; color:#10b981; letter-spacing:0;}
.spns-types{display:flex; flex-direction:column; gap:8px;}
.spns-type{
  display:flex; align-items:center; gap:12px;
  width:100%; padding:12px 14px; border-radius:14px; cursor:pointer;
  background:#f8fafc; border:1.5px solid #e2e8f0; color:#0f172a;
  font-size:15px; font-weight:500; text-align:left;
}
.spns-type .spns-dot{width:18px; height:18px; border-radius:50%; border:2px solid #cbd5e1; flex:0 0 auto; box-sizing:border-box;}
.spns-type.on{background:#ecfdf5; border-color:#10b981; color:#065f46; font-weight:600;}
.spns-type.on .spns-dot{border-color:#10b981; background:radial-gradient(circle, #10b981 45%, transparent 48%);}
.spns-mins{display:flex; flex-wrap:wrap; gap:8px;}
.spns-min{
  flex:1 1 auto; min-width:54px; padding:11px 6px; border-radius:13px; cursor:pointer;
  background:#f8fafc; border:1.5px solid #e2e8f0; color:#334155; font-size:14px; font-weight:600;
}
.spns-min.on{background:#10b981; border-color:#059669; color:#ffffff;}
@media (prefers-color-scheme: dark){
  .spns-sheet{background:#0b1220; color:#e5e7eb;}
  .spns-x{background:#1f2937; color:#cbd5e1;}
  .spns-type,.spns-min{background:#111827; border-color:#374151; color:#e5e7eb;}
  .spns-type.on{background:#064e3b; border-color:#10b981; color:#d1fae5;}
  .spns-min.on{background:#10b981; border-color:#34d399; color:#04210f;}
  .spns-grip{background:#374151;}
}

/* ---------------- Global "Early Prayer Reminder" card (injected into Settings) ---------------- */
.spel-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  padding: 14px 14px 16px;
  margin: 0 0 14px;
}
.spel-title { font-size: 15px; font-weight: 700; color: #0f172a; }
.spel-sub   { font-size: 12.5px; color: #64748b; margin-top: 2px; }
.spel-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.spel-chip {
  flex: 0 0 auto; min-width: 52px; padding: 8px 14px;
  border-radius: 999px; border: 1px solid rgba(15,23,42,.12);
  background: #f5f7f6; color: #1f2937; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.spel-chip.on { background: #0e9f8e; border-color: #0e9f8e; color: #ffffff; }
html.dark .spel-card { background: #1c201e; border-color: rgba(255,255,255,.10); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
html.dark .spel-title { color: #e3e3e1; }
html.dark .spel-sub { color: #a0aab0; }
html.dark .spel-chip { background: #262b29; border-color: rgba(255,255,255,.12); color: #d8dcd9; }
html.dark .spel-chip.on { background: #0e9f8e; border-color: #0e9f8e; color: #ffffff; }

/* ---------------- bottom-sheet polish: ensure grip is grabbable + M3 feel ---------------- */
.spns-sheet { touch-action: none; }
.spns-grip { cursor: grab; }

/* ---------------- per-day notification menu (iOS-matching) ---------------- */
.spns-sub { font-size: 12.5px; color: #64748b; margin: -2px 2px 12px; line-height: 1.4; }
.spns-default {
  display: flex; align-items: center; justify-content: space-between;
  background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 12px;
  padding: 12px 14px; margin-bottom: 12px; cursor: pointer;
}
.spns-def-l { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #0e9f8e; }
.spns-def-t { font-size: 14.5px; font-weight: 600; color: #0f172a; }
.spns-days { display: flex; flex-direction: column; gap: 8px; }
.spns-day {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: #f5f7f6; border: 1px solid rgba(15,23,42,.06); border-radius: 12px;
  padding: 12px 14px; text-align: left; cursor: pointer;
  transition: background-color .12s ease, transform .08s ease;
}
.spns-day:active { transform: scale(.99); background: #eceeed; }
.spns-day-l { font-size: 13px; font-weight: 700; letter-spacing: .03em; color: #475569; width: 38px; flex: 0 0 auto; }
.spns-day-dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #c3c8c5; flex: 0 0 auto; }
.spns-day.ov .spns-day-dot { background: #0e9f8e; border-color: #0e9f8e; }
.spns-day-t { font-size: 14.5px; font-weight: 600; color: #0f172a; flex: 1 1 auto; }
.spns-day-chev { color: #b6bdc4; font-size: 18px; flex: 0 0 auto; }
.spns-actions { display: flex; gap: 10px; margin-top: 16px; }
.spns-reset { flex: 1 1 auto; padding: 12px; border-radius: 12px; border: 1px solid rgba(15,23,42,.12); background: #f1f5f4; color: #334155; font-weight: 600; font-size: 14px; cursor: pointer; }
.spns-done { flex: 1 1 auto; padding: 12px; border-radius: 12px; border: 0; background: #0e9f8e; color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; }

html.dark .spns-sub { color: #9aa4ab; }
html.dark .spns-default { background: #10302a; border-color: #1f4d43; }
html.dark .spns-def-t { color: #e8eae9; }
html.dark .spns-day { background: #262b29; border-color: rgba(255,255,255,.07); }
html.dark .spns-day:active { background: #2e3331; }
html.dark .spns-day-l { color: #9aa4ab; }
html.dark .spns-day-t { color: #e8eae9; }
html.dark .spns-day-dot { border-color: #495049; }
html.dark .spns-reset { background: #2a2f2d; border-color: rgba(255,255,255,.10); color: #d8dcd9; }

/* ---------------- "…" button on prayer cards (opens the per-day menu) ---------------- */
.sp-pn-dots { background: none; border: 0; padding: 2px 6px; margin-left: 2px; font-size: 18px; line-height: 1; cursor: pointer; opacity: .8; color: #9ca3af; -webkit-tap-highlight-color: transparent; }
.sp-pn-dots:active { opacity: 1; }
.sp-prayer-notif-current + .sp-pn-dots { color: #ffffff; }
.sp-prayer-notif-next + .sp-pn-dots { color: #6b7280; }
.sp-prayer-notif-regular + .sp-pn-dots { color: #9ca3af; }

/* Per-day notification three-dots button beside the bell (2026-06-03).
   Bell = cycle type; ⋮ = open the per-day customisation sheet. */
.sp-prayer-notif-wrap { display: flex; align-items: center; gap: 6px; }
.sp-prayer-notif-more {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 24px; padding: 0 2px; line-height: 1;
  font-size: 17px; font-weight: 700; background: none; border: 0;
  border-radius: 9999px; opacity: .7; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: opacity .15s, transform .1s;
}
.sp-prayer-notif-more:hover { opacity: 1; }
.sp-prayer-notif-more:active { opacity: 1; transform: scale(.88); }
.sp-prayer-notif-more-current { color: #ffffff; }
.sp-prayer-notif-more-regular { color: #9ca3af; }