/* UMMAH WIDGETS — the standardized widget chrome.
 *
 * One look on every site. These widgets are the product, not part of any
 * template's theme, so they are deliberately identical everywhere: white
 * card, rounded, Inter, one centered "Powered by Ummah" mark in the foot
 * (the only logo a widget carries). The ONLY thing a site may vary is the
 * accent:
 *
 *   body .uw { --uw-accent: #0A6E76; --uw-accent-dark: #075158; }
 *
 * Everything else in here is off limits to themes. If a template needs a
 * different widget, the answer is no.
 */

.uw {
  --uw-accent: #0056A4;
  --uw-accent-dark: #003D75;
  --uw-accent-tint: color-mix(in srgb, var(--uw-accent) 9%, #fff);
  --uw-ink: #16202B;
  --uw-body: #3D4A57;
  --uw-muted: #6B7683;
  --uw-line: #E6EAF0;
  --uw-card: #FFFFFF;
  --uw-well: #F5F7FA;
  --uw-r: 18px;
  --uw-ease: cubic-bezier(.22,1,.36,1);

  background: var(--uw-card);
  color: var(--uw-body);
  border: 1px solid var(--uw-line);
  border-radius: var(--uw-r);
  box-shadow: 0 14px 40px -22px rgba(15,25,40,.28);
  padding: 22px 24px 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .uw { --uw-accent-tint: #EEF3F8; }
}

/* Stable widths everywhere. width:100% matters: with only margin-inline:auto
   a grid item shrink-wraps its content, so the card resized every time the
   date arrows changed the text inside it. */
.uw--events, .uw--programs { width: 100%; max-width: 880px; margin-inline: auto; }
.uw--prayer { width: 100%; max-width: 600px; margin-inline: auto; }
.uw--donate { width: 100%; }

/* ---------------- header: widget name + an optional right slot ---------------- */

.uw-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px; margin-bottom: 4px;
  border-bottom: 1px solid var(--uw-line);
}
.uw-title { font-size: 15px; font-weight: 600; color: var(--uw-ink); letter-spacing: -.01em; }
.uw-head-sub { margin-left: auto; font-size: 12.5px; color: var(--uw-muted); font-variant-numeric: tabular-nums; }

/* Segmented view toggle (events: list / calendar) */
.uw-views { margin-left: auto; display: inline-flex; gap: 3px; padding: 3px; background: var(--uw-well); border-radius: 999px; }
.uw-views button {
  height: 28px; padding: 0 13px; border: 0; border-radius: 999px; background: transparent;
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--uw-muted);
  cursor: pointer; transition: background .2s, color .2s;
}
.uw-views button.is-on { background: var(--uw-card); color: var(--uw-ink); box-shadow: 0 1px 3px rgba(15,25,40,.12); }

/* ---------------- centered powered-by foot: the one logo ---------------- */

.uw-foot {
  display: flex; justify-content: center;
  padding-top: 14px; margin-top: 14px;
  border-top: 1px solid var(--uw-line);
}
.uw-brand {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--uw-muted); text-decoration: none; transition: color .2s;
}
.uw-brand img { height: 16px; width: auto; }
.uw-brand:hover { color: var(--uw-ink); }

/* ---------------- prayer times ---------------- */

.uw-datebar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0 4px;
}
.uw-arrow {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid var(--uw-line); background: var(--uw-card);
  color: var(--uw-ink); font-size: 16px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background .2s, border-color .2s, opacity .2s;
}
.uw-arrow:hover:not(:disabled) { background: var(--uw-well); border-color: var(--uw-muted); }
.uw-arrow:disabled { opacity: .35; cursor: default; }
.uw-datebar-mid { flex: 1; text-align: center; min-width: 0; }
.uw-date { display: block; font-size: 14.5px; font-weight: 600; color: var(--uw-ink); }
.uw-hijri { display: block; font-size: 12.5px; color: var(--uw-muted); margin-top: 1px; }

.uw-cols {
  display: grid; grid-template-columns: minmax(0,1fr) 76px 76px;
  gap: 12px; padding: 10px 0 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--uw-muted);
}
.uw-cols span:nth-child(2), .uw-cols span:nth-child(3) { text-align: right; }

