/* ════════════════════════════════════════════════════════════════════════════
   MIMBAR DIGITAL — Waktu Solat public display
   8 designs (4 horizontal + 4 compact). Every colour is supplied at runtime
   through CSS custom properties scoped to the widget root:
     --ws-bg --ws-bg2 --ws-text --ws-sub --ws-accent --ws-accent-text --ws-border
   so the same design works with any palette the manager chooses.
   ════════════════════════════════════════════════════════════════════════════ */

.mimbar-ws,
.mimbar-ws *,
.mimbar-ws *::before,
.mimbar-ws *::after { box-sizing: border-box; }

.mimbar-ws {
	--ws-radius: 16px;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	width: 100%;
	color: var(--ws-text);
	line-height: 1.25;
	border-radius: var(--ws-radius);
	overflow: hidden;
	position: relative;
}
.mimbar-ws .mimbar-ws-inner { width: 100%; }

.mimbar-ws-name   { font-weight: 700; letter-spacing: -0.01em; }
.mimbar-ws-loc    { color: var(--ws-sub); font-size: 0.72em; }
.mimbar-ws-date   { color: var(--ws-sub); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.mimbar-ws-day    { font-weight: 600; color: var(--ws-text); }
.mimbar-ws-hijri  { color: var(--ws-accent); font-weight: 600; }

.mimbar-ws-next-eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.62em; color: var(--ws-sub); display: block; }
.mimbar-ws-next-name    { font-weight: 700; }
.mimbar-ws-count        { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; font-weight: 700; color: var(--ws-accent); }

.mimbar-ws-prayer   { display: flex; align-items: center; transition: background .25s ease, color .25s ease, transform .25s ease; }
.mimbar-ws-p-label  { display: block; }
.mimbar-ws-p-time   { display: block; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.mimbar-ws-progress { display: none; width: 100%; height: 4px; background: var(--ws-border); border-radius: 99px; overflow: hidden; }
.mimbar-ws-progress-fill { display: block; height: 100%; width: 0; background: var(--ws-accent); border-radius: 99px; transition: width 1s linear; }

.mimbar-ws-unavailable { padding: 18px 20px; text-align: center; color: var(--ws-sub); background: var(--ws-bg); font-size: 0.9rem; }

/* ════════════════════════════════════════════════════════════════════════════
   HORIZONTAL
   ════════════════════════════════════════════════════════════════════════════ */

/* ── H1 · Bar ─────────────────────────────────────────────────────────────── */
.mimbar-ws-h1 { background: var(--ws-bg); }
.mimbar-ws-h1 .mimbar-ws-inner { display: flex; align-items: center; gap: 22px; padding: 16px 22px; flex-wrap: wrap; }
.mimbar-ws-h1 .mimbar-ws-head  { display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
.mimbar-ws-h1 .mimbar-ws-name  { font-size: 1.02rem; }
.mimbar-ws-h1 .mimbar-ws-date  { font-size: 0.74rem; }
.mimbar-ws-h1 .mimbar-ws-next  { order: 3; margin-left: auto; text-align: right; padding-left: 18px; border-left: 1px solid var(--ws-border); }
.mimbar-ws-h1 .mimbar-ws-next-name { font-size: 0.9rem; }
.mimbar-ws-h1 .mimbar-ws-count { font-size: 1.5rem; display: block; }
.mimbar-ws-h1 .mimbar-ws-list  { order: 2; display: flex; gap: 6px; flex: 1 1 420px; justify-content: space-between; }
.mimbar-ws-h1 .mimbar-ws-prayer{ flex-direction: column; gap: 3px; align-items: center; padding: 8px 12px; border-radius: 12px; min-width: 60px; }
.mimbar-ws-h1 .mimbar-ws-p-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ws-sub); }
.mimbar-ws-h1 .mimbar-ws-p-time  { font-size: 1.05rem; font-weight: 700; }
.mimbar-ws-h1 .mimbar-ws-prayer.is-current { background: var(--ws-accent); }
.mimbar-ws-h1 .mimbar-ws-prayer.is-current .mimbar-ws-p-label,
.mimbar-ws-h1 .mimbar-ws-prayer.is-current .mimbar-ws-p-time { color: var(--ws-accent-text); }

