/*
 * Block-only style overrides.
 *
 * Loaded for the new Gutenberg blocks (front-end + editor iframe). Strips
 * the legacy bordered/columned layout that assumed each block sat next to a
 * sidebar, so blocks render full-width inside whatever container the user
 * drops them in (e.g. core/columns).
 */
.upaper-block {
	width: 100%;
}
:where(.wp-block-columns.is-layout-flex) {
    gap: 1em !important;
}
/* Editor only: disable post navigation inside every UrduPaper block.
 *
 * Without this, clicking a post link inside a block in the editor either
 * navigates the editor iframe away or opens the post in a new tab — never
 * what the user wants. The block's selection layer still receives the click
 * (pointer-events: none doesn't stop event propagation to ancestors), so
 * clicking a post is treated as "select this block to configure". */
.editor-styles-wrapper .upaper-block a {
	pointer-events: none !important;
}
.upaper-block.classic-block,
.upaper-block.columns-block {
	border: 0;
	margin: 0;
	padding: 0;
}

/*
 * Legacy CSS scopes the .block-head flex row to ".home-blocks .block-head"
 * which only exists on the template-driven homepage. Mirror it under
 * .upaper-block so the title + more-button render as a row when blocks are
 * used on any page.
 */
.upaper-block .block-head {
	width: 100%;
	background: #f0f0f0;
	margin-bottom: 10px;
	height: auto;
	overflow: hidden;
	position: relative;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: space-between;
	border-radius: var( --border-radius );
}
/* Section Header block — override the default #f0f0f0 with the
 * user-picked colour (if set). The custom property is emitted as an
 * inline style by render.php and carries the sanitized hex value. */