.uw-prow {
  display: grid; grid-template-columns: minmax(0,1fr) 76px 76px;
  gap: 12px; align-items: baseline;
  padding: 10px 8px; margin: 0 -8px; border-radius: 10px;
  border-top: 1px solid var(--uw-line);
}
.uw-prow:first-of-type { border-top: 0; }
.uw-pname { font-size: 15.5px; font-weight: 600; color: var(--uw-ink); }
.uw-par { font-size: 12.5px; color: var(--uw-muted); margin-left: 8px; }
.uw-padhan, .uw-piqama { text-align: right; font-variant-numeric: tabular-nums; }
.uw-padhan { color: var(--uw-muted); }
.uw-piqama { color: var(--uw-ink); font-weight: 600; }
.uw-prow.is-next { background: var(--uw-accent-tint); border-top-color: transparent; }
.uw-prow.is-next + .uw-prow { border-top-color: transparent; }
.uw-prow.is-next .uw-pname, .uw-prow.is-next .uw-piqama { color: var(--uw-accent); }
.uw-next-chip[hidden] { display: none; }
.uw-next-chip {
  display: inline-block; margin-left: 10px; padding: 2px 8px; border-radius: 999px;
  background: var(--uw-accent); color: #fff;
  font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  vertical-align: 2px;
}

.uw-sunrise {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 8px; margin: 0 -8px;
  font-size: 12.5px; color: var(--uw-muted);
  border-top: 1px dashed var(--uw-line);
  font-variant-numeric: tabular-nums;
}

.uw-jumuah { padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--uw-line); display: grid; gap: 6px; }
.uw-jrow { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.uw-jlabel { font-size: 13.5px; color: var(--uw-body); }
.uw-jlabel b { font-weight: 600; color: var(--uw-ink); }
.uw-jtime { font-weight: 600; color: var(--uw-ink); font-variant-numeric: tabular-nums; }

/* ---------------- events: list view ---------------- */

.uw-ev {
  display: grid; grid-template-columns: 56px minmax(0,1fr) auto;
  gap: 16px; align-items: center;
  padding: 16px 0; border-top: 1px solid var(--uw-line);
}
.uw-ev:first-of-type { border-top: 0; }
.uw-ev-date {
  align-self: start;
  width: 56px; padding: 8px 4px; border-radius: 12px;
  background: var(--uw-accent-tint); text-align: center; line-height: 1.1;
}
.uw-ev-date b { display: block; font-size: 20px; font-weight: 700; color: var(--uw-accent); font-variant-numeric: tabular-nums; }
.uw-ev-date i { font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--uw-accent); opacity: .8; }
.uw-ev-body { min-width: 0; }
.uw-ev-tag { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--uw-accent); }
.uw-ev-title { margin: 3px 0 2px; font-size: 16px; font-weight: 600; color: var(--uw-ink); letter-spacing: -.01em; }
.uw-ev-meta { font-size: 13.5px; color: var(--uw-muted); }
.uw-ev-side { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.uw-ev-price { font-size: 13px; font-weight: 600; color: var(--uw-ink); }

.uw-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 18px; border-radius: 999px; border: 0;
  background: var(--uw-accent); color: #fff;
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .2s, transform .18s var(--uw-ease);
}
.uw-btn:hover { background: var(--uw-accent-dark); transform: translateY(-1px); }
.uw-btn--ghost { background: var(--uw-well); color: var(--uw-ink); }
.uw-btn--ghost:hover { background: var(--uw-line); }

/* ---------------- events: calendar view ---------------- */

