/**
 * Simple Prayer Times — front-end styles.
 *
 * Colours and fonts inherit from the active theme via Elementor's global
 * design tokens (with sensible fallbacks), so the table matches the site
 * automatically. Override any --spt-* variable in your theme to recolour.
 */

.spt-card,
.spt-monthly,
.spt-jummah {
	--spt-primary: var( --e-global-color-primary, #05224d );
	--spt-secondary: var( --e-global-color-secondary, #2861b1 );
	--spt-accent: var( --e-global-color-accent, #f6db30 );
	--spt-text: var( --e-global-color-text, #012648 );
	--spt-shade: var( --e-global-color-424d020, #f5f2ea );
	--spt-surface: var( --e-global-color-351c0f5, #f9f7f2 );
	--spt-white: #fff;
	--spt-border: color-mix( in srgb, var( --spt-primary ) 14%, transparent );
	--spt-heading-font: var( --e-global-typography-primary-font-family, "DM Serif Display", Georgia, serif );
	--spt-radius: 12px;

	color: var( --spt-text );
}

/* color-mix fallback for older browsers */
@supports not ( color: color-mix( in srgb, red, blue ) ) {
	.spt-card,
	.spt-monthly,
	.spt-jummah {
		--spt-border: rgba( 5, 34, 77, 0.14 );
	}
}

/* ---------- Monthly table ---------- */
.spt-monthly-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.9rem;
}

.spt-site-name {
	margin: 0;
	font-family: var( --spt-heading-font );
	font-size: clamp( 1.15rem, 1rem + 1vw, 1.6rem );
	font-weight: 500;
	color: var( --spt-primary );
	line-height: 1.2;
}

.spt-current-month {
	color: var( --spt-primary );
}

.spt-monthly-controls {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.spt-month-form {
	margin: 0;
}

.spt-month-select {
	border: 1px solid var( --spt-border );
	border-radius: 8px;
	padding: 0.4rem 0.7rem;
	background: var( --spt-white );
	color: var( --spt-primary );
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.spt-month-select:focus-visible {
	outline: 2px solid var( --spt-secondary );
	outline-offset: 1px;
}

/* Selector: scrollable month pills */
.spt-monthly .spt-pills {
	display: flex;
	gap: 0.3rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
	padding-bottom: 0.15rem;
}

.spt-monthly .spt-pill {
	border: 1px solid var( --spt-border );
	background: var( --spt-white );
	color: var( --spt-primary );
	border-radius: 999px;
	padding: 0.32rem 0.72rem;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.3;
	height: auto;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.12s ease;
}

.spt-monthly .spt-pill:hover {
	background: var( --spt-shade );
}

.spt-monthly .spt-pill.is-active {
	background: var( --spt-primary );
	color: #fff;
	border-color: var( --spt-primary );
}

/* Selector: arrows (+ dropdown or label) */
.spt-month-form.spt-sel-combo,
.spt-month-form.spt-sel-arrows {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.spt-monthly .spt-nav {
	border: 1px solid var( --spt-border );
	background: var( --spt-white );
	color: var( --spt-primary );
	width: 2.1rem;
	height: 2.1rem;
	padding: 0;
	border-radius: 8px;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.12s ease;
}

.spt-monthly .spt-nav:hover {
	background: var( --spt-shade );
}

.spt-nav-label {
	font-family: var( --spt-heading-font );
	font-size: 1.15rem;
	color: var( --spt-primary );
	min-width: 7rem;
	text-align: center;
}

/* Matches the site's form-submit buttons. Scoped under .spt-monthly so it
   outranks themes that style raw <button> elements (e.g. Elementor kits). */
.spt-monthly .spt-print {
	border: 0;
	border-radius: 3px;
	background: var( --spt-secondary );
	color: #fff;
	padding: 0.5rem 1.1rem;
	font: inherit;
	font-weight: 500;
	line-height: 1.4;
	height: auto;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba( 18, 25, 97, 0.08 );
	transition: background 0.15s ease;
}

.spt-monthly .spt-print:hover {
	background: color-mix( in srgb, var( --spt-secondary ) 88%, #000 );
}

.spt-table-wrapper {
	border: 1px solid var( --spt-border );
	border-radius: var( --spt-radius );
	overflow: hidden;
	box-shadow: 0 1px 2px rgba( 5, 34, 77, 0.04 ), 0 8px 24px -16px rgba( 5, 34, 77, 0.25 );
}

.spt-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.spt-timetable {
	width: 100%;
	margin: 0; /* override theme default table margin (leaves a gap inside the wrapper) */
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
	font-size: 0.9rem;
}

.spt-timetable th,
.spt-timetable td {
	padding: 0.5rem 0.4rem;
	text-align: center;
	white-space: nowrap;
}

/* Prayer-name group header */
.spt-timetable .spt-group-head th {
	background: var( --spt-primary );
	color: var( --spt-white );
	font-weight: 600;
	letter-spacing: 0.02em;
	padding-block: 0.7rem;
	border-right: 1px solid rgba( 255, 255, 255, 0.12 );
}

.spt-timetable .spt-group-head th:last-child {
	border-right: 0;
}

/* Column sub-header (Date / Day / Begins / Iqamah …) */
.spt-timetable .spt-sub-head th {
	background: var( --spt-shade );
	color: var( --spt-primary );
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-bottom: 1px solid var( --spt-border );
}

.spt-timetable tbody td {
	border-bottom: 1px solid var( --spt-border );
}

.spt-timetable tbody tr:last-child td {
	border-bottom: 0;
}

.spt-timetable .spt-date,
.spt-timetable .spt-day {
	text-align: left;
	font-weight: 600;
	color: var( --spt-primary );
}

.spt-timetable .spt-hijri-inline {
	display: block;
	font-weight: 400;
	font-size: 0.75rem;
	color: var( --spt-secondary );
}

/* Iqamah (jamah) columns — the emphasised time */
.spt-timetable td.spt-iqamah {
	color: var( --spt-secondary );
	font-weight: 700;
	background: color-mix( in srgb, var( --spt-secondary ) 6%, transparent );
}

/* Zebra + hover */
.spt-timetable tbody tr:nth-child( even ) td {
	background: var( --spt-surface );
}

.spt-timetable tbody tr:nth-child( even ) td.spt-iqamah {
	background: color-mix( in srgb, var( --spt-secondary ) 9%, transparent );
}

.spt-timetable tbody tr:hover td {
	background: var( --spt-shade );
}

/* Friday rows */
.spt-timetable tr.spt-friday .spt-day {
	color: var( --spt-secondary );
}

/* Today row — gold tint + badge (override zebra striping) */
.spt-timetable tbody tr.spt-today td,
.spt-timetable tbody tr.spt-today:nth-child( even ) td {
	background: color-mix( in srgb, var( --spt-accent ) 18%, var( --spt-white ) );
}

.spt-today-badge {
	display: inline-block;
	margin-left: 0.4rem;
	padding: 0.05rem 0.4rem;
	border-radius: 999px;
	background: var( --spt-accent );
	color: var( --spt-primary );
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	vertical-align: middle;
}

/* Jummah: expandable Friday cell + session rows */
.spt-timetable .spt-fri-jummah {
	background: color-mix( in srgb, var( --spt-secondary ) 12%, transparent );
	color: var( --spt-secondary );
	font-weight: 700;
	cursor: pointer;
	user-select: none;
}

.spt-timetable .spt-fri-jummah:hover {
	background: color-mix( in srgb, var( --spt-secondary ) 18%, transparent );
}

.spt-chev {
	display: inline-block;
	font-size: 0.8em;
	transition: transform 0.15s ease;
}

.spt-timetable tr.is-open .spt-chev {
	transform: rotate( 180deg );
}

.spt-timetable .spt-jhead td {
	background: var( --spt-shade );
	color: var( --spt-primary );
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.spt-timetable .spt-jsession td {
	background: color-mix( in srgb, var( --spt-secondary ) 4%, transparent );
}

.spt-timetable .spt-jpad {
	background: transparent;
}

.spt-timetable .spt-jname {
	text-align: left;
	font-weight: 600;
	color: var( --spt-primary );
}

.spt-timetable .spt-jadhan {
	color: var( --spt-primary );
}

.spt-timetable .spt-jloc {
	text-align: left;
	color: var( --spt-muted, #6b7280 );
}

.spt-timetable .spt-jloc a {
	color: var( --spt-secondary );
	text-decoration: none;
}

.spt-timetable .spt-jloc a:hover {
	text-decoration: underline;
}

/* Legacy per-prayer shortcodes (home card): highlight the next prayer, dim
   prayers that have already passed. Class names match the old plugin's markup. */
.dpt_start.nextPrayer,
.nextPrayer .dpt_jamah,
.scFajr.nextPrayer,
.scZuhr.nextPrayer,
.scAsr.nextPrayer,
.scMaghrib.nextPrayer,
.scIsha.nextPrayer {
	color: var( --e-global-color-accent, #f6db30 ) !important;
	font-weight: 700;
}

.dpt_start.prayerFinished,
.prayerFinished .dpt_jamah {
	opacity: 0.55;
}

/* ---------- Today card ---------- */
.spt-card {
	border: 1px solid var( --spt-border );
	border-radius: var( --spt-radius );
	padding: 1.25rem 1.5rem;
	background: var( --spt-white );
	max-width: 28rem;
	box-shadow: 0 8px 24px -18px rgba( 5, 34, 77, 0.3 );
}

.spt-card-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.spt-card-title {
	margin: 0;
	font-family: var( --spt-heading-font );
	font-weight: 500;
	font-size: 1.25rem;
	color: var( --spt-primary );
}

.spt-card-dates {
	display: flex;
	flex-direction: column;
	text-align: right;
	font-size: 0.85rem;
	color: var( --spt-secondary );
}

.spt-next {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: var( --spt-shade );
	border-radius: 10px;
	padding: 0.6rem 0.9rem;
	margin-bottom: 1rem;
	border-left: 4px solid var( --spt-accent );
}

.spt-next-label {
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --spt-secondary );
	font-weight: 700;
}

.spt-next-name {
	font-weight: 700;
	color: var( --spt-primary );
}

.spt-next-time {
	margin-left: auto;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var( --spt-primary );
}

.spt-next-countdown {
	color: var( --spt-secondary );
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
}

.spt-card-table {
	width: 100%;
	border-collapse: collapse;
}

.spt-card-table th,
.spt-card-table td {
	padding: 0.55rem 0.5rem;
	text-align: left;
	border-bottom: 1px solid var( --spt-border );
	font-variant-numeric: tabular-nums;
}

.spt-card-table tbody tr:last-child th,
.spt-card-table tbody tr:last-child td {
	border-bottom: 0;
}

.spt-card-table thead th {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --spt-secondary );
	font-weight: 700;
}

.spt-card-table .spt-iqamah,
.spt-card-table thead th:last-child {
	text-align: right;
	color: var( --spt-secondary );
	font-weight: 700;
}

.spt-card-table .spt-prayer-name {
	font-weight: 600;
	color: var( --spt-primary );
}

.spt-row-next td,
.spt-row-next th {
	background: color-mix( in srgb, var( --spt-accent ) 16%, var( --spt-white ) );
}

.spt-row-next .spt-prayer-name {
	color: var( --spt-primary );
}

/* ---------- Jummah ---------- */
.spt-jummah-title {
	margin: 0 0 0.5rem;
	font-family: var( --spt-heading-font );
	font-weight: 500;
	font-size: 1.2rem;
	color: var( --spt-primary );
}

.spt-jummah-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.spt-jummah-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	border: 1px solid var( --spt-border );
	border-radius: 10px;
	padding: 0.6rem 0.9rem;
	background: var( --spt-white );
}

.spt-jummah-name {
	font-weight: 600;
	color: var( --spt-primary );
}

.spt-jummah-time {
	color: var( --spt-secondary );
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.spt-jummah-location {
	margin-left: auto;
	color: var( --spt-secondary );
	font-size: 0.9rem;
}

.spt-jummah-location a {
	color: inherit;
}

/* ---------- Jummah band (beneath the monthly table) ---------- */
.spt-jummah-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.9rem;
	margin-top: 0.9rem;
	padding: 0.75rem 1rem;
	background: var( --spt-shade );
	border: 1px solid var( --spt-border );
	border-radius: var( --spt-radius );
}

.spt-jb-label {
	font-family: var( --spt-heading-font );
	font-weight: 500;
	font-size: 1.05rem;
	color: var( --spt-primary );
}

.spt-jb-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.spt-jb-item {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	background: var( --spt-white );
	border: 1px solid var( --spt-border );
	border-radius: 999px;
	padding: 0.3rem 0.8rem;
	font-size: 0.9rem;
	white-space: nowrap;
}

.spt-jb-name {
	font-weight: 600;
	color: var( --spt-primary );
}

.spt-jb-time {
	color: var( --spt-secondary );
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.spt-jb-loc {
	color: var( --spt-text );
	opacity: 0.7;
	font-size: 0.82rem;
}

a.spt-jb-loc {
	text-decoration: none;
}

a.spt-jb-loc:hover {
	text-decoration: underline;
}

/* ---------- Responsive ---------- */
@media ( max-width: 782px ) {
	.spt-timetable th,
	.spt-timetable td {
		padding: 0.4rem 0.3rem;
		font-size: 0.82rem;
	}
}

@media ( max-width: 480px ) {
	.spt-timetable {
		font-size: 0.76rem;
	}

	.spt-timetable th,
	.spt-timetable td {
		padding: 0.35rem 0.25rem;
	}
}

@media print {
	.spt-monthly-controls,
	.spt-print,
	.spt-month-form {
		display: none !important;
	}

	.spt-table-wrapper {
		box-shadow: none;
	}
}