/* UrduPaper Addon — Horoscope blocks. Scoped and theme-safe. */
.upm-horoscope {
	--upmh-heading-color: #171717;
	--upmh-header-bg: #f0f0f0;
	--upmh-icon-bg: #ffb000;
	--upmh-icon-color: #fff;
	--upmh-bar-color: #ffb000;
	--upmh-section-bg: #fff;
	--upmh-card-bg: #f8f8f8;
	--upmh-name-color: #171717;
	--upmh-name-bg: #ffb000;
	--upmh-range-color: #333;
	--upmh-range-bg: #fff;
	--upmh-visual-bg: #075da8;
	--upmh-symbol-color: #ffd45a;
	--upmh-forecast-color: #171717;
	--upmh-border-color: #d9dde3;
	--upmh-font: inherit;
	--upmh-heading-size: 24px;
	--upmh-name-size: 22px;
	--upmh-range-size: 16px;
	--upmh-forecast-size: 17px;
	--upmh-image-size: 104px;
	--upmh-gap: 24px;
	--upmh-radius: 3px;
	--upmh-border-width: 1px;
	--upmh-card-padding: 0;
	--upmh-section-padding: 0;
	--upmh-margin-top: 0;
	--upmh-margin-bottom: 24px;
	position: relative;
	width: 100%;
	margin-block: var(--upmh-margin-top) var(--upmh-margin-bottom);
	padding: var(--upmh-section-padding);
	background: var(--upmh-section-bg);
	box-sizing: border-box;
	font-family: var(--upmh-font);
	color: var(--upmh-forecast-color);
	border: none;
}

.upm-horoscope *,
.upm-horoscope *::before,
.upm-horoscope *::after { box-sizing: border-box; }

