/* Prayer Times Indonesia — horizontal layout
   Matches design reference 2026-07-15 12.40.30 (Coach).
   No external dependencies. CSS custom properties for theming.
*/

.pt-widget {
	/* Only structural defaults here. Color values come from :root so user
	   settings (Settings → Prayer Times) can override cleanly. */
	--pt-fg: #1a1a1a;
	--pt-fg-muted: #6b6b6b;
	--pt-fg-past: #D6E5CF;
	--pt-next-badge-bg: #1a3d2e;
	--pt-next-badge-fg: #ffffff;
	--pt-loc-fg: #ffffff;
	--pt-radius: 10px;
	--pt-gap: 10px;
	--pt-card-pad-y: 16px;
	--pt-card-pad-x: 14px;
	--pt-name-size: 11px;
	--pt-time-size: 22px;

	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--pt-fg);
	background: #ffffff;
	padding: 4px 0 12px;
	max-width: 100%;
}

.pt-widget *,
.pt-widget *::before,
.pt-widget *::after { box-sizing: border-box; }

/* ---------- header ---------- */
.pt-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 0 4px 10px;
}
.pt-header__title {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--pt-fg);
}
.pt-header__right {
	text-align: right;
}
.pt-header__date {
	font-size: 11px;
	color: var(--pt-fg-muted);
}
.pt-header__date-hijri { color: var(--pt-fg-muted); }
.pt-header__date-sep { margin: 0 4px; opacity: .5; }
.pt-header__countdown {
	font-size: 12px;
	color: var(--pt-fg-muted);
	text-align: right;
	line-height: 1.4;
}
.pt-header__countdown-label { margin-right: 4px; }
.pt-header__countdown-name {
	color: var(--pt-accent);
	font-weight: 800;
	letter-spacing: 0.02em;
}
.pt-header__countdown-sep { margin: 0 6px; opacity: .5; }
.pt-header__countdown-time { font-variant-numeric: tabular-nums; }

/* Countdown inside the location card (dark green) — needs light text. */
.pt-card--loc .pt-card__countdown {
	margin-top: 4px;
	font-size: 10px;
	line-height: 1.3;
	color: var(--pt-loc-fg);
	white-space: nowrap;
}
.pt-card--loc .pt-card__countdown-time { font-variant-numeric: tabular-nums; opacity: 0.95; }
.pt-card--loc .pt-card__countdown-towards { opacity: 0.7; margin: 0 4px; }
.pt-card--loc .pt-card__countdown-name {
	color: var(--pt-loc-fg);
	font-weight: 800;
	letter-spacing: 0.04em;
	opacity: 0.95;
}

/* ---------- row of cards ---------- */
.pt-row {
	display: grid;
	grid-template-columns: repeat(5, 1fr) 1.15fr;  /* 5 prayer cards + wider location card */
	gap: var(--pt-gap);
}

/* ---------- base card ---------- */
.pt-card {
	position: relative;
	background: #ffffff;
	border: 1px solid #e9e9e9;
	border-radius: var(--pt-radius);
	padding: var(--pt-card-pad-y) var(--pt-card-pad-x);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 86px;
	transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.pt-card__name {
	font-size: var(--pt-name-size);
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--pt-fg-muted);
}
.pt-card__time {
	font-size: var(--pt-time-size);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	line-height: 1.1;
	margin-top: 6px;
}

/* ---------- past prayer ---------- */
.pt-card--past { opacity: 0.7; }
.pt-card--past .pt-card__time,
.pt-card--past .pt-card__name { color: var(--pt-fg-past); }

/* ---------- current prayer (just passed — e.g. Isya after Ashar until Subuh) ----------
   Uses --pt-current-bg (light tinted) + --pt-current-fg (the prayer name & time color,
   defaults to accent orange). Distinct from --pt-card--next so the user always knows
   which is "current" vs "next". */
.pt-card--current {
	background: var(--pt-current-bg);
	border-color: var(--pt-current-bg);
}
.pt-card--current .pt-card__name { color: var(--pt-current-fg); font-weight: 700; }
.pt-card--current .pt-card__time { color: var(--pt-current-fg); }

/* ---------- next prayer (green) ---------- */
.pt-card--next {
	background: var(--pt-next-bg);
	border-color: var(--pt-next-bg);
}
.pt-card--next .pt-card__name { color: var(--pt-next-fg); }
.pt-card--next .pt-card__time { color: var(--pt-next-fg); }
.pt-card__badge {
	position: absolute;
	top: 8px;
	right: 8px;
	background: var(--pt-next-badge-bg);
	color: var(--pt-next-badge-fg);
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	padding: 0;
}

/* ---------- future prayer (orange time) ---------- */
.pt-card--future .pt-card__time { color: var(--pt-accent); }
.pt-card--future .pt-card__name  { color: var(--pt-fg-muted); }

/* ---------- location card (last slot) ---------- */
.pt-card--loc {
	background: var(--pt-loc-bg);
	border-color: var(--pt-loc-bg);
	color: var(--pt-loc-fg);
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
}
.pt-card__pin {
	color: var(--pt-loc-fg);
	display: inline-flex;
	flex: 0 0 auto;
}
.pt-card__loc { min-width: 0; line-height: 1.15; }
.pt-card__city {
	font-size: 14px;
	font-weight: 800;
	letter-spacing: -0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pt-card__region {
	font-size: 10px;
	opacity: 0.78;
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pt-card__maps,
.pt-card__relocate {
	/* Legacy classes — no longer rendered, kept commented to avoid breaking
	   any custom CSS that targeted them. */
	display: none;
}

/* ---------- error state ---------- */
.pt-widget--error .pt-error {
	background: #fff7e6;
	border: 1px solid #f0c674;
	color: #6b4d00;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 13px;
}

/* ---------- responsive ---------- */
@media (max-width: 880px) {
	.pt-row {
		grid-template-columns: repeat(3, 1fr);
	}
	.pt-card--loc {
		grid-column: 1 / -1;
		flex-direction: row;
	}
}
@media (max-width: 520px) {
	.pt-row { grid-template-columns: repeat(2, 1fr); }
	.pt-card--loc { grid-column: 1 / -1; }
	.pt-header { flex-direction: column; gap: 4px; }
	.pt-header__countdown { text-align: left; }
	.pt-card__time { font-size: 18px; }
}