.uw-cal-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0 6px;
}
.uw-cal-title { flex: 1; text-align: center; font-size: 14.5px; font-weight: 600; color: var(--uw-ink); }
.uw-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 2px; padding-bottom: 6px; }
.uw-cal-wd {
  text-align: center; padding: 8px 0 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--uw-muted);
}
.uw-cal-cell {
  position: relative; height: 42px; border: 0; border-radius: 10px;
  background: transparent; font-family: inherit; font-size: 13.5px;
  color: var(--uw-body); font-variant-numeric: tabular-nums; cursor: default;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  transition: background .15s;
}
.uw-cal-cell.is-out { color: var(--uw-line); }
.uw-cal-cell.has-ev { cursor: pointer; font-weight: 600; color: var(--uw-ink); }
.uw-cal-cell.has-ev:hover { background: var(--uw-well); }
.uw-cal-cell.is-today { box-shadow: inset 0 0 0 1.5px var(--uw-line); }
.uw-cal-cell.is-sel { background: var(--uw-accent); color: #fff; }
.uw-cal-cell.is-sel .uw-cal-dot { background: #fff; }
.uw-cal-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--uw-accent); }
.uw-cal-dot.is-ghost { background: transparent; }

.uw-cal-day {
  border-top: 1px solid var(--uw-line); padding-top: 4px;
}
.uw-cal-daylabel {
  padding: 10px 0 0; font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--uw-muted);
}
.uw-cal-empty { padding: 16px 0 6px; font-size: 13.5px; color: var(--uw-muted); text-align: center; }

/* ---------------- programs ---------------- */

.uw-pg-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; padding-top: 16px; }
.uw-pgc {
  background: var(--uw-well); border-radius: 14px; padding: 18px;
  display: flex; flex-direction: column;
}
.uw-pgc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.uw-pg-status {
  display: inline-flex; padding: 3px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.uw-pg-status--open { background: color-mix(in srgb, var(--uw-accent) 14%, #fff); color: var(--uw-accent); }
.uw-pg-status--waitlist { background: #F6EFDC; color: #7A5F14; }
.uw-pg-fee { font-size: 13px; font-weight: 600; color: var(--uw-ink); font-variant-numeric: tabular-nums; }
.uw-pg-title { margin: 10px 0 4px; font-size: 16.5px; font-weight: 600; color: var(--uw-ink); letter-spacing: -.01em; }
.uw-pg-desc { font-size: 13.5px; color: var(--uw-muted); flex: 1; }
.uw-pg-rows { margin-top: 12px; display: grid; gap: 6px; }
.uw-pg-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; border-top: 1px solid var(--uw-line); padding-top: 6px; }
.uw-pg-row dt { color: var(--uw-muted); margin: 0; }
.uw-pg-row dd { color: var(--uw-ink); font-weight: 500; margin: 0; text-align: right; }
.uw-pg-seats { margin-top: 12px; }
.uw-pg-seatrow { display: flex; justify-content: space-between; font-size: 12px; color: var(--uw-muted); margin-bottom: 5px; font-variant-numeric: tabular-nums; }
.uw-pg-seatrow b { color: var(--uw-ink); font-weight: 600; }
.uw-pg-bar { height: 5px; border-radius: 999px; background: var(--uw-line); overflow: hidden; }
.uw-pg-bar i { display: block; height: 100%; border-radius: 999px; background: var(--uw-accent); }
.uw-pgc .uw-btn { margin-top: 14px; width: 100%; }

/* ---------------- donations ---------------- */

.uw-dn-progress { padding-top: 14px; }
.uw-dn-bar { height: 7px; border-radius: 999px; background: var(--uw-well); overflow: hidden; }
.uw-dn-bar i { display: block; height: 100%; border-radius: 999px; background: var(--uw-accent); transition: width 1.1s var(--uw-ease); }
.uw-dn-figures { display: flex; align-items: baseline; gap: 8px; margin-top: 11px; }
.uw-dn-raised { font-size: 24px; font-weight: 700; color: var(--uw-ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.uw-dn-goal { font-size: 13.5px; color: var(--uw-muted); }

.uw-dn-form { display: flex; flex-direction: column; gap: 13px; margin-top: 16px; }
.uw-dn-freq { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; background: var(--uw-well); border-radius: 999px; }
.uw-dn-freq button {
  height: 38px; border: 0; border-radius: 999px; background: transparent;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--uw-muted);
  cursor: pointer; transition: background .2s, color .2s;
}
.uw-dn-freq button.is-on { background: var(--uw-card); color: var(--uw-ink); box-shadow: 0 1px 3px rgba(15,25,40,.12); }

.uw-dn-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.uw-dn-amounts button {
  height: 46px; border-radius: 12px; border: 1.5px solid var(--uw-line); background: var(--uw-card);
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--uw-ink);
  cursor: pointer; transition: border-color .2s, background .2s, color .2s;
}
.uw-dn-amounts button:hover { border-color: var(--uw-accent); }
.uw-dn-amounts button.is-on { border-color: var(--uw-accent); background: var(--uw-accent-tint); color: var(--uw-accent); }
.uw-dn-other { grid-column: 1 / -1; }
.uw-dn-other input {
  width: 100%; height: 46px; border-radius: 12px; border: 1.5px solid var(--uw-line);
  padding: 0 15px; font-family: inherit; font-size: 15px; color: var(--uw-ink); background: var(--uw-card);
}
.uw-dn-other input:focus { outline: none; border-color: var(--uw-accent); }
.uw-dn-fund { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--uw-muted); }
.uw-dn-fund select {
  height: 46px; border-radius: 12px; border: 1.5px solid var(--uw-line);
  padding: 0 13px; font-family: inherit; font-size: 15px; color: var(--uw-ink); background: var(--uw-card);
}
.uw-dn-fund select:focus { outline: none; border-color: var(--uw-accent); }
.uw-dn-submit {
  height: 52px; border-radius: 999px; border: 0; background: var(--uw-accent); color: #fff;
  font-family: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer;
  transition: background .2s, transform .18s var(--uw-ease);
}
.uw-dn-submit:hover { background: var(--uw-accent-dark); transform: translateY(-1px); }
.uw-dn-fine { font-size: 12px; color: var(--uw-muted); text-align: center; }

/* ---------------- toast (standardized, all sites) ---------------- */

.uw-toast {
  width: max-content;
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); z-index: 250;
  max-width: min(520px, calc(100vw - 32px));
  background: #16202B; color: #fff; padding: 15px 22px; border-radius: 14px;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 14px; line-height: 1.5;
  box-shadow: 0 24px 60px -20px rgba(15,25,40,.5);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--uw-ease, ease), transform .3s var(--uw-ease, ease);
}
.uw-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------- small screens ---------------- */

