.ptw-wrap {
	max-width: 900px;
	margin: 0 auto;
	padding: 12px 16px 60px;
}

.ptw-breadcrumb {
	font-size: 13px;
	color: #666;
	margin-bottom: 12px;
}

.ptw-breadcrumb a {
	text-decoration: none;
	color: #1a6b4a;
}

.ptw-card {
	background: #0f4c3a;
	background: linear-gradient(135deg, #0f4c3a 0%, #146b52 100%);
	color: #fff;
	border-radius: 14px;
	padding: 24px;
	margin: 16px 0 28px;
}

.ptw-date {
	text-align: center;
	font-size: 14px;
	opacity: .85;
	margin-bottom: 18px;
}

.ptw-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

@media (min-width: 600px) {
	.ptw-grid {
		grid-template-columns: repeat(6, 1fr);
	}
}

.ptw-slot {
	background: rgba(255,255,255,0.12);
	border-radius: 10px;
	padding: 14px 6px;
	text-align: center;
}

.ptw-slot.ptw-active {
	background: #f2b632;
	color: #1a1a1a;
}

.ptw-slot-name {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .05em;
	opacity: .85;
	margin-bottom: 6px;
}

.ptw-slot.ptw-active .ptw-slot-name {
	opacity: 1;
}

.ptw-slot-time {
	font-size: 18px;
	font-weight: 700;
}

.ptw-next-prayer {
	text-align: center;
	margin-top: 16px;
	font-size: 14px;
	opacity: .9;
	min-height: 18px;
}

.ptw-meta {
	text-align: center;
	margin-top: 14px;
	font-size: 12px;
	opacity: .7;
}

.ptw-month-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.ptw-month-table th,
.ptw-month-table td {
	border: 1px solid #e2e2e2;
	padding: 8px 6px;
	text-align: center;
}

.ptw-month-table th {
	background: #f5f5f5;
}

.ptw-country-list,
.ptw-city-list {
	list-style: none;
	margin: 20px 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 10px;
}

.ptw-country-list li,
.ptw-city-list li {
	background: #f7f7f7;
	border-radius: 8px;
	padding: 12px 14px;
}

.ptw-country-list a,
.ptw-city-list a {
	text-decoration: none;
	color: #0f4c3a;
	font-weight: 600;
}

.ptw-count {
	color: #888;
	font-size: 12px;
}

.ptw-embed-hint {
	font-size: 13px;
	color: #777;
	margin-top: 20px;
}

.ptw-embed-hint code {
	background: #f0f0f0;
	padding: 2px 6px;
	border-radius: 4px;
}

.ptw-locate {
	margin: 20px 0;
}

.ptw-locate-inline {
	background: #f7f7f7;
	border-radius: 10px;
	padding: 16px 18px;
}

.ptw-locate-button {
	background: #0f4c3a;
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.ptw-locate-button:hover {
	background: #146b52;
}

.ptw-locate-status {
	margin-top: 10px;
	font-size: 13px;
	color: #555;
	min-height: 16px;
}

.ptw-search-box {
	position: relative;
	margin: 18px 0 28px;
}

.ptw-search-field {
	display: flex;
	align-items: stretch;
	background: #fff;
	border: 1.5px solid #4c9b7f;
	border-radius: 999px;
	overflow: hidden;
}

.ptw-search-field:focus-within {
	border-color: #146b52;
	box-shadow: 0 0 0 3px rgba(20, 107, 82, 0.12);
}

.ptw-search-input {
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
	padding: 12px 16px;
	font-size: 15px;
	border: none;
	background: transparent;
}

.ptw-search-input:focus {
	outline: none;
}

.ptw-search-btn {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0 22px;
	border: none;
	border-left: 1.5px solid #4c9b7f;
	background: #146b52;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.ptw-search-btn svg {
	flex: 0 0 auto;
}

.ptw-search-btn:hover {
	background: #0f4c3a;
}

.ptw-search-results {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
	z-index: 20;
	max-height: 320px;
	overflow-y: auto;
}

.ptw-search-result-item {
	display: block;
	padding: 10px 14px;
	text-decoration: none;
	color: #1a1a1a;
	font-size: 14px;
	border-bottom: 1px solid #f0f0f0;
}

.ptw-search-result-item:last-child {
	border-bottom: none;
}

.ptw-search-result-item:hover {
	background: #f5f9f7;
	color: #0f4c3a;
}

.ptw-search-empty {
	padding: 10px 14px;
	font-size: 13px;
	color: #888;
}

/* ---------------------------------------------------------------
   Top navigation bar (BD Academic section switcher)

   Every item always shows its FULL label — nothing is shortened or
   cut off with an ellipsis at any screen size. On a wide screen the
   five items sit in one slim white pill; once they no longer fit on
   a single line the pill breaks apart into wrapping chips, which
   keeps the height low without hiding any text.
   --------------------------------------------------------------- */

.ptw-topnav-band {
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	width: 100%;
	background: transparent;
	padding: 0;
	margin: 0 0 16px;
}

.ptw-topnav {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: 7px;
	width: 100%;
	margin: 0 auto;
}

.ptw-topnav a.ptw-topnav-item {
	box-sizing: border-box;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	padding: 6px 14px;
	border: 2px solid #00786f;
	border-radius: 999px;
	background: #fff;
	color: #00534c;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}

.ptw-topnav-icon {
	flex: 0 0 auto;
	margin-right: 7px;
	font-size: 1.15em;
	line-height: 1;
}

.ptw-topnav-label {
	display: block;
}

.ptw-topnav a.ptw-topnav-item:hover,
.ptw-topnav a.ptw-topnav-item:focus {
	background: #e8f3f0;
	color: #00403a;
	text-decoration: none;
}

.ptw-topnav a.ptw-topnav-item:focus-visible {
	outline: 3px solid #f2b632;
	outline-offset: 2px;
}

.ptw-topnav a.ptw-topnav-active,
.ptw-topnav a.ptw-topnav-active:hover,
.ptw-topnav a.ptw-topnav-active:focus {
	background: linear-gradient(90deg, #26653e 0%, #4d7a4b 55%, #7a8e3a 100%);
	border-color: #26653e;
	color: #fff;
}

/* --- Wide screens: the five items join up into one slim pill ---
   The bar is allowed to run a little wider than the 900px reading
   column so the full labels fit on one line. It is centred against
   the column (not the viewport), so it stays aligned on themes with
   a sidebar. */
@media (min-width: 1180px) {
	.ptw-topnav-band {
		width: 1120px;
		max-width: calc(100vw - 32px);
		margin-left: calc((100% - 1120px) / 2);
	}

	.ptw-topnav {
		flex-wrap: nowrap;
		gap: 0;
		width: auto;
		max-width: 100%;
		border: 2px solid #00786f;
		border-radius: 999px;
		overflow: hidden;
	}

	.ptw-topnav a.ptw-topnav-item {
		border: 0;
		border-right: 2px solid #00786f;
		border-radius: 0;
	}

	.ptw-topnav a.ptw-topnav-item:last-child {
		border-right: 0;
	}

	.ptw-topnav a.ptw-topnav-active {
		border-right-color: #26653e;
	}

	.ptw-topnav a.ptw-topnav-item:focus-visible {
		outline-offset: -3px;
	}
}

/* --- Phones: keep the full text, just tighten it up --- */
@media (max-width: 640px) {
	.ptw-topnav-band {
		margin-bottom: 14px;
	}

	.ptw-topnav {
		gap: 6px;
	}

	.ptw-topnav a.ptw-topnav-item {
		padding: 5px 12px;
		font-size: 13.5px;
	}
}

/* --- Very small phones: the longest label still has to fit --- */
@media (max-width: 400px) {
	.ptw-topnav {
		gap: 5px;
	}

	.ptw-topnav a.ptw-topnav-item {
		max-width: 100%;
		padding: 5px 10px;
		font-size: 12.5px;
	}

	.ptw-topnav-icon {
		margin-right: 5px;
		font-size: 1.05em;
	}
}

/* ---------------------------------------------------------------
   General small-screen tidy-up for the rest of the plugin pages
   --------------------------------------------------------------- */
@media (max-width: 640px) {
	.ptw-wrap {
		padding: 16px 12px 44px;
	}

	.ptw-wrap h1 {
		font-size: clamp(22px, 6vw, 30px);
		line-height: 1.25;
		overflow-wrap: break-word;
	}

	.ptw-card {
		padding: 18px 14px;
		border-radius: 12px;
	}

	.ptw-grid {
		gap: 8px;
	}

	.ptw-slot {
		padding: 12px 4px;
	}

	.ptw-slot-time {
		font-size: 16px;
	}

	/* Seven columns of times won't fit a phone — let the table
	   scroll sideways on its own instead of squashing the page. */
	.ptw-month-table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
	}

	.ptw-country-list,
	.ptw-city-list {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}

	/* 16px keeps iOS Safari from zooming in when the field is tapped. */
	.ptw-search-input {
		font-size: 16px;
		padding: 11px 14px;
	}

	.ptw-search-btn {
		padding: 0 16px;
	}

	.ptw-locate-inline {
		padding: 14px;
	}

	.ptw-locate-button {
		width: 100%;
		min-height: 44px;
	}
}