/* ── H2 · Cards ───────────────────────────────────────────────────────────── */
.mimbar-ws-h2 { background: var(--ws-bg); }
.mimbar-ws-h2 .mimbar-ws-inner { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.mimbar-ws-h2 .mimbar-ws-head  { display: flex; flex-direction: column; gap: 2px; }
.mimbar-ws-h2 .mimbar-ws-name  { font-size: 1.05rem; }
.mimbar-ws-h2 .mimbar-ws-date  { font-size: 0.76rem; }
.mimbar-ws-h2 .mimbar-ws-next  { position: absolute; top: 18px; right: 20px; text-align: right; background: color-mix(in srgb, var(--ws-accent) 16%, transparent); padding: 8px 14px; border-radius: 12px; }
.mimbar-ws-h2 .mimbar-ws-next-name { font-size: 0.8rem; }
.mimbar-ws-h2 .mimbar-ws-count { font-size: 1.25rem; display: block; }
.mimbar-ws-h2 .mimbar-ws-list  { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.mimbar-ws-h2 .mimbar-ws-prayer{ flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border-radius: 14px; background: var(--ws-bg2); border: 1px solid var(--ws-border); }
.mimbar-ws-h2 .mimbar-ws-p-label { font-size: 0.72rem; color: var(--ws-sub); font-weight: 600; }
.mimbar-ws-h2 .mimbar-ws-p-time  { font-size: 1.2rem; font-weight: 700; }
.mimbar-ws-h2 .mimbar-ws-prayer.is-current { background: var(--ws-accent); border-color: transparent; transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.18); }
.mimbar-ws-h2 .mimbar-ws-prayer.is-current .mimbar-ws-p-label,
.mimbar-ws-h2 .mimbar-ws-prayer.is-current .mimbar-ws-p-time { color: var(--ws-accent-text); }

/* ── H3 · Gradient Hero ───────────────────────────────────────────────────── */
.mimbar-ws-h3 { background: linear-gradient(135deg, var(--ws-bg) 0%, var(--ws-bg2) 100%); }
.mimbar-ws-h3 .mimbar-ws-inner { padding: 26px 22px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.mimbar-ws-h3 .mimbar-ws-head  { display: flex; flex-direction: column; gap: 3px; }
.mimbar-ws-h3 .mimbar-ws-name  { font-size: 1.2rem; }
.mimbar-ws-h3 .mimbar-ws-date  { justify-content: center; font-size: 0.8rem; }
.mimbar-ws-h3 .mimbar-ws-next  { display: flex; flex-direction: column; gap: 2px; }
.mimbar-ws-h3 .mimbar-ws-next-name { font-size: 1rem; color: var(--ws-text); }
.mimbar-ws-h3 .mimbar-ws-count { font-size: clamp(2.4rem, 7vw, 3.6rem); line-height: 1; letter-spacing: -0.02em; }
.mimbar-ws-h3 .mimbar-ws-progress { display: block; max-width: 360px; }
.mimbar-ws-h3 .mimbar-ws-list  { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mimbar-ws-h3 .mimbar-ws-prayer{ flex-direction: column; align-items: center; gap: 2px; padding: 8px 16px; border-radius: 99px; background: color-mix(in srgb, var(--ws-text) 8%, transparent); border: 1px solid var(--ws-border); }
.mimbar-ws-h3 .mimbar-ws-p-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ws-sub); }
.mimbar-ws-h3 .mimbar-ws-p-time  { font-size: 0.98rem; font-weight: 700; }
.mimbar-ws-h3 .mimbar-ws-prayer.is-current { background: var(--ws-accent); border-color: transparent; }
.mimbar-ws-h3 .mimbar-ws-prayer.is-current .mimbar-ws-p-label,
.mimbar-ws-h3 .mimbar-ws-prayer.is-current .mimbar-ws-p-time { color: var(--ws-accent-text); }

/* ── H4 · Minimal ticker ──────────────────────────────────────────────────── */
.mimbar-ws-h4 { background: var(--ws-bg); }
.mimbar-ws-h4 .mimbar-ws-inner { padding: 12px 20px; display: flex; flex-direction: column; gap: 9px; }
.mimbar-ws-h4 .mimbar-ws-head  { display: flex; gap: 10px; align-items: baseline; font-size: 0.72rem; }
.mimbar-ws-h4 .mimbar-ws-name  { font-size: 0.82rem; }
.mimbar-ws-h4 .mimbar-ws-loc   { display: none; }
.mimbar-ws-h4 .mimbar-ws-date  { font-size: 0.72rem; }
.mimbar-ws-h4 .mimbar-ws-next  { display: flex; align-items: baseline; gap: 8px; order: 3; }
.mimbar-ws-h4 .mimbar-ws-next-eyebrow { display: inline; }
.mimbar-ws-h4 .mimbar-ws-next-name    { font-size: 0.82rem; color: var(--ws-accent); }
.mimbar-ws-h4 .mimbar-ws-count        { font-size: 0.92rem; }
.mimbar-ws-h4 .mimbar-ws-list  { display: flex; flex-wrap: wrap; gap: 4px 4px; align-items: center; }
.mimbar-ws-h4 .mimbar-ws-prayer{ gap: 6px; padding: 4px 10px; border-radius: 8px; }
.mimbar-ws-h4 .mimbar-ws-p-label { font-size: 0.7rem; color: var(--ws-sub); text-transform: uppercase; letter-spacing: 0.03em; }
.mimbar-ws-h4 .mimbar-ws-p-time  { font-size: 0.86rem; font-weight: 700; }
.mimbar-ws-h4 .mimbar-ws-prayer.is-current { background: var(--ws-accent); }
.mimbar-ws-h4 .mimbar-ws-prayer.is-current .mimbar-ws-p-label,
.mimbar-ws-h4 .mimbar-ws-prayer.is-current .mimbar-ws-p-time { color: var(--ws-accent-text); }
.mimbar-ws-h4 .mimbar-ws-progress { display: block; }

@media (max-width: 640px) {
	.mimbar-ws-h1 .mimbar-ws-next { order: 1; margin-left: 0; border-left: 0; padding-left: 0; text-align: left; width: 100%; }
	.mimbar-ws-h1 .mimbar-ws-list { order: 2; flex-wrap: wrap; justify-content: flex-start; }
	.mimbar-ws-h2 .mimbar-ws-next { position: static; align-self: flex-start; }
	.mimbar-ws-h4 .mimbar-ws-inner { gap: 8px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   COMPACT  (sidebar / narrow column)
   ════════════════════════════════════════════════════════════════════════════ */
.mimbar-ws-compact { max-width: 100%; }

/* ── C1 · Stacked list ────────────────────────────────────────────────────── */
.mimbar-ws-c1 { background: var(--ws-bg); }
.mimbar-ws-c1 .mimbar-ws-inner { padding: 16px 16px 8px; display: flex; flex-direction: column; gap: 12px; }
.mimbar-ws-c1 .mimbar-ws-name  { font-size: 1rem; }
.mimbar-ws-c1 .mimbar-ws-date  { font-size: 0.74rem; }
.mimbar-ws-c1 .mimbar-ws-next  { background: color-mix(in srgb, var(--ws-accent) 14%, transparent); border: 1px solid var(--ws-border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 1px; }
.mimbar-ws-c1 .mimbar-ws-next-name { font-size: 0.92rem; }
.mimbar-ws-c1 .mimbar-ws-count { font-size: 1.5rem; }
.mimbar-ws-c1 .mimbar-ws-list  { display: flex; flex-direction: column; }
.mimbar-ws-c1 .mimbar-ws-prayer{ justify-content: space-between; padding: 9px 10px; border-radius: 9px; }
.mimbar-ws-c1 .mimbar-ws-prayer + .mimbar-ws-prayer { border-top: 1px solid var(--ws-border); }
.mimbar-ws-c1 .mimbar-ws-p-label { font-size: 0.86rem; font-weight: 500; }
.mimbar-ws-c1 .mimbar-ws-p-time  { font-size: 0.92rem; font-weight: 700; }
.mimbar-ws-c1 .mimbar-ws-prayer.is-current { background: var(--ws-accent); border-top-color: transparent; }
.mimbar-ws-c1 .mimbar-ws-prayer.is-current + .mimbar-ws-prayer { border-top-color: transparent; }
.mimbar-ws-c1 .mimbar-ws-prayer.is-current .mimbar-ws-p-label,
.mimbar-ws-c1 .mimbar-ws-prayer.is-current .mimbar-ws-p-time { color: var(--ws-accent-text); }

/* ── C2 · Next-focus ──────────────────────────────────────────────────────── */
.mimbar-ws-c2 { background: linear-gradient(160deg, var(--ws-bg) 0%, var(--ws-bg2) 100%); }
.mimbar-ws-c2 .mimbar-ws-inner { padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; text-align: center; }
.mimbar-ws-c2 .mimbar-ws-head  { display: flex; flex-direction: column; gap: 2px; }
.mimbar-ws-c2 .mimbar-ws-date  { justify-content: center; font-size: 0.74rem; }
.mimbar-ws-c2 .mimbar-ws-next  { display: flex; flex-direction: column; gap: 1px; }
.mimbar-ws-c2 .mimbar-ws-next-name { font-size: 0.95rem; }
.mimbar-ws-c2 .mimbar-ws-count { font-size: clamp(2rem, 9vw, 2.7rem); line-height: 1; }
.mimbar-ws-c2 .mimbar-ws-progress { display: block; }
.mimbar-ws-c2 .mimbar-ws-list  { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.mimbar-ws-c2 .mimbar-ws-prayer{ flex-direction: column; align-items: center; gap: 2px; padding: 9px 6px; border-radius: 10px; background: color-mix(in srgb, var(--ws-text) 8%, transparent); border: 1px solid var(--ws-border); }
.mimbar-ws-c2 .mimbar-ws-p-label { font-size: 0.68rem; color: var(--ws-sub); }
.mimbar-ws-c2 .mimbar-ws-p-time  { font-size: 0.95rem; font-weight: 700; }
.mimbar-ws-c2 .mimbar-ws-prayer.is-current { background: var(--ws-accent); border-color: transparent; }
.mimbar-ws-c2 .mimbar-ws-prayer.is-current .mimbar-ws-p-label,
.mimbar-ws-c2 .mimbar-ws-prayer.is-current .mimbar-ws-p-time { color: var(--ws-accent-text); }

/* ── C3 · Mini grid ───────────────────────────────────────────────────────── */
.mimbar-ws-c3 { background: var(--ws-bg); }
.mimbar-ws-c3 .mimbar-ws-inner { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.mimbar-ws-c3 .mimbar-ws-name  { font-size: 0.95rem; }
.mimbar-ws-c3 .mimbar-ws-date  { font-size: 0.72rem; }
.mimbar-ws-c3 .mimbar-ws-next  { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.mimbar-ws-c3 .mimbar-ws-next-eyebrow { display: inline; }
.mimbar-ws-c3 .mimbar-ws-next-name { font-size: 0.82rem; color: var(--ws-accent); }
.mimbar-ws-c3 .mimbar-ws-count { font-size: 0.95rem; }
.mimbar-ws-c3 .mimbar-ws-list  { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.mimbar-ws-c3 .mimbar-ws-prayer{ justify-content: space-between; padding: 8px 10px; border-radius: 9px; background: var(--ws-bg2); border: 1px solid var(--ws-border); }
.mimbar-ws-c3 .mimbar-ws-p-label { font-size: 0.74rem; color: var(--ws-sub); }
.mimbar-ws-c3 .mimbar-ws-p-time  { font-size: 0.86rem; font-weight: 700; }
.mimbar-ws-c3 .mimbar-ws-prayer.is-current { background: var(--ws-accent); border-color: transparent; }
.mimbar-ws-c3 .mimbar-ws-prayer.is-current .mimbar-ws-p-label,
.mimbar-ws-c3 .mimbar-ws-prayer.is-current .mimbar-ws-p-time { color: var(--ws-accent-text); }

/* ── C4 · Vertical timeline ───────────────────────────────────────────────── */
.mimbar-ws-c4 { background: var(--ws-bg); }
.mimbar-ws-c4 .mimbar-ws-inner { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.mimbar-ws-c4 .mimbar-ws-name  { font-size: 0.98rem; }
.mimbar-ws-c4 .mimbar-ws-date  { font-size: 0.72rem; }
.mimbar-ws-c4 .mimbar-ws-next  { display: flex; flex-direction: column; gap: 1px; }
.mimbar-ws-c4 .mimbar-ws-next-name { font-size: 0.9rem; }
.mimbar-ws-c4 .mimbar-ws-count { font-size: 1.4rem; }
.mimbar-ws-c4 .mimbar-ws-list  { display: flex; flex-direction: column; position: relative; padding-left: 22px; }
.mimbar-ws-c4 .mimbar-ws-list::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--ws-border); }
.mimbar-ws-c4 .mimbar-ws-prayer{ justify-content: space-between; padding: 8px 0; position: relative; }
.mimbar-ws-c4 .mimbar-ws-prayer::before { content: ""; position: absolute; left: -19px; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 50%; background: var(--ws-bg); border: 2px solid var(--ws-sub); }
.mimbar-ws-c4 .mimbar-ws-p-label { font-size: 0.86rem; }
.mimbar-ws-c4 .mimbar-ws-p-time  { font-size: 0.9rem; font-weight: 700; }
.mimbar-ws-c4 .mimbar-ws-prayer.is-current .mimbar-ws-p-label,
.mimbar-ws-c4 .mimbar-ws-prayer.is-current .mimbar-ws-p-time { color: var(--ws-accent); }
.mimbar-ws-c4 .mimbar-ws-prayer.is-current::before { background: var(--ws-accent); border-color: var(--ws-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ws-accent) 28%, transparent); }