#dpt-widget-root, #dpt-widget-root * { box-sizing: border-box; }

/* ----------------------------------------------------------------
 * DawaNet brand palette — matches the DawaNet banners:
 * cream/white is the dominant field, navy is used for headings and
 * thin accent bars/footers, orange carries the highlights (numbers,
 * icons, labels). This is the flip of the old "orange text on a
 * solid navy field" look.
 * ---------------------------------------------------------------- */
:root {
	--dpt-navy: #152648;
	--dpt-navy-dark: #0e1b34;
	--dpt-navy-light: #24406f;
	--dpt-orange: #f4841f;
	--dpt-orange-dark: #dd6f0f;
	--dpt-orange-pale: #fdeee0;
	--dpt-cream: #fdf7ef;
	--dpt-cream-dim: #f5ead9;
}

#dpt-widget-root {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------------- Top banner ---------------- */

.dpt-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	background: var(--dpt-cream);
	color: var(--dpt-navy-dark);
	padding: 14px 24px;
	border-top: 3px solid var(--dpt-orange);
	border-bottom: 3px solid var(--dpt-navy);
}

.dpt-banner-left { min-width: 220px; }
.dpt-mosque-name { font-size: 13px; opacity: 0.7; margin: 0 0 2px; color: var(--dpt-navy); font-weight: 600; }
.dpt-next-label { font-size: 15px; font-weight: 800; letter-spacing: 0.3px; margin: 0 0 4px; color: var(--dpt-navy-dark); }
.dpt-see-btn {
	background: none; border: none; color: var(--dpt-orange-dark); font-size: 12px;
	font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
	cursor: pointer; padding: 0;
}
.dpt-see-btn:hover { text-decoration: underline; }

.dpt-countdown { display: flex; gap: 18px; }
.dpt-count-cell { text-align: center; min-width: 44px; }
.dpt-count-num { font-size: 26px; font-weight: 800; line-height: 1; color: var(--dpt-orange); }
.dpt-count-unit { font-size: 11px; opacity: 0.75; letter-spacing: 0.5px; color: var(--dpt-navy); font-weight: 700; }

.dpt-donate {
	background: var(--dpt-orange); color: #fff; font-weight: 700; border: none;
	padding: 12px 22px; border-radius: 4px; cursor: pointer; font-size: 13px;
	text-decoration: none; display: inline-block; white-space: nowrap;
	text-transform: uppercase; letter-spacing: 0.3px;
}
.dpt-donate:hover { background: var(--dpt-orange-dark); }

/* ---------------- Modal ---------------- */

.dpt-modal {
	display: none;
	position: fixed; inset: 0; z-index: 99999;
	background: rgba(14, 27, 52, 0.85);
	align-items: flex-start; justify-content: center;
	overflow-y: auto; padding: 60px 16px;
}
.dpt-modal.dpt-open { display: flex; }

.dpt-modal-inner {
	background: var(--dpt-cream); color: var(--dpt-navy-dark); max-width: 960px; width: 100%;
	border-radius: 10px; position: relative; overflow: hidden;
	display: flex; flex-wrap: wrap;
	box-shadow: 0 20px 60px rgba(0,0,0,0.35);
	border-top: 4px solid var(--dpt-orange);
}

.dpt-modal-close {
	position: absolute; top: 14px; right: 16px; background: none; border: none;
	color: var(--dpt-navy-dark); font-size: 24px; cursor: pointer; line-height: 1; z-index: 2;
}

/* Left panel: countdown — now a light panel with a navy divider,
   instead of a solid navy fill */