.upm-horoscope-head {
	position: relative;
	display: flex;
	direction: ltr;
	text-align: left;
	width: 100%;
	min-height: 60px;
	align-items: center;
	margin: 0 0 12px;
	padding: 0;
	overflow: hidden;
	background: var(--upmh-header-bg);
	border-radius: var(--upmh-radius);
}
.upm-horoscope-head--align-right { justify-content: flex-end; }
.upm-horoscope-head--align-center { justify-content: center; }
.upm-horoscope-head--align-left { justify-content: flex-start; }
.upm-horoscope-head__title {
	display: inline-flex;
	direction: rtl;
	text-align: right;
	min-width: 0;
	max-width: 100%;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	color: var(--upmh-heading-color);
	font-family: var(--upmh-font);
	font-size: var(--upmh-heading-size);
	font-weight: 700;
	line-height: 1.3;
}
.upm-horoscope-head--with-more .upm-horoscope-head__title { max-width: calc(100% - 150px); }
.upm-horoscope-head__text { min-width: 0; padding: 10px 14px; overflow-wrap: anywhere; text-align: start; unicode-bidi: plaintext; }
.upm-horoscope-head__icon {
	display: inline-flex;
	flex: 0 0 auto;
	width: 58px;
	min-width: 58px;
	min-height: 60px;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	color: var(--upmh-icon-color);
	background: var(--upmh-icon-bg);
}
.upm-horoscope-head__icon svg { display: block; width: 28px; height: 28px; }
.upm-horoscope-head__more {
	position: absolute;
	top: 50%;
	left: 12px;
	right: auto;
	transform: translateY(-50%);
	display: inline-flex;
	direction: rtl;
	text-align: right;
	align-items: center;
	gap: 6px;
	max-width: 138px;
	padding: 6px 12px 8px;
	color: #1a1a1a;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 6px;
	font: 600 18px/1 var(--upmh-font);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.upm-horoscope-head--align-left .upm-horoscope-head__more { left: auto; right: 12px; }
.upm-horoscope-head__more span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.upm-horoscope-head__more i { display: inline-flex; flex: 0 0 auto; align-items: center; position: relative; top: 2px; font-size: 12px; }
.upm-horoscope-head__more:hover,
.upm-horoscope-head__more:focus { color: #000; background: var(--accent-color, var(--upmh-icon-bg)); border-color: var(--accent-color, var(--upmh-icon-bg)); }
.upm-horoscope-header-coloured-bar .upm-horoscope-head { min-height: 48px; overflow: visible; background: transparent; border-block-end: 1px solid var(--upmh-border-color); border-radius: 0; }
.upm-horoscope-header-coloured-bar .upm-horoscope-head__icon { width: 5px; min-width: 5px; min-height: 40px; background: var(--upmh-bar-color); border-radius: 6px; }
.upm-horoscope-header-coloured-bar .upm-horoscope-head__icon svg { display: none; }
.upm-horoscope-header-plain .upm-horoscope-head { min-height: auto; overflow: visible; background: transparent; border-radius: 0; }
.upm-horoscope-header-plain .upm-horoscope-head__title { padding: 5px 0 10px; border-block-end: 3px solid var(--upmh-bar-color); }

.upm-horoscope-card {
	position: relative;
	min-width: 0;
	margin: 0;
	padding: var(--upmh-card-padding);
	overflow: hidden;
	border: var(--upmh-border-width) solid var(--upmh-border-color);
	border-radius: var(--upmh-radius);
	background: var(--upmh-card-bg);
	box-shadow: 0 4px 16px rgba(15, 23, 42, .07);
}
.upm-horoscope-card__name,
.upm-horoscope-card__range,
.upm-horoscope-card__forecast { margin: 0; font-family: var(--upmh-font); }
.upm-horoscope-card__name {
	padding: 7px 10px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--upmh-name-bg) 72%, white), var(--upmh-name-bg));
	color: var(--upmh-name-color);
	font-size: var(--upmh-name-size);
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
}
.upm-horoscope-card__range {
	padding: 6px 9px;
	background: var(--upmh-range-bg) !important;
	color: var(--upmh-range-color) !important;
	font-size: var(--upmh-range-size) !important;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
}
.upm-horoscope-card__visual {
	display: grid;
	min-height: 138px;
	place-items: center;
	background: linear-gradient(145deg, color-mix(in srgb, var(--upmh-visual-bg) 84%, #000), var(--upmh-visual-bg));
	overflow: hidden;
}
.upm-horoscope-card__fallback-symbol {
	display: inline-grid;
	width: var(--upmh-image-size);
	height: var(--upmh-image-size);
	place-items: center;
	border-radius: 50%;
	background: color-mix(in srgb, var(--upmh-symbol-color) 90%, white);
	color: color-mix(in srgb, var(--upmh-visual-bg) 82%, #000);
	font: 700 66px/1 system-ui, sans-serif;
	filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .2));
}
.upm-horoscope-card__image {
	display: block;
	width: var(--upmh-image-size);
	height: var(--upmh-image-size);
	max-width: calc(100% - 20px);
	object-fit: contain;
	object-position: center;
	filter: none;
}
.upm-horoscope-card__forecast {
	padding: 14px 16px 18px;
	color: var(--upmh-forecast-color);
	font-size: var(--upmh-forecast-size);
	line-height: 1.9;
	text-align: right;
}

.upm-horoscope-slider { padding: max(8px, var(--upmh-section-padding)); background: var(--upmh-section-bg); }
.upm-horoscope-slider__viewport { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-behavior: smooth; scroll-snap-type: x mandatory; }
.upm-horoscope-slider__viewport::-webkit-scrollbar { display: none; }
.upm-horoscope-slider__track { display: flex; gap: var(--upmh-gap); direction: rtl; }
.upm-horoscope-slider .upm-horoscope-card {
	flex: 0 0 calc((100% - (var(--upmh-visible, 4) - 1) * var(--upmh-gap)) / var(--upmh-visible, 4));
	min-height: var(--upmh-card-min-height, 178px);
	scroll-snap-align: start;
}
.upm-horoscope-slider__nav { position: absolute; inset: 176px 12px auto; display: flex; justify-content: space-between; pointer-events: none; z-index: 3; }
.upm-horoscope-slider__button {
	display: grid;
	width: 38px;
	height: 38px;
	place-items: center;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .42);
	border-radius: 50%;
	background: rgba(4, 42, 78, .74);
	color: #fff;
	font: 700 30px/1 Arial, sans-serif;
	cursor: pointer;
	pointer-events: auto;
	transition: .18s ease;
}
.upm-horoscope-slider__button:hover,
.upm-horoscope-slider__button:focus { background: var(--upmh-icon-bg); color: #111; transform: scale(1.05); }
.upm-horoscope-slider__archive {
	display: block;
	margin-top: 9px;
	padding: 10px 18px;
	border: 1px solid var(--upmh-icon-bg);
	border-radius: var(--upmh-radius);
	background: transparent;
	color: var(--upmh-icon-bg);
	font-size:var(--upmh-forecast-size) !important;
	text-align: center;
	text-decoration: none;
}
.upm-horoscope-slider__archive:not(.is-static):hover,
.upm-horoscope-slider__archive:not(.is-static):focus { background: var(--upmh-icon-bg); color: #171717; }

.upm-horoscope-archive__intro { max-width: 850px; margin: 0 auto 24px; color: var(--upmh-forecast-color); font-size: var(--upmh-forecast-size); line-height: 1.8; text-align: center; }
.upm-horoscope-archive__grid { display: grid; grid-template-columns: repeat(var(--upmh-columns, 3), minmax(0, 1fr)); gap: var(--upmh-gap); align-items: start; }

@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
	.upm-horoscope-card__name { background: var(--upmh-name-bg); }
	.upm-horoscope-card__visual { background: var(--upmh-visual-bg); }
	.upm-horoscope-card__fallback-symbol { background: var(--upmh-symbol-color); color: #075da8; }
}

@media (max-width: 900px) {
	.upm-horoscope-slider .upm-horoscope-card { flex-basis: calc((100% - (var(--upmh-visible-tablet, 2) - 1) * var(--upmh-gap)) / var(--upmh-visible-tablet, 2)); }
	.upm-horoscope-archive__grid { grid-template-columns: repeat(var(--upmh-columns-tablet, 2), minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.upm-horoscope-head { min-height: 50px; }
	.upm-horoscope-head__icon { width: 48px; min-width: 48px; min-height: 50px; }
	.upm-horoscope-head__title { min-width: 0; font-size: min(var(--upmh-heading-size), 24px); }
	.upm-horoscope-head__more { left: 6px; max-width: 104px; padding: 7px 9px; font-size: 14px; }
	.upm-horoscope-head--align-left .upm-horoscope-head__more { left: auto; right: 6px; }
	.upm-horoscope-head--with-more .upm-horoscope-head__title { max-width: calc(100% - 118px); }
	.upm-horoscope-slider .upm-horoscope-card { flex-basis: calc((100% - (var(--upmh-visible-mobile, 1) - 1) * var(--upmh-gap)) / var(--upmh-visible-mobile, 1)); }
	.upm-horoscope-archive__grid { grid-template-columns: repeat(var(--upmh-columns-mobile, 1), minmax(0, 1fr)); }
	.upm-horoscope-slider__nav { inset-inline: 5px; }
}
@media (prefers-reduced-motion: reduce) {
	.upm-horoscope-slider__viewport { scroll-behavior: auto; }
	.upm-horoscope-slider__button { transition: none; }
}