.upaper-block.section-header .block-head {
	background: var( --sh-header-bg, #f0f0f0 );
	border-radius: var( --sh-header-radius, var( --border-radius ) );
}
.upaper-block.section-header .block-head .title-text,
.upaper-block.section-header .block-head h2 {
	font-family:  var( --sh-font, inherit );
	font-size:    var( --sh-header-size, inherit );
	line-height:  var( --sh-header-line-height, inherit );
	font-weight:  var( --sh-header-weight, inherit );
	color:        var( --sh-header-color, inherit );
}
.upaper-block .block-head.grid-block-head {
	padding: 0;
}
.upaper-block .block-head.ubt-header {
	flex-direction: row;
	padding-left: 10px;
}
.opinions-columns-head {
	padding-left: 10px;
}
.upaper-block .block-head h2 {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	/* Force RTL on the title row so the icon (first DOM child) lands on the
	 * right and the title to its left, regardless of iframe direction. */
	direction: rtl;
}
.upaper-block .block-head .title-text {
	padding: 15px 10px 10px 10px;
}
.upaper-block .block-head .block-head-icon {
	padding: 0 15px;
	display: flex;
	align-items: center;
	height: 60px;
	background: var( --upaper-icon-bg, var( --accent-color, #f4ac04 ) );
	color: var( --upaper-icon-color, #fff );
}
.upaper-block .block-head .block-head-icon i {
	font-size: 28px;
	width: 28px;
	height: 28px;
	position: relative;
	top: 2px;
}
/* When the wrapper has .upaper-no-icon, hide the icon span injected by the
 * legacy posts-grid.php template-part (since we can't conditionally render it
 * without modifying that legacy file). */
.upaper-block.upaper-no-icon .block-head-icon {
	display: none;
}
/* Same pattern for the entire section header. Used by upaper/grid-block,
 * whose header lives inside template-parts/posts-grid.php — easier to hide
 * via CSS than to thread a conditional into the legacy template. */
.upaper-block.upaper-no-header .block-head {
	display: none;
}
/* When the more button is hidden, switch to row so the title + icon fill
 * the space naturally (the row-reverse default exists to position the
 * more button at the opposite end in RTL). */
.upaper-block.upaper-no-more .block-head {
	flex-direction: row;
}
.upaper-block.upaper-border-right .block-head .block-head-icon {
	display: flex;
	align-self: stretch;
	width: 4px;
	height: auto;
	min-height: 30px;
	padding: 0;
	background: var( --upaper-bar-color, var( --accent-color, #cc0000 ) );
}
.upaper-block.upaper-border-right .block-head .block-head-icon i {
	display: none;
}
.upaper-block.upaper-border-right .block-head {
	padding-right: 0;
}
.upaper-block .block-more-btn,
.upaper-carousel .uc-more {
	height: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px 8px;
	font-size: 18px;
	font-weight: 600;
	font-family: inherit;
	line-height: 1;
	color: #1a1a1a;
	text-decoration: none;
	background: #ffffff;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 6px;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.upaper-block .block-more-btn {
	font-family: 'Lateef', serif;
}
.upaper-block .block-more-btn span,
.upaper-carousel .uc-more span {
	display: inline-block;
	position: static;
	top: 0;
	font-family: inherit;
	font-size: inherit;
}
.upaper-block .block-more-btn:hover,
.upaper-block .block-more-btn:focus,
.upaper-carousel .uc-more:hover,
.upaper-carousel .uc-more:focus {
	background: var( --accent-color, #f4ac04 );
	color: #000;
	border-color: var( --accent-color, #f4ac04 );
}
.upaper-block .block-more-btn:hover span,
.upaper-block .block-more-btn:focus span {
	display: inline-block;
}
.upaper-block .block-more-btn i,
.upaper-carousel .uc-more i {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	padding: 0;
	position: relative;
	top: 2px;
}

/*
 * Editor preview for the carousel block. Owl Carousel JS doesn't initialize
 * inside the editor iframe, so render.php emits .upaper-carousel-preview
 * instead of .owl-carousel and we lay it out as a simple flex strip.
 */
.upaper-carousel-preview {
	display: flex !important;
	flex-wrap: nowrap;
	gap: 8px;
	width: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 8px;
}
.upaper-carousel-preview > div {
	flex: 0 0 calc( 33.333% - 8px );
	max-width: calc( 33.333% - 8px );
	scroll-snap-align: start;
}
.upaper-carousel-preview > div img {
	width: 100%;
	height: auto;
	display: block;
}
/* E-Papers widget previews show 1 per row (taller portrait covers). */
.upaper-epapers-widget .upaper-carousel-preview > div {
	flex: 0 0 calc( 100% - 8px );
	max-width: calc( 100% - 8px );
}

/* ============================================================
 * Tabbed News block (upaper/tabbed-news)
 *
 * Two tabs (Popular / Latest) + optional day/week/month period toggle.
 * Active list/tab/period is driven by JS adding `.is-active`.
 *
 * Layout strategy: visual L→R order = DOM order. Plain `flex-direction: row`
 * everywhere — no row-reverse, no flipping. `direction: rtl` is scoped to
 * the grid (so the first post lands in the right column) and to text
 * containers (so Urdu reads correctly). Mixing flex direction with the
 * surrounding `direction` was producing inconsistent results between the
 * editor iframe and the front-end, so we don't rely on it.
 * ============================================================ */
.upaper-tabbed-news {
	/* Style attributes (Styles tab) are injected by render.php as CSS custom
	 * properties on this wrapper. Each var() below carries a fallback that
	 * matches the original stylesheet defaults, so an unset attribute simply
	 * inherits the theme look.
	 *
	 * Tabs typography (--tn-tab-font/size/line-height) is scoped to
	 * .tn-tab + .tn-period; posts typography (--tn-post-font, --tn-title-size,
	 * --tn-post-line-height) to .tn-title — see the rules further down. */
	font-family: inherit;
}

/* Header row: DOM order is [period-switch, tabs], so period is on the LEFT
 * and tabs are on the RIGHT. justify-content keeps them at opposite edges. */
.upaper-tabbed-news .tn-header {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 14px;
	background: var( --tn-header-bg, #f6f6f6 );
	border-radius: var( --border-radius, 0 );
	border: 1px solid var(--border-medium);
	padding: 5px;
}
.upaper-tabbed-news .tn-tabs {
	display: flex;
	flex-direction: row-reverse;
	align-items: stretch;
}
.upaper-tabbed-news .tn-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	cursor: pointer;
	background: transparent;
	border: 0;
	color: #444;
	font-size: var( --tn-tab-size, 16px );
	line-height: var( --tn-tab-line-height, 1.4 );
	font-weight: var( --tn-tab-weight, 600 );
	font-family: var( --tn-tab-font, inherit );
	transition: background-color 0.15s ease, color 0.15s ease;
	user-select: none;
	padding: 10px;
}
.upaper-tabbed-news .tn-tab i {
	font-size: 16px;
	line-height: 1;
}
.upaper-tabbed-news .tn-tab:hover {
	color: var( --tn-tab-bg, var( --accent-color ) );
}
.upaper-tabbed-news .tn-tab.is-active {
	background: var( --tn-tab-bg, var( --accent-color ) );
	color: var( --tn-tab-color, #000000 );
}

/* Period toggle (Day / Week / Month / All) — simple pill-style switch.
 *
 * Only meaningful for the Popular tab — Latest just shows the most recent
 * posts unconditionally — so we hide the switcher whenever Latest is the
 * active tab, to avoid promising a behaviour we don't deliver. */
.upaper-tabbed-news .tn-period-switch {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
	padding: 0 12px;
}
.upaper-tabbed-news[data-active-tab="latest"] .tn-period-switch {
	visibility: hidden;
}
.upaper-tabbed-news .tn-period {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	cursor: pointer;
	background: transparent;
	border: 0;
	font-size: 13px;
	line-height: var( --tn-tab-line-height, 1.4 );
	font-family: var( --tn-tab-font, inherit );
	font-weight: var( --tn-tab-weight, 400 );
	color: #666;
	user-select: none;
}
.upaper-tabbed-news .tn-period::before {
	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid #bbb;
	background: #fff;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.upaper-tabbed-news .tn-period.is-active::before {
	border-color: #333;
	background: #333;
	box-shadow: inset 0 0 0 2px #fff;
}
.upaper-tabbed-news .tn-period.is-active {
	color: #111;
}

/* Lists — hide all, show only the .is-active one.
 *
 * direction: rtl on the grid container makes the auto-placement flow
 * right-to-left, so the first post lands in the right column (matching
 * the Urdu reading order in the reference design). */
.upaper-tabbed-news .tn-list {
	display: none;
	direction: rtl;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 10px 30px;
}
.upaper-tabbed-news .tn-list.is-active {
	display: grid;
}
.upaper-tabbed-news.cols-1 .tn-list { grid-template-columns: 1fr; }
.upaper-tabbed-news.cols-2 .tn-list { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
.upaper-tabbed-news.cols-3 .tn-list { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
.upaper-tabbed-news.cols-4 .tn-list { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }


/* Individual numbered item — number / thumb / title-block on one row. */
.upaper-tabbed-news .tn-item {
	border-bottom: 1px solid #eee;
	padding: 10px 0;
}
.upaper-tabbed-news .tn-item:last-child {
	border-bottom: 0;
}
.upaper-tabbed-news .tn-item {
	/* The grid container is already direction: rtl; we let that propagate
	 * down. DOM order on .tn-link is [body, thumb, number] which maps to
	 * visual [right, middle, left] in RTL — matching the reference. */
	direction: rtl;
}
.upaper-tabbed-news .tn-link {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 12px;
	color: inherit;
	text-decoration: none;
}
.upaper-tabbed-news .tn-link:hover .tn-title {
	color: #cc0000;
}
.upaper-tabbed-news .tn-number {
	flex: 0 0 auto;
	font-size: 42px;
	font-weight: 700;
	line-height: 1;
	color: var( --tn-num-color, #cc0000 );
	min-width: 38px;
	text-align: center;
	font-family: Arial, sans-serif;
}
.upaper-tabbed-news .tn-thumb {
	flex: 0 0 auto;
	width: 90px;
	height: 60px;
	overflow: hidden;
	border-radius: 4px;
	background: #f0f0f0;
	display: block;
}
.upaper-tabbed-news .tn-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.upaper-tabbed-news .tn-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	text-align: right;
}
.upaper-tabbed-news .tn-title {
	font-size: var( --tn-title-size, 15px );
	line-height: var( --tn-post-line-height, 1.45 );
	font-family: var( --tn-post-font, inherit );
	font-weight: var( --tn-post-weight, 600 );
	color: var( --tn-title-color, #111 );
	/* --tn-item-padding from the Posts typography panel — adds vertical
	 * breathing room directly around the title so Urdu descenders don't
	 * get clipped by the line-clamp overflow. */
	padding: var( --tn-item-padding, 0 ) 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-align: right;
}
.upaper-tabbed-news .tn-cat {
	font-size: 12px;
	font-family: var( --tn-post-font, inherit );
	color: var( --tn-cat-color, #888 );
	text-align: right;
	display: none;
}
.upaper-tabbed-news .tn-empty {
	padding: 20px;
	text-align: center;
	color: #999;
	grid-column: 1 / -1;
}

/*
 * Editor preview interactivity for the tabbed-news block.
  */
.editor-styles-wrapper .upaper-tabbed-news .tn-tab,
.editor-styles-wrapper .upaper-tabbed-news .tn-period {
	pointer-events: auto !important;
	cursor: pointer;
}
@media ( max-width: 991px ) {
	.upaper-tabbed-news.cols-3 .tn-list,
	.upaper-tabbed-news.cols-4 .tn-list {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}
@media ( max-width: 575px ) {
	.upaper-tabbed-news .tn-list,
	.upaper-tabbed-news.cols-2 .tn-list,
	.upaper-tabbed-news.cols-3 .tn-list,
	.upaper-tabbed-news.cols-4 .tn-list {
		grid-template-columns: 1fr;
	}
	.upaper-tabbed-news .tn-tab {
		padding: 10px 12px;
		font-size: 14px;
	}
	.upaper-tabbed-news .tn-header {
		flex-direction: column-reverse;
	}
	.upaper-tabbed-news .tn-number {
		font-size: 32px;
	}
}
/* ============================================================
 * Posts Carousel block (upaper/carousel) — v2 redesign.
 *
 * Three layouts:
 *   .layout-carousel — horizontal Owl slider
 *   .layout-grid     — CSS grid of cards
 *   .layout-vertical — vertical stack: thumb-left + body-right cards
 *
 * Header lives inside the block and hosts (left side): nav arrows
 * (carousel only) and the View-more button. Right side: icon + title.
 * Style attributes flow in as --uc-* CSS variables from render.php.
 * ============================================================ */
.upaper-carousel {
	font-family: var( --uc-font, inherit );
	direction: rtl;
}

/* ---- Header ---- */
.upaper-carousel .uc-header h2,
.upaper-carousel .uc-header .title-text {
	font-family: var( --uc-header-font, inherit );
	font-size:   var( --uc-header-size, 22px );
	line-height: var( --uc-header-line-height, 1.3 );
	font-weight: var( --uc-header-weight, 700 );
}

.upaper-carousel .uc-header-actions {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 8px;
	margin-left: 12px;
}
.upaper-carousel .uc-nav {
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 6px;
	cursor: pointer;
	color: #333;
	transition: background-color 0.15s ease, color 0.15s ease;
	padding: 0;
}
.upaper-carousel .uc-nav:hover,
.upaper-carousel .uc-nav:focus {
	background: var( --accent-color, #f4ac04 );
	color: #000;
}
.upaper-carousel .uc-nav i {
	font-size: 14px;
	line-height: 1;
}
.upaper-carousel .uc-more-fallback {
	margin-top: 12px;
	text-align: left;
}

/* ---- Card (shared across all three layouts) ---- */
.upaper-carousel .uc-card {
	background: var( --uc-card-bg, transparent );
	border-radius: var( --uc-radius, 4px );
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.upaper-carousel .uc-card:hover {
	transform: translateY( -2px );
	box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.08 );
}
.upaper-carousel .uc-card-link {
	display: block;
	color: inherit;
	text-decoration: none;
}
.upaper-carousel .uc-thumb {
	display: block;
	position: relative;
	overflow: hidden;
	background: #f0f0f0;
}
.upaper-carousel .uc-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.upaper-carousel .uc-aspect-landscape .uc-thumb { aspect-ratio: 16 / 9; }
.upaper-carousel .uc-aspect-square    .uc-thumb { aspect-ratio: 1 / 1; }
.upaper-carousel .uc-aspect-portrait  .uc-thumb { aspect-ratio: 3 / 4; }
.upaper-carousel .uc-aspect-tall      .uc-thumb { aspect-ratio: 9 / 16; }

.upaper-carousel .uc-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 36px;
	background: rgba( 0, 0, 0, 0.2 );
	opacity: 1;
	transition: opacity 0.15s ease;
}
.upaper-carousel .uc-overlay .upaper-menu-icon {
	width: 40px;
	height: 40px;
}
.upaper-carousel .uc-overlay .icon-play-circle-o {
	font-size: 36px;
}
.upaper-carousel.uc-overlay-always .uc-overlay {
	opacity: 1;
	background: rgba( 0, 0, 0, 0.2 );
}
.upaper-carousel .uc-views {
	position: absolute;
	left: 8px;
	top: 8px;
	padding: 3px 8px;
	font-size: 11px;
	color: #fff;
	background: rgba( 0, 0, 0, 0.65 );
	border-radius: 3px;
}
.upaper-carousel .uc-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 12px;
	text-align: right;
}
.upaper-carousel .uc-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: var( --uc-title-size, 15px );
	line-height: 1.4;
	font-weight: var( --uc-card-weight, 600 );
	color: var( --uc-title-color, #111 );
	text-align: inherit;
}
.upaper-carousel .uc-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	font-size: 12px;
	color: var( --uc-meta-color, #888 );
}
.upaper-carousel .uc-cat { font-weight: 600; }

/* ---- Owl slide wrapper ---- */
.upaper-carousel .home-carousel { direction: rtl; }
.upaper-carousel .uc-slide { padding: 0 4px; }
/* Hide Owl's default nav when our external arrows are in play. */
.upaper-carousel .uc-header + .uc-body-wrap .owl-nav { display: none; }

/* ---- Vertical orientation (story-style overlay cards) ---- */
.upaper-carousel.orientation-vertical .uc-card {
	background: transparent;
}
.upaper-carousel.orientation-vertical .uc-card-link {
	display: block;
	position: relative;
	height: 100%;
	border-radius: var( --uc-radius, 4px );
	overflow: hidden;
}
.upaper-carousel.orientation-vertical .uc-thumb {
	width: 100%;
	height: 100%;
	display: block;
}
.upaper-carousel.orientation-vertical .uc-body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 38px 14px 14px;
	background: linear-gradient(
		to top,
		rgba( 0, 0, 0, 1 ) 0%,
		rgba( 0, 0, 0, 0.75 ) 45%,
		rgba( 0, 0, 0, 0 ) 100%
	);
	color: #fff;
	pointer-events: none; /* let clicks pass through to the wrapping <a> */
}
.upaper-carousel.orientation-vertical .uc-title {
	color: #ffffff;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	font-weight: 700;
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.4 );
}
.upaper-carousel.orientation-vertical .uc-meta,
.upaper-carousel.orientation-vertical .uc-cat,
.upaper-carousel.orientation-vertical .uc-date {
	color: rgba( 255, 255, 255, 0.85 );
}
.upaper-carousel.orientation-vertical .uc-card:hover {
	transform: translateY( -2px );
	box-shadow: 0 8px 22px rgba( 0, 0, 0, 0.18 );
}

.upaper-carousel .uc-empty {
	padding: 20px;
	text-align: center;
	color: #999;
}

.editor-styles-wrapper .upaper-carousel .uc-nav {
	pointer-events: auto !important;
	cursor: pointer;
}
@media ( max-width: 575px ) {
	.upaper-carousel .uc-header .title-text {
		font-size: 18px;
	}
}
/* ============================================================
 * Urdu Text block (upaper/urdu-text)
 *
 * Paragraph block tailored for Urdu typography. Inline `style` emitted
 * by save.js from the Typography panel always wins over these defaults;
 * the rules here only kick in when the user hasn't set an explicit value.
 * ============================================================ */
.upaper-urdu-text {
	font-family: "Jameel Noori Nastaleeq", "AlQalam Telenor", "Urdu Naskh Asiatype", "Noto Naskh Arabic", "Alkatib Regular", serif;
	font-size: 22px;
	line-height: 1.9;
	direction: rtl;
	margin: 0 0 1.2em;
}
.upaper-urdu-text a {
	color: var( --upaper-urdu-link-color, inherit );
	text-decoration: underline;
}
.upaper-urdu-text a:hover {
	opacity: 0.85;
}

/* ============================================================
 * Newsletter Subscription block (upaper/subscription)
 *
 * Visual reference: light grey card with title + description, a white
 * email input, and a red Subscribe button below.
 *
 * All visual properties read CSS custom properties (--us-*) emitted by
 * render.php from the Styles-tab attributes. Each var() carries a sensible
 * default, so an unset attribute simply inherits the bundled look.
 * ============================================================ */
.upaper-subscription {
	/* Default visual matches the dark footer placement: transparent wrapper
	 * so it inherits whatever dark surface it lands on, with light text +
	 * the theme accent on the button. Every value is overridable via the
	 * Styles tab — anyone dropping the block onto a light page can repaint
	 * the wrapper / title / description from the inspector. */
	background: var( --us-bg, #171717 );
	padding: var( --us-padding, 18px );
	border-radius: var( --us-radius, 6px );
	font-family: var( --us-font, inherit );
	direction: rtl;
}
.upaper-subscription.align-left   { direction: ltr; text-align: left; }
.upaper-subscription.align-center { text-align: center; }
.upaper-subscription.align-right  { text-align: right; }

.upaper-subscription .us-title {
	margin: 0 0 8px;
	font-size: var( --us-title-size, 24px );
	font-weight: var( --us-title-weight, 700 );
	line-height: 1.3;
	color: var( --us-title-color, #ffffff );
	font-family: inherit;
	/* Force inheritance so the wrapper's .align-* class drives the title
	 * alignment. The theme's global h3 typography ships its own text-align,
	 * which would otherwise win on specificity. */
	text-align: inherit;
}
.upaper-subscription .us-desc {
	margin: 0 0 18px;
	font-size: var( --us-desc-size, 15px );
	line-height: 1.5;
	color: var( --us-desc-color, #c8c8c8 );
	font-family: inherit;
	text-align: inherit;
}

.upaper-subscription .us-form {
	margin: 0;
}
.upaper-subscription .us-row {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.upaper-subscription .us-input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	font-size: 15px;
	font-family: "Roboto", Arial, sans-serif;
	background: var( --us-input-bg, #ffffff );
	color: var( --us-input-color, #1a1a1a );
	border: 1px solid rgba( 0, 0, 0, 0.08 );
	border-radius: 2px;
	direction: inherit;
	text-align: inherit;
	direction: ltr;
}
.upaper-subscription .us-input::placeholder {
	color: rgba( 0, 0, 0, 0.45 );
}
.upaper-subscription .us-input:focus {
	outline: 2px solid var( --us-button-bg, var( --accent-color ) );
	outline-offset: 1px;
}

.upaper-subscription .us-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 18px;
	font-size: var( --us-button-size, 15px );
	font-weight: var( --us-button-weight, 700 );
	font-family: inherit;
	/* Theme accent drives the button background; label stays black so it
	 * reads cleanly on the warm/yellow accent the rest of the theme uses. */
	color: var( --us-button-color, #000000 );
	background: var( --us-button-bg, var( --accent-color ) );
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.upaper-subscription .us-button:hover,
.upaper-subscription .us-button:focus {
	background: var( --us-button-hover, var( --us-button-bg, var( --accent-color ) ) );
	filter: brightness( 0.95 );
}
.upaper-subscription .us-button[disabled],
.upaper-subscription .us-button.is-busy {
	opacity: 0.7;
	cursor: progress;
}
.upaper-subscription .us-button .us-spinner {
	display: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-top-color: transparent;
	animation: us-spin 0.7s linear infinite;
}
.upaper-subscription .us-button.is-busy .us-spinner {
	display: inline-block;
}
@keyframes us-spin {
	to { transform: rotate( 360deg ); }
}

.upaper-subscription .us-message {
	margin-top: 12px;
	font-size: 18px;
	line-height: 1.5;
}
/* Hide the message container when JS has cleared its text — the previous
 * `min-height: 1em` was reserving a row of empty space (plus margin-top)
 * even on a brand-new form. `:empty` collapses the whole node away. */
.upaper-subscription .us-message:empty {
	display: none;
}
.upaper-subscription .us-message.is-success {
	color: #89efa0;
}
.upaper-subscription .us-message.is-error {
	color: #f69a90;
}
.upaper-subscription .us-message.is-info {
	color: #555;
}

/* Editor preview: re-enable only the form's interactive elements so the
 * editor preview can be exercised end-to-end. No post anchors live in
 * this block, so we don't need a defensive disable for those. */
.editor-styles-wrapper .upaper-subscription .us-input,
.editor-styles-wrapper .upaper-subscription .us-button,
.editor-styles-wrapper .upaper-subscription .us-form {
	pointer-events: auto !important;
}

/* ============================================================
 * Featured Grid block (upaper/featured-grid)
 *
 * Style attributes (Styles tab) are emitted as CSS custom properties on
 * the .featured-layout-row wrapper. Each var() carries the original
 * theme default as fallback, so unset attributes keep the bundled look.
 *   --fg-font / --fg-title-size / --fg-title-line-height — typography
 *   --fg-title-color / --fg-meta-color                   — colours
 * ============================================================ */
/* Shared properties: font family + colour apply to every grid title.
 * Sizing / line-height / weight are scoped per "tier" below — the large
 * featured card vs. the small companion cards (which carry .small-grid). */
.featured-layout-row .grid-post-title,
.featured-layout-row .grid-post-title a {
	font-family: var( --fg-font, inherit );
	color:       var( --fg-title-color, inherit );
}

/* Large (featured) card title — every item NOT marked .small-grid. */
.featured-layout-row .featured-grid-item:not( .small-grid ) .grid-post-title,
.featured-layout-row .featured-grid-item:not( .small-grid ) .grid-post-title a {
	font-size:   var( --fg-title-size, inherit );
	line-height: var( --fg-title-line-height, inherit );
	font-weight: var( --fg-title-weight, inherit );
}

/* Small companion cards — driven by the small-* attribute set so users can
 * tune them independently of the hero card. */
.featured-layout-row .featured-grid-item.small-grid .grid-post-title,
.featured-layout-row .featured-grid-item.small-grid .grid-post-title a {
	font-size:   var( --fg-small-title-size, inherit );
	line-height: var( --fg-small-title-line-height, inherit );
	font-weight: var( --fg-small-title-weight, inherit );
}

.featured-layout-row .featured-meta .post-info,
.featured-layout-row .featured-meta .post-info * {
	color: var( --fg-meta-color, inherit );
}

/* ============================================================
 * Typography variables for the remaining post-list blocks.
 *
 * Each block emits a small set of CSS custom properties from its render.php
 * (`--<prefix>-font` / `--<prefix>-title-size` / `--<prefix>-title-line-height`
 * / `--<prefix>-title-weight` / `--<prefix>-title-color`). The rules below
 * read those vars with `inherit` as the fallback so unset attributes keep
 * the theme's existing typography on the targeted elements.
 *
 * Prefixes:
 *   cb  → classic-block
 *   col → columns-block
 *   gb  → grid-block (legacy posts-grid.php markup)
 *   wcp → widget-category-posts
 *   wpp → widget-popular-posts
 *   wlp → widget-latest-posts
 *   wle → widget-latest-epapers
 * ============================================================ */

/* Classic News Block — four independent typography tiers:
 *   --cb-font                — block-wide font family (fallback for every
 *                              tier below; per-tier font overrides this)
 *   --cb-header-*            — section header (.block-head .title-text)
 *   --cb-title-*             — featured/large post title (h4.bg-black-head),
 *                              with optional --cb-title-font override
 *   --cb-small-title-*       — small list post titles (h5.blokpost-title),
 *                              with optional --cb-small-title-font override
 *   --cb-excerpt-*           — featured post excerpt (<p> inside the
 *                              featured column) — full typography group. */
.upaper-block.classic-block {
	font-family: var( --cb-font, inherit );
}
.upaper-block.classic-block .block-head .title-text,
.upaper-block.classic-block .block-head h2 {
	font-size:   var( --cb-header-size, inherit );
	line-height: var( --cb-header-line-height, inherit );
	font-weight: var( --cb-header-weight, inherit );
	color:       var( --cb-header-color, inherit );
}
.upaper-block.classic-block .bg-black-head,
.upaper-block.classic-block .bg-black-head a {
	font-family: var( --cb-title-font, inherit );
	font-size:   var( --cb-title-size, inherit );
	line-height: var( --cb-title-line-height, inherit );
	font-weight: var( --cb-title-weight, inherit );
	color:       var( --cb-title-color, inherit );
}
.upaper-block.classic-block .blokpost-title,
.upaper-block.classic-block .blokpost-title a {
	font-family: var( --cb-small-title-font, inherit );
	font-size:   var( --cb-small-title-size, inherit );
	line-height: var( --cb-small-title-line-height, inherit );
	font-weight: var( --cb-small-title-weight, inherit );
	color:       var( --cb-small-title-color, inherit );
}
.upaper-block.classic-block .block-flex-first .block-post-row p {
	font-family: var( --cb-excerpt-font, inherit );
	font-size:   var( --cb-excerpt-size, inherit );
	line-height: var( --cb-excerpt-line-height, inherit );
	font-weight: var( --cb-excerpt-weight, inherit );
	color:       var( --cb-excerpt-color, inherit );
}

/* Side-by-side that wraps under the hero on overflow.
   Hero occupies column 1 spanning --cb-hero-span rows. Small posts auto-flow
   into column 2 rows 1..N alongside the hero; once the small list exceeds
   the hero's row span, extras wrap underneath in row N+1 across both columns.
   `display: contents` on .block-flex-second flattens the wrapper so each
   .cb-flex-row participates directly in the grid's auto-placement. */
.upaper-block.classic-block .classic-block-flex {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	grid-auto-flow: row dense;
	gap: 12px 16px;
	align-items: start;
}
.upaper-block.classic-block .block-flex-first {
	grid-column: 1;
	grid-row: 1 / span var( --cb-hero-span, 5 );
	padding: 10px;
}
.upaper-block.classic-block .block-flex-second {
	display: contents;
}
.upaper-block.classic-block .block-flex-second > .cb-flex-row {
	margin: 0 !important;
	padding: 0 10px;
	align-self: start;
}
.upaper-block.classic-block .block-flex-second > .cb-flex-row .post-content-sm {
	display: flex;
	align-items: center;
	gap: 10px;	
	margin: 0;
}
/* Override Bootstrap col-* widths inside each small row so the picker doesn't
   pull the thumb to a fixed 4/12 of the grid track. */
.upaper-block.classic-block .block-flex-second > .cb-flex-row .post-content-sm > [class*="col-"] {
	width: auto;
	max-width: none;
	flex: 0 0 auto;
	padding: 0;
}
.upaper-block.classic-block .block-flex-second > .cb-flex-row .post-content-sm > [class*="col-"]:first-child {
	flex: 0 0 20%;
}
.upaper-block.classic-block .block-flex-second > .cb-flex-row .post-content-sm > [class*="col-"]:last-child {
	flex: 1 1 auto;
	min-width: 0;
}
.upaper-block.classic-block .block-flex-second > .cb-flex-row .post-content-sm img {
	width: 100%;
	height: auto;
	display: block;
}

@media ( max-width: 768px ) {
	.upaper-block.classic-block .classic-block-flex {
		display: block;
	}
	.upaper-block.classic-block .block-flex-first,
	.upaper-block.classic-block .block-flex-second > .cb-flex-row {
		padding: 10px 0;
	}
}

/* Columns News Block — section header + post titles. */
.upaper-block.columns-block {
	font-family: var( --col-font, inherit );
}
.upaper-block.columns-block .block-head .title-text,
.upaper-block.columns-block .block-head h2 {
	font-size:   var( --col-header-size, inherit );
	line-height: var( --col-header-line-height, inherit );
	font-weight: var( --col-header-weight, inherit );
	color:       var( --col-header-color, inherit );
}
.upaper-block.columns-block .column-post-title h5,
.upaper-block.columns-block .column-post-title h5 a {
	font-family: var( --col-title-font, inherit );
	font-size:   var( --col-title-size, inherit );
	line-height: var( --col-title-line-height, inherit );
	font-weight: var( --col-title-weight, inherit );
	color:       var( --col-title-color, inherit );
}

/* Category Grid Block — section header + large hero post + small posts. */
.upaper-block.home-grid-block {
	font-family: var( --gb-font, inherit );
}
.upaper-block.home-grid-block .block-head .title-text,
.upaper-block.home-grid-block .block-head h2 {
	font-size:   var( --gb-header-size, inherit );
	line-height: var( --gb-header-line-height, inherit );
	font-weight: var( --gb-header-weight, inherit );
	color:       var( --gb-header-color, inherit );
}
/* Featured / large block title — `.grid-frist-post-heading` is the wrapper
 * div around the h4 + meta in the legacy posts-grid.php markup. Target the
 * h4 inside it so meta info isn't accidentally restyled too. */
.upaper-block.home-grid-block .grid-frist-post-heading h4,
.upaper-block.home-grid-block .grid-frist-post-heading h4 a {
	font-family: var( --gb-title-font, inherit );
	font-size:   var( --gb-title-size, inherit );
	line-height: var( --gb-title-line-height, inherit );
	font-weight: var( --gb-title-weight, inherit );
	color:       var( --gb-title-color, inherit );
}
/* Smaller post titles — `.blokpost-title` is the h6 itself, no inner wrapper. */
.upaper-block.home-grid-block .blokpost-title,
.upaper-block.home-grid-block .blokpost-title a {
	font-family: var( --gb-small-title-font, inherit );
	font-size:   var( --gb-small-title-size, inherit );
	line-height: var( --gb-small-title-line-height, inherit );
	font-weight: var( --gb-small-title-weight, inherit );
	color:       var( --gb-small-title-color, inherit );
}

/* Widget blocks — each gets two independent tiers:
 *   --w{prefix}-font         — block-wide font family
 *   --w{prefix}-header-*     — widget title (h3.widget-title)
 *   --w{prefix}-title-*      — individual post / e-paper item titles */
.upaper-cat-posts.upaper-widget-category-posts {
	font-family: var( --wcp-font, inherit );
}
.upaper-cat-posts.upaper-widget-category-posts .widget-title {
	font-size:   var( --wcp-header-size, inherit );
	line-height: var( --wcp-header-line-height, inherit );
	font-weight: var( --wcp-header-weight, inherit );
	color:       var( --wcp-header-color, inherit );
}
.upaper-cat-posts.upaper-widget-category-posts h5,
.upaper-cat-posts.upaper-widget-category-posts h5 a {
	font-size:   var( --wcp-title-size, inherit );
	line-height: var( --wcp-title-line-height, inherit );
	font-weight: var( --wcp-title-weight, inherit );
	color:       var( --wcp-title-color, inherit );
}

.upaper-cat-posts.upaper-widget-popular-posts {
	font-family: var( --wpp-font, inherit );
}
.upaper-cat-posts.upaper-widget-popular-posts .widget-title {
	font-size:   var( --wpp-header-size, inherit );
	line-height: var( --wpp-header-line-height, inherit );
	font-weight: var( --wpp-header-weight, inherit );
	color:       var( --wpp-header-color, inherit );
}
.upaper-cat-posts.upaper-widget-popular-posts h5,
.upaper-cat-posts.upaper-widget-popular-posts h5 a {
	font-size:   var( --wpp-title-size, inherit );
	line-height: var( --wpp-title-line-height, inherit );
	font-weight: var( --wpp-title-weight, inherit );
	color:       var( --wpp-title-color, inherit );
}

.upaper-cat-posts.upaper-widget-latest-posts {
	font-family: var( --wlp-font, inherit );
}
.upaper-cat-posts.upaper-widget-latest-posts .widget-title {
	font-size:   var( --wlp-header-size, inherit );
	line-height: var( --wlp-header-line-height, inherit );
	font-weight: var( --wlp-header-weight, inherit );
	color:       var( --wlp-header-color, inherit );
}
.upaper-cat-posts.upaper-widget-latest-posts h5,
.upaper-cat-posts.upaper-widget-latest-posts h5 a {
	font-size:   var( --wlp-title-size, inherit );
	line-height: var( --wlp-title-line-height, inherit );
	font-weight: var( --wlp-title-weight, inherit );
	color:       var( --wlp-title-color, inherit );
}

.upaper-cat-posts.upaper-widget-latest-epapers {
	font-family: var( --wle-font, inherit );
}
.upaper-cat-posts.upaper-widget-latest-epapers .widget-title {
	font-size:   var( --wle-header-size, inherit );
	line-height: var( --wle-header-line-height, inherit );
	font-weight: var( --wle-header-weight, inherit );
	color:       var( --wle-header-color, inherit );
}
/* The e-papers widget renders its individual item title in <h4>, not <h5>. */
.upaper-cat-posts.upaper-widget-latest-epapers h4,
.upaper-cat-posts.upaper-widget-latest-epapers h4 a {
	font-size:   var( --wle-title-size, inherit );
	line-height: var( --wle-title-line-height, inherit );
	font-weight: var( --wle-title-weight, inherit );
	color:       var( --wle-title-color, inherit );
}

/* ============================================================
 * Opinions & Columns block (upaper/opinions-columns)
 * Grid of opinion cards. Each card shows the post title (RTL,
 * right-aligned) plus the linked author_profile term (image +
 * name) along the bottom. Card bg defaults to --accent-light.
 * ============================================================ */
.upaper-block.opinions-columns-block {
	font-family: var( --oc-font, inherit );
}
.upaper-block.opinions-columns-block .block-head h2,
.upaper-block.opinions-columns-block .opinions-columns-head h2 {
	font-size:   var( --oc-header-size, inherit );
	line-height: var( --oc-header-line-height, inherit );
	font-weight: var( --oc-header-weight, inherit );
	color:       var( --oc-header-color, inherit );
}
.upaper-block.opinions-columns-block .oc-grid {
	display: grid;
	grid-template-columns: repeat( var( --oc-columns, 3 ), minmax( 0, 1fr ) );
	gap: var( --oc-items-gap, 20px );
	direction: rtl;
}
.upaper-block.opinions-columns-block.oc-cols-1 .oc-grid { grid-template-columns: 1fr; }
.upaper-block.opinions-columns-block.oc-cols-2 .oc-grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
.upaper-block.opinions-columns-block.oc-cols-3 .oc-grid { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
.upaper-block.opinions-columns-block.oc-cols-4 .oc-grid { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }
@media ( max-width: 991px ) {
	.upaper-block.opinions-columns-block.oc-cols-3 .oc-grid,
	.upaper-block.opinions-columns-block.oc-cols-4 .oc-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}
@media ( max-width: 575px ) {
	.upaper-block.opinions-columns-block .oc-grid {
		grid-template-columns: 1fr !important;
	}
}
.upaper-block.opinions-columns-block .oc-card {
	position: relative;
	background: var( --oc-card-bg, #ffffff );
	border-radius: var( --oc-card-radius, 6px );
	border: var( --oc-card-bd-thickness, 1px ) solid var( --oc-card-bd-color, #e0e0e0 );
	padding: 22px 24px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 18px;
	direction: rtl;
	text-align: right;
	min-height: 180px;
	transition: box-shadow .2s, transform .2s, border-color .2s;
}
.upaper-block.opinions-columns-block .oc-card:hover {
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.06 );
}
.upaper-block.opinions-columns-block.oc-clickable .oc-card:hover {
	border-color: var( --accent-color, #f4ac04 );
}
/* Full-card link overlay — sits above the card but below interactive
 * children (post title + author link), which are bumped to z-index:2.
 * Clicking anywhere outside those still loads the post. */
.upaper-block.opinions-columns-block .oc-card-link {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}
.upaper-block.opinions-columns-block .oc-card-link:focus-visible {
	outline: 2px solid var( --accent-color, #f4ac04 );
	outline-offset: 2px;
}
.upaper-block.opinions-columns-block .oc-card-body,
.upaper-block.opinions-columns-block .oc-card .oc-author {
	position: relative;
	z-index: 2;
}
.upaper-block.opinions-columns-block .oc-card-title {
	margin: 0;
	font-family: var( --oc-title-font, inherit );
	font-size:   var( --oc-title-size, 18px );
	line-height: var( --oc-title-line-height, 1.6 );
	font-weight: var( --oc-title-weight, 600 );
}
.upaper-block.opinions-columns-block .oc-card-title a {
	color: var( --oc-title-color, inherit );
	text-decoration: none;
}
.upaper-block.opinions-columns-block .oc-card-title a:hover {
	color: var( --accent-color, #1f6b6d );
}
.upaper-block.opinions-columns-block .oc-card-excerpt {
	margin: 10px 0 0;
	font-family: var( --oc-excerpt-font, inherit );
	font-size:   var( --oc-excerpt-size, 14px );
	line-height: var( --oc-excerpt-line-height, 1.7 );
	font-weight: var( --oc-excerpt-weight, 400 );
	color:       var( --oc-excerpt-color, #555 );
}
.upaper-block.opinions-columns-block .oc-author {
	display: flex;
	align-items: center;
	flex-direction: row-reverse;
	gap: 10px;
	text-decoration: none;
	font-family: var( --oc-author-font, inherit );
	font-size:   var( --oc-author-size, 14px );
	font-weight: var( --oc-author-weight, 500 );
	color:       var( --oc-author-color, inherit );
	justify-content: flex-end;
}
.upaper-block.opinions-columns-block .oc-author:hover .oc-author-name {
	color: var( --accent-color, #1f6b6d );
}
.upaper-block.opinions-columns-block .oc-author-image {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	overflow: hidden;
	flex: 0 0 42px;
	background: #ffffff;
	display: inline-block;
}
.upaper-block.opinions-columns-block .oc-author-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.upaper-block.opinions-columns-block .oc-empty {
	grid-column: 1 / -1;
	text-align: center;
	color: #777;
	padding: 40px 0;
}

/* ============================================================
 * Widget: Opinions & Columns (upaper/widget-opinions)
 * Compact sidebar layout — vertical list of items with circular
 * author avatar on the right (RTL), post title + author name on
 * the left, dotted divider between rows.
 * ============================================================ */
.upaper-cat-posts.upaper-widget-opinions {
	font-family: var( --wop-font, inherit );
	direction: rtl;
	text-align: right;
}
.upaper-cat-posts.upaper-widget-opinions .widget-title {
	font-size:   var( --wop-header-size, inherit );
	line-height: var( --wop-header-line-height, inherit );
	font-weight: var( --wop-header-weight, inherit );
	color:       var( --wop-header-color, inherit );
}
.upaper-cat-posts.upaper-widget-opinions .wop-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px dotted #d8d8d8;
}
.upaper-cat-posts.upaper-widget-opinions .wop-item:last-child {
	border-bottom: 0;
}
.upaper-cat-posts.upaper-widget-opinions .wop-author-image {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	display: inline-block;
	background: #f0f0f0;
}
.upaper-cat-posts.upaper-widget-opinions .wop-author-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.upaper-cat-posts.upaper-widget-opinions .wop-body {
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1;
}
.upaper-cat-posts.upaper-widget-opinions .wop-title {
	margin: 0 0 4px;
	font-family: var( --wop-title-font, inherit );
	font-size:   var( --wop-title-size, 15px );
	line-height: var( --wop-title-line-height, 1.5 );
	font-weight: var( --wop-title-weight, 600 );
}
.upaper-cat-posts.upaper-widget-opinions .wop-title a {
	color: var( --wop-title-color, inherit );
	text-decoration: none;
}
.upaper-cat-posts.upaper-widget-opinions .wop-title a:hover {
	color: var( --accent-color, #1f6b6d );
}
.upaper-cat-posts.upaper-widget-opinions .wop-author-name {
	display: inline-block;
	font-family: var( --wop-author-font, inherit );
	font-size:   var( --wop-author-size, 12px );
	font-weight: var( --wop-author-weight, 500 );
	color:       var( --wop-author-color, #888 );
	text-decoration: none;
}
.upaper-cat-posts.upaper-widget-opinions .wop-author-name:hover {
	color: var( --accent-color, #1f6b6d );
}
.upaper-cat-posts.upaper-widget-opinions .wop-empty {
	margin: 8px 0;
	color: #777;
	font-size: 13px;
}

/* ============================================================
 * Authors Grid (upaper/authors-grid)
 * Directory of author_profile terms — circular avatar, name,
 * optional bio / post-count / social-icon row.
 * ============================================================ */
.upaper-block.authors-grid-block {
	font-family: var( --ag-font, inherit );
	direction: rtl;
}
.upaper-block.authors-grid-block .ag-grid {
	display: grid;
	grid-template-columns: repeat( var( --ag-columns, 4 ), minmax( 0, 1fr ) );
	gap: var( --ag-items-gap, 16px );
}
.upaper-block.authors-grid-block.ag-cols-1 .ag-grid { grid-template-columns: 1fr; }
.upaper-block.authors-grid-block.ag-cols-2 .ag-grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
.upaper-block.authors-grid-block.ag-cols-3 .ag-grid { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
.upaper-block.authors-grid-block.ag-cols-4 .ag-grid { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }
.upaper-block.authors-grid-block.ag-cols-5 .ag-grid { grid-template-columns: repeat( 5, minmax( 0, 1fr ) ); }
.upaper-block.authors-grid-block.ag-cols-6 .ag-grid { grid-template-columns: repeat( 6, minmax( 0, 1fr ) ); }
@media ( max-width: 991px ) {
	.upaper-block.authors-grid-block.ag-cols-4 .ag-grid,
	.upaper-block.authors-grid-block.ag-cols-5 .ag-grid,
	.upaper-block.authors-grid-block.ag-cols-6 .ag-grid {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}
@media ( max-width: 767px ) {
	.upaper-block.authors-grid-block .ag-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important;
	}
}
@media ( max-width: 480px ) {
	.upaper-block.authors-grid-block .ag-grid {
		grid-template-columns: 1fr !important;
	}
}
.upaper-block.authors-grid-block .ag-card {
	position: relative;
	background: var( --ag-card-bg, #ffffff );
	border-radius: var( --ag-card-radius, 8px );
	border: var( --ag-card-bd-thickness, 1px ) solid var( --ag-card-bd-color, #e0e0e0 );
	padding: var( --ag-card-padding, 18px );
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	transition: box-shadow .2s, border-color .2s, transform .2s;
}
.upaper-block.authors-grid-block.ag-align-right .ag-card {
	align-items: flex-start;
	text-align: right;
}
.upaper-block.authors-grid-block .ag-card:hover {
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.06 );
}
.upaper-block.authors-grid-block.ag-clickable .ag-card:hover {
	border-color: var( --accent-color, #f4ac04 );
}
.upaper-block.authors-grid-block .ag-card-link {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}
.upaper-block.authors-grid-block .ag-card-link:focus-visible {
	outline: 2px solid var( --accent-color, #f4ac04 );
	outline-offset: 2px;
}
.upaper-block.authors-grid-block .ag-image,
.upaper-block.authors-grid-block .ag-body,
.upaper-block.authors-grid-block .ag-social {
	position: relative;
	z-index: 2;
}
.upaper-block.authors-grid-block .ag-image {
	display: inline-block;
	width:  var( --ag-image-size, 96px );
	height: var( --ag-image-size, 96px );
	overflow: hidden;
	flex: 0 0 var( --ag-image-size, 96px );
	background: #f0f0f0;
}
.upaper-block.authors-grid-block.ag-img-circle  .ag-image { border-radius: 50%; }
.upaper-block.authors-grid-block.ag-img-rounded .ag-image { border-radius: 10px; }
.upaper-block.authors-grid-block.ag-img-square  .ag-image { border-radius: 0; }
.upaper-block.authors-grid-block .ag-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.upaper-block.authors-grid-block .ag-body {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.upaper-block.authors-grid-block .ag-name {
	margin: 0;
	font-family: var( --ag-name-font, inherit );
	font-size:   var( --ag-name-size, 18px );
	line-height: var( --ag-name-line-height, 1.4 );
	font-weight: var( --ag-name-weight, 700 );
	/* Force inheritance so the wrapper's .ag-align-* class drives the title
	 * alignment. The theme's global h3 typography ships its own text-align,
	 * which would otherwise win on specificity. */
	text-align: inherit;
}
.upaper-block.authors-grid-block .ag-name a {
	color: var( --ag-name-color, inherit );
	text-decoration: none;
}
.upaper-block.authors-grid-block .ag-name a:hover {
	color: var( --accent-color, #1f6b6d );
}
.upaper-block.authors-grid-block .ag-bio {
	margin: 0;
	font-family: var( --ag-bio-font, inherit );
	font-size:   var( --ag-bio-size, 13px );
	line-height: var( --ag-bio-line-height, 1.7 );
	font-weight: var( --ag-bio-weight, 400 );
	color:       var( --ag-bio-color, #666 );
	text-align: inherit;
}
.upaper-block.authors-grid-block .ag-count {
	font-family: var( --ag-count-font, inherit );
	font-size:   var( --ag-count-size, 12px );
	color:       var( --ag-count-color, #888 );
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
}
.upaper-block.authors-grid-block.ag-align-center .ag-count {
	justify-content: center;
}
.upaper-block.authors-grid-block .ag-count-num {
	font-weight: 700;
	color: var( --accent-color, #1f6b6d );
}
.upaper-block.authors-grid-block .ag-social {
	display: flex;
	gap: 6px;
	margin-top: 4px;
}
.upaper-block.authors-grid-block.ag-align-center .ag-social {
	justify-content: center;
}
.upaper-block.authors-grid-block .ag-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var( --accent-color, #f4ac04 );
	color: #000;
	text-decoration: none;
	font-size: 13px;
	transition: opacity .15s;
}
.upaper-block.authors-grid-block .ag-social a:hover {
	opacity: 0.8;
}
.upaper-block.authors-grid-block .ag-empty {
	grid-column: 1 / -1;
	text-align: center;
	color: #777;
	padding: 40px 0;
}

/* Widen the block editor canvas (only takes effect inside the editor iframe). */
.editor-styles-wrapper .wp-block,
.editor-styles-wrapper .is-root-container,
.editor-styles-wrapper .is-root-container > .wp-block {
	max-width: none;
}
.editor-styles-wrapper {
	padding-left: 16px;
	padding-right: 16px;
}

/* ============================================================
 * upaper/business-trade
 * Composite "Business & Trade" block driven by the Data APIs
 * scraper snapshots (PSX, currencies, gold/silver, crypto) plus
 * a posts carousel on the right column.
 * ============================================================ */

.upaper-block.upaper-business-trade {
	font-family: var( --ubt-font, inherit );
	display: flex;
	flex-direction: column;
	gap: 14px;
	direction: ltr;
}
.upaper-business-trade.upaper-currency-rates .ubt-header, .upaper-metal-rates .ubt-header, .upaper-crypto-rates .ubt-header {
	flex-direction: row-reverse !important;
}
.upaper-business-trade .ubt-header h2 {
	font-size: var( --ubt-header-size, 22px );
	font-weight: var( --ubt-header-weight, 700 );
	color: var( --ubt-header-color, inherit );
}
.upaper-business-trade .ubt-empty {
	margin: 8px 0;
	padding: 12px 14px;
	background: #f4f4f4;
	border-radius: 6px;
	color: #555;
	font-size: 13px;
}

/* ---------- PSX ticker ---------- */
.upaper-business-trade .ubt-ticker {
	display: flex;
	align-items: stretch;
	background: var( --ubt-ticker-bg, #fff );
	border: var( --ubt-card-bd-thickness, 1px ) solid var( --ubt-card-bd-color, #e5e5e5 );
	border-radius: var( --ubt-card-radius, 8px );
	overflow: hidden;
	color: var( --ubt-ticker-color, inherit );
}

.upaper-business-trade .ubt-ticker-badge {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	padding: 2px 16px 0 16px;
	font-weight: 700;
	letter-spacing: 0.5px;
	font-size: 14px;
	background: var( --ubt-ticker-badge-bg, #c00 );
	color: var( --ubt-ticker-badge-color, #fff );
	text-transform: uppercase;
}

.upaper-business-trade .ubt-ticker-viewport {
	flex: 1 1 auto;
	overflow: hidden;
	position: relative;
}

.upaper-business-trade .ubt-ticker-track {
	display: inline-flex;
	gap: 28px;
	padding: 12px 16px;
	white-space: nowrap;
	will-change: transform;
	animation: ubt-marquee var( --ubt-psx-scroll, 60s ) linear infinite;
	line-height: 1.2;
}

.upaper-business-trade .ubt-ticker.is-paused .ubt-ticker-track,
.upaper-business-trade .ubt-ticker:hover .ubt-ticker-track {
	animation-play-state: paused;
}

.upaper-business-trade .ubt-ticker.is-reduced-motion .ubt-ticker-track {
	animation: none;
}

@keyframes ubt-marquee {
	0%   { transform: translateX( 0 ); }
	100% { transform: translateX( -50% ); }
}

[dir="ltr"] .upaper-business-trade .ubt-ticker-track {
	animation-direction: reverse;
}

.upaper-business-trade .ubt-tick {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	padding-top: 2px;
}

.upaper-business-trade .ubt-tick-symbol {
	font-weight: 700;
}

.upaper-business-trade .ubt-tick-up    { color: var( --ubt-up,   #1aaa55 ); }
.upaper-business-trade .ubt-tick-down  { color: var( --ubt-down, #d93025 ); }
.upaper-business-trade .ubt-tick-flat  { color: inherit; }

.upaper-business-trade .ubt-ticker-empty {
	flex: 1 1 auto;
	padding: 12px 16px;
	font-size: 13px;
	color: #777;
}

/* ---------- Two-column grid ---------- */
.upaper-business-trade .ubt-grid {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 380px );
	gap: 16px;
}

@media ( max-width: 900px ) {
	.upaper-business-trade .ubt-grid {
		grid-template-columns: 1fr;
	}
}
@media ( max-width: 500px ) {

}
.upaper-business-trade .ubt-col-main {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

/* ---------- Card row (currency / metals / crypto) ---------- */
.upaper-business-trade .ubt-cards-row {
	position: relative;
}

.upaper-business-trade .ubt-cards-viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.upaper-business-trade .ubt-cards-viewport::-webkit-scrollbar { display: none; }

.upaper-business-trade .ubt-cards-track {
	display: flex;
	gap: var( --ubt-items-gap, 12px );
	padding: 2px;
}

.upaper-business-trade .ubt-card {
	flex: 0 0 auto;
	scroll-snap-align: start;
	background: var( --ubt-card-bg, #fff );
	border: var( --ubt-card-bd-thickness, 1px ) solid var( --ubt-card-bd-color, #e5e5e5 );
	border-radius: var( --ubt-card-radius, 8px );
	padding: var( --ubt-card-padding, 16px );
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-width: 180px;
	text-align: center;
}

.upaper-business-trade .ubt-card-title {
	font-size: var( --ubt-label-size, 14px );
	color: var( --ubt-label-color, #555 );
	font-weight: 600;
	line-height: 1.3;
	font-family: "Roboto", sans-serif;
}

.upaper-business-trade .ubt-card-value {
	font-size: var( --ubt-value-size, 18px );
	font-weight: var( --ubt-value-weight, 700 );
	color: var( --ubt-value-color, #111 );
	line-height: 1.2;
}

.upaper-business-trade .ubt-arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 5;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	border: none;
	background: #fff;
	color: #111;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.18 ), 0 1px 3px rgba( 0, 0, 0, 0.08 );
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease, background 0.15s ease, color 0.15s ease, transform 0.18s ease;
}

.upaper-business-trade .ubt-arrow i {
	font-size: 16px;
	line-height: 1;
}

.upaper-business-trade .ubt-arrow-prev { left: 6px; }
.upaper-business-trade .ubt-arrow-next { right: 6px; }

.upaper-business-trade .ubt-cards-row:hover .ubt-arrow,
.upaper-business-trade .ubt-cards-row:focus-within .ubt-arrow {
	opacity: 1;
	pointer-events: auto;
}

.upaper-business-trade .ubt-arrow:hover:not(:disabled) {
	background: var( --ubt-accent, #111 );
	color: #fff;
	transform: translateY( -50% ) scale( 1.06 );
}

.upaper-business-trade .ubt-arrow:disabled {
	opacity: 0;
	pointer-events: none;
}

.upaper-business-trade .ubt-no-overflow .ubt-arrow {
	display: none;
}

/* Touch devices: arrows can't appear on hover, so reveal them when there is
 * overflow regardless. */
@media ( hover: none ) {
	.upaper-business-trade .ubt-cards-row .ubt-arrow {
		opacity: 1;
		pointer-events: auto;
	}
}

/* Mobile: hide navigation arrows — the row is swipeable, and the buttons
 * eat too much horizontal space on narrow screens. */
@media ( max-width: 640px ) {
	.upaper-business-trade .ubt-cards-row .ubt-arrow {
		display: none;
	}
}

/* FX cards */
.upaper-business-trade .ubt-fx-card .ubt-fx-flags {
	line-height: 1;
	display: flex;
	align-items: center;
	gap: 8px;
}
.upaper-business-trade .ubt-fx-card .ubt-flag-img {
	width: 32px;
	height: 24px;
	border-radius: 3px;
	object-fit: cover;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
	display: block;
}
.upaper-business-trade .ubt-fx-card .ubt-fx-arrow {
	font-size: 18px;
	color: #aaa;
}
.upaper-business-trade .ubt-arrow-glyph { color: #aaa; margin: 0 4px; }

/* Metal cards — vertical (label top, icon middle, price bottom).
 * Outer card uses the shared .ubt-card border/radius/padding from defaults.
 * Cards flex-grow to fill the row equally so the strip uses the full width. */
.upaper-business-trade .ubt-cards-metals .ubt-cards-track {
	width: 100%;
	flex-wrap: wrap;
}
.upaper-business-trade .ubt-cards-metals .ubt-card {
	flex: 1 1 calc( 50% - var( --ubt-items-gap, 12px ) );
	min-width: calc( 50% - var( --ubt-items-gap, 12px ) );
}
@media ( min-width: 641px ) {
	.upaper-business-trade .ubt-cards-metals .ubt-card {
		flex: 1 1 0;
		min-width: 0;
	}
}
.upaper-business-trade .ubt-metal-card .ubt-metal-icon {
	width: 56px;
	height: 56px;
	object-fit: contain;
	display: block;
}

/* Crypto cards — horizontal layout (logo + meta) */
.upaper-business-trade .ubt-cards-crypto .ubt-card {
	flex-direction: row;
	text-align: start;
	min-width: 220px;
	position: relative;
}
.upaper-crypto-rates .ubt-crypto-change {
	position: absolute;
	top: 0;
	right: 0;
	padding: 4px 8px;
	font-size: 12px;
	border-radius: 0 7px 0 8px;
	background-color: #f0f0f0;
}
.upaper-business-trade .ubt-crypto-logo {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	flex: 0 0 36px;
	object-fit: contain;
}
.upaper-business-trade .ubt-crypto-logo-fallback {
	background: #eee;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}
.upaper-business-trade .ubt-crypto-meta {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.upaper-business-trade .ubt-crypto-sym {
	color: #888;
	font-weight: 500;
}

/* ---------- News carousel (right column) ---------- */
.upaper-business-trade .ubt-col-news {
	min-width: 0;
}

.upaper-business-trade .ubt-news-slider {
	border-radius: var( --ubt-card-radius, 8px );
	overflow: hidden;
	background: var( --ubt-card-bg, #fff );
}

.upaper-business-trade .ubt-news-slide {
	position: relative;
}

.upaper-business-trade .ubt-news-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.upaper-business-trade .ubt-news-thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.upaper-business-trade .ubt-news-body {
	position: absolute;
	inset: auto 0 0 0;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.82 ) 30%, rgba( 0, 0, 0, 0 ) 100% );
	color: #fff;
}

.upaper-business-trade .ubt-news-cat {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var( --ubt-accent, #f4ac04 );
}

.upaper-business-trade .ubt-news-title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Static-stack fallback inside the editor preview (no Owl). */
.upaper-business-trade .upaper-carousel-preview .ubt-news-slide {
	display: block;
	margin-bottom: 10px;
}
.upaper-business-trade .upaper-carousel-preview .ubt-news-slide:not(:first-child) {
	display: none;
}

/* ============================================================
 * Weather Card (upaper/weather-card)
 * Layout / palette / typography driven by attributes via CSS vars
 * exposed on the wrapper as inline style: --uw-bg, --uw-fg, --uw-accent,
 * --uw-radius, --uw-padding, --uw-font, --uw-heading-size,
 * --uw-temp-size, --uw-label-size, --uw-value-size.
 * ============================================================ */
.upaper-weather-card {
	--uw-bg:           #1e3a8a;
	--uw-fg:           #fff;
	--uw-accent:       rgba( 255, 255, 255, 0.22 );
	--uw-radius:       14px;
	--uw-padding:      22px;
	--uw-heading-size: 16px;
	--uw-temp-size:    52px;
	--uw-label-size:   11px;
	--uw-value-size:   14px;

	position: relative;
	box-sizing: border-box;
	padding: var( --uw-padding );
	border-radius: var( --uw-radius );
	background: var( --uw-bg );
	color: var( --uw-fg );
	font-family: var( --uw-font, inherit );
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Weather-themed gradients (day + night). Animated overlays are defined
 * further down via ::before/::after pseudo-elements per palette. */
.upaper-weather-card--bg-weather.upaper-weather-card--pal-clear-day    { --uw-bg: linear-gradient( 135deg, #fbbf24 0%, #f97316 55%, #ea580c 100% ); }
.upaper-weather-card--bg-weather.upaper-weather-card--pal-clear-night  { --uw-bg: linear-gradient( 160deg, #0f172a 0%, #1e293b 60%, #312e81 100% ); }
.upaper-weather-card--bg-weather.upaper-weather-card--pal-cloudy-day   { --uw-bg: linear-gradient( 135deg, #64748b 0%, #94a3b8 60%, #cbd5e1 100% ); }
.upaper-weather-card--bg-weather.upaper-weather-card--pal-cloudy-night { --uw-bg: linear-gradient( 160deg, #1e293b 0%, #334155 60%, #475569 100% ); }
.upaper-weather-card--bg-weather.upaper-weather-card--pal-rain         { --uw-bg: linear-gradient( 160deg, #1e3a8a 0%, #2563eb 60%, #3b82f6 100% ); }
.upaper-weather-card--bg-weather.upaper-weather-card--pal-snow         { --uw-bg: linear-gradient( 135deg, #bfdbfe 0%, #e0f2fe 100% ); --uw-fg: #0f172a; --uw-accent: rgba( 15, 23, 42, 0.12 ); }
.upaper-weather-card--bg-weather.upaper-weather-card--pal-storm        { --uw-bg: linear-gradient( 160deg, #0f172a 0%, #1e1b4b 50%, #4c1d95 100% ); }
.upaper-weather-card--bg-weather.upaper-weather-card--pal-fog          { --uw-bg: linear-gradient( 135deg, #94a3b8 0%, #cbd5e1 100% ); --uw-fg: #1e293b; --uw-accent: rgba( 15, 23, 42, 0.12 ); }
/* Back-compat: pre-existing markup may still emit pal-sunny / pal-cloudy
 * (no day/night suffix). Map them to the day variants. */
.upaper-weather-card--bg-weather.upaper-weather-card--pal-sunny  { --uw-bg: linear-gradient( 135deg, #fbbf24 0%, #f97316 55%, #ea580c 100% ); }
.upaper-weather-card--bg-weather.upaper-weather-card--pal-cloudy { --uw-bg: linear-gradient( 135deg, #64748b 0%, #94a3b8 60%, #cbd5e1 100% ); }

/* Alignment */
.upaper-weather-card--align-left   { text-align: left; }
.upaper-weather-card--align-center { text-align: center; }
.upaper-weather-card--align-right  { text-align: right; }

/* Header */
.upaper-weather-card-header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 12px;
	justify-content: space-between;
}
.upaper-weather-card--align-center .upaper-weather-card-header { justify-content: center; }
.upaper-weather-card--align-right  .upaper-weather-card-header { justify-content: flex-end; }
.upaper-weather-card-title {
	margin: 0;
	font-size: var( --uw-heading-size );
	font-weight: var( --uw-heading-weight, 700 );
	font-family: var( --uw-header-font, var( --uw-font, inherit ) );
	color: inherit;
	line-height: 1.2;
}
.upaper-weather-card-date {
	font-size: 12px;
	font-family: var( --uw-header-font, var( --uw-font, inherit ) );
	opacity: 0.78;
	letter-spacing: 0.02em;
}

/* Main row */
.upaper-weather-card-main {
	display: flex;
	align-items: center;
	gap: 18px;
}
.upaper-weather-card--align-center .upaper-weather-card-main { justify-content: center; }
.upaper-weather-card--align-right  .upaper-weather-card-main { flex-direction: row-reverse; justify-content: flex-start; }
.upaper-weather-card-icon {
	font-size: clamp( 48px, 6vw, 72px );
	line-height: 1;
}
.upaper-weather-card-temp {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	line-height: 1;
	direction: ltr;
}
.upaper-weather-card-temp-num {
	font-size: var( --uw-temp-size );
	font-weight: var( --uw-temp-weight, 700 );
	font-family: var( --uw-value-font, var( --uw-font, inherit ) );
}
.upaper-weather-card-temp-unit {
	font-size: calc( var( --uw-temp-size ) * 0.45 );
	font-weight: 500;
	font-family: var( --uw-value-font, var( --uw-font, inherit ) );
	opacity: 0.85;
	margin-left: 2px;
}
.upaper-weather-card-city {
	font-size: 16px;
	font-weight: 600;
	font-family: var( --uw-label-font, var( --uw-font, inherit ) );
	margin-top: 2px;
}
.upaper-weather-card-cond {
	font-size: 13px;
	font-family: var( --uw-label-font, var( --uw-font, inherit ) );
	opacity: 0.82;
	margin-top: 2px;
}

/* Stat tiles */
.upaper-weather-card-stats {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 90px, 1fr ) );
	gap: 8px;
	margin: 0;
}
.upaper-weather-card-stats > div {
	background: var( --uw-accent );
	padding: 10px 8px;
	border-radius: 8px;
	text-align: center;
	min-width: 0;
}
.upaper-weather-card-stats dt {
	font-size: var( --uw-label-size );
	font-family: var( --uw-label-font, var( --uw-font, inherit ) );
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.78;
	margin: 0 0 4px;
}
.upaper-weather-card-stats dd {
	font-size: var( --uw-value-size );
	font-family: var( --uw-value-font, var( --uw-font, inherit ) );
	font-weight: 700;
	margin: 0;
}

/* Forecast strip — horizontally scrollable carousel with hover-revealed
 * prev/next arrows. Same pattern as business-trade's currency/crypto rows. */
.upaper-weather-card-forecast {
	position: relative;
	/* Force LTR so scrollLeft behaves normally (0 at the visual left, positive
	 * to the right). Without this the forecast inherits the page's RTL
	 * direction and scrollBy({ left: +X }) clamps at 0. Same pattern that
	 * upaper/business-trade applies on its outer wrapper. */
	direction: ltr;
}
.upaper-weather-card-forecast-viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.upaper-weather-card-forecast-viewport::-webkit-scrollbar { display: none; }
.upaper-weather-card-forecast-track {
	display: flex;
	gap: 8px;
	padding: 2px;
}
.upaper-weather-card-day {
	flex: 0 0 80px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 10px 6px;
	background: var( --uw-accent );
	border-radius: 8px;
	font-size: 12px;
	min-width: 0;
}

.upaper-weather-card-forecast-arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 5;
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 50%;
	border: none;
	background: rgba( 255, 255, 255, 0.92 );
	color: #111;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.25 );
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
}
.upaper-weather-card-forecast-arrow i { font-size: 14px; line-height: 1; }
.upaper-weather-card-forecast-arrow-prev { left: -4px; }
.upaper-weather-card-forecast-arrow-next { right: -4px; }
.upaper-weather-card-forecast:hover .upaper-weather-card-forecast-arrow,
.upaper-weather-card-forecast:focus-within .upaper-weather-card-forecast-arrow {
	opacity: 1;
	pointer-events: auto;
}
.upaper-weather-card-forecast-arrow:hover:not(:disabled) {
	transform: translateY( -50% ) scale( 1.08 );
}
.upaper-weather-card-forecast-arrow:disabled {
	opacity: 0;
	pointer-events: none;
}
@media ( hover: none ) {
	.upaper-weather-card-forecast .upaper-weather-card-forecast-arrow {
		opacity: 1;
		pointer-events: auto;
	}
}
.upaper-weather-card-day-label {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.78;
	font-size: 11px;
	font-family: var( --uw-label-font, var( --uw-font, inherit ) );
}
.upaper-weather-card-day-icon { font-size: 22px; line-height: 1; }
.upaper-weather-card-day-temp {
	font-weight: 600;
	font-family: var( --uw-value-font, var( --uw-font, inherit ) );
}

/* Layout variants */
.upaper-weather-card--layout-hero {
	min-height: 280px;
	justify-content: space-between;
}
/* Forecast-only mode: with the hero panel suppressed, the hero
 * layout's tall min-height + space-between would leave a big empty
 * area between the header and the forecast strip. Collapse both so
 * the card sizes to just header + forecast. */
.upaper-weather-card--no-current {
	min-height: 0;
	justify-content: flex-start;
}
.upaper-weather-card--no-current.upaper-weather-card--layout-hero {
	min-height: 0;
}
.upaper-weather-card--layout-hero .upaper-weather-card-temp-num { font-size: calc( var( --uw-temp-size ) * 1.3 ); }
.upaper-weather-card--layout-hero .upaper-weather-card-icon     { font-size: clamp( 60px, 8vw, 96px ); }

.upaper-weather-card--layout-compact {
	padding: 14px 16px;
	gap: 10px;
}
.upaper-weather-card--layout-compact .upaper-weather-card-main { gap: 12px; }
.upaper-weather-card--layout-compact .upaper-weather-card-icon { font-size: 36px; }
.upaper-weather-card--layout-compact .upaper-weather-card-temp-num { font-size: calc( var( --uw-temp-size ) * 0.6 ); }
.upaper-weather-card--layout-compact .upaper-weather-card-stats,
.upaper-weather-card--layout-compact .upaper-weather-card-forecast { gap: 6px; }
.upaper-weather-card--layout-compact .upaper-weather-card-stats > div,
.upaper-weather-card--layout-compact .upaper-weather-card-day      { padding: 6px 4px; }

/* ============================================================
 * Weather Card — animated weather overlays.
 *
 * Each .upaper-weather-card--bg-weather card gets two stacked layers via
 * ::before and ::after, absolutely positioned over the gradient. Layers
 * carry the actual animation (twinkling stars, drifting clouds, falling rain
 * / snow, lightning flash, foggy strips). Content stays on top via
 * .upaper-weather-card > * { position: relative; z-index: 1 }.
 * ============================================================ */
.upaper-weather-card--bg-weather > * { position: relative; z-index: 1; }
.upaper-weather-card--bg-weather::before,
.upaper-weather-card--bg-weather::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

/* --- Clear day: subtle sun glow in the top corner + slow pulse --- */
.upaper-weather-card--pal-clear-day::before {
	background:
		radial-gradient( circle 120px at 85% 18%, rgba( 255, 255, 200, 0.55 ) 0%, rgba( 255, 255, 200, 0 ) 70% );
	animation: uw-sun-pulse 6s ease-in-out infinite;
}
.upaper-weather-card--pal-clear-day::after {
	background:
		radial-gradient( circle 60px at 85% 18%, rgba( 255, 255, 200, 0.85 ) 0%, rgba( 255, 200, 80, 0.55 ) 40%, transparent 70% );
	animation: uw-sun-rays 8s linear infinite;
}
@keyframes uw-sun-pulse {
	0%, 100% { opacity: 0.8; transform: scale( 1 ); }
	50%      { opacity: 1;   transform: scale( 1.08 ); }
}
@keyframes uw-sun-rays {
	0%   { filter: hue-rotate( 0deg ); }
	100% { filter: hue-rotate( 20deg ); }
}

/* --- Clear night: starfield + slow twinkle. The dots are baked into a
 *     radial-gradient image; box-shadow + animation alone wouldn't position
 *     them randomly. --- */
.upaper-weather-card--pal-clear-night::before {
	background:
		radial-gradient( 1.5px 1.5px at 10% 15%, #fff 100%, transparent ),
		radial-gradient( 1px   1px   at 25% 32%, #fff 100%, transparent ),
		radial-gradient( 2px   2px   at 40% 12%, #fff 100%, transparent ),
		radial-gradient( 1px   1px   at 60% 25%, #fff 100%, transparent ),
		radial-gradient( 1.5px 1.5px at 78% 18%, #fff 100%, transparent ),
		radial-gradient( 1px   1px   at 90% 40%, #fff 100%, transparent ),
		radial-gradient( 1.5px 1.5px at 15% 55%, #fff 100%, transparent ),
		radial-gradient( 1px   1px   at 35% 70%, #fff 100%, transparent ),
		radial-gradient( 1px   1px   at 55% 80%, #fff 100%, transparent ),
		radial-gradient( 1.5px 1.5px at 72% 65%, #fff 100%, transparent ),
		radial-gradient( 1px   1px   at 88% 78%, #fff 100%, transparent );
	animation: uw-twinkle 3.5s ease-in-out infinite;
}
.upaper-weather-card--pal-clear-night::after {
	background:
		radial-gradient( circle 60px at 82% 22%, rgba( 226, 232, 240, 0.92 ) 0%, rgba( 226, 232, 240, 0 ) 70% );
}
@keyframes uw-twinkle {
	0%, 100% { opacity: 0.55; }
	50%      { opacity: 1; }
}

/* --- Cloudy day: drifting cloud blobs --- */
.upaper-weather-card--pal-cloudy-day::before,
.upaper-weather-card--pal-cloudy-night::before {
	background:
		radial-gradient( ellipse 120px 40px at 20% 30%, rgba( 255, 255, 255, 0.35 ) 0%, transparent 60% ),
		radial-gradient( ellipse 150px 50px at 70% 60%, rgba( 255, 255, 255, 0.28 ) 0%, transparent 60% ),
		radial-gradient( ellipse 100px 35px at 45% 80%, rgba( 255, 255, 255, 0.22 ) 0%, transparent 60% );
	background-size: 200% 100%;
	animation: uw-clouds 28s linear infinite;
}
.upaper-weather-card--pal-cloudy-night::before {
	background:
		radial-gradient( ellipse 120px 40px at 20% 30%, rgba( 226, 232, 240, 0.18 ) 0%, transparent 60% ),
		radial-gradient( ellipse 150px 50px at 70% 60%, rgba( 226, 232, 240, 0.13 ) 0%, transparent 60% ),
		radial-gradient( ellipse 100px 35px at 45% 80%, rgba( 226, 232, 240, 0.1 )  0%, transparent 60% );
	background-size: 200% 100%;
	animation: uw-clouds 32s linear infinite;
}
@keyframes uw-clouds {
	0%   { background-position:    0% 0,    0% 0,    0% 0; }
	100% { background-position: -200% 0, -200% 0, -200% 0; }
}

/* --- Rain: two parallaxing layers of elongated drops.
 *     Drops are tiny vertical radial-gradients; a small tile size (so the
 *     translate distance actually scrolls the pattern) plus repeat fills the
 *     card. ::before is the foreground (bigger, faster), ::after the
 *     background (smaller, slower) for depth. The card is mildly tilted on
 *     the wrapper via transform so the drops fall at a slight angle. --- */
.upaper-weather-card--pal-rain::before {
	background-image:
		radial-gradient( 1.4px 7px at 18% 12%, rgba( 255, 255, 255, 0.85 ), transparent 70% ),
		radial-gradient( 1.4px 7px at 58% 40%, rgba( 255, 255, 255, 0.85 ), transparent 70% ),
		radial-gradient( 1.4px 7px at 86% 78%, rgba( 255, 255, 255, 0.85 ), transparent 70% );
	background-size: 48px 48px;
	background-repeat: repeat;
	transform: rotate( 12deg ) scale( 1.4 );
	transform-origin: center;
	animation: uw-rain-fg 0.55s linear infinite;
}
.upaper-weather-card--pal-rain::after {
	background-image:
		radial-gradient( 1px 5px at 30% 22%, rgba( 255, 255, 255, 0.5 ), transparent 70% ),
		radial-gradient( 1px 5px at 70% 58%, rgba( 255, 255, 255, 0.5 ), transparent 70% ),
		radial-gradient( 1px 5px at 50% 88%, rgba( 255, 255, 255, 0.5 ), transparent 70% );
	background-size: 64px 64px;
	background-repeat: repeat;
	transform: rotate( 12deg ) scale( 1.4 );
	transform-origin: center;
	animation: uw-rain-bg 0.95s linear infinite;
}
@keyframes uw-rain-fg {
	0%   { background-position: 0 0,    0 0,    0 0; }
	100% { background-position: 0 48px, 0 48px, 0 48px; }
}
@keyframes uw-rain-bg {
	0%   { background-position: 0 0,    0 0,    0 0; }
	100% { background-position: 0 64px, 0 64px, 0 64px; }
}

/* --- Snow: small falling dots --- */
.upaper-weather-card--pal-snow::before {
	background-image:
		radial-gradient( 2px 2px at 12% 8%,  rgba( 255, 255, 255, 0.95 ) 100%, transparent ),
		radial-gradient( 2px 2px at 30% 18%, rgba( 255, 255, 255, 0.95 ) 100%, transparent ),
		radial-gradient( 1.5px 1.5px at 50% 30%, rgba( 255, 255, 255, 0.85 ) 100%, transparent ),
		radial-gradient( 2px 2px at 72% 14%, rgba( 255, 255, 255, 0.95 ) 100%, transparent ),
		radial-gradient( 2px 2px at 90% 25%, rgba( 255, 255, 255, 0.85 ) 100%, transparent ),
		radial-gradient( 1.5px 1.5px at 18% 60%, rgba( 255, 255, 255, 0.9 ) 100%, transparent ),
		radial-gradient( 2px 2px at 42% 55%, rgba( 255, 255, 255, 0.9 ) 100%, transparent ),
		radial-gradient( 1.5px 1.5px at 65% 72%, rgba( 255, 255, 255, 0.95 ) 100%, transparent ),
		radial-gradient( 2px 2px at 82% 88%, rgba( 255, 255, 255, 0.9 ) 100%, transparent );
	background-size: 100% 100%;
	animation: uw-snow 8s linear infinite;
}
@keyframes uw-snow {
	0%   { background-position: 0 0,    0 0,    0 0,    0 0,    0 0,    0 0,    0 0,    0 0,    0 0; }
	100% { background-position: 0 100%, 0 100%, 0 100%, 0 100%, 0 100%, 0 100%, 0 100%, 0 100%, 0 100%; }
}

/* --- Storm: rain + periodic lightning flash --- */
.upaper-weather-card--pal-storm::before {
	background-image:
		radial-gradient( 1.4px 7px at 18% 12%, rgba( 255, 255, 255, 0.85 ), transparent 70% ),
		radial-gradient( 1.4px 7px at 58% 40%, rgba( 255, 255, 255, 0.85 ), transparent 70% ),
		radial-gradient( 1.4px 7px at 86% 78%, rgba( 255, 255, 255, 0.85 ), transparent 70% );
	background-size: 44px 44px;
	background-repeat: repeat;
	transform: rotate( 14deg ) scale( 1.4 );
	transform-origin: center;
	animation: uw-storm-fg 0.42s linear infinite;
}
@keyframes uw-storm-fg {
	0%   { background-position: 0 0,    0 0,    0 0; }
	100% { background-position: 0 44px, 0 44px, 0 44px; }
}
.upaper-weather-card--pal-storm::after {
	background: rgba( 255, 255, 255, 0.95 );
	mix-blend-mode: screen;
	opacity: 0;
	animation: uw-flash 7s steps( 1, end ) infinite;
}
@keyframes uw-flash {
	0%, 92%, 100% { opacity: 0; }
	93%           { opacity: 0.7; }
	94%           { opacity: 0; }
	95%           { opacity: 0.85; }
	96%           { opacity: 0.15; }
}

/* --- Fog: horizontal blurred strips drifting --- */
.upaper-weather-card--pal-fog::before {
	background:
		linear-gradient( to bottom,
			transparent 0%,
			rgba( 255, 255, 255, 0.22 ) 25%,
			transparent 38%,
			transparent 62%,
			rgba( 255, 255, 255, 0.28 ) 78%,
			transparent 100% );
	background-size: 200% 100%;
	animation: uw-fog 14s ease-in-out infinite alternate;
	filter: blur( 4px );
}
@keyframes uw-fog {
	0%   { background-position: 0   0; }
	100% { background-position: 100% 0; }
}

/* Frosted glass on the stat + forecast tiles when the card has an animated
 * weather background. The default --uw-accent is translucent (0.22 white),
 * which lets the rain / snow / cloud animation bleed through the tile and
 * read as if it's painted on top. Bumping the opacity and blurring whatever
 * is behind the tile makes them read as solid surfaces in front of the
 * animation. Both effects are scoped to --bg-weather so plain-bg cards keep
 * their original see-through look. */
.upaper-weather-card--bg-weather .upaper-weather-card-stats > div,
.upaper-weather-card--bg-weather .upaper-weather-card-day {
	background: rgba( 255, 255, 255, 0.16 );
	-webkit-backdrop-filter: blur( 10px );
	backdrop-filter: blur( 10px );
	border: 1px solid rgba( 255, 255, 255, 0.18 );
}
/* Snow / fog palettes have a light gradient + dark text, so the white frost
 * disappears against the bg. Use a dark frost instead. */
.upaper-weather-card--bg-weather.upaper-weather-card--pal-snow .upaper-weather-card-stats > div,
.upaper-weather-card--bg-weather.upaper-weather-card--pal-snow .upaper-weather-card-day,
.upaper-weather-card--bg-weather.upaper-weather-card--pal-fog  .upaper-weather-card-stats > div,
.upaper-weather-card--bg-weather.upaper-weather-card--pal-fog  .upaper-weather-card-day {
	background: rgba( 15, 23, 42, 0.08 );
	border-color: rgba( 15, 23, 42, 0.12 );
}

/* Accessibility — respect reduced-motion preference, freeze every effect. */
@media ( prefers-reduced-motion: reduce ) {
	.upaper-weather-card--bg-weather::before,
	.upaper-weather-card--bg-weather::after {
		animation: none !important;
	}
}

/* Editor: ensure the block fills the iframe column nicely. */
.wp-block[data-type="upaper/weather-card"] .upaper-weather-card { margin: 0; }


/* ---------------------------------------------------------------------------
 * upaper/prayer-times — beautiful prayer-time card driven by the Islamic
 * snapshot (Fajr → Isha grid + Hijri/Gregorian date strip).
 *
 * Style vars exposed on the wrapper as inline style:
 * --p-bg, --p-fg, --p-strip-bg, --p-strip-fg, --p-strip-accent,
 * --p-card-bg, --p-card-fg, --p-card-bd,
 * --p-active-bg, --p-active-fg, --p-active-accent,
 * --p-radius, --p-card-radius, --p-padding, --p-gap, --p-cols,
 * --p-font, --p-hijri-font, --p-weekday-size, --p-hijri-size,
 * --p-hijri-ar-size, --p-label-size, --p-time-size,
 * --p-label-weight, --p-time-weight.
 * ------------------------------------------------------------------------- */
.upaper-prayer-times {
	--p-bg:            #ffffff;
	--p-fg:            #0f172a;
	--p-strip-bg:      #fdf4dc;
	--p-strip-fg:      #6b5a1f;
	--p-strip-accent:  #d4a017;
	--p-card-bg:       #f8fafc;
	--p-card-fg:       #0f172a;
	--p-card-bd:       #e5e7eb;
	--p-active-bg:     #111111;
	--p-active-fg:     #ffffff;
	--p-active-accent: #f5b400;
	--p-radius:        14px;
	--p-card-radius:   10px;
	--p-padding:       22px;
	--p-gap:           14px;
	--p-cols:          3;
	--p-weekday-size:  14px;
	--p-hijri-size:    22px;
	--p-hijri-ar-size: 22px;
	--p-label-size:    13px;
	--p-time-size:     28px;
	--p-label-weight:  700;
	--p-time-weight:   700;

	display: block;
	background: var( --p-bg );
	color: var( --p-fg );
	border-radius: var( --p-radius );
	padding: var( --p-padding );
	font-family: var( --p-font, inherit );
	box-shadow: 0 1px 0 rgba( 15, 23, 42, 0.04 ), 0 8px 24px -16px rgba( 15, 23, 42, 0.18 );
}
.upaper-prayer-times *,
.upaper-prayer-times *::before,
.upaper-prayer-times *::after { box-sizing: border-box; }

.upaper-prayer-times--align-left   { text-align: left; }
.upaper-prayer-times--align-center { text-align: center; }
.upaper-prayer-times--align-right  { text-align: right; }

/* Debug-style scrape metadata strip. Off by default; toggled on for wiring. */
.upaper-prayer-times-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	font-size: 12px;
	color: #64748b;
	padding-bottom: 14px;
	margin-bottom: 14px;
	border-bottom: 1px solid #e5e7eb;
	text-align: left;
}
.upaper-prayer-times-meta strong { color: #0f172a; font-weight: 700; }
.upaper-prayer-times-meta a {
	color: #2563eb;
	text-decoration: underline;
	word-break: break-all;
}

/* Hijri/Gregorian date strip (the cream bar in the reference). */
.upaper-prayer-times-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var( --p-strip-bg );
	color: var( --p-strip-fg );
	border-radius: calc( var( --p-card-radius ) + 2px );
	padding: 16px 20px;
	margin-bottom: 18px;
	/* Per-area font: header drives the strip, with the block default as a
	   fallback. text-align cascades from the wrapper alignment modifier. */
	font-family: var( --p-header-font, var( --p-font, inherit ) );
}
.upaper-prayer-times-strip-left { flex: 1 1 auto; min-width: 0; }
/* Alignment modifiers — without these the strip stays flex row + space-between
 * regardless of the chosen alignment, leaving the Arabic Hijri pinned to the
 * right edge. Switch to a centered column or reversed row when the wrapper
 * asks for it so every child honors the picked alignment. */
.upaper-prayer-times--align-center .upaper-prayer-times-strip {
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.upaper-prayer-times--align-center .upaper-prayer-times-strip-left { text-align: center; }
.upaper-prayer-times--align-right .upaper-prayer-times-strip {
	flex-direction: row-reverse;
	text-align: right;
}
.upaper-prayer-times--align-right .upaper-prayer-times-strip-left { text-align: right; }
.upaper-prayer-times-top {
	font-size: var( --p-weekday-size );
	font-weight: 500;
	opacity: 0.85;
	margin-bottom: 4px;
}
.upaper-prayer-times-hijri-en {
	font-size: var( --p-hijri-size );
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.01em;
}
.upaper-prayer-times-hijri-ar {
	font-family: var( --p-hijri-font, 'AlQalam Telenor', 'Alkatib Regular', serif );
	font-size: var( --p-hijri-ar-size );
	font-weight: 700;
	color: var( --p-strip-accent );
	white-space: nowrap;
}
.upaper-prayer-times-location {
	font-size: 12px;
	margin-top: 6px;
	opacity: 0.7;
}
.upaper-prayer-times-holidays {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}
.upaper-prayer-times-holiday {
	display: inline-block;
	background: rgba( 255, 255, 255, 0.6 );
	color: var( --p-strip-fg );
	border: 1px solid var( --p-strip-accent );
	border-radius: 999px;
	font-size: 11px;
	padding: 3px 10px;
	font-weight: 600;
}

/* Prayer cards grid. */
.upaper-prayer-times-grid {
	display: grid;
	grid-template-columns: repeat( var( --p-cols, 3 ), minmax( 0, 1fr ) );
	gap: var( --p-gap );
}
@media ( max-width: 640px ) {
	.upaper-prayer-times-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
	.upaper-business-trade .ubt-header h2 {
		font-size: 18px;
	}
}
@media ( max-width: 360px ) {
	.upaper-prayer-times-grid {
		grid-template-columns: 1fr;
	}
}

.upaper-prayer-times-cell {
	background: var( --p-card-bg );
	color: var( --p-card-fg );
	border: 1px solid var( --p-card-bd );
	border-radius: var( --p-card-radius );
	padding: 18px 14px 16px;
	display: flex;
	flex-direction: column;
	/* Default centred; alignment modifiers below pull the contents to the
	   correct cross-axis edge so the user-chosen alignment also reaches
	   inside each prayer card. */
	align-items: center;
	justify-content: center;
	gap: 6px;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.upaper-prayer-times--align-left  .upaper-prayer-times-cell { align-items: flex-start; text-align: left; }
.upaper-prayer-times--align-right .upaper-prayer-times-cell { align-items: flex-end;   text-align: right; }
.upaper-prayer-times-cell:hover {
	transform: translateY( -1px );
	box-shadow: 0 6px 16px -10px rgba( 15, 23, 42, 0.25 );
}
.upaper-prayer-times-cell-label {
	font-family: var( --p-label-font, var( --p-font, inherit ) );
	font-size: var( --p-label-size );
	font-weight: var( --p-label-weight );
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: inherit;
	opacity: 0.65;
}
.upaper-prayer-times-cell-time {
	font-family: var( --p-time-font, var( --p-font, inherit ) );
	font-size: var( --p-time-size );
	font-weight: var( --p-time-weight );
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	direction: ltr;
}
/* RTL prayer labels (Urdu/Arabic) — drop the uppercase + wide tracking that
 * only make sense for Latin text, and let the script render naturally. */
.upaper-prayer-times--rtl-labels .upaper-prayer-times-cell-label {
	text-transform: none;
	letter-spacing: 0;
	font-size: calc( var( --p-label-size ) + 1px );
	opacity: 0.75;
}

/* Active prayer — black card w/ gold label in the reference. */
.upaper-prayer-times-cell.is-active {
	background: var( --p-active-bg );
	color: var( --p-active-fg );
	border-color: var( --p-active-bg );
	box-shadow: 0 10px 24px -14px rgba( 17, 17, 17, 0.55 );
}
.upaper-prayer-times-cell.is-active .upaper-prayer-times-cell-label {
	color: var( --p-active-accent );
	opacity: 1;
}
.upaper-prayer-times-cell.is-active .upaper-prayer-times-cell-time {
	color: var( --p-active-fg );
}

/* Editor: match the front-end margin model. */
.wp-block[data-type="upaper/prayer-times"] .upaper-prayer-times { margin: 0; }

/* ---------------------------------------------------------------------------
 * Horizontal layout — strip on one side, prayer cards flowing in a single
 * row on the other side. Built for full-width / wide alignment so the block
 * fills the page width without piling cards into a tall grid.
 *
 * The grid switches from `repeat(--p-cols, 1fr)` to `repeat(auto-fit, …)`
 * so every prayer cell stays on one line; when the viewport gets too narrow
 * cells wrap rather than break the row.
 * ------------------------------------------------------------------------- */
.upaper-prayer-times--layout-horizontal {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 18px;
}
.upaper-prayer-times--layout-horizontal > .upaper-prayer-times-strip {
	/* Wider than the stacked default so the full weekday + Gregorian and the
	   long Urdu Hijri ("29 ذوالقعدۃ الحرام 1447ھ") both fit on one line
	   without the strip's overflow:hidden clipping a character or two. */
	flex: 0 0 clamp( 280px, 32%, 420px );
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/* Horizontal layout uses a carousel structure mirroring upaper/business-trade:
 *
 *   .upaper-prayer-times-carousel        — wrapper (position: relative)
 *     ├── .upaper-pt-arrow-prev          — circular button, absolutely positioned
 *     ├── .upaper-prayer-times-carousel-viewport  — overflow-x:auto, scrollbar hidden
 *     │     └── .upaper-prayer-times-grid          — flex track of prayer cards
 *     └── .upaper-pt-arrow-next          — circular button, absolutely positioned
 *
 * The native scrollbar is hidden; navigation happens via the buttons (or a
 * touch swipe / trackpad). view.js toggles `.is-no-overflow` on the wrapper
 * when every card already fits, so the arrows can self-hide. */
.upaper-prayer-times-carousel {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	/* Inner flex column so the viewport stretches to match the strip height. */
	display: flex;
	flex-direction: column;
	/* Force LTR for scrollLeft semantics (same trick upaper/business-trade
	 * uses on its outer wrapper). The CARDS still flow right→left visually
	 * because the grid below uses flex-direction: row-reverse — that gives
	 * us RTL visual order without breaking the scroll math. */
	direction: ltr;
}
.upaper-prayer-times-carousel-viewport {
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	/* Hide native scrollbar — the arrow buttons are the affordance. */
	-ms-overflow-style: none;
	scrollbar-width: none;
	/* Vertical padding/margin so the active card's translateY lift and the
	   box-shadow don't get clipped by the overflow:auto. */
	padding: 4px 2px 8px;
	margin: -4px -2px -8px;
}
.upaper-prayer-times-carousel-viewport::-webkit-scrollbar { display: none; }

.upaper-prayer-times--layout-horizontal .upaper-prayer-times-carousel .upaper-prayer-times-grid {
	display: flex;
	/* Plain row (NOT row-reverse). row-reverse triggers RTL-like scrollLeft
	 * semantics in modern browsers — scrollLeft stays at 0 at the visual
	 * right edge and goes negative, which breaks `scrollBy({ left: +X })`
	 * at the initial position. Instead, the cards are output in REVERSE
	 * DOM order in render.php for horizontal layout so Fajr still ends up
	 * on the right with normal LTR scroll math. */
	flex-direction: row;
	flex-wrap: nowrap;
	gap: var( --p-gap );
	/* Cancel the base grid template so flex sizing takes over cleanly. */
	grid-template-columns: none;
	/* Grid fills the viewport's height so its cells (align-items: stretch
	 * is the default for flex rows) stretch to match the strip's height. */
	min-height: 100%;
}
.upaper-prayer-times--layout-horizontal .upaper-prayer-times-carousel .upaper-prayer-times-cell {
	flex: 1 0 150px;
	min-width: 150px;
	scroll-snap-align: center;
}
.upaper-prayer-times--layout-horizontal .upaper-prayer-times-carousel .upaper-prayer-times-cell.is-active {
	transform: translateY( -2px );
}

/* Circular prev/next arrow buttons — match business-trade's card swiper:
 * hidden by default, revealed on hover/focus-within, white pill that picks
 * up the theme accent on hover. Touch devices can't trigger :hover, so the
 * @media (hover: none) block reveals them whenever they're needed. */
/* Arrows are always visible (no hover-only) so users can find them at a
 * glance. They sit inside the strip's vertical span thanks to the carousel's
 * inner flex column stretching the viewport. Disabled state dims to 0.4
 * opacity instead of hiding entirely, so the affordance is preserved. */
.upaper-pt-arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 5;
	width: 38px;
	height: 38px;
	padding: 0;
	border-radius: 50%;
	border: none;
	background: #fff;
	color: #111;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.18 ), 0 1px 3px rgba( 0, 0, 0, 0.08 );
	opacity: 1;
	pointer-events: auto;
	transition: background 0.15s ease, color 0.15s ease, transform 0.18s ease, opacity 0.18s ease;
}
.upaper-pt-arrow i { font-size: 14px; line-height: 1; }
.upaper-pt-arrow-prev { left: 8px; }
.upaper-pt-arrow-next { right: 8px; }
.upaper-pt-arrow:hover:not(:disabled) {
	background: var( --p-strip-accent );
	color: #fff;
	transform: translateY( -50% ) scale( 1.06 );
}
.upaper-pt-arrow:disabled {
	opacity: 0.4;
	cursor: default;
}

/* Larger time-of-day icons inside horizontal-layout cells — the cards are
 * fewer-per-row and have more headroom, so the stacked-mode 26px icon felt
 * empty. Crescent-moon paths (Fajr/Imsak/Isha) live in the upper-right of
 * their viewBox so they read a little smaller than the suns — the extra
 * size compensates. */
.upaper-prayer-times--layout-horizontal .upaper-pt-cell-icon {
	width: 48px;
	height: 48px;
	margin-bottom: 8px;
}
.upaper-prayer-times--layout-horizontal .upaper-prayer-times-cell {
	padding: 24px 16px 20px;
}
/* In horizontal layout the strip is narrower than the page, so the
 * flex-row direction stays fixed (don't reverse for align-right) — the
 * outer flex container decides left/right ordering. */
.upaper-prayer-times--layout-horizontal.upaper-prayer-times--align-right {
	flex-direction: row-reverse;
}
.upaper-prayer-times--layout-horizontal .upaper-prayer-times-strip {
	/* Restore the inner stacked direction inside the narrowed strip so the
	   weekday line + Hijri + Arabic Hijri sit on top of each other. */
	flex-direction: column !important;
	align-items: flex-start;
}
.upaper-prayer-times--layout-horizontal.upaper-prayer-times--align-center .upaper-prayer-times-strip { align-items: center; text-align: center; }
.upaper-prayer-times--layout-horizontal.upaper-prayer-times--align-right  .upaper-prayer-times-strip { align-items: flex-end;  text-align: right; }

/* Hijri-Arabic and the holiday pills look cramped under a narrow strip —
 * give them their own line at full width inside the strip. */
.upaper-prayer-times--layout-horizontal .upaper-prayer-times-hijri-ar {
	margin-top: 4px;
}

/* Narrow viewport: stack the strip on top so the full Hijri info stays
 * readable, and let the prayer-card slider (defined above, always-on in
 * horizontal layout) handle the cards. */
@media ( max-width: 720px ) {
	.upaper-prayer-times--layout-horizontal {
		flex-direction: column;
	}
	.upaper-prayer-times--layout-horizontal.upaper-prayer-times--align-right {
		flex-direction: column;
	}
	.upaper-prayer-times--layout-horizontal > .upaper-prayer-times-strip {
		flex: 0 0 auto;
		width: 100%;
		margin-bottom: 14px;
	}
	.upaper-prayer-times--layout-horizontal .upaper-prayer-times-carousel .upaper-prayer-times-cell {
		flex-basis: clamp( 140px, 38vw, 200px );
		min-width: 140px;
	}
}

/* ---------------------------------------------------------------------------
 * Islamic decorations — mosque silhouette + crescent moon + twinkling stars
 * sit inside the date strip as a non-interactive layer. They paint with
 * currentColor so the existing --p-strip-accent picks the tint.
 * ------------------------------------------------------------------------- */
.upaper-prayer-times-strip.has-decor {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.upaper-prayer-times-strip.has-decor > .upaper-prayer-times-strip-left,
.upaper-prayer-times-strip.has-decor > .upaper-prayer-times-hijri-ar {
	position: relative;
	z-index: 1;
}
.upaper-prayer-times-decor {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	color: var( --p-strip-accent );
	overflow: hidden;
}

/* Mosque silhouette — bottom-anchored, low opacity so the date text stays
 * legible on top. It drifts horizontally to feel alive without being noisy. */
.upaper-pt-mosque {
	position: absolute;
	right: -10px;
	bottom: -6px;
	width: clamp( 180px, 42%, 320px );
	height: auto;
	opacity: 0.55;
}
.upaper-prayer-times-strip.is-animated .upaper-pt-mosque {
	animation: upaper-pt-drift 14s ease-in-out infinite;
}

/* (The strip-overlay crescent moon was removed; the moon glyph still lives
 * on the Fajr/Imsak/Isha prayer cards via upaper-pt-cell-icon--{fajr|isha|…}.
 * @keyframes upaper-pt-float / upaper-pt-glow stay defined below — they're
 * still consumed by the per-cell moon icons.) */

/* Tiny stars sprinkled across the strip. Each instance picks position + size
 * + animation phase from its --i index, so the five SVGs feel distinct
 * without per-element overrides. */
.upaper-pt-star {
	position: absolute;
	width: 12px;
	height: 12px;
	opacity: 0.55;
	color: var( --p-strip-accent );
}
.upaper-pt-star[style*="--i:1"] { top: 14%;  left: 18%;   width: 10px; height: 10px; }
.upaper-pt-star[style*="--i:2"] { top: 32%;  left: 38%;   width: 7px;  height: 7px;  opacity: 0.4; }
.upaper-pt-star[style*="--i:3"] { top: 62%;  left: 26%;   width: 9px;  height: 9px;  }
.upaper-pt-star[style*="--i:4"] { top: 18%;  right: 38%;  width: 8px;  height: 8px;  opacity: 0.5; }
.upaper-pt-star[style*="--i:5"] { top: 70%;  right: 18%;  width: 6px;  height: 6px;  opacity: 0.45; }
.upaper-prayer-times-strip.is-animated .upaper-pt-star {
	animation: upaper-pt-twinkle 3.6s ease-in-out infinite;
	animation-delay: calc( var( --i, 0 ) * -0.7s );
}

/* When only stars are shown, scatter them across the full strip so the
 * sprinkle reads as intentional rather than huddled near the mosque corner. */
.upaper-prayer-times-strip.decor-stars .upaper-pt-star[style*="--i:1"] { top: 18%; left: 12%; }
.upaper-prayer-times-strip.decor-stars .upaper-pt-star[style*="--i:2"] { top: 60%; left: 32%; }
.upaper-prayer-times-strip.decor-stars .upaper-pt-star[style*="--i:3"] { top: 25%; right: 28%; }
.upaper-prayer-times-strip.decor-stars .upaper-pt-star[style*="--i:4"] { top: 72%; right: 14%; }
.upaper-prayer-times-strip.decor-stars .upaper-pt-star[style*="--i:5"] { top: 45%; left: 55%; }

@keyframes upaper-pt-float {
	0%, 100% { transform: translateY( 0 ); }
	50%      { transform: translateY( -6px ); }
}
@keyframes upaper-pt-twinkle {
	0%, 100% { opacity: 0.25; transform: scale( 0.9 ); }
	50%      { opacity: 1;    transform: scale( 1.15 ); }
}
@keyframes upaper-pt-drift {
	0%, 100% { transform: translateX( 0 ); }
	50%      { transform: translateX( -14px ); }
}
@keyframes upaper-pt-glow {
	0%, 100% { filter: drop-shadow( 0 0 4px rgba( 212, 160, 23, 0.35 ) ); }
	50%      { filter: drop-shadow( 0 0 14px rgba( 212, 160, 23, 0.75 ) ); }
}

/* ---------------------------------------------------------------------------
 * Per-cell time-of-day icons. They sit above the prayer label inside each
 * card and inherit `currentColor` from the cell, so the active card's gold
 * accent automatically tints the icon while inactive cards stay muted.
 * ------------------------------------------------------------------------- */
.upaper-pt-cell-icon {
	width: 26px;
	height: 26px;
	display: block;
	color: var( --p-strip-accent );
	opacity: 0.85;
	margin-bottom: 2px;
}
/* Active card: tint the icon in the active foreground colour rather than the
 * active accent, so it stays visible when the user sets BG + accent to the
 * same hue (e.g. gold-on-gold variant). The drop-shadow halo carries the
 * accent — the icon body stays contrasted against the background. */
.upaper-prayer-times-cell.is-active .upaper-pt-cell-icon {
	color: var( --p-active-fg );
	opacity: 1;
	filter: drop-shadow( 0 0 6px var( --p-active-accent ) );
}

/* Per-icon flourishes — sun spins, moons drift, horizon arrows slide. The
 * loops stay slow on purpose so the row of six cards doesn't read as busy. */
.upaper-pt-cell-icon--dhuhr .upaper-pt-sun-rays {
	transform-origin: 12px 12px;
	animation: upaper-pt-spin 18s linear infinite;
}
.upaper-pt-cell-icon--asr {
	animation: upaper-pt-pulse 5s ease-in-out infinite;
	transform-origin: 12px 14px;
}
.upaper-pt-cell-icon--fajr,
.upaper-pt-cell-icon--imsak {
	animation: upaper-pt-float 7s ease-in-out infinite;
}
.upaper-pt-cell-icon--isha,
.upaper-pt-cell-icon--midnight {
	animation: upaper-pt-float 8s ease-in-out infinite;
}
.upaper-pt-cell-icon--isha .upaper-pt-cell-twinkle,
.upaper-pt-cell-icon--midnight .upaper-pt-cell-twinkle {
	animation: upaper-pt-twinkle 2.4s ease-in-out infinite;
	transform-origin: center;
}
.upaper-pt-cell-icon--isha .upaper-pt-cell-twinkle:nth-of-type(2),
.upaper-pt-cell-icon--midnight .upaper-pt-cell-twinkle:nth-of-type(2) {
	animation-delay: -0.9s;
}
.upaper-pt-cell-icon--isha .upaper-pt-cell-twinkle:nth-of-type(3) {
	animation-delay: -1.6s;
}

/* Sunrise/sunset arrow nudge — communicates the direction the sun is moving. */
.upaper-pt-cell-icon--sunrise .upaper-pt-arrow {
	animation: upaper-pt-nudge-up 2.6s ease-in-out infinite;
}
.upaper-pt-cell-icon--maghrib .upaper-pt-arrow {
	animation: upaper-pt-nudge-down 2.6s ease-in-out infinite;
}

@keyframes upaper-pt-spin {
	from { transform: rotate( 0deg ); }
	to   { transform: rotate( 360deg ); }
}
@keyframes upaper-pt-pulse {
	0%, 100% { transform: scale( 1 ); }
	50%      { transform: scale( 1.08 ); }
}
@keyframes upaper-pt-nudge-up {
	0%, 100% { transform: translateY( 1px );  opacity: 0.6; }
	50%      { transform: translateY( -2px ); opacity: 1; }
}
@keyframes upaper-pt-nudge-down {
	0%, 100% { transform: translateY( -1px ); opacity: 0.6; }
	50%      { transform: translateY( 2px );  opacity: 1; }
}

/* Honour the OS-level "reduce motion" preference — accessibility win and
 * matches the rest of the theme's animation policy. */
@media ( prefers-reduced-motion: reduce ) {
	.upaper-prayer-times-strip.is-animated .upaper-pt-mosque,
	.upaper-prayer-times-strip.is-animated .upaper-pt-star,
	.upaper-pt-cell-icon,
	.upaper-pt-cell-icon *,
	.upaper-pt-cell-icon .upaper-pt-sun-rays,
	.upaper-pt-cell-icon .upaper-pt-cell-twinkle,
	.upaper-pt-cell-icon .upaper-pt-arrow {
		animation: none !important;
	}
}

/* ---------------------------------------------------------------------------
 * upaper/muslim-names — "Trending boys / girls" card. Coloured header pill
 * with watermark text behind the title, a grid of rows with chevron arrows
 * linking through to the per-name pages.
 *
 * Style vars exposed on the wrapper as inline style:
 * --mn-header-bg, --mn-header-fg, --mn-card-bg, --mn-card-bd,
 * --mn-row-bg, --mn-row-hover-bg, --mn-name-color, --mn-meaning-color,
 * --mn-chevron-color, --mn-radius, --mn-card-radius, --mn-padding,
 * --mn-gap, --mn-cols, --mn-font, --mn-header-font, --mn-header-size,
 * --mn-header-weight, --mn-name-size, --mn-name-weight, --mn-meaning-size.
 * ------------------------------------------------------------------------- */
.upaper-muslim-names {
	--mn-header-bg:      #1b3a8a;   /* blue (overridden for girls by inline style) */
	--mn-header-fg:      #ffffff;
	--mn-card-bg:        #ffffff;
	--mn-card-bd:        #e5e7eb;
	--mn-row-bg:         #f6f6f7;
	--mn-row-hover-bg:   #eef0f4;
	--mn-name-color:     #0f172a;
	--mn-meaning-color:  #475569;
	--mn-chevron-color:  #94a3b8;
	--mn-radius:         12px;
	--mn-card-radius:    8px;
	--mn-padding:        16px;
	--mn-gap:            10px;
	--mn-cols:           2;
	--mn-header-size:    18px;
	--mn-header-weight:  700;
	--mn-name-size:      16px;
	--mn-name-weight:    600;
	--mn-meaning-size:   12px;

	background: var( --mn-card-bg );
	border: 1px solid var( --mn-card-bd );
	border-radius: var( --mn-radius );
	overflow: hidden;
	font-family: var( --mn-font, inherit );
	box-shadow: 0 1px 0 rgba( 15, 23, 42, 0.04 ), 0 8px 24px -16px rgba( 15, 23, 42, 0.18 );
}
.upaper-muslim-names *,
.upaper-muslim-names *::before,
.upaper-muslim-names *::after { box-sizing: border-box; }

/* Header — coloured pill at the top with the title + optional icon and a
 * faded Urdu watermark behind the title. */
.upaper-muslim-names-head {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px var( --mn-padding );
	background: var( --mn-header-bg );
	color: var( --mn-header-fg );
	font-family: var( --mn-header-font, var( --mn-font, inherit ) );
	overflow: hidden;
}
.upaper-muslim-names-head-watermark {
	position: absolute;
	inset: 0;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-inline-start: 12px;
	font-family: var( --mn-header-font, 'AlQalam Telenor', 'Alkatib Regular', serif );
	font-size: clamp( 48px, 12vw, 96px );
	font-weight: 800;
	letter-spacing: 0.08em;
	color: rgba( 255, 255, 255, 0.16 );
	white-space: nowrap;
	user-select: none;
	overflow: hidden;
}
.upaper-muslim-names-head-icon {
	position: relative;
	z-index: 1;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.16 );
	color: var( --mn-header-fg );
	flex-shrink: 0;
}
.upaper-muslim-names-head-icon svg {
	width: 22px;
	height: 22px;
}
.upaper-muslim-names-head-title {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: var( --mn-header-size );
	font-weight: var( --mn-header-weight );
	line-height: 1.2;
	color: var( --mn-header-fg );
	font-family: inherit;
	direction: rtl;
	text-align: right;
	flex: 1 1 auto;
}

/* List of name rows — CSS grid with the configurable column count. RTL
 * grid auto-flow so the first row in DOM lands in the first visual row
 * starting from the right edge (Urdu reading order). */
.upaper-muslim-names-list {
	list-style: none;
	margin: 0;
	padding: var( --mn-padding );
	display: grid;
	grid-template-columns: repeat( var( --mn-cols, 2 ), minmax( 0, 1fr ) );
	gap: var( --mn-gap );
	direction: rtl;
}
@media ( max-width: 640px ) {
	.upaper-muslim-names-list {
		grid-template-columns: repeat( min( var( --mn-cols, 2 ), 2 ), minmax( 0, 1fr ) );
	}
}
@media ( max-width: 380px ) {
	.upaper-muslim-names-list {
		grid-template-columns: 1fr;
	}
}
.upaper-muslim-names-row {
	margin: 0;
	min-width: 0;
}

/* Row link — chevron on the inline-start (left in RTL), name + meaning on
 * the inline-end. Inset shadow for the resting state, accent border on hover. */
.upaper-muslim-names-row-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: var( --mn-row-bg );
	border-radius: var( --mn-card-radius );
	color: var( --mn-name-color );
	text-decoration: none;
	transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
	min-height: 44px;
}
.upaper-muslim-names-row-link:hover,
.upaper-muslim-names-row-link:focus-visible {
	background: var( --mn-row-hover-bg );
	transform: translateX( 2px );
	box-shadow: 0 4px 10px -8px rgba( 15, 23, 42, 0.3 );
	text-decoration: none;
}
.upaper-muslim-names-row-name {
	font-size: var( --mn-name-size );
	font-weight: var( --mn-name-weight );
	color: var( --mn-name-color );
	line-height: 1.2;
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: right;
}
.upaper-muslim-names-row-meaning {
	display: block;
	font-size: var( --mn-meaning-size );
	color: var( --mn-meaning-color );
	margin-top: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: right;
}
/* When meaning is shown, stack name + meaning on the inline-end side. */
.upaper-muslim-names-row-link:has( .upaper-muslim-names-row-meaning ) .upaper-muslim-names-row-name {
	white-space: normal;
}
.upaper-muslim-names-row-link .upaper-muslim-names-row-name + .upaper-muslim-names-row-meaning {
	margin-inline-start: 0;
}

/* Chevron — sits at the visual-left (inline-start) edge of the row. The SVG
 * uses path `M15 6 9 12l6 6` which points left, matching the screenshot's
 * `<` indicator on each Urdu row. */
.upaper-muslim-names-row-chevron {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var( --mn-chevron-color );
	transition: transform 0.18s ease, color 0.18s ease;
}
.upaper-muslim-names-row-chevron svg {
	width: 16px;
	height: 16px;
}
.upaper-muslim-names-row-link:hover .upaper-muslim-names-row-chevron {
	color: var( --mn-header-bg );
	transform: translateX( -2px );
}

/* Gender variant tweaks — the header watermark picks slightly different
 * decorative text per gender so the two cards feel distinct side-by-side. */
.upaper-muslim-names--female .upaper-muslim-names-head-watermark { color: rgba( 255, 255, 255, 0.18 ); }
.upaper-muslim-names--male   .upaper-muslim-names-head-watermark { color: rgba( 255, 255, 255, 0.14 ); }

/* Editor: same margin model as the front end. */
.wp-block[data-type="upaper/muslim-names"] .upaper-muslim-names { margin: 0; }

/* =========================================================================
 * Quran — Ayah of the Day (upaper/quran-ayah).
 *
 * Card layout with a small ornament strip on top, Arabic text large +
 * RTL, optional English + Urdu translations, citation footer. CSS
 * variables drive admin-configurable bits (bg, accent, font sizes) so
 * the renderer only emits inline style for values that differ from the
 * defaults — keeps the markup clean for SEO-readable HTML.
 * =======================================================================*/

.upaper-quran-ayah {
	--ayah-bg:       #faf6ed;
	--ayah-color:    #2a1f10;
	--ayah-accent:   #b88a1f;
	--ayah-padding:  28px;
	--ayah-radius:   14px;

	background: var(--ayah-bg);
	color: var(--ayah-color);
	padding: var(--ayah-padding);
	border-radius: var(--ayah-radius);
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	line-height: 1.5;
	position: relative;
	overflow: hidden;
}
.upaper-quran-ayah--align-left   { text-align: left;   }
.upaper-quran-ayah--align-center { text-align: center; }
.upaper-quran-ayah--align-right  { text-align: right;  }

/* Empty-state notice for logged-in admins on a pre-scrape page. */
.upaper-quran-ayah--empty {
	padding: 16px 22px;
	background: #fff8e1;
	border: 1px dashed var(--ayah-accent);
	color: #6a4a00;
	font-size: 13.5px;
}
.upaper-quran-ayah--empty p { margin: 0; }

/* Ornament — three-element flourish on top */
.upaper-quran-ornament {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	margin: 0 0 18px;
}
.upaper-quran-ornament-line {
	height: 1px; width: clamp(40px, 25%, 120px);
	background: linear-gradient(90deg, transparent 0%, var(--ayah-accent) 50%, transparent 100%);
	opacity: .55;
}
.upaper-quran-ornament-dot {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--ayah-accent);
	box-shadow: 0 0 0 4px rgba(184, 138, 31, .12);
}

/* Each text block reads its OWN font-family / size / line-height / weight
 * variable group. The renderer only emits a var when the admin sets it,
 * so unset values fall through to the language-appropriate fallback in
 * the var(..., fallback) second argument here.
 *
 * Specificity note: selectors are anchored to `.upaper-quran-ayah p.…`
 * (0,2,1) so they beat the theme's `.entry-content p` family of rules
 * (0,1,1) and the slightly heavier `.english-post-view .entry-content p`
 * (0,2,1) — same specificity but later in the cascade since blocks.css
 * loads after style.css. The `padding: 0 !important` reset cancels the
 * theme's `.entry-content p { padding: 0 10px }` rule, which would
 * otherwise add unwanted horizontal padding inside the card. */

.upaper-quran-ayah p.upaper-quran-arabic {
	margin: 0 0 22px;
	padding: 0;
	font-family: var(--ayah-ar-font, 'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', 'nafeesnastaleeq', serif);
	font-size: var(--ayah-ar-size, 28px);
	line-height: var(--ayah-ar-lh, 1.85);
	font-weight: var(--ayah-ar-weight, 400);
	color: var(--ayah-color);
}

.upaper-quran-ayah p.upaper-quran-translation {
	margin: 0 0 14px;
	padding: 0;
	opacity: .9;
}
.upaper-quran-ayah p.upaper-quran-translation:last-of-type { margin-bottom: 0; }

.upaper-quran-ayah p.upaper-quran-translation--en {
	font-family: var(--ayah-en-font, inherit);
	font-size: var(--ayah-en-size, 16px);
	line-height: var(--ayah-en-lh, 1.7);
	font-weight: var(--ayah-en-weight, 400);
	font-style: italic;
}

.upaper-quran-ayah p.upaper-quran-translation--ur {
	font-family: var(--ayah-ur-font, 'Noto Nastaliq Urdu', serif);
	font-size: var(--ayah-ur-size, 16px);
	line-height: var(--ayah-ur-lh, 2);
	font-weight: var(--ayah-ur-weight, 400);
}

.upaper-quran-ayah .upaper-quran-citation {
	margin: 22px 0 0;
	padding-top: 14px;
	border-top: 1px solid rgba(0,0,0,.07);
	font-family: var(--ayah-cite-font, inherit);
	font-size: var(--ayah-cite-size, 12.5px);
	line-height: var(--ayah-cite-lh, 1.5);
	font-weight: var(--ayah-cite-weight, 600);
	color: var(--ayah-accent);
	letter-spacing: .04em;
	display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
}
.upaper-quran-ayah--align-center .upaper-quran-citation { justify-content: center; width: 100%; }
.upaper-quran-ayah--align-right .upaper-quran-citation  { justify-content: flex-end; width: 100%; }
.upaper-quran-citation .surah-ar {
	font-size: 16px;
	font-family: 'Amiri', 'Scheherazade New', serif;
	color: var(--ayah-color);
	font-weight: 600;
}
.upaper-quran-citation .separator { opacity: .5; }
.upaper-quran-citation .sajda-flag {
	margin-left: 4px;
	padding: 2px 8px;
	background: var(--ayah-accent); color: #fff;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* Editor: zero out the wrapper's auto margins so the block renders flush
 * inside the editor canvas. */
.wp-block[data-type="upaper/quran-ayah"] .upaper-quran-ayah { margin: 0; }

@media (max-width: 600px) {
	.upaper-quran-ayah { --ayah-padding: 20px; }
	.upaper-quran-ayah { --ayah-ar-size: 24px; }
}

/* =========================================================================
 * On This Day (upaper/on-this-day).
 *
 * Card-based layout with a date strip at the top and up to five sections
 * (highlights, events, births, deaths, holidays). Each item shows year +
 * text + optional thumbnail + optional Wikipedia link.
 *
 * Specificity note: rules anchored to `.upaper-onthisday .upaper-onthisday-…`
 * chains so they beat the theme's `.entry-content p` rules (same problem
 * we hit with the Quran block — see the comment block above the Quran
 * rules for the reasoning).
 * =======================================================================*/

.upaper-onthisday {
	--otd-bg:       #ffffff;
	--otd-color:    #1f2733;
	--otd-accent:   #2563eb;
	--otd-padding:  24px;
	--otd-radius:   12px;

	background: var(--otd-bg);
	color: var(--otd-color);
	padding: var(--otd-padding);
	border-radius: var(--otd-radius);
	box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	line-height: 1.5;
}
.upaper-onthisday--empty {
	background: #fff8e1; border: 1px dashed #f4ac04;
	color: #6a4a00; padding: 16px 22px; font-size: 13.5px;
}
.upaper-onthisday--empty p { margin: 0; }

.upaper-onthisday-header {
	display: flex; flex-direction: column; gap: 4px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--otd-accent);
	margin-bottom: 18px;
}
.upaper-onthisday-eyebrow {
	font-size: 11px; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: var(--otd-accent);
}
.upaper-onthisday-date {
	margin: 0;
	font-family: var(--otd-hd-font, inherit);
	font-size: var(--otd-hd-size, 24px);
	font-weight: var(--otd-hd-weight, 700);
	color: var(--otd-color);
	line-height: 1.2;
}

.upaper-onthisday-sections { display: flex; flex-direction: column; gap: 22px; }
.upaper-onthisday--layout-grid .upaper-onthisday-sections {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 28px;
}

.upaper-onthisday-section { display: block; }
.upaper-onthisday-title {
	margin: 0 0 10px;
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(0,0,0,.08);
	font-family: var(--otd-sec-font, inherit);
	font-size: var(--otd-sec-size, 13px);
	font-weight: var(--otd-sec-weight, 600);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--otd-accent);
}

.upaper-onthisday-list { list-style: none; margin: 0; padding: 0; }

.upaper-onthisday-item {
	display: flex; gap: 12px; align-items: flex-start;
	padding: 10px 0;
	border-bottom: 1px solid rgba(0,0,0,.05);
}
.upaper-onthisday-item:last-child { border-bottom: 0; }

.upaper-onthisday-thumb-link { flex-shrink: 0; display: block; line-height: 0; }
.upaper-onthisday-thumb {
	width: 56px; height: 56px;
	object-fit: cover;
	border-radius: 8px;
	background: #f3f3f3;
	flex-shrink: 0;
}

.upaper-onthisday-item-body { flex: 1; min-width: 0; }

.upaper-onthisday p.upaper-onthisday-text {
	margin: 0; padding: 0;
	font-family: var(--otd-item-font, inherit);
	font-size: var(--otd-item-size, 14px);
	line-height: var(--otd-item-lh, 1.55);
	font-weight: var(--otd-item-weight, 400);
	color: var(--otd-color);
}
.upaper-onthisday-text a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dotted rgba(0,0,0,.3);
	transition: color .15s ease, border-color .15s ease;
}
.upaper-onthisday-text a:hover, .upaper-onthisday-text a:focus {
	color: var(--otd-accent);
	border-bottom-color: var(--otd-accent);
}
.upaper-onthisday-year {
	display: inline-block;
	margin-right: 8px;
	padding: 1px 7px;
	background: var(--otd-accent); color: #fff;
	border-radius: 4px;
	font-size: 11.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	vertical-align: 1px;
}

.upaper-onthisday p.upaper-onthisday-extract {
	margin: 4px 0 0; padding: 0;
	font-size: 12.5px;
	color: var(--otd-color);
	opacity: .7;
	line-height: 1.55;
}

.upaper-onthisday-credit {
	margin-top: 18px;
	padding-top: 12px;
	border-top: 1px solid rgba(0,0,0,.05);
	font-size: 11px;
	color: var(--otd-color);
	opacity: .55;
	text-align: right;
}
.upaper-onthisday-credit a { color: inherit; }

@media (max-width: 600px) {
	.upaper-onthisday { --otd-padding: 18px; }
	.upaper-onthisday--layout-grid .upaper-onthisday-sections {
		grid-template-columns: 1fr;
	}
	.upaper-onthisday-thumb { width: 44px; height: 44px; }
}

/* Tabs layout — one section visible at a time, click to switch.
 *
 * Markup contract (from render.php):
 *   .upaper-onthisday--layout-tabs
 *     .upaper-onthisday-tabs[role="tablist"]
 *       button.upaper-onthisday-tab[role="tab"] × N
 *     .upaper-onthisday-sections
 *       section[role="tabpanel"] × N      (first is .is-active, others have [hidden])
 *
 * view.js handles the click/keyboard switching + ARIA state. CSS only
 * paints the active vs inactive states.
 */
.upaper-onthisday-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	margin: 0 0 16px;
	padding: 0;
	border-bottom: 2px solid rgba(0,0,0,.08);
	list-style: none;
}
.upaper-onthisday-tab {
	appearance: none;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px; /* overlap the container's bottom border */
	padding: 8px 16px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--otd-color);
	cursor: pointer;
	opacity: .55;
	transition: opacity .15s ease, border-color .15s ease, color .15s ease;
}
.upaper-onthisday-tab:hover,
.upaper-onthisday-tab:focus-visible {
	opacity: 1;
	color: var(--otd-accent);
	outline: none;
}
.upaper-onthisday-tab.is-active {
	opacity: 1;
	color: var(--otd-accent);
	border-bottom-color: var(--otd-accent);
}
.upaper-onthisday-tab:focus-visible {
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
	border-radius: 4px 4px 0 0;
}

/* In tabs mode the section-title <h4> is suppressed by render.php
 * because the tab label already names the section. The .is-active /
 * [hidden] toggling is driven by view.js. */
.upaper-onthisday--layout-tabs .upaper-onthisday-section[hidden] { display: none; }
.upaper-onthisday--layout-tabs .upaper-onthisday-sections {
	display: block;
	gap: 0;
}

/* Editor: zero margins so the block sits flush in the canvas. */
.wp-block[data-type="upaper/on-this-day"] .upaper-onthisday { margin: 0; }

/* =========================================================================
 * Most-Loved Names (upaper/most-loved-names) — sidebar widget pulling
 * top names from the muslim_names table sorted by `likes` DESC.
 * =======================================================================*/

.upaper-most-loved {
	--mln-bg:           #ffffff;
	--mln-title-color:  #121212;
	--mln-accent:       #dc2626;
	--mln-padding:      18px;
	--mln-radius:       12px;

	background: var(--mln-bg);
	color: #1f2937;
	padding: var(--mln-padding);
	border-radius: var(--mln-radius);
	border: 1px solid rgba(0,0,0,.06);
	box-shadow: 0 1px 2px rgba(0,0,0,.03);
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.upaper-most-loved--empty {
	background: #fff8e1; border: 1px dashed #f4ac04; color: #6a4a00;
}
.upaper-most-loved--empty p { margin: 0; font-size: 13px; line-height: 1.55; }

.upaper-most-loved-title {
	margin: 0 0 12px;
	padding: 0 0 8px;
	border-bottom: 2px solid var(--mln-accent);
	font-family: var(--mln-title-font, inherit);
	font-size: var(--mln-title-size, 16px);
	font-weight: var(--mln-title-weight, 700);
	letter-spacing: .02em;
	color: var(--mln-title-color);
}

.upaper-most-loved-list { list-style: none; margin: 0; padding: 0; counter-reset: mln-rank; }

.upaper-most-loved-item {
	border-bottom: 1px solid rgba(0,0,0,.06);
}
.upaper-most-loved-item:last-child { border-bottom: 0; }

.upaper-most-loved-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	text-decoration: none;
	color: inherit;
	transition: color .15s ease;
}
a.upaper-most-loved-row:hover { color: var(--mln-accent); }

.upaper-most-loved-rank {
	flex-shrink: 0;
	width: 28px; height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--mln-accent);
	color: #fff;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.upaper-most-loved-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.upaper-most-loved-name {
	font-family: var(--mln-name-font, inherit);
	font-size: var(--mln-name-size, 14.5px);
	font-weight: var(--mln-name-weight, 600);
	color: #111827;
	line-height: 1.3;
}
.upaper-most-loved-urdu,
.upaper-most-loved-arabic {
	font-size: 13px;
	color: #6b7280;
	line-height: 1.4;
}
.upaper-most-loved-meaning {
	font-size: 12px;
	color: #6b7280;
	line-height: 1.45;
	margin-top: 2px;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.upaper-most-loved-likes {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 12px;
	font-weight: 600;
	color: var(--mln-accent);
	font-variant-numeric: tabular-nums;
}
.upaper-most-loved-likes svg {
	width: 14px; height: 14px;
	fill: var(--mln-accent);
}

/* Editor: zero margins so the block sits flush in the canvas. */
.wp-block[data-type="upaper/most-loved-names"] .upaper-most-loved { margin: 0; }

/* =========================================================================
 * Currency Converter (upaper/currency-converter).
 *
 * Front-end form with amount + from/to dropdowns + a swap button. JS in
 * view.js handles the convert call; this CSS only handles layout/skin.
 * `dir="ltr"` on the wrapper because numbers + ISO codes read LTR even
 * inside an Urdu-RTL page.
 * =======================================================================*/

.upaper-currency-converter {
	--cc-bg:        #f8fafc;
	--cc-color:     #0f172a;
	--cc-accent:    #2563eb;
	--cc-padding:   22px;
	--cc-radius:    12px;

	background: var(--cc-bg);
	color: var(--cc-color);
	padding: var(--cc-padding);
	border-radius: var(--cc-radius);
	border: 1px solid rgba(15,23,42,.06);
	box-shadow: 0 1px 2px rgba(0,0,0,.03);
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.upaper-currency-converter.is-busy { opacity: .75; }
.upaper-currency-converter.is-busy [data-cc-submit] { cursor: progress; }

.upaper-currency-converter-title {
	margin: 0 0 14px;
	font-family: var(--cc-title-font, inherit);
	font-size: var(--cc-title-size, 16px);
	font-weight: var(--cc-title-weight, 700);
	color: var(--cc-color);
}

.upaper-currency-converter-warning {
	margin: 0 0 12px;
	padding: 8px 12px;
	background: #fff8e1;
	border: 1px dashed #f4ac04;
	border-radius: 6px;
	font-size: 12.5px;
	color: #6a4a00;
	line-height: 1.5;
}
.upaper-currency-converter-warning a { color: inherit; text-decoration: underline; }

.upaper-currency-converter-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}
.upaper-currency-converter-row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas:
		"amount amount amount"
		"from   swap   to";
	gap: 12px 8px;
	align-items: end;
}
.upaper-currency-converter-row > :nth-child(1) { grid-area: amount; }
.upaper-currency-converter-row > :nth-child(2) { grid-area: from; }
.upaper-currency-converter-row > :nth-child(3) { grid-area: swap; }
.upaper-currency-converter-row > :nth-child(4) { grid-area: to; }

.upaper-currency-converter-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.upaper-currency-converter-field .lbl {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #64748b;
}
.upaper-currency-converter-field input {
	direction: ltr;
}
.upaper-currency-converter-field input,
.upaper-currency-converter-field select {
	appearance: none;
	-webkit-appearance: none;
	background: #fff;
	border: 1px solid rgba(15,23,42,.12);
	border-radius: 8px;
	padding: 9px 10px;
	font: inherit;
	font-size: 14px;
	color: var(--cc-color);
	min-width: 0;
	width: 100%;
}
.upaper-currency-converter-field input:focus,
.upaper-currency-converter-field select:focus {
	outline: none;
	border-color: var(--cc-accent);
	box-shadow: 0 0 0 3px rgba( 37, 99, 235, .15 );
}
.upaper-currency-converter-field select {
	background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8"%3E%3Cpath fill="%2364748b" d="M6 8L0 0h12z"/%3E%3C/svg%3E');
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 10px 6px;
	padding-right: 28px;
}

.upaper-currency-converter-swap {
	appearance: none;
	background: #fff;
	color: var(--cc-color, #475569);
	border: 1px solid rgba(15,23,42,.12);
	border-radius: 999px;
	width: 38px; height: 38px;
	cursor: pointer;
	color: var(--cc-color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1px;
	transition: background .15s ease, color .15s ease, transform .15s ease, border-color .15s ease;
}
.upaper-currency-converter-swap:hover,
.upaper-currency-converter-swap:focus-visible {
	background: var(--cc-accent);
	color: #fff;
	border-color: var(--cc-accent);
	outline: none;
}
.upaper-currency-converter-swap:active { transform: rotate(180deg); }
.upaper-currency-converter-swap-glyph {
	font-size: 22px;
	line-height: 1;
	font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols", system-ui, sans-serif;
}

.upaper-currency-converter-go {
	appearance: none;
	background: var(--cc-accent);
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 11px 18px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: filter .15s ease, transform .12s ease;
}
.upaper-currency-converter-go:hover,
.upaper-currency-converter-go:focus-visible { filter: brightness(1.08); outline: none; }
.upaper-currency-converter-go:active { transform: scale(.97); }
.upaper-currency-converter-go:disabled { opacity: .6; cursor: not-allowed; }

.upaper-currency-converter-result {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dashed rgba(15,23,42,.08);
	text-align: center;
}
.upaper-currency-converter-out {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 6px;
	font-family: var(--cc-result-font, 'Roboto', monospace);
	font-size: var(--cc-result-size, 20px);
	font-weight: var(--cc-result-weight, 600);
	color: var(--cc-color);
	margin-bottom: 10px;
}
.upaper-currency-converter-out .amount,
.upaper-currency-converter-out .converted { font-variant-numeric: tabular-nums; }
.upaper-currency-converter-out .from-code,
.upaper-currency-converter-out .to-code {
	font-size: .65em;
	color: #64748b;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.upaper-currency-converter-flag {
	width: 20px;
	height: 14px;
	display: inline-block;
	vertical-align: middle;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(15,23,42,.08);
	object-fit: cover;
}
.upaper-currency-converter-rate {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Custom currency picker (replaces native <select> so we can show flag images
   inside the dropdown — <option> elements can only hold plain text). */
.upaper-currency-picker {
	position: relative;
	width: 100%;
}
.upaper-currency-picker-native {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.upaper-currency-picker-toggle {
	appearance: none;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid rgba(15,23,42,.12);
	border-radius: 8px;
	padding: 10px 30px 10px 12px;
	cursor: pointer;
	font: inherit;
	color: var(--cc-color, #0f172a);
	text-align: left;
	position: relative;
	min-height: 44px;
}
.upaper-currency-picker-toggle:hover,
.upaper-currency-picker-toggle:focus-visible {
	border-color: var(--cc-accent, #3b82f6);
	outline: none;
}
.upaper-currency-picker-toggle .upaper-currency-converter-flag {
	flex: 0 0 auto;
}
.upaper-currency-picker-label {
	font-weight: 600;
	flex: 1;
	min-width: 0;
}
.upaper-currency-picker-caret {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: #475569;
	font-size: 12px;
}
.upaper-currency-picker-list {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid rgba(15,23,42,.12);
	border-radius: 8px;
	list-style: none;
	margin: 0;
	padding: 4px;
	z-index: 100;
	max-height: 280px;
	overflow-y: auto;
	box-shadow: 0 10px 24px rgba(15,23,42,.12);
}
.upaper-currency-picker-list[hidden] { display: none; }
.upaper-currency-picker-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 6px;
	cursor: pointer;
	color: var(--cc-color, #0f172a);
	font-weight: 500;
}
.upaper-currency-picker-list li:hover {
	background: #f1f5f9;
}
.upaper-currency-picker-list li[aria-selected="true"] {
	background: var(--cc-accent, #3b82f6);
	color: #fff;
}
.upaper-currency-converter-out .converted { color: var(--cc-accent); }
.upaper-currency-converter-out .equals { color: #94a3b8; padding: 0 4px; }

.upaper-currency-converter-rate {
	margin-top: 6px;
	font-size: 12px;
	color: #64748b;
	font-variant-numeric: tabular-nums;
}

.upaper-currency-converter-error {
	color: #b91c1c;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 13px;
}

@media (max-width: 540px) {
	.upaper-currency-converter-row {
		grid-template-columns: 1fr auto 1fr;
		gap: 10px 8px;
	}
}

/* Editor: zero margins so the block sits flush in the canvas. */
.wp-block[data-type="upaper/currency-converter"] .upaper-currency-converter { margin: 0; }

/* =========================================================================
 * Hadith of the Day (upaper/hadith-day).
 *
 * Visually parallel to the Quran block — Arabic gets pride of place,
 * translations stack below, citation footer in accent colour. Each
 * text tier reads its own var() group so admins can theme per-section
 * without touching the others (same model as the Quran block).
 *
 * Specificity note on the `p.upaper-hadith-*` chains: anchors the rules
 * with enough specificity to beat the theme's content rules
 * (`.entry-content p { padding: 0 10px }` etc.), same trick we used on
 * the Quran block.
 * =======================================================================*/

.upaper-hadith-day {
	--hdith-bg:       #f3f7ee;
	--hdith-color:    #1c2810;
	--hdith-accent:   #4a7c2a;
	--hdith-padding:  28px;
	--hdith-radius:   14px;

	background: var(--hdith-bg);
	color: var(--hdith-color);
	padding: var(--hdith-padding);
	border-radius: var(--hdith-radius);
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	line-height: 1.55;
	position: relative;
	overflow: hidden;
}
.upaper-hadith-day--empty {
	background: #fff8e1; border: 1px dashed #f4ac04;
	color: #6a4a00; padding: 14px 18px;
}
.upaper-hadith-day--empty p { margin: 0; font-size: 13px; line-height: 1.55; }

.upaper-hadith-day--align-left   { text-align: left; }
.upaper-hadith-day--align-center { text-align: center; }
.upaper-hadith-day--align-right  { text-align: right; }

.upaper-hadith-day p.upaper-hadith-arabic {
	margin: 0 0 18px;
	padding: 0;
	font-family: var(--hdith-ar-font, 'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', 'nafeesnastaleeq', serif);
	font-size: var(--hdith-ar-size, 22px);
	line-height: var(--hdith-ar-lh, 1.85);
	font-weight: var(--hdith-ar-weight, 400);
	color: var(--hdith-color);
}

.upaper-hadith-day .upaper-hadith-translation {
	margin: 0 0 12px;
}
.upaper-hadith-day .upaper-hadith-translation.upaper-hadith-translation--en {
	direction: ltr;
}
.upaper-hadith-day .upaper-hadith-translation:last-of-type { margin-bottom: 0; }

.upaper-hadith-day .upaper-hadith-translation--en p.upaper-hadith-text {
	margin: 0;
	padding: 0;
	font-family: var(--hdith-en-font, inherit);
	font-size: var(--hdith-en-size, 15px);
	line-height: var(--hdith-en-lh, 1.65);
	font-weight: var(--hdith-en-weight, 400);
	opacity: .92;
}
.upaper-hadith-day p.upaper-hadith-narrator {
	margin: 0 0 4px;
	padding: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--hdith-accent);
	letter-spacing: .02em;
}

.upaper-hadith-day .upaper-hadith-translation--ur p.upaper-hadith-text {
	margin: 0;
	padding: 0;
	font-family: var(--hdith-ur-font, 'Noto Nastaliq Urdu', serif);
	font-size: var(--hdith-ur-size, 16px);
	line-height: var(--hdith-ur-lh, 2);
	font-weight: var(--hdith-ur-weight, 400);
}

.upaper-hadith-day .upaper-hadith-citation {
	margin: 18px 0 0;
	padding-top: 12px;
	border-top: 1px solid rgba(0,0,0,.08);
	font-family: var(--hdith-cite-font, inherit);
	font-size: var(--hdith-cite-size, 12.5px);
	font-weight: var(--hdith-cite-weight, 600);
	color: var(--hdith-accent);
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* Editor: zero margins so the block sits flush in the canvas. */
.wp-block[data-type="upaper/hadith-day"] .upaper-hadith-day { margin: 0; }

/* =========================================================================
 * Category Tabs (upaper/category-tabs).
 * Tab strip + 3-column panel: hero post + two columns of small post rows.
 * Hero column position is per-tab via .ct-col--{left|center|right}.
 * ===================================================================== */
.upaper-block.upaper-category-tabs {
	font-family: var( --ct-font, inherit );
	padding: var( --ct-padding, 0 );
	border-radius: var( --ct-radius, 8px );
}
.upaper-block.upaper-category-tabs.upaper-category-tabs--empty {
	padding: 16px;
	background: #fff7ed;
	border: 1px dashed #f59e0b;
	color: #92400e;
	font-size: 13px;
}

.upaper-category-tabs .ct-tabs {
	display: flex;
	flex-wrap: nowrap;
	gap: 4px;
	margin-bottom: var( --ct-gap, 16px );
	border-bottom: 1px solid rgba(15,23,42,.08);
	background: var( --ct-tabs-bg, transparent );
	padding: var( --ct-tabs-padding, 0 );
	border-radius: var( --ct-tabs-radius, 0 );
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.upaper-category-tabs .ct-tabs::-webkit-scrollbar { display: none; }
.upaper-category-tabs .ct-tab {
	appearance: none;
	background: var( --ct-tab-bg, transparent );
	color: var( --ct-tab-color, #475569 );
	border: 0;
	border-bottom: 3px solid transparent;
	padding: 10px 18px;
	cursor: pointer;
	font-family: var( --ct-tab-font, inherit );
	font-size: var( --ct-tab-size, 15px );
	line-height: var( --ct-tab-lh, 1.2 );
	font-weight: var( --ct-tab-weight, 600 );
	white-space: nowrap;
	flex-shrink: 0;
	transition: color .15s ease, background .15s ease, border-color .15s ease;
	border-radius: 0px !important;
}
.upaper-category-tabs .ct-tab:hover {
	color: var( --ct-active-tab-color, var( --primary-color, #2563eb ) );
}
.upaper-category-tabs .ct-tab.is-active {
	background: var( --ct-active-tab-bg, transparent );
	color: var( --ct-active-tab-color, var( --primary-color, #2563eb ) );
	border-bottom-color: var( --ct-active-tab-color, var( --primary-color, #2563eb ) );
}

.upaper-category-tabs .ct-panel {
	display: none;
	grid-template-columns: 1fr 1fr 1fr;
	gap: var( --ct-gap, 16px );
}
.upaper-category-tabs .ct-panel.is-active { display: grid; }
.upaper-category-tabs .ct-empty {
	grid-column: 1 / -1;
	padding: 16px;
	color: #64748b;
	font-size: 13px;
}

.upaper-category-tabs .ct-col {
	display: flex;
	flex-direction: column;
	gap: var( --ct-gap, 16px );
	min-width: 0;
}
.upaper-category-tabs .ct-col--left   { grid-column: 1; }
.upaper-category-tabs .ct-col--center { grid-column: 2; }
.upaper-category-tabs .ct-col--right  { grid-column: 3; }

.upaper-category-tabs .ct-hero {
	display: flex;
	flex-direction: column;
	background: var( --ct-hero-bg, var( --primary-color ) );
	padding: var( --ct-hero-padding, 15px );
	border: var( --ct-hero-bd-width, 0 ) var( --ct-hero-bd-style, solid ) var( --ct-hero-bd-color, transparent );
	border-radius: var( --ct-radius, 8px );
	overflow: hidden;
	color: #ffffff;
}
.upaper-category-tabs .ct-hero-thumb-link { display: block; line-height: 0; }
.upaper-category-tabs .ct-hero-thumb img { width: 100%; height: auto; display: block; }
.upaper-category-tabs .ct-hero-body { padding: 10px 4px 0; }
.upaper-category-tabs .ct-hero-title {
	margin: 0 0 6px;
	font-family: var( --ct-hero-title-font, inherit );
	font-size: var( --ct-hero-title-size, 20px );
	line-height: var( --ct-hero-title-lh, 1.35 );
	font-weight: var( --ct-hero-title-weight, 700 );
	color: #ffffff;
}
.upaper-category-tabs .ct-hero-title a {
	color: var( --ct-hero-title-color, inherit );
	text-decoration: none !important;
}
.upaper-category-tabs .ct-hero-title a:hover { text-decoration: underline; }
.upaper-category-tabs .ct-hero-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 6px 0;
	font-family: var( --ct-meta-font, inherit );
	font-size: var( --ct-meta-size, 12px );
	font-weight: var( --ct-meta-weight, 400 );
	color: var( --ct-hero-meta-color, var( --ct-meta-color, #64748b ) );
}
.upaper-category-tabs .ct-hero-meta i { font-size: 11px; }
.upaper-category-tabs .ct-hero-excerpt {
	margin: 0;
	font-family: var( --ct-hero-excerpt-font, inherit );
	font-size: var( --ct-hero-excerpt-size, 14px );
	line-height: var( --ct-hero-excerpt-lh, 1.55 );
	font-weight: var( --ct-hero-excerpt-weight, 400 );
	color: var( --ct-hero-excerpt-color, inherit );
}

.upaper-category-tabs .ct-small {
	background: var( --ct-card-bg, transparent );
	padding: var( --ct-card-padding, 0 );
	border: var( --ct-card-bd-width, 0 ) var( --ct-card-bd-style, solid ) var( --ct-card-bd-color, transparent );
	border-radius: var( --ct-radius, 8px );
}
.upaper-category-tabs .ct-small-link {
	display: flex;
	gap: 10px;
	text-decoration: none !important;
	color: inherit;
	align-items: center;
}
.upaper-category-tabs .ct-small-thumb {
	flex: 0 0 25%;
	max-width: 25%;
	line-height: 0;
}
.upaper-category-tabs .ct-small-thumb img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
}
.upaper-category-tabs .ct-small-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.upaper-category-tabs .ct-small-title {
	font-family: var( --ct-small-title-font, inherit );
	font-size: var( --ct-small-title-size, 14px );
	line-height: var( --ct-small-title-lh, 1.4 );
	font-weight: var( --ct-small-title-weight, 600 );
	color: var( --ct-small-title-color, inherit );
	text-decoration: none !important;
}
.upaper-category-tabs .ct-small-link:hover .ct-small-title { text-decoration: underline; }
.upaper-category-tabs .ct-small-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var( --ct-meta-font, inherit );
	font-size: var( --ct-meta-size, 11px );
	font-weight: var( --ct-meta-weight, 400 );
	color: var( --ct-meta-color, #94a3b8 );
	text-decoration: none;
}

@media ( max-width: 768px ) {
	.upaper-category-tabs .ct-panel { grid-template-columns: 1fr; }
	.upaper-category-tabs .ct-col--left,
	.upaper-category-tabs .ct-col--center,
	.upaper-category-tabs .ct-col--right { grid-column: 1; }
}

.wp-block[data-type="upaper/category-tabs"] .upaper-category-tabs { margin: 0; }

/* =========================================================================
 * Quran Player (upaper/quran-player).
 * Toolbar + surah header + current-ayah block + audio controls + playlist.
 * All sizing/colors via --qp-* CSS variables with sensible fallbacks.
 * ===================================================================== */
.upaper-quran-player {
	/* Default palette declared as variables so descendants can inherit them
	   reliably. PHP inline `--qp-*` overrides win because they're set higher
	   in the cascade (inline style). When an admin customises only one
	   slot (e.g. just the bg), the rest of the palette stays cohesive
	   instead of falling back to a different default per element. */
	--qp-text: #e2e8f0;
	--qp-muted: #94a3b8;
	--qp-border: rgba(255,255,255,.12);
	--qp-surface: rgba(255,255,255,.06);
	--qp-accent: #10b981;
	--qp-accent-text: #ffffff;

	/* Establish a containment context so descendants can use @container
	   queries — the block reflows based on ITS width, not the viewport.
	   This makes sidebar / narrow-column placements compact even on wide
	   desktops where viewport @media wouldn't trigger. */
	container-type: inline-size;
	container-name: qp;

	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: var( --qp-padding, 24px );
	border-radius: var( --qp-radius, 6px );
	background: var( --qp-bg, linear-gradient(135deg, #0f172a 0%, #1e293b 100%) );
	color: var( --qp-text );
	font-family: var( --qp-font, inherit );
	position: relative;
}
.upaper-quran-player.upaper-quran-player--empty {
	display: block;
	background: #fff7ed;
	color: #92400e;
	padding: 16px;
	font-size: 13px;
}

/* Loading shimmer over the whole card while AJAX is in flight. */
.upaper-quran-player.qp-is-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, .4);
	border-radius: inherit;
	pointer-events: none;
	z-index: 5;
}

/* ----- Toolbar ----- */
.upaper-quran-player .qp-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 12px;
}

/* Body splits into left main column (header + current + player stacked)
   and a right list column. The list lives inside a stretching wrapper so
   it can position: absolute to fill the row's height without driving it. */
.upaper-quran-player .qp-body {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 16px;
	align-items: stretch;
}
.upaper-quran-player .qp-main {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}
.upaper-quran-player .qp-list-wrap {
	position: relative;
	min-height: 320px; /* fallback when main col is unusually short */
}
.upaper-quran-player .qp-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 200px;
	min-width: 0;
	text-align: left;
}
.upaper-quran-player .qp-field-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var( --qp-muted, #94a3b8 );
}
/* Custom dropdown picker (Surah, Reciter). Wraps a visually-hidden native
   <select> so screen readers + form state keep working, while the visible
   widget uses theme colors that follow the liquid-glass treatment too. */
.upaper-quran-player .qp-picker {
	position: relative;
	width: 100%;
}
.upaper-quran-player .qp-picker-native {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.upaper-quran-player .qp-picker-toggle {
	appearance: none;
	width: 100%;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var( --qp-surface, rgba(255,255,255,.08) );
	color: var( --qp-text, currentColor );
	border: 1px solid var( --qp-border, rgba(255,255,255,.12) );
	border-radius: 10px;
	padding: 10px 12px;
	font: inherit;
	font-size: 14px;
	cursor: pointer;
	min-height: 44px;
	text-align: left;
}
.upaper-quran-player .qp-picker-toggle:hover,
.upaper-quran-player .qp-picker-toggle[aria-expanded="true"] {
	border-color: var( --qp-accent, #10b981 );
}
.upaper-quran-player .qp-picker-label {
	flex: 1 1 auto;
	font-weight: 600;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.upaper-quran-player .qp-picker-caret {
	width: 16px;
	height: 16px;
	color: var( --qp-muted, currentColor );
	flex: 0 0 auto;
}
.upaper-quran-player .qp-picker-list {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	/* Use a solid dark background regardless of theme — dropdown panels
	   need opacity that the card --qp-surface (rgba .06) can't provide,
	   or the options bleed into whatever is behind them and become
	   illegible. The list is a transient overlay; solid is correct. */
	background: var( --qp-panel-bg, #1e293b );
	color: var( --qp-text, #f1f5f9 );
	border: 1px solid var( --qp-border, rgba(255,255,255,.18) );
	border-radius: 10px;
	list-style: none;
	margin: 0;
	padding: 4px;
	z-index: 100;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
	max-height: 320px;
	overflow-y: auto;
}
.upaper-quran-player .qp-picker-list[hidden] { display: none; }
.upaper-quran-player .qp-picker-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 6px;
	cursor: pointer;
	font-weight: 500;
	justify-content: flex-end;
}
.upaper-quran-player .qp-picker-list li:hover {
	background: var( --qp-border, rgba(255,255,255,.08) );
}
.upaper-quran-player .qp-picker-list li[aria-selected="true"] {
	background: var( --qp-accent, #10b981 );
	color: var( --qp-accent-text, #fff );
}
/* Translation picker — single-select dropdown with flag SVGs. */
.upaper-quran-player .qp-tr-select {
	position: relative;
}
.upaper-quran-player .qp-tr-toggle-btn {
	appearance: none;
	width: 100%;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var( --qp-surface, rgba(255,255,255,.08) );
	color: var( --qp-text, #e2e8f0 );
	border: 1px solid var( --qp-border, rgba(255,255,255,.12) );
	border-radius: 10px;
	padding: 10px 12px;
	font: inherit;
	font-size: 14px;
	cursor: pointer;
	min-height: 44px;
}
.upaper-quran-player .qp-tr-toggle-btn:hover,
.upaper-quran-player .qp-tr-toggle-btn[aria-expanded="true"] {
	border-color: var( --qp-accent, #10b981 );
}
.upaper-quran-player .qp-tr-toggle-flags {
	display: inline-flex;
	gap: 4px;
	flex: 0 0 auto;
}
.upaper-quran-player .qp-tr-toggle-label {
	flex: 1 1 auto;
	font-weight: 600;
	min-width: 0;
	text-align: left;
}
.upaper-quran-player .qp-tr-caret {
	width: 16px;
	height: 16px;
	color: var( --qp-muted, #94a3b8 );
	flex: 0 0 auto;
}
.upaper-quran-player .qp-tr-flag {
	width: 20px;
	height: 14px;
	display: inline-block;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0,0,0,.15);
	object-fit: cover;
}
.upaper-quran-player .qp-tr-list {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: var( --qp-panel-bg, #1e293b );
	color: var( --qp-text, #f1f5f9 );
	border: 1px solid var( --qp-border, rgba(255,255,255,.18) );
	border-radius: 10px;
	list-style: none;
	margin: 0;
	padding: 4px;
	z-index: 100;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
}
.upaper-quran-player .qp-tr-list[hidden] { display: none; }
.upaper-quran-player .qp-tr-list li {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 6px;
	cursor: pointer;
	font-weight: 500;
}
.upaper-quran-player .qp-tr-list li:hover {
	background: var( --qp-border, rgba(255,255,255,.08) );
}
.upaper-quran-player .qp-tr-list li[aria-selected="true"] {
	background: var( --qp-accent, #10b981 );
	color: var( --qp-accent-text, #fff );
}
.upaper-quran-player .qp-tr-list-flags {
	display: inline-flex;
	gap: 4px;
	flex: 0 0 auto;
	min-width: 48px; /* keeps text columns aligned even when option has no flags */
}

/* ----- Surah header ----- */
.upaper-quran-player .qp-surah-header {
	text-align: center;
	padding: 28px 12px 18px 12px;
	background: var( --qp-surface, rgba(255,255,255,.06) );
	border: 1px solid var( --qp-border, rgba(255,255,255,.1) );
	border-radius: var( --qp-card-radius, 6px );
}
.upaper-quran-player .qp-surah-name-ar {
	font-family: var( --qp-surah-name-ar-font, var( --qp-arabic-font, "AlQalam Telenor", "Amiri Quran", "Scheherazade New", serif ) );
	font-size: var( --qp-surah-name-ar-size, clamp( 28px, 4vw, 44px ) );
	font-weight: var( --qp-surah-name-ar-weight, 600 );
	line-height: var( --qp-surah-name-ar-lh, 1.1 );
	margin-bottom: 4px;
}
.upaper-quran-player .qp-surah-name-en {
	font-family: var( --qp-header-font, inherit );
	font-size: var( --qp-header-size, 18px );
	font-weight: var( --qp-header-weight, 600 );
}
.upaper-quran-player .qp-surah-meaning {
	color: var( --qp-muted, #94a3b8 );
	font-weight: 400;
	margin-inline-start: 6px;
}
.upaper-quran-player .qp-surah-meta {
	color: var( --qp-muted, #94a3b8 );
	font-size: 12px;
	margin-top: 4px;
	letter-spacing: .04em;
}

/* ----- Current ayah card ----- */
.upaper-quran-player .qp-current {
	position: relative;
	background: var( --qp-current-bg, var( --qp-surface, rgba(255,255,255,.06) ) );
	color: var( --qp-current-color, inherit );
	border: 1px solid var( --qp-border, rgba(255,255,255,.1) );
	border-radius: var( --qp-card-radius, 6px );
	padding: 28px;
	text-align: center;
}
.upaper-quran-player .qp-ayah-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: var( --qp-ayah-badge-bg, var( --qp-accent, #10b981 ) );
	color: var( --qp-ayah-badge-color, var( --qp-accent-text, #fff ) );
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 12px;
}
.upaper-quran-player .qp-ayah-arabic {
	font-family: var( --qp-arabic-font, "AlQalam Telenor", "Amiri Quran", "Scheherazade New", serif );
	font-size: var( --qp-arabic-size, clamp( 28px, 4vw, 42px ) );
	line-height: var( --qp-arabic-lh, 1.9 );
	font-weight: var( --qp-arabic-weight, 400 );
	color: var( --qp-arabic-color, var( --qp-text, #e2e8f0 ) );
	margin: 0 0 18px;
	text-align: center;
}
.upaper-quran-player .qp-ayah-en {
	font-family: var( --qp-english-font, inherit );
	font-size: var( --qp-english-size, 15px );
	line-height: var( --qp-english-lh, 1.6 );
	font-weight: var( --qp-english-weight, 400 );
	color: var( --qp-english-color, var( --qp-muted, #cbd5e1 ) );
	margin: 0 0 10px;
	font-style: italic;
	direction: ltr;
}
.upaper-quran-player .qp-ayah-ur {
	font-family: var( --qp-urdu-font, "AlQalam Telenor", "Jameel Noori Nastaleeq", serif );
	font-size: var( --qp-urdu-size, 20px );
	line-height: var( --qp-urdu-lh, 2 );
	font-weight: var( --qp-urdu-weight, 400 );
	color: var( --qp-urdu-color, var( --qp-text, #e2e8f0 ) );
	margin: 0;
}

/* ----- Player controls ----- */
.upaper-quran-player .qp-player {
	direction: ltr;
	display: flex;
	align-items: center;
	gap: 10px;
	background: var( --qp-player-bg, var( --qp-surface, rgba(255,255,255,.06) ) );
	border: 1px solid var( --qp-border, rgba(255,255,255,.1) );
	border-radius: var( --qp-card-radius, 6px );
	padding: 8px 16px;
}
.upaper-quran-player .qp-btn {
	appearance: none;
	background: transparent;
	color: var( --qp-nav-icon, currentColor );
	border: 0;
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	cursor: pointer;
	flex: 0 0 auto;
	padding: 0;
	transition: background .15s ease, transform .12s ease;
}
.upaper-quran-player .qp-btn:hover {
	background: var( --qp-nav-hover-bg, var( --qp-border, rgba(255,255,255,.14) ) );
	transform: scale(1.05);
}
.upaper-quran-player .qp-btn-play {
	background: var( --qp-play-bg, var( --qp-accent, #10b981 ) );
	color: var( --qp-play-icon, var( --qp-accent-text, #fff ) );
	width: 52px;
	height: 52px;
}
.upaper-quran-player .qp-btn-play:hover {
	background: var( --qp-play-bg, var( --qp-accent, #0ea96f ) );
	filter: brightness(1.08);
	transform: scale(1.06);
}
.upaper-quran-player .qp-btn svg {
	width: 22px;
	height: 22px;
	display: block;
}
.upaper-quran-player .qp-btn-play svg { width: 26px; height: 26px; }
/* Single-source toggle: button gets `.is-playing` when audio plays.
   Default state shows play; .is-playing flips to pause. Classes beat any
   attribute fight ([hidden] vs display:block) and survive re-renders. */
.upaper-quran-player .qp-btn-play .qp-icon-pause { display: none; }
.upaper-quran-player .qp-btn-play.is-playing .qp-icon-play  { display: none; }
.upaper-quran-player .qp-btn-play.is-playing .qp-icon-pause { display: block; }
/* Nudge the play triangle a hair to the right so it visually centers. */
.upaper-quran-player .qp-btn-play .qp-icon-play { transform: translateX(2px); }
.upaper-quran-player .qp-seek {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	direction: ltr;
}
.upaper-quran-player .qp-seek input[type="range"] {
	flex: 1 1 auto;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	height: 4px;
}
.upaper-quran-player .qp-seek input[type="range"]::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 999px;
	background: var( --qp-border, rgba(255,255,255,.2) );
	direction: ltr;
}
.upaper-quran-player .qp-seek input[type="range"]::-moz-range-track {
	height: 4px;
	border-radius: 999px;
	background: var( --qp-border, rgba(255,255,255,.2) );
}
.upaper-quran-player .qp-seek input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	border-radius: 999px;
	background: var( --qp-accent, #10b981 );
	margin-top: -5px;
	cursor: pointer;
	border: 2px solid #fff;
}
.upaper-quran-player .qp-seek input[type="range"]::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border-radius: 999px;
	background: var( --qp-accent, #10b981 );
	cursor: pointer;
	border: 2px solid #fff;
}
.upaper-quran-player .qp-time {
	font-variant-numeric: tabular-nums;
	font-size: 12px;
	color: var( --qp-muted, #94a3b8 );
	white-space: nowrap;
}

/* ----- Ayah list / playlist ----- */
.upaper-quran-player .qp-list {
	/* Position absolute inside .qp-list-wrap so the wrapper sizes via the
	   grid row (driven by .qp-main height) — the list itself doesn't push
	   the cell taller, so it gets a real height to scroll inside. */
	position: absolute;
	inset: 0;
	overflow-y: auto;
	background: var( --qp-surface, rgba(255,255,255,.06) );
	border: 1px solid var( --qp-border, rgba(255,255,255,.1) );
	border-radius: var( --qp-card-radius, 6px );
	padding: 6px;
	/* Custom scrollbar — accent on thumb, transparent track. */
	scrollbar-width: thin;
	scrollbar-color: var( --qp-accent, #10b981 ) transparent;
}
.upaper-quran-player .qp-list::-webkit-scrollbar {
	width: 8px;
}
.upaper-quran-player .qp-list::-webkit-scrollbar-track {
	background: transparent;
	margin: 6px 0;
}
.upaper-quran-player .qp-list::-webkit-scrollbar-thumb {
	background: var( --qp-border, rgba(255,255,255,.2) );
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: padding-box;
}
.upaper-quran-player .qp-list::-webkit-scrollbar-thumb:hover {
	background: var( --qp-accent, #10b981 );
	background-clip: padding-box;
}
/* Surah picker has 114 entries; give it the same scrollbar treatment. */
.upaper-quran-player .qp-picker-list {
	scrollbar-width: thin;
	scrollbar-color: var( --qp-accent, #10b981 ) transparent;
}
.upaper-quran-player .qp-picker-list::-webkit-scrollbar { width: 8px; }
.upaper-quran-player .qp-picker-list::-webkit-scrollbar-track { background: transparent; }
.upaper-quran-player .qp-picker-list::-webkit-scrollbar-thumb {
	background: var( --qp-border, rgba(255,255,255,.2) );
	border-radius: 999px;
}
.upaper-quran-player .qp-picker-list::-webkit-scrollbar-thumb:hover {
	background: var( --qp-accent, #10b981 );
}
.upaper-quran-player .qp-list-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	text-align: start;
	appearance: none;
	background: transparent;
	color: inherit;
	border: 0;
	border-radius: 8px;
	padding: 10px 12px;
	cursor: pointer;
	font: inherit;
	transition: background .12s ease;
}
.upaper-quran-player .qp-list-item:hover {
	background: var( --qp-border, rgba(255,255,255,.08) );
}
.upaper-quran-player .qp-list-item.is-active {
	background: var( --qp-list-active-bg, var( --qp-accent, #10b981 ) );
	color: var( --qp-list-active-color, var( --qp-accent-text, #fff ) );
}
.upaper-quran-player .qp-list-num {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: var( --qp-list-num-bg, var( --qp-border, rgba(255,255,255,.12) ) );
	color: var( --qp-list-num-color, inherit );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
}
.upaper-quran-player .qp-list-item.is-active .qp-list-num {
	background: rgba(255,255,255,.25);
}
.upaper-quran-player .qp-list-text {
	flex: 1 1 auto;
	font-family: var( --qp-list-font, var( --qp-arabic-font, "AlQalam Telenor", "Amiri Quran", serif ) );
	font-size: var( --qp-list-size, 14px );
	line-height: var( --qp-list-lh, 1.4 );
	font-weight: var( --qp-list-weight, 400 );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

/* ----- Responsive ----- */
/* Container queries — react to the block's OWN width, not the viewport.
   Sidebar placements (narrow column on a wide desktop) collapse the body
   into a single stacked column with the playlist last, full width. */
@container qp ( max-width: 720px ) {
	.upaper-quran-player .qp-body {
		grid-template-columns: 1fr;
	}
	/* List flips out of position:absolute back into normal flow so it
	   sits AFTER the cards (since it's a later DOM sibling). */
	.upaper-quran-player .qp-list-wrap {
		position: static;
		min-height: 0;
		max-height: none;
	}
	.upaper-quran-player .qp-list {
		position: static;
		height: auto;
		max-height: 420px;
	}
}

/* Truly compact (sidebar widget) — stack toolbar fields too, trim padding. */
@container qp ( max-width: 480px ) {
	.upaper-quran-player {
		padding: 16px;
		gap: 12px;
	}
	.upaper-quran-player .qp-toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}
	.upaper-quran-player .qp-field {
		flex: 1 1 auto;
		min-width: 0;
	}
	.upaper-quran-player .qp-surah-header {
		padding: 18px 10px 12px;
	}
	.upaper-quran-player .qp-current {
		padding: 18px;
	}
	.upaper-quran-player .qp-player {
		flex-wrap: wrap;
		row-gap: 6px;
	}
	.upaper-quran-player .qp-seek {
		flex: 1 1 100%;
		order: 10;
	}
	.upaper-quran-player .qp-list {
		max-height: 360px;
	}
}

/* Legacy fallback for browsers without container query support — the
   container-name / container-type lines above degrade to no-ops there,
   so this viewport media query still gives a reasonable mobile layout. */
@media ( max-width: 720px ) {
	.upaper-quran-player .qp-body { grid-template-columns: 1fr; }
}

.wp-block[data-type="upaper/quran-player"] .upaper-quran-player { margin: 0; }

/* =========================================================================
 * Quran Player — Liquid Glass theme.
 * Rotating Unsplash landscape behind frosted-glass cards. The PHP wrapper
 * gets `.theme-liquid` when the admin picks this theme; everything else is
 * a CSS variant of the same DOM so view.js doesn't need to branch.
 * ===================================================================== */
.upaper-quran-player.theme-liquid {
	position: relative;
	isolation: isolate; /* contain backdrop-filter so blur doesn't leak outside */
	overflow: hidden;
	background: #0a0f1a;
	color: #f8fafc;
}
.upaper-quran-player.theme-liquid .qp-bg {
	position: absolute;
	inset: -40px;          /* over-extend so zoom + pan never reveals edges */
	background-size: cover;
	background-position: center;
	z-index: -2;
	transition: opacity .55s ease;
	transform-origin: center center;
	/* Ken Burns — long slow zoom-in + pan. Variations alternate so each
	   cycle drifts a different direction. Pause-respect handled below. */
	animation: qp-ken-burns 22s ease-in-out infinite alternate;
	will-change: transform;
}
/* Each ayah swap rotates through 4 motion variants for visual variety. */
.upaper-quran-player.theme-liquid .qp-bg.qp-kb-1 { animation-name: qp-ken-burns; }
.upaper-quran-player.theme-liquid .qp-bg.qp-kb-2 { animation-name: qp-ken-burns-2; }
.upaper-quran-player.theme-liquid .qp-bg.qp-kb-3 { animation-name: qp-ken-burns-3; }
.upaper-quran-player.theme-liquid .qp-bg.qp-kb-4 { animation-name: qp-ken-burns-4; }

.upaper-quran-player.theme-liquid .qp-bg.qp-bg-fading {
	opacity: 0;
}
.upaper-quran-player.theme-liquid .qp-bg-overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(120% 80% at 0% 0%,   rgba(20, 184, 166, .28), transparent 60%),
		radial-gradient(100% 80% at 100% 100%, rgba(99, 102, 241, .28), transparent 60%),
		linear-gradient(180deg, rgba(2, 6, 23, .35), rgba(2, 6, 23, .65));
}

/* Ken Burns variants — each starts at one corner, zooms-in toward the
   opposite corner. 1.0 → 1.15 zoom + ~30px pan = noticeable but calm. */
@keyframes qp-ken-burns {
	from { transform: scale(1.00) translate(  0px,   0px ); }
	to   { transform: scale(1.15) translate( -32px, -22px ); }
}
@keyframes qp-ken-burns-2 {
	from { transform: scale(1.15) translate( -28px,  20px ); }
	to   { transform: scale(1.00) translate(  20px, -18px ); }
}
@keyframes qp-ken-burns-3 {
	from { transform: scale(1.05) translate(  22px, -20px ); }
	to   { transform: scale(1.20) translate( -22px,  18px ); }
}
@keyframes qp-ken-burns-4 {
	from { transform: scale(1.20) translate(  18px,  16px ); }
	to   { transform: scale(1.05) translate( -22px, -16px ); }
}

/* Shared glass-card recipe for every inner surface. Custom property keeps
   the values in one place so individual cards can tweak just opacity etc. */
.upaper-quran-player.theme-liquid .qp-surah-header,
.upaper-quran-player.theme-liquid .qp-current,
.upaper-quran-player.theme-liquid .qp-player,
.upaper-quran-player.theme-liquid .qp-list,
.upaper-quran-player.theme-liquid .qp-picker-toggle,
.upaper-quran-player.theme-liquid .qp-tr-toggle-btn {
	background: rgba(255, 255, 255, .08);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	backdrop-filter: blur(18px) saturate(160%);
	border-color: rgba(255, 255, 255, .15);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .12),
		0 10px 30px -10px rgba(0, 0, 0, .5);
}
/* Dropdown PANELS need to be darker than the toggle button — options
   sit on top of whatever's behind the player (a busy bg photo in liquid
   theme) and translucent white at .08 leaves option text illegible. */
.upaper-quran-player.theme-liquid .qp-picker-list,
.upaper-quran-player.theme-liquid .qp-tr-list {
	background: rgba(15, 23, 42, .82);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	backdrop-filter: blur(20px) saturate(160%);
	border-color: rgba(255, 255, 255, .12);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .08),
		0 18px 38px -8px rgba(0, 0, 0, .65);
}
/* The cards / hero get a softer "liquid" rounded silhouette. */
.upaper-quran-player.theme-liquid .qp-surah-header,
.upaper-quran-player.theme-liquid .qp-current,
.upaper-quran-player.theme-liquid .qp-list,
.upaper-quran-player.theme-liquid .qp-list-wrap {
	border-radius: var( --qp-card-radius, 22px );
}
.upaper-quran-player.theme-liquid .qp-player {
	border-radius: 999px;
}

/* Soft highlight on cards — a thin gradient sheen at the top, like a glass
   meniscus catching light. Not applied to the list because its inner
   absolutely-positioned `.qp-list` would always stack above the sheen. */
.upaper-quran-player.theme-liquid .qp-surah-header,
.upaper-quran-player.theme-liquid .qp-current {
	position: relative;
}
.upaper-quran-player.theme-liquid .qp-surah-header::before,
.upaper-quran-player.theme-liquid .qp-current::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient( 180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 30% );
	pointer-events: none;
}

/* Text colour bumps to keep readable contrast on busy photo backgrounds. */
.upaper-quran-player.theme-liquid {
	--qp-text: #ffffff;
	--qp-muted: rgba(255, 255, 255, .75);
	--qp-border: rgba(255, 255, 255, .15);
}
.upaper-quran-player.theme-liquid .qp-surah-meaning,
.upaper-quran-player.theme-liquid .qp-surah-meta,
.upaper-quran-player.theme-liquid .qp-time,
.upaper-quran-player.theme-liquid .qp-field-label {
	color: rgba(255, 255, 255, .8);
}
.upaper-quran-player.theme-liquid .qp-ayah-en {
	color: rgba(255, 255, 255, .88);
}

/* Play button stays vivid so it pops over any background. */
.upaper-quran-player.theme-liquid .qp-btn-play {
	background: rgba(16, 185, 129, .92);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, .25);
}

/* List items get a subtle hover glow. */
.upaper-quran-player.theme-liquid .qp-list-item:hover {
	background: rgba(255, 255, 255, .08);
}
.upaper-quran-player.theme-liquid .qp-list-item.is-active {
	background: rgba(16, 185, 129, .85);
}
.upaper-quran-player.theme-liquid .qp-list-num {
	background: rgba(255, 255, 255, .15);
}

/* Disable backdrop-filter where unsupported — fall back to a heavier solid. */
@supports not ( ( -webkit-backdrop-filter: blur(1px) ) or ( backdrop-filter: blur(1px) ) ) {
	.upaper-quran-player.theme-liquid .qp-surah-header,
	.upaper-quran-player.theme-liquid .qp-current,
	.upaper-quran-player.theme-liquid .qp-player,
	.upaper-quran-player.theme-liquid .qp-list,
	.upaper-quran-player.theme-liquid .qp-picker-toggle,
	.upaper-quran-player.theme-liquid .qp-tr-toggle-btn {
		background: rgba(15, 23, 42, .72);
	}
	.upaper-quran-player.theme-liquid .qp-picker-list,
	.upaper-quran-player.theme-liquid .qp-tr-list {
		background: rgba(15, 23, 42, .9);
	}
}

/* Respect prefers-reduced-motion — kill the Ken Burns + crossfade. */
@media ( prefers-reduced-motion: reduce ) {
	.upaper-quran-player.theme-liquid .qp-bg,
	.upaper-quran-player.theme-liquid .qp-bg.qp-kb-1,
	.upaper-quran-player.theme-liquid .qp-bg.qp-kb-2,
	.upaper-quran-player.theme-liquid .qp-bg.qp-kb-3,
	.upaper-quran-player.theme-liquid .qp-bg.qp-kb-4 {
		animation: none;
		transition: none;
		transform: none;
	}
}

/* =========================================================================
 * Quran Player — Color schemes + Islamic ornaments + border patterns.
 *
 * Each `.scheme-*` class overrides the wrapper's --qp-* palette variables.
 * Admin's individual color slots (emitted as inline style by PHP) still win
 * because inline style beats class rules — i.e. presets set the baseline,
 * fine-tuning customises on top.
 * ===================================================================== */

/* Midnight — default; matches the existing baseline so it's effectively a no-op. */
.upaper-quran-player.scheme-midnight {
	--qp-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
	--qp-surface: rgba(255, 255, 255, .06);
	--qp-text: #e2e8f0;
	--qp-muted: #94a3b8;
	--qp-border: rgba(255, 255, 255, .12);
	--qp-accent: #10b981;
	--qp-accent-text: #ffffff;
	--qp-panel-bg: #1e293b;
}

/* Emerald — Islamic green dominant with gold accents. */
.upaper-quran-player.scheme-emerald {
	--qp-bg: linear-gradient(135deg, #064e3b 0%, #047857 60%, #065f46 100%);
	--qp-surface: rgba(255, 255, 255, .08);
	--qp-text: #ecfdf5;
	--qp-muted: rgba(236, 253, 245, .72);
	--qp-border: rgba(251, 191, 36, .25);
	--qp-accent: #fbbf24;
	--qp-accent-text: #1f2937;
	--qp-panel-bg: #064e3b;
}

/* Royal — deep indigo + gold. */
.upaper-quran-player.scheme-royal {
	--qp-bg: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #1e1b4b 100%);
	--qp-surface: rgba(255, 255, 255, .07);
	--qp-text: #e0e7ff;
	--qp-muted: rgba(224, 231, 255, .72);
	--qp-border: rgba(251, 191, 36, .25);
	--qp-accent: #fbbf24;
	--qp-accent-text: #1e1b4b;
	--qp-panel-bg: #1e1b4b;
}

/* Sand — light theme, cream / sepia for daytime reading. */
.upaper-quran-player.scheme-sand {
	--qp-bg: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
	--qp-surface: rgba(255, 255, 255, .55);
	--qp-text: #422006;
	--qp-muted: #78350f;
	--qp-border: rgba(146, 64, 14, .2);
	--qp-accent: #92400e;
	--qp-accent-text: #fffbeb;
	--qp-panel-bg: #fffbeb;
}

/* Rose — dark rose with blush accents. */
.upaper-quran-player.scheme-rose {
	--qp-bg: linear-gradient(135deg, #4c0519 0%, #881337 100%);
	--qp-surface: rgba(255, 255, 255, .08);
	--qp-text: #fff1f2;
	--qp-muted: rgba(255, 241, 242, .72);
	--qp-border: rgba(253, 164, 175, .3);
	--qp-accent: #fda4af;
	--qp-accent-text: #4c0519;
	--qp-panel-bg: #4c0519;
}

/* Forest — deep emerald-green with amber accents. */
.upaper-quran-player.scheme-forest {
	--qp-bg: linear-gradient(135deg, #022c22 0%, #14532d 100%);
	--qp-surface: rgba(255, 255, 255, .07);
	--qp-text: #ecfdf5;
	--qp-muted: rgba(236, 253, 245, .7);
	--qp-border: rgba(250, 204, 21, .25);
	--qp-accent: #facc15;
	--qp-accent-text: #022c22;
	--qp-panel-bg: #022c22;
}

/* Mihrab — deep burgundy + gold, mosque-inspired. */
.upaper-quran-player.scheme-mihrab {
	--qp-bg: linear-gradient(135deg, #450a0a 0%, #7c2d12 100%);
	--qp-surface: rgba(255, 255, 255, .08);
	--qp-text: #fef2f2;
	--qp-muted: rgba(254, 242, 242, .72);
	--qp-border: rgba(251, 191, 36, .25);
	--qp-accent: #fbbf24;
	--qp-accent-text: #450a0a;
	--qp-panel-bg: #450a0a;
}

/* Sand scheme adjusts cards to higher-contrast surfaces since the bg is light. */
.upaper-quran-player.scheme-sand .qp-current,
.upaper-quran-player.scheme-sand .qp-surah-header,
.upaper-quran-player.scheme-sand .qp-list,
.upaper-quran-player.scheme-sand .qp-player {
	box-shadow: 0 4px 12px rgba(120, 53, 15, .12);
}

/* --- Header ornament --- */
.upaper-quran-player .qp-ornament {
	display: flex;
	justify-content: center;
	margin: 0 auto 10px;
	color: var( --qp-accent, #10b981 );
}
.upaper-quran-player .qp-ornament svg {
	width: 36px;
	height: 36px;
	filter: drop-shadow( 0 2px 4px rgba(0, 0, 0, .25) );
}
.upaper-quran-player .qp-ornament--star svg     { width: 32px; height: 32px; }
.upaper-quran-player .qp-ornament--crescent svg { width: 44px; height: 30px; }
.upaper-quran-player .qp-ornament--geometric svg { width: 48px; height: 48px; }

/* --- Section dividers ---
 * Horizontal ornament between the surah header and the current ayah card.
 * Modelled on Ayah-of-the-Day's `.upaper-quran-ornament` recipe — two
 * fading rules on either side meet a centred motif. The container's text
 * colour drives all parts so each scheme tints automatically. */
.upaper-quran-player .qp-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: -4px 0 0;
	color: var( --qp-accent, #10b981 );
}
.upaper-quran-player .qp-divider::before,
.upaper-quran-player .qp-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient( 90deg, transparent 0%, currentColor 50%, transparent 100% );
	opacity: .55;
}
.upaper-quran-player .qp-divider-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 4px rgba( 0, 0, 0, .15 );
}
.upaper-quran-player .qp-divider-mark {
	width: 18px;
	height: 18px;
	display: block;
	filter: drop-shadow( 0 1px 2px rgba(0, 0, 0, .25) );
}
.upaper-quran-player .qp-divider--line-star    .qp-divider-mark { width: 20px; height: 20px; }
.upaper-quran-player .qp-divider--line-diamond .qp-divider-mark { width: 14px; height: 14px; }

/* Double-line — two thin parallels, no centre glyph. */
.upaper-quran-player .qp-divider--double-line {
	height: 6px;
	padding: 0;
}
.upaper-quran-player .qp-divider--double-line::before,
.upaper-quran-player .qp-divider--double-line::after {
	flex: 1;
	height: 6px;
	background:
		linear-gradient( 90deg, transparent 0%, currentColor 30%, currentColor 70%, transparent 100% ) 0 0   / 100% 1px no-repeat,
		linear-gradient( 90deg, transparent 0%, currentColor 30%, currentColor 70%, transparent 100% ) 0 100% / 100% 1px no-repeat;
	opacity: .55;
}

/* --- Bookmark / resume toggle ---
 * Pill-shaped switch in the toolbar. Track turns accent-coloured when on,
 * thumb slides right. Visible label sits to the right of the switch. */
.upaper-quran-player .qp-field--bookmark {
	flex: 0 0 auto;
}
.upaper-quran-player .qp-bookmark-toggle {
	appearance: none;
	background: transparent;
	color: var( --qp-text, currentColor );
	border: 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	padding: 8px 6px;
	font: inherit;
	min-height: 44px;
}
.upaper-quran-player .qp-bookmark-track {
	position: relative;
	width: 38px;
	height: 22px;
	border-radius: 999px;
	background: var( --qp-border, rgba(255,255,255,.18) );
	transition: background .18s ease;
	flex: 0 0 auto;
	display: block;
}
.upaper-quran-player .qp-bookmark-thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	transition: transform .18s ease;
}
.upaper-quran-player .qp-bookmark-toggle.is-on .qp-bookmark-track {
	background: var( --qp-accent, #10b981 );
}
.upaper-quran-player .qp-bookmark-toggle.is-on .qp-bookmark-thumb {
	transform: translateX(16px);
}
.upaper-quran-player .qp-bookmark-text {
	font-size: 13px;
	font-weight: 600;
	color: var( --qp-muted, #94a3b8 );
}
.upaper-quran-player .qp-bookmark-toggle.is-on .qp-bookmark-text {
	color: var( --qp-text, #f1f5f9 );
}
.upaper-quran-player .qp-bookmark-toggle:focus-visible {
	outline: 2px solid var( --qp-accent, #10b981 );
	outline-offset: 4px;
	border-radius: 6px;
}

/* =========================================================================
 * Muslim Names Finder (upaper/name-finder).
 * Filter form that submits to the names archive. Two orientations:
 *   .nf-sidebar    — vertical stack (narrow widget area)
 *   .nf-horizontal — single row of compact sections (full-width header)
 * Each pill / letter is a real <a> link so the filter works without JS.
 * ===================================================================== */
.upaper-name-finder {
	font-family: var( --nf-font, inherit );
	color: var( --nf-text, inherit );
	background: var( --nf-bg, transparent );
	padding: var( --nf-padding, 0 );
	border-radius: var( --nf-radius, 12px );
	display: flex;
	flex-direction: column;
	gap: var( --nf-gap, 18px );
	/* Content is English (labels + letters A-Z). Force LTR so flex order,
	   text-align, and the absolute-positioned search icon all read left
	   to right regardless of the surrounding page direction. */
	direction: ltr;
	text-align: left;
}
.upaper-name-finder * {
	/* Cascade LTR through descendants so individual flex rows aren't
	   silently flipped by an ancestor's `direction: rtl`. */
	direction: ltr;
}
.upaper-name-finder .nf-title {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 700;
}
.upaper-name-finder .nf-section {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}
.upaper-name-finder .nf-label {
	font-size: var( --nf-label-size, 14px );
	font-weight: var( --nf-label-weight, 700 );
	color: var( --nf-label-color, inherit );
}

/* --- Search field ---
 * Decorative magnifying-glass on the left of the input. No submit button —
 * Enter submits the form natively. Avoids theme-level `button { }` rules
 * painting a dark fill on a button we don't want. */
.upaper-name-finder .nf-search-form {
	position: relative;
	display: flex;
}
.upaper-name-finder .nf-search-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	color: #94a3b8;
	pointer-events: none;
	z-index: 1;
}
.upaper-name-finder .nf-search-input {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	background: var( --nf-input-bg, #fff );
	border: 1px solid var( --nf-input-border, rgba(15,23,42,.18) );
	border-radius: 999px;
	padding: 11px 18px 11px 40px;
	font: inherit;
	font-size: var( --nf-input-size, 14px );
	color: inherit;
	box-shadow: inset 0 1px 2px rgba(15,23,42,.04);
}
.upaper-name-finder .nf-search-input:focus {
	outline: 2px solid #94a3b8;
	outline-offset: 1px;
}
/* Suppress WebKit's native search decorations — they render as their own
   dark glyph that fights the custom magnifier we just placed. */
.upaper-name-finder .nf-search-input::-webkit-search-cancel-button,
.upaper-name-finder .nf-search-input::-webkit-search-decoration,
.upaper-name-finder .nf-search-input::-webkit-search-results-button,
.upaper-name-finder .nf-search-input::-webkit-search-results-decoration {
	-webkit-appearance: none;
	appearance: none;
}

/* --- Hidden radios for pills + letters ---
 * Each filter option is a visually-hidden <input type="radio"> paired
 * with a styled <label>. The radios get CSS-clipped (instead of
 * `display:none`) so keyboard focus + form-submit still work. */
.upaper-name-finder .nf-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	pointer-events: none;
}
.upaper-name-finder fieldset.nf-section {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}
.upaper-name-finder fieldset.nf-section legend {
	padding: 0;
	margin: 0 0 8px;
}

/* --- Pill rows (gender, origin) --- */
.upaper-name-finder .nf-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.upaper-name-finder .nf-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 22px;
	border-radius: 999px;
	background: var( --nf-pill-bg, #fff );
	color: #475569;
	border: 1.5px solid currentColor;
	font: inherit;
	font-size: var( --nf-input-size, 14px );
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	user-select: none;
	transition: transform .12s ease, background .15s ease, color .15s ease;
}
.upaper-name-finder .nf-pill:hover {
	transform: translateY(-1px);
}
/* Keyboard focus indicator — show on the label when its radio receives
   focus via Tab key. */
.upaper-name-finder .nf-radio:focus-visible + .nf-pill,
.upaper-name-finder .nf-radio:focus-visible + .nf-letter {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

/* Per-option accent colors — outline tint in idle state, fill in active.
   Reference: blue boys, rose girls, green Quranic, amber Prophets, teal
   Companions, indigo Modern. */
.upaper-name-finder .nf-pill.is-all      { color: #475569; }
.upaper-name-finder .nf-pill.is-boy      { color: #2563eb; }
.upaper-name-finder .nf-pill.is-girl     { color: #e11d48; }
.upaper-name-finder .nf-pill.is-quranic  { color: #059669; }
.upaper-name-finder .nf-pill.is-prophet  { color: #d97706; }
.upaper-name-finder .nf-pill.is-companion{ color: #0891b2; }
.upaper-name-finder .nf-pill.is-modern   { color: #2563eb; }

/* Active state — paired with the immediately-preceding checked radio.
   Adjacent-sibling combinator means the markup MUST be radio + label. */
.upaper-name-finder .nf-radio:checked + .nf-pill {
	color: var( --nf-pill-active-color, #fff );
	border-color: currentColor;
}
.upaper-name-finder .nf-radio:checked + .nf-pill.is-all      { background: #475569; border-color: #475569; }
.upaper-name-finder .nf-radio:checked + .nf-pill.is-boy      { background: #2563eb; border-color: #2563eb; }
.upaper-name-finder .nf-radio:checked + .nf-pill.is-girl     { background: #e11d48; border-color: #e11d48; }
.upaper-name-finder .nf-radio:checked + .nf-pill.is-quranic  { background: #059669; border-color: #059669; }
.upaper-name-finder .nf-radio:checked + .nf-pill.is-prophet  { background: #d97706; border-color: #d97706; }
.upaper-name-finder .nf-radio:checked + .nf-pill.is-companion{ background: #0891b2; border-color: #0891b2; }
.upaper-name-finder .nf-radio:checked + .nf-pill.is-modern   { background: #2563eb; border-color: #2563eb; }

/* --- Letter circle grid ---
   Fixed-size circles packed left-to-right with flex-wrap. Previously used
   a CSS grid with `repeat(N, 1fr)` which stretched circles to fill the
   row — fine for narrow sidebars, but on wide containers each cell ended
   up huge. Fixed pixel size keeps them consistent at any width. */
.upaper-name-finder .nf-letters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.upaper-name-finder .nf-letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var( --nf-letter-bg, #fff );
	color: #475569;
	border: 1.5px solid rgba(15,23,42,.18);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	user-select: none;
	transition: transform .12s ease, background .15s ease, color .15s ease;
	padding: 0;
}
.upaper-name-finder .nf-letter:hover {
	transform: translateY(-1px);
	border-color: #2563eb;
	color: #2563eb;
}
.upaper-name-finder .nf-radio:checked + .nf-letter {
	background: var( --nf-letter-active-bg, #2563eb );
	color: var( --nf-letter-active-color, #fff );
	border-color: var( --nf-letter-active-bg, #2563eb );
}
.upaper-name-finder .nf-letter.is-all {
	font-size: 12px;
	font-weight: 700;
}

/* --- Submit button --- */
.upaper-name-finder .nf-section--submit {
	margin-top: 4px;
}
.upaper-name-finder .nf-submit {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 28px;
	min-height: 48px;
	border: 0;
	border-radius: 999px;
	background: var( --nf-pill-active-bg, #2563eb );
	color: var( --nf-pill-active-color, #fff );
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: transform .12s ease, filter .15s ease, box-shadow .15s ease;
	box-shadow: 0 6px 16px -4px rgba( 37, 99, 235, .35 );
}
.upaper-name-finder .nf-submit:hover {
	transform: translateY(-1px);
	filter: brightness(1.06);
}
.upaper-name-finder .nf-submit:focus-visible {
	outline: 3px solid rgba( 37, 99, 235, .35 );
	outline-offset: 2px;
}
.upaper-name-finder .nf-submit svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

/* --- Horizontal orientation overrides ---
   Sections lay out left-to-right but at sensible flex bases — the search
   input is the only thing that wants to grow; pill rows hug their content
   so they don't dilate and overlap the search box. */
.upaper-name-finder.nf-horizontal {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 24px var( --nf-gap, 18px );
}
.upaper-name-finder.nf-horizontal .nf-title {
	flex: 1 1 100%;
}
.upaper-name-finder.nf-horizontal .nf-section--search {
	flex: 1 1 240px;
	max-width: 360px;
	min-width: 200px;
}
/* Pill rows never grow OR shrink — they hug their content. Combined with
   flex-wrap on the parent, this means when the container is too narrow
   the gender / origin sections wrap to the next row instead of letting
   their pills overflow on top of neighbouring sections. */
.upaper-name-finder.nf-horizontal .nf-section--gender,
.upaper-name-finder.nf-horizontal .nf-section--origin {
	flex: 0 0 auto;
	min-width: max-content;
}
.upaper-name-finder.nf-horizontal .nf-section--letter,
.upaper-name-finder.nf-horizontal .nf-section--submit {
	flex: 1 1 100%;
}
.upaper-name-finder.nf-horizontal .nf-letters {
	justify-content: flex-start;
}

/* --- Container query — switch to single column in narrow placements.
       Respond to the block's width, not the viewport, so a horizontal
       block placed in a narrow column reflows correctly. --- */
@container ( max-width: 540px ) {
	.upaper-name-finder.nf-horizontal {
		flex-direction: column;
	}
	.upaper-name-finder.nf-horizontal .nf-section--search,
	.upaper-name-finder.nf-horizontal .nf-section--gender,
	.upaper-name-finder.nf-horizontal .nf-section--origin {
		max-width: none;
	}
}
.upaper-name-finder { container-type: inline-size; }

/* =========================================================================
 * upaper/flight-schedule — airport-style flight board
 *
 * Data comes from render.php (upaper_flights() — AviationStack snapshot).
 * `--fs-accent` is set inline on the wrapper from the block's accentColor
 * attribute; everything else keys off it. Two layouts: `.is-board` (full
 * 5-column table) and `.is-list` (compact 3-line stack for narrow columns).
 * ========================================================================= */

.upaper-flight-schedule {
	--fs-accent: #0ea5e9;
	--fs-bg: #ffffff;
	--fs-head-bg: #0f172a;
	--fs-text: #1e293b;
	--fs-muted: #64748b;
	--fs-border: #e2e8f0;
	--fs-row-alt: #f8fafc;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background: var(--fs-bg);
	border: 1px solid var(--fs-border);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
	direction: ltr;
	text-align: left;
}

/* Header bar — wraps when the container is too narrow to fit the title
   and the direction badge side by side (badge drops to its own line). */
.upaper-flight-schedule .fs-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 14px;
	padding: 14px 18px;
	background: var(--fs-head-bg);
	color: #fff;
}

.upaper-flight-schedule .fs-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	font-size: 17px;
	font-weight: 700;
	color: #fff;
	line-height: 1.25;
	/* Take a full row when wrapped, and never shrink below content. */
	flex: 1 1 auto;
	min-width: 0;
}

.upaper-flight-schedule .fs-title-text {
	/* Wrap between words only — never split "Schedule" mid-word (some
	   theme styles set overflow-wrap: break-word on headings). */
	word-break: normal;
	overflow-wrap: normal;
}

.upaper-flight-schedule .fs-title-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: var(--fs-accent);
	color: #fff;
	flex-shrink: 0;
}

.upaper-flight-schedule .fs-dir-badge {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	white-space: nowrap;
	flex-shrink: 0;
}

/* Board — each row is its own grid sharing one column template */
.upaper-flight-schedule .fs-row {
	display: grid;
	grid-template-columns: 1.5fr 1.7fr 0.7fr 1fr 1fr;
	align-items: center;
	gap: 12px;
	padding: 12px 18px;
	border-bottom: 1px solid var(--fs-border);
}

.upaper-flight-schedule .fs-row:last-child {
	border-bottom: 0;
}

.upaper-flight-schedule .fs-row-head {
	background: var(--fs-row-alt);
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--fs-muted);
	padding-top: 9px;
	padding-bottom: 9px;
}

.upaper-flight-schedule .fs-board .fs-row:not(.fs-row-head):nth-child(even) {
	background: var(--fs-row-alt);
}

/* Flight column — direction tag + flight number + airline */
.upaper-flight-schedule .fs-col-flight {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.upaper-flight-schedule .fs-dir-tag {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 2px 5px;
	border-radius: 4px;
}

.upaper-flight-schedule .fs-dir-dep {
	background: color-mix(in srgb, var(--fs-accent) 16%, transparent);
	color: var(--fs-accent);
}

.upaper-flight-schedule .fs-dir-arr {
	background: rgba(100, 116, 139, 0.16);
	color: var(--fs-muted);
}

.upaper-flight-schedule .fs-flight-no {
	font-weight: 700;
	font-size: 14px;
	color: var(--fs-text);
	font-variant-numeric: tabular-nums;
}

.upaper-flight-schedule .fs-airline {
	font-size: 12px;
	color: var(--fs-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* Route column */
.upaper-flight-schedule .fs-col-route {
	display: flex;
	align-items: baseline;
	gap: 7px;
	min-width: 0;
}

.upaper-flight-schedule .fs-route-arrow {
	color: var(--fs-accent);
	font-size: 15px;
	font-weight: 700;
}

.upaper-flight-schedule .fs-route-city {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--fs-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.upaper-flight-schedule .fs-route-code {
	font-size: 11px;
	font-weight: 700;
	color: var(--fs-muted);
	letter-spacing: 0.04em;
}

/* Time column — monospaced for board-clock feel */
.upaper-flight-schedule .fs-col-time {
	font-size: 16px;
	font-weight: 700;
	color: var(--fs-text);
	font-variant-numeric: tabular-nums;
	font-family: 'Roboto Mono', 'Courier New', monospace;
}

/* Status pill — colour keyed off the row's status modifier */
.upaper-flight-schedule .fs-status-pill {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;
	background: rgba(100, 116, 139, 0.14);
	color: var(--fs-muted);
}

.upaper-flight-schedule .fs-status-scheduled .fs-status-pill {
	background: rgba(100, 116, 139, 0.14);
	color: #475569;
}

.upaper-flight-schedule .fs-status-active .fs-status-pill {
	background: color-mix(in srgb, var(--fs-accent) 16%, transparent);
	color: var(--fs-accent);
}

.upaper-flight-schedule .fs-status-landed .fs-status-pill {
	background: rgba(22, 163, 74, 0.14);
	color: #15803d;
}

.upaper-flight-schedule .fs-status-delayed .fs-status-pill {
	background: rgba(217, 119, 6, 0.16);
	color: #b45309;
}

.upaper-flight-schedule .fs-status-cancelled .fs-status-pill {
	background: rgba(220, 38, 38, 0.14);
	color: #b91c1c;
}

/* A cancelled flight reads as struck-through / dimmed */
.upaper-flight-schedule .fs-status-cancelled .fs-flight-no,
.upaper-flight-schedule .fs-status-cancelled .fs-route-city {
	text-decoration: line-through;
	opacity: 0.7;
}

/* Gate / Terminal */
.upaper-flight-schedule .fs-col-gate {
	font-size: 12.5px;
	color: var(--fs-muted);
	font-weight: 500;
}

/* Freshness line */
.upaper-flight-schedule .fs-freshness {
	padding: 9px 18px;
	font-size: 11px;
	color: var(--fs-muted);
	background: var(--fs-row-alt);
	border-top: 1px solid var(--fs-border);
	text-align: right;
}

/* Empty state */
.upaper-flight-schedule .fs-empty {
	padding: 44px 24px;
	text-align: center;
	color: var(--fs-muted);
}

.upaper-flight-schedule .fs-empty .dashicons {
	font-size: 40px;
	width: 40px;
	height: 40px;
	opacity: 0.5;
	margin-bottom: 8px;
}

.upaper-flight-schedule .fs-empty p {
	margin: 0 auto;
	font-size: 13.5px;
	line-height: 1.6;
	max-width: 440px;
}

.upaper-flight-schedule .fs-empty a {
	color: var(--fs-accent);
	font-weight: 600;
}

/* List layout — compact, for narrow columns / sidebars */
.upaper-flight-schedule.is-list .fs-row-head {
	display: none;
}

.upaper-flight-schedule.is-list .fs-row {
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"flight time"
		"route  status"
		"gate   gate";
	gap: 3px 12px;
	padding: 12px 16px;
}

.upaper-flight-schedule.is-list .fs-col-flight  { grid-area: flight; }
.upaper-flight-schedule.is-list .fs-col-time    { grid-area: time; text-align: right; font-size: 15px; }
.upaper-flight-schedule.is-list .fs-col-route   { grid-area: route; }
.upaper-flight-schedule.is-list .fs-col-status  { grid-area: status; text-align: right; }
.upaper-flight-schedule.is-list .fs-col-gate    { grid-area: gate; font-size: 11.5px; }

/* Responsive — collapse the board on small screens */
@media (max-width: 640px) {
	.upaper-flight-schedule .fs-row-head {
		display: none;
	}
	.upaper-flight-schedule .fs-row {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"flight time"
			"route  status"
			"gate   gate";
		gap: 3px 12px;
	}
	.upaper-flight-schedule .fs-col-flight  { grid-area: flight; }
	.upaper-flight-schedule .fs-col-time    { grid-area: time; text-align: right; }
	.upaper-flight-schedule .fs-col-route   { grid-area: route; }
	.upaper-flight-schedule .fs-col-status  { grid-area: status; text-align: right; }
	.upaper-flight-schedule .fs-col-gate    { grid-area: gate; }
}

/* Dark mode — when the surrounding page is dark */
@media (prefers-color-scheme: dark) {
	.upaper-flight-schedule {
		--fs-bg: #18181b;
		--fs-text: #f4f4f5;
		--fs-muted: #a1a1aa;
		--fs-border: #27272a;
		--fs-row-alt: #1f1f23;
	}
}

/* =========================================================================
 * upaper/youtube-videos + upaper/youtube-playlists
 *
 * Shared chrome (.upaper-yt-*) — both blocks use the same header, card, and
 * grid primitives. `--yt-cols` (column count) and `--yt-accent` are set
 * inline on each wrapper from the block attributes.
 *   .upaper-youtube-videos.is-grid → responsive N-col grid of 16:9 cards
 *   .upaper-youtube-videos.is-reel → horizontal scroller of 9:16 cards
 *   .upaper-youtube-playlists      → N-col grid of playlist cards
 * ========================================================================= */

.upaper-youtube-videos,
.upaper-youtube-playlists {
	--yt-accent: #ff0000;
	--yt-cols: 4;
	--yt-text: #18181b;
	--yt-muted: #6b7280;
	--yt-card-bg: #ffffff;
	--yt-border: #e5e7eb;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--yt-text);
	/* LTR for predictable horizontal-scroll math in the reel carousel —
	   Urdu text inside titles still renders RTL via Unicode bidi. */
	direction: ltr;
}

/* Header — channel avatar + title */
.upaper-yt-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
}

.upaper-yt-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.upaper-yt-header-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}

.upaper-yt-title {
	margin: 0;
	padding: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--yt-text);
}

.upaper-yt-channel {
	font-size: 12.5px;
	color: var(--yt-muted);
	margin-top: 2px;
}

.upaper-yt-badge-shorts {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--yt-accent);
	color: #fff;
	flex-shrink: 0;
}

/* Grid — videos (16:9) + playlists */
.upaper-yt-grid {
	display: grid;
	grid-template-columns: repeat(var(--yt-cols), minmax(0, 1fr));
	gap: 18px;
}

/* Card — a reset button so the whole tile is one click target */
.upaper-yt-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	color: inherit;
	width: 100%;
}

.upaper-yt-thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	background: #000;
}

.upaper-yt-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.upaper-yt-card:hover .upaper-yt-thumb img,
.upaper-yt-card:focus-visible .upaper-yt-thumb img {
	transform: scale(1.05);
}

/* Centre play button — a pure-CSS YouTube-style rounded badge with a
   border-triangle glyph (no inline SVG, which renders unreliably in this
   theme's block context). Appears + turns red on hover. */
.upaper-yt-play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 56px;
	height: 40px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.78);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
	transform: scale(0.85);
}

.upaper-yt-play::before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 9px 0 9px 16px;
	border-color: transparent transparent transparent #fff;
	margin-left: 3px;
}

.upaper-yt-card:hover .upaper-yt-play,
.upaper-yt-card:focus-visible .upaper-yt-play {
	opacity: 1;
	transform: scale(1);
	background: #ff0000;
}

/* Duration / Short tag */
.upaper-yt-tag {
	position: absolute;
	right: 8px;
	bottom: 8px;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 5px;
	background: rgba(0, 0, 0, 0.82);
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.upaper-yt-tag-short {
	background: var(--yt-accent);
}

/* Info — title + meta */
.upaper-yt-info {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.upaper-yt-vtitle {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--yt-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.upaper-yt-meta {
	font-size: 12px;
	color: var(--yt-muted);
	display: flex;
	align-items: center;
	gap: 5px;
}

.upaper-yt-dot {
	opacity: 0.6;
}

/* Reel layout — 9:16 cards in a carousel. The track is still a native
   horizontal-scroll element (touch swipe works), but its scrollbar is
   hidden — assets/js/youtube-blocks.js drives it with the arrow buttons. */
.upaper-yt-carousel {
	position: relative;
}

.upaper-youtube-videos.is-reel .upaper-yt-grid {
	display: flex;
	grid-template-columns: none;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	/* Hide the scrollbar — carousel arrows replace it. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.upaper-youtube-videos.is-reel .upaper-yt-grid::-webkit-scrollbar {
	display: none;
}

.upaper-youtube-videos.is-reel .upaper-yt-card {
	flex: 0 0 auto;
	width: 200px;
	scroll-snap-align: start;
}

.upaper-youtube-videos.is-reel .upaper-yt-thumb {
	aspect-ratio: 9 / 16;
	border-radius: 14px;
}

.upaper-youtube-videos.is-reel .upaper-yt-vtitle {
	font-size: 13px;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

/* Carousel arrows — circular buttons floating over the track edges.
   JS toggles [hidden] (no overflow) and [disabled] (at the range end). */
.upaper-yt-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: var(--yt-card-bg);
	color: var(--yt-text);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 8px 20px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 4;
	transition: transform 0.16s ease, opacity 0.16s ease, background 0.16s ease;
}

.upaper-yt-nav .dashicons {
	font-size: 24px;
	width: 24px;
	height: 24px;
	line-height: 1;
}

.upaper-yt-nav-prev {
	left: 4px;
}

.upaper-yt-nav-next {
	right: 4px;
}

.upaper-yt-nav:hover {
	transform: translateY(-50%) scale(1.08);
	background: var(--yt-accent);
	color: #fff;
}

.upaper-yt-nav[hidden] {
	display: none;
}

/* At the start / end of the range — fade out, stop catching clicks. */
.upaper-yt-nav[disabled] {
	opacity: 0;
	pointer-events: none;
}

/* Playlist card — stacked-pages overlay on the thumbnail */
.upaper-yt-pl-stack {
	position: absolute;
	left: 8px;
	bottom: 8px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 8px;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.82);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
}

.upaper-yt-pl-stack .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
	line-height: 1;
}

/* The playlist thumbnail gets a faux "stack" edge on its right side */
.upaper-yt-pl-card .upaper-yt-thumb::after {
	content: "";
	position: absolute;
	top: 6px;
	bottom: 6px;
	right: -4px;
	width: 8px;
	border-radius: 0 12px 12px 0;
	background: rgba(0, 0, 0, 0.35);
	z-index: -1;
}

.upaper-yt-pl-card .upaper-yt-thumb {
	margin-right: 4px;
	overflow: visible;
}

.upaper-yt-pl-card .upaper-yt-thumb img {
	border-radius: 12px;
}

/* Empty / unconfigured state */
.upaper-youtube-empty {
	padding: 36px 24px;
	text-align: center;
	color: var(--yt-muted);
	background: #f7f7f9;
	border: 1px dashed #d4d4d8;
	border-radius: 12px;
}

.upaper-youtube-empty .dashicons {
	font-size: 36px;
	width: 36px;
	height: 36px;
	opacity: 0.5;
	margin-bottom: 6px;
}

.upaper-youtube-empty p {
	margin: 0 auto;
	font-size: 13.5px;
	line-height: 1.6;
	max-width: 420px;
}

.upaper-youtube-empty a {
	color: var(--yt-accent);
	font-weight: 600;
}

.upaper-yt-empty-public {
	color: var(--yt-muted);
	font-size: 13.5px;
	padding: 20px;
	text-align: center;
}

/* Responsive — fewer columns as the viewport narrows */
@media (max-width: 900px) {
	.upaper-youtube-videos .upaper-yt-grid,
	.upaper-youtube-playlists .upaper-yt-grid {
		grid-template-columns: repeat(min(var(--yt-cols), 3), minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.upaper-youtube-videos .upaper-yt-grid,
	.upaper-youtube-playlists .upaper-yt-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	.upaper-youtube-videos.is-reel .upaper-yt-grid {
		grid-template-columns: none;
	}
	.upaper-youtube-videos.is-reel .upaper-yt-card {
		width: 160px;
	}
}

/* =========================================================================
 * YouTube blocks lightbox modal (assets/js/youtube-blocks.js)
 * ========================================================================= */

.upaper-yt-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.upaper-yt-modal[hidden] {
	display: none;
}

.upaper-yt-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.upaper-yt-modal.is-open .upaper-yt-modal-backdrop {
	opacity: 1;
}

.upaper-yt-modal-panel {
	position: relative;
	width: min(960px, 92vw);
	opacity: 0;
	transform: scale(0.95);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.upaper-yt-modal.is-open .upaper-yt-modal-panel {
	opacity: 1;
	transform: scale(1);
}

.upaper-yt-modal-frame {
	aspect-ratio: 16 / 9;
	width: 100%;
	background: #000;
	border-radius: 12px;
	overflow: hidden;
}

.upaper-yt-modal-frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.upaper-yt-modal-close {
	position: absolute;
	top: -44px;
	right: 0;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease;
	/* The close glyph is a plain "✕" text character — sized + line-reset
	   here so it sits dead-centre. No SVG / icon font dependency. */
	font-size: 20px;
	line-height: 1;
	padding: 0;
}

.upaper-yt-modal-close:hover {
	background: rgba(255, 255, 255, 0.28);
}

@media (max-width: 600px) {
	.upaper-yt-modal-close {
		top: -40px;
	}
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
	.upaper-youtube-videos,
	.upaper-youtube-playlists {
		--yt-text: #f4f4f5;
		--yt-muted: #a1a1aa;
		--yt-card-bg: #18181b;
		--yt-border: #27272a;
	}
	.upaper-youtube-empty {
		background: #1f1f23;
		border-color: #3f3f46;
	}
}