.dpt-modal-left {
	background: var(--dpt-cream-dim); color: var(--dpt-navy-dark); flex: 1 1 300px;
	padding: 36px 30px; text-align: center;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	min-width: 280px;
	border-right: 1px solid rgba(21,38,72,0.12);
}
.dpt-modal-icon {
	font-size: 26px; margin-bottom: 12px; width: 56px; height: 56px; line-height: 56px;
	border-radius: 50%; background: var(--dpt-orange-pale); border: 2px solid var(--dpt-orange);
	display: inline-flex; align-items: center; justify-content: center;
}
.dpt-modal-date { font-size: 13px; opacity: 0.75; margin: 0; color: var(--dpt-navy); font-weight: 600; }
.dpt-modal-mosque-name { font-size: 13px; opacity: 0.75; margin: 0 0 18px; color: var(--dpt-navy); font-weight: 600; }

.dpt-modal-countdown { display: flex; gap: 22px; margin-bottom: 14px; }
.dpt-mcount-cell { text-align: center; min-width: 50px; }
.dpt-mcount-num { font-size: 40px; font-weight: 800; line-height: 1; color: var(--dpt-orange); }
.dpt-mcount-unit { font-size: 11px; opacity: 0.8; letter-spacing: 0.6px; color: var(--dpt-navy); font-weight: 700; }

.dpt-modal-until { font-size: 17px; font-weight: 800; margin: 4px 0 2px; color: var(--dpt-navy-dark); }
.dpt-modal-current { font-size: 13px; opacity: 0.7; margin: 0; }

/* Right panel: table */
.dpt-modal-right {
	flex: 1.4 1 420px; padding: 36px 34px; min-width: 300px; position: relative;
}

.dpt-modal-title {
	font-size: 26px; font-weight: 800; line-height: 1.2; margin: 0 0 18px; color: var(--dpt-navy-dark);
}

.dpt-date-nav {
	display: flex; align-items: center; gap: 12px; margin-bottom: 6px;
}
.dpt-date-label {
	background: var(--dpt-orange); color: #fff; padding: 8px 14px; border-radius: 4px; font-weight: 700; font-size: 13px;
}
.dpt-date-nav button {
	background: none; border: none; color: var(--dpt-navy); font-size: 18px; cursor: pointer;
}
.dpt-hijri { font-size: 12px; opacity: 0.65; margin: 0 0 18px; direction: rtl; color: var(--dpt-navy); }

table.dpt-table { width: 100%; border-collapse: collapse; }
table.dpt-table th, table.dpt-table td {
	text-align: left; padding: 12px 10px; border-bottom: 1px solid rgba(21,38,72,0.1);
	font-size: 14px;
}
table.dpt-table thead th {
	background: var(--dpt-navy); color: #fff; font-weight: 700; text-transform: uppercase;
	font-size: 11px; letter-spacing: 0.4px; padding: 10px;
}
table.dpt-table td.dpt-prayer-name { font-weight: 700; font-size: 15px; color: var(--dpt-navy-dark); }
table.dpt-table td.dpt-time { color: var(--dpt-orange-dark); font-weight: 700; }
table.dpt-table tbody tr:nth-child(odd) { background: var(--dpt-orange-pale); }