@media (max-width: 560px) {
  .uw { padding: 18px 16px 14px; }
  .uw-cols, .uw-prow { grid-template-columns: minmax(0,1fr) 64px 64px; gap: 8px; }
  .uw-par { display: none; }
  .uw-padhan, .uw-piqama { font-size: 13.5px; white-space: nowrap; }
  .uw-pname { font-size: 14.5px; }
  .uw-ev { grid-template-columns: 48px minmax(0,1fr); }
  .uw-ev-date { width: 48px; }
  .uw-ev-side { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; }
  .uw-pg-grid { grid-template-columns: minmax(0,1fr); }
  .uw-dn-amounts { grid-template-columns: repeat(2, 1fr); }
  .uw-head { flex-wrap: wrap; }
  .uw-cal-cell { height: 38px; font-size: 12.5px; }
}

/* ---------------- adhan only ---------------- */

/* A masjid whose iqama times we do not hold shows adhan only: two columns,
   and the adhan carries the weight the iqama column usually does. */
.uw--adhan-only .uw-cols,
.uw--adhan-only .uw-prow { grid-template-columns: minmax(0,1fr) 96px; }
.uw--adhan-only .uw-cols span:nth-child(2) { text-align: right; }
.uw--adhan-only .uw-padhan { color: var(--uw-ink); font-weight: 600; }
.uw--adhan-only .uw-prow.is-next .uw-padhan { color: var(--uw-accent); }
@media (max-width: 560px) {
  .uw--adhan-only .uw-cols,
  .uw--adhan-only .uw-prow { grid-template-columns: minmax(0,1fr) 84px; }
}

/* ---------------- touch sizing ---------------- */

@media (pointer: coarse) {
  .uw-arrow { width: 44px; height: 44px; }
  .uw-views button { min-height: 40px; }
  .uw-btn, .uw-dn-freq button { min-height: 44px; }
}