/*
 * Janaz Notifications — Front-end Styles
 * The theme provides all core .notify-card, .notify-form,
 * .freq-toggle, .radio-opt etc. styles. This file only adds
 * what's truly missing: form messages and SMS phone toggle.
 */

/* ── Form message (success / error) ─────────────────────────────── */
#jnot-form-msg,
#jnot-unsub-msg {
  border-radius: 10px;
  padding: .85rem 1.1rem;
  font-size: .875rem;
  font-weight: 600;
  margin-bottom: 1rem;
  line-height: 1.5;
}

#jnot-form-msg.jnot-success,
#jnot-unsub-msg.jnot-success {
  background: rgba(45, 80, 22, .09);
  color: #1a5c3a;
  border: 1px solid rgba(45, 80, 22, .2);
}

#jnot-form-msg.jnot-error,
#jnot-unsub-msg.jnot-error {
  background: rgba(200, 50, 30, .08);
  color: #c0392b;
  border: 1px solid rgba(200, 50, 30, .2);
}

/* ── Weekly freq option (not in original theme toggle) ───────────── */
.freq-toggle .freq-opt:nth-child(3) {
  border-radius: 0 8px 8px 0;
}

/* ── Scope selector grid ───────────────────────────────────────── */
.jnot-scope-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
  margin-top: .4rem;
}

.jnot-scope-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: .9rem .6rem;
  border: 2px solid #e0ddd5;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: #fafaf8;
  gap: .25rem;
}
.jnot-scope-opt input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.jnot-scope-opt:hover { border-color: #2D5016; background: #f5f2eb; }
.jnot-scope-opt--active { border-color: #2D5016 !important; background: #f0f5ec !important; }

.jnot-scope-icon  { font-size: 1.4rem; line-height: 1; }
.jnot-scope-label { font-weight: 700; font-size: .9rem; color: #1a1a1a; }
.jnot-scope-desc  { font-size: .75rem; color: #6b5b4e; line-height: 1.3; }

/* ── Scope panels ──────────────────────────────────────────────── */
.jnot-scope-panel { margin-top: .25rem; }
.jnot-field-hint  { font-size: .78rem; color: #6b5b4e; margin: .3rem 0 0; }

.jnot-scope-info-box {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  background: #f5f2eb;
  border-radius: 8px;
  padding: 1rem;
  font-size: .9rem;
  color: #3d2b1f;
}
.jnot-scope-info-box span { font-size: 1.4rem; flex-shrink: 0; }
.jnot-scope-info-box p    { margin: 0; line-height: 1.5; }

/* ── Masjid list ───────────────────────────────────────────────── */
.jnot-masjid-list {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid #e0ddd5;
  border-radius: 8px;
  padding: .5rem;
  background: #fff;
}

.jnot-masjid-group { margin-bottom: .4rem; }
.jnot-masjid-group-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6b5b4e;
  padding: .3rem .4rem .1rem;
}

.jnot-masjid-opt {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .5rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: .875rem;
  transition: background .12s;
}
.jnot-masjid-opt:hover { background: #f5f2eb; }
.jnot-masjid-opt input[type="checkbox"] { flex-shrink: 0; accent-color: #2D5016; width: 15px; height: 15px; }
.jnot-masjid-name { font-weight: 600; color: #1a1a1a; }
.jnot-masjid-city { color: #6b5b4e; font-size: .8rem; margin-left: .25rem; }
.jnot-masjid-opt input:checked ~ .jnot-masjid-name { color: #2D5016; }

@media (max-width: 480px) {
  .jnot-scope-grid { grid-template-columns: repeat(2, 1fr); gap: .4rem; }
  .jnot-scope-opt  { padding: .7rem .4rem; }
  .jnot-scope-icon { font-size: 1.2rem; }
}