.dpt-loading, .dpt-error { padding: 20px 0; opacity: 0.8; }
.dpt-error { color: #b3261e; }

/* ---------------- Next-Friday Jummah footer ----------------
   A navy strip across the bottom of the modal, mirroring the navy
   bar with orange accents already used on the DawaNet banners. This
   always shows the upcoming Friday's Jummah time(s), regardless of
   which day is selected in the table above. */
.dpt-modal-footer {
	flex: 0 0 100%;
	background: var(--dpt-navy);
	color: #fff;
	display: flex;
	flex-wrap: wrap;
}
.dpt-jummah-block {
	flex: 1 1 220px;
	padding: 16px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.dpt-jummah-block + .dpt-jummah-block {
	border-left: 1px solid rgba(255,255,255,0.15);
}
.dpt-jummah-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.75; }
.dpt-jummah-name { font-size: 14px; font-weight: 700; margin-top: 2px; }
.dpt-jummah-time { font-size: 17px; font-weight: 800; color: var(--dpt-orange); text-align: right; line-height: 1.35; }
.dpt-jum-line { display: block; white-space: nowrap; }
.dpt-jum-name { font-size: 12px; font-weight: 600; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.4px; }

@media (max-width: 640px) {
	.dpt-banner { flex-direction: column; align-items: flex-start; }
	.dpt-countdown { align-self: flex-start; }
	.dpt-modal-inner { flex-direction: column; }
	.dpt-modal-left { padding: 28px 20px; border-right: none; border-bottom: 1px solid rgba(21,38,72,0.12); }
	.dpt-modal-right { padding: 28px 20px; }
	.dpt-jummah-block { padding: 14px 20px; }
	.dpt-jummah-block + .dpt-jummah-block { border-left: none; border-top: 1px solid rgba(255,255,255,0.15); }
}

/* ================================================================
 * Prayer-times card   [dawanet_prayer_card]
 * An always-visible version of the popup: next-prayer countdown on
 * top, timetable in the middle, upcoming Jumu'ah times underneath.
 *
 * Colours are variables, so a theme or page can restyle the card
 * without touching this file, e.g.
 *   .my-section .dpt-card { --dpt-card-head: #0F4C3A; --dpt-card-accent: #8B2E2E; }
 * The font is inherited from the surrounding page.
 * ================================================================ */

.dpt-card-root { width: 100%; }
.dpt-card-root:empty { display: none; }

.dpt-card {
	--dpt-card-bg: var(--dpt-cream);
	--dpt-card-band: var(--dpt-cream-dim);
	--dpt-card-ink: var(--dpt-navy-dark);
	--dpt-card-muted: rgba(21, 38, 72, 0.65);
	--dpt-card-head: var(--dpt-navy);
	--dpt-card-head-ink: #ffffff;
	--dpt-card-accent: var(--dpt-orange);
	--dpt-card-time: var(--dpt-orange-dark);
	--dpt-card-stripe: var(--dpt-orange-pale);
	--dpt-card-next: #fbd9b5;
	--dpt-card-top: var(--dpt-orange);
	--dpt-card-foot: var(--dpt-navy);
	--dpt-card-foot-ink: #ffffff;
	--dpt-card-foot-time: var(--dpt-orange);

	display: flex;
	flex-direction: column;
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	text-align: left;
	line-height: 1.4;
	background: var(--dpt-card-bg);
	color: var(--dpt-card-ink);
	border-top: 4px solid var(--dpt-card-top);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.dpt-card *, .dpt-card *::before, .dpt-card *::after { box-sizing: border-box; }
.dpt-card [hidden] { display: none !important; }

/* top band: next prayer + live countdown */
.dpt-card .dpt-card-band {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
	gap: 12px 16px; padding: 18px 24px;
	background: var(--dpt-card-band);
	border-bottom: 1px solid rgba(21, 38, 72, 0.12);
}
.dpt-card .dpt-card-up { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dpt-card .dpt-card-kicker {
	font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
	color: var(--dpt-card-muted);
}
.dpt-card .dpt-card-name { font-size: 28px; font-weight: 800; line-height: 1.1; color: var(--dpt-card-head); }
.dpt-card .dpt-card-at { font-size: 13px; color: var(--dpt-card-muted); }
.dpt-card .dpt-card-count { display: flex; gap: 16px; }
.dpt-card .dpt-card-count div { text-align: center; min-width: 46px; }
.dpt-card .dpt-card-count b {
	display: block; font-size: 32px; font-weight: 800; line-height: 1;
	color: var(--dpt-card-accent); font-variant-numeric: tabular-nums;
}
.dpt-card .dpt-card-count small {
	display: block; margin-top: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px;
	color: var(--dpt-card-muted);
}

/* main: title, date arrows, timetable */
.dpt-card .dpt-card-main { padding: 20px 24px 22px; }
.dpt-card .dpt-card-title {
	margin: 0 0 12px; font-size: 28px; font-weight: 800; line-height: 1.15; color: var(--dpt-card-head);
}
.dpt-card .dpt-card-nav { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.dpt-card .dpt-card-date {
	background: var(--dpt-card-accent); color: #ffffff; padding: 7px 14px; border-radius: 3px;
	font-size: 13px; font-weight: 700; line-height: 1.3;
}
.dpt-card .dpt-card-hijri { min-height: 1.4em; margin: 0 0 14px; font-size: 12.5px; color: var(--dpt-card-muted); }
.dpt-card .dpt-card-status { margin: 0; padding: 18px 0; font-size: 14px; color: var(--dpt-card-muted); }

.dpt-card table.dpt-card-table { width: 100%; margin: 0; border: 0 !important; border-collapse: collapse; background: transparent; }
.dpt-card .dpt-card-table th,
.dpt-card .dpt-card-table td {
	padding: 11px 12px; text-align: left; vertical-align: middle;
	font-size: 14.5px; line-height: 1.3; text-transform: none; letter-spacing: 0;
	border: 0 !important; border-bottom: 1px solid rgba(21, 38, 72, 0.1) !important;
	background: transparent !important;
}
.dpt-card .dpt-card-table thead th {
	padding: 10px 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
	background: var(--dpt-card-head) !important; color: var(--dpt-card-head-ink) !important;
	border-bottom: 0 !important;
}
.dpt-card .dpt-card-table tbody th { font-size: 15px; font-weight: 700; color: var(--dpt-card-ink); }
.dpt-card .dpt-card-table tbody td { font-weight: 700; color: var(--dpt-card-time); font-variant-numeric: tabular-nums; }
.dpt-card .dpt-card-table tbody tr:nth-child(odd) { background: var(--dpt-card-stripe) !important; }
.dpt-card .dpt-card-table tbody tr.dpt-is-next { background: var(--dpt-card-next) !important; }
.dpt-card .dpt-card-table tbody tr.dpt-is-next th { box-shadow: inset 4px 0 0 var(--dpt-card-accent); }

/* footer strip: the upcoming Friday's Jumu'ah times */
.dpt-card .dpt-card-foot { display: flex; flex-wrap: wrap; margin-top: auto; background: var(--dpt-card-foot); }
.dpt-card .dpt-card-foot:empty { display: none; }
.dpt-card .dpt-card-jum {
	flex: 1 1 220px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 6px 12px; padding: 14px 20px;
}
.dpt-card .dpt-card-jum + .dpt-card-jum { border-left: 1px solid rgba(255, 255, 255, 0.16); }
.dpt-card .dpt-card-jum small {
	display: block; font-size: 10.5px; letter-spacing: 0.8px; text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}
.dpt-card .dpt-card-jum strong { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 700; color: var(--dpt-card-foot-ink); }
.dpt-card .dpt-card-jum em { font-style: normal; text-align: right; font-size: 16px; font-weight: 800; white-space: nowrap; color: var(--dpt-card-foot-time); }

@media (max-width: 520px) {
	.dpt-card .dpt-card-band { padding: 16px 18px; }
	.dpt-card .dpt-card-main { padding: 18px 18px 20px; }
	.dpt-card .dpt-card-count { gap: 12px; }
	.dpt-card .dpt-card-count b { font-size: 28px; }
	.dpt-card .dpt-card-table th, .dpt-card .dpt-card-table td { padding: 10px 8px; }
	.dpt-card .dpt-card-jum { padding: 14px 18px; }
	.dpt-card .dpt-card-jum + .dpt-card-jum { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
}

/* Full-year calendar download button */
.dpt-download-wrap { margin-top: 16px; text-align: center; }
.dpt-download-btn {
	display: inline-block; padding: 10px 20px; border-radius: 999px;
	background: var(--dpt-orange, #f58220); color: #fff !important; font-weight: 700; font-size: 14px;
	text-decoration: none !important; line-height: 1.3; transition: filter .15s;
}
.dpt-download-btn:hover, .dpt-download-btn:focus { filter: brightness(1.08); color: #fff !important; }