/* Musaned Rules front-end features: marquee, tips pill, media slider,
 * stepped modals (onboarding/intro/rules/download/survey), quick-icons bar. */

/* 0. Homepage quick-icons bar -- 6 buttons split into a left group (Send,
 * Survey, Info Panels) and right group (Onboarding, Images, Videos), flex
 * space-between the two groups, sitting between the list/map view toggle
 * and the in-page title block (see page-listing.php). Reuses the theme's
 * own .musaned-quickbutton icon-button style for each button. */
.musaned-quick-icons {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 12px 0;
}

.musaned-quick-icons__group {
	display: flex;
	align-items: center;
	gap: 8px;
}

.musaned-quick-icons .musaned-quickbutton {
	width: 32px;
	height: 32px;
	min-width: 32px;
	min-height: 32px;
}

/* 1. Marquee */
.mr-marquee {
	overflow: hidden;
	background: #292929;
	color: #fff;
	white-space: nowrap;
	padding: 8px 0;
	direction: rtl;
}

.mr-marquee__track {
	display: inline-flex;
	animation: mr-marquee-scroll linear infinite;
}

.mr-marquee__item {
	padding: 0 2rem;
	font-size: 0.95rem;
}

@keyframes mr-marquee-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/* 2. Rotating tips pill -- bottom center */
.mr-tips {
	position: fixed;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1010;
	background: #fff;
	border: 1px solid var(--border-color);
	border-radius: 999px;
	padding: 8px 18px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
	font-size: .9rem;
	max-width: 480px;
	text-align: center;
	/* Grid-stacked crossfade: every item occupies the same cell (sized to
	 * the tallest one) instead of display:none/inline toggling, which
	 * can't be transitioned -- display switches instantly regardless of
	 * any opacity transition on the element. */
	display: grid;
}

.mr-tips__item {
	grid-area: 1 / 1;
	opacity: 0;
	transition: opacity 1.1s ease;
	pointer-events: none;
}

.mr-tips__item.mr-tips__item--active {
	opacity: 1;
	pointer-events: auto;
}

/* 3. Media slider (images/videos) */
.mr-modal__bare {
	background: transparent;
	border: none;
	box-shadow: none;
}

/* Larger dialog for pictures and videos: up to 1200px wide, never wider than
 * the screen, and never so wide that the 16:9 frame plus the control bar
 * would be taller than the window. */
#musanedImagesModal .modal-dialog,
#musanedVideosModal .modal-dialog {
	--bs-modal-width: min(1200px, 94vw, calc((100vh - 130px) * 16 / 9));
	max-width: var(--bs-modal-width);
}

/* Close button: a round white button just above the slider, on the dimmed
 * page. The theme's global button rule forces a dark background and would
 * hide Bootstrap's X image, so both are set again with !important. */
.mr-modal__bare .mr-modal__close {
	position: absolute;
	top: -15px;
	inset-inline-end: 0;
	transform: translateX(-15px);
	z-index: 5;
	width: 36px;
	height: 36px;
	padding: 0 !important;
	border-radius: 50%;
	opacity: 1;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231a1a1a' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3.5 3.5l9 9M12.5 3.5l-9 9'/%3E%3C/svg%3E") center / 14px no-repeat !important;
	border: 1px solid var(--border-color-dark) !important;
	filter: none;
}

/* The slider always runs left to right (slides sit side by side and the track
 * moves with translateX), also on the Arabic page. */
.mr-slider {
	position: relative;
	overflow: hidden;
	direction: ltr;
	border-radius: 8px;
	background: var(--secondary-color-dark);
}

.mr-slider__track {
	display: flex;
	transition: transform .35s ease;
}

/* Every slide is a 16:9 frame; pictures and videos fit inside it. */
.mr-slider__slide {
	flex: 0 0 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	aspect-ratio: 16 / 9;
	background: var(--secondary-color-dark);
}

.mr-slider__slide > a {
	display: flex;
	width: 100%;
	height: 100%;
}

.mr-modal__media {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: contain;
}

/* Arrows and counter in a bar under the media, so they never cover a video's
 * own controls. */
.mr-slider__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	background: var(--secondary-color-dark);
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.mr-slider__count {
	font-size: .9rem;
	color: #fff;
	direction: ltr;
}

body .mr-slider__bar .mr-slider__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0 0 2px;
	border-radius: 50%;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	background: #fff !important;
	color: var(--secondary-color-dark) !important;
	border: 1px solid var(--border-color-dark) !important;
	transition: background-color .15s ease;
}

body .mr-slider__bar .mr-slider__nav:hover,
body .mr-slider__bar .mr-slider__nav:focus-visible {
	background: var(--background-color) !important;
}

/* 4/7/8/9/5. Stepped modals: onboarding, intro/rules/download panels, survey */
.mr-step h4 {
	margin-top: 0;
}

.mr-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.mr-nav__count {
	font-size: .85rem;
	color: var(--secondary-color);
}

.mr-bars {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 1.5rem;
}

/* Doubled class: the theme's global button rule forces every <button> dark. */
.mr-bars .mr-bar {
	width: 10px;
	height: 10px;
	min-height: 0;
	border-radius: 50%;
	border: 1px solid var(--border-color-dark) !important;
	background: #fff !important;
	cursor: pointer;
	padding: 0;
	transition: background-color .15s ease, transform .15s ease;
}

.mr-bars .mr-bar--active {
	background: var(--secondary-color-dark) !important;
	border-color: var(--secondary-color-dark) !important;
	transform: scale(1.2);
}

/* Onboarding spotlight. The element is lifted above the page but below the
 * guide popup (Bootstrap: backdrop 1050, modal 1055); the huge shadow dims
 * everything around it, so the element itself stays fully clear. While a step
 * points at an element, Bootstrap's own backdrop is made see-through so the
 * page is not dimmed twice (and the element is not dimmed at all). */
body.mr-spotlight-active .modal-backdrop {
	opacity: 0 !important;
}

.mr-spotlight-target {
	z-index: 1051;
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55);
	border-radius: var(--border-radius);
	transition: box-shadow .2s ease;
}

.mr-spotlight-target--highlight {
	outline: 3px solid var(--primary-color);
	outline-offset: 3px;
}

/* "Point" steps: a blue arrow under the element, pointing up at it. */
.mr-spotlight-target--point {
	outline: 3px solid var(--primary-color);
	outline-offset: 3px;
}

.mr-spotlight-target--point::after {
	content: "";
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	border: 10px solid transparent;
	border-top: 0;
	border-bottom: 14px solid var(--primary-color);
}

/* Survey / send / page forms */
.mr-choices label {
	display: block;
	margin: 6px 0;
}

.mr-gform textarea,
.mr-gform select,
.mr-gform input[type=text] {
	margin-bottom: 8px;
}

.mr-thanks {
	text-align: center;
	padding: 20px 0;
}

.mr-pageform {
	max-width: 480px;
}

@media (max-width: 576px) {
	.mr-tips {
		max-width: calc(100vw - 32px);
		font-size: .8rem;
	}
}

/* Onboarding modal -- bottom center, as a compact sheet rather than the
 * default vertically/horizontally centered dialog every other stepped
 * modal uses. */
#musanedOnboardModal .modal-dialog {
	position: fixed;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	min-height: 0;
	max-width: 480px;
	width: calc(100% - 32px);
}

/* Site guide, info panels, survey and contact popups: same centred layout as
 * the verify and advertise popups (centred title, close button in the end
 * corner, centred text, tile-style choices, full-height fields). */
.mr-stepped-modal .modal-header,
#musanedSendModal .modal-header,
#musanedMessageModal .modal-header {
	position: relative;
	justify-content: center;
}

.mr-stepped-modal .modal-title,
#musanedSendModal .modal-title,
#musanedMessageModal .modal-title {
	text-align: center;
}

.mr-stepped-modal .modal-header .btn-close,
#musanedSendModal .modal-header .btn-close,
#musanedMessageModal .modal-header .btn-close {
	position: absolute;
	inset-inline-end: 1rem;
	top: 50%;
	transform: translateY(-50%);
	padding: .5rem !important;
}

.mr-stepped-modal .modal-body,
#musanedSendModal .modal-body,
#musanedMessageModal .modal-body {
	padding: 1.75rem 1.5rem;
	text-align: center;
}

.mr-step h4 {
	margin: 0 0 .75rem;
	font-size: 1.3rem;
	font-weight: 600;
}

.mr-step p {
	margin: 0 0 1rem;
	color: var(--secondary-color);
	line-height: 1.8;
}

.mr-step > :last-child {
	margin-bottom: 0;
}

/* Survey choices: tiles like the request forms. */
.mr-choices {
	display: grid;
	gap: 8px;
	margin-top: 1rem;
	text-align: start;
}

.mr-choices label {
	display: flex;
	align-items: center;
	gap: .65rem;
	min-height: 44px;
	margin: 0;
	padding: .55rem .85rem;
	background: #fff;
	border: 1px solid var(--border-color-dark);
	border-radius: var(--border-radius);
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

.mr-choices label:hover {
	background: var(--light-color);
}

.mr-choices label:has(input:checked) {
	border-color: var(--primary-color);
	background: rgba(89, 167, 196, .1);
}

.mr-choices input[type=radio] {
	flex: none;
	width: 1.1em;
	height: 1.1em;
	margin: 0;
	accent-color: var(--primary-color);
}

/* Survey and contact fields. */
.mr-gform .widefat {
	display: block;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: .55rem .85rem;
	background: #fff;
	border: 1px solid var(--border-color-dark);
	border-radius: var(--border-radius);
	font-family: "blfont";
	text-align: start;
}

.mr-gform .widefat:focus {
	border-color: var(--primary-color);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(89, 167, 196, .3);
}

.mr-gform textarea.widefat {
	min-height: 110px;
	resize: vertical;
}

#mr-send-form p {
	margin: 0 0 12px;
}

/* The phone field types left-to-right; keep its placeholder on the right in Arabic. */
body:not(.musaned-ltr) #mr-send-form input[dir="ltr"],
body:not(.musaned-ltr) .mr-pageform input[dir="ltr"] {
	text-align: right;
}

#mr-send-form .button {
	width: 100%;
	min-height: 46px;
	margin-top: .5rem;
}

/* Step navigation: previous is the quiet white button, next/submit stay ink. */
.mr-stepped-modal .mr-nav {
	margin-top: 1.5rem;
}

.mr-stepped-modal .modal-footer.mr-nav {
	margin-top: 0;
	padding: 0 1.5rem 1.5rem;
	border-top: 0;
}

.mr-nav .button {
	min-width: 96px;
	min-height: 44px;
	padding: .5rem 1.25rem;
	border-radius: var(--border-radius);
}

body .mr-nav .mr-nav__prev {
	background: #fff !important;
	color: var(--secondary-color-dark) !important;
	border: 1px solid var(--border-color-dark) !important;
}

.mr-nav .button:disabled {
	opacity: .4;
	cursor: default;
}

.mr-nav__submit[hidden],
.mr-nav__next[hidden] {
	display: none;
}

/* Validation: a field left empty (or a wrong email) gets a red border and one message above the button. */
.mr-gform .widefat.mr-invalid {
	border-color: #C0392B;
	background: #FDECEA;
}

.mr-gform .mr-form-error {
	margin: 0 0 12px;
	font-size: .9rem;
	color: #C0392B;
	text-align: start;
}

.mr-gform .mr-form-error:empty {
	display: none;
}

/* Survey: the "answer required" message sits under the question, centred like the step text. */
.mr-step .mr-form-error {
	margin: .75rem 0 0;
	text-align: center;
}

/* Homepage note form: a flat bordered card above the footer, with a title, a one-line hint,
   a roomy text box and a centred ink button. */
.musaned-note-section {
	max-width: 640px;
	margin: 2.5rem auto;
	padding: 1.75rem 1.5rem;
	background: #fff;
	border: 1px solid var(--border-color);
	border-radius: calc(var(--border-radius) * 2);
	text-align: center;
}

.musaned-note-section__title {
	margin: 0 0 1.25rem;
	font-size: 1.25rem;
	font-weight: 600;
}

.musaned-note-section .mr-pageform {
	max-width: none;
}

.musaned-note-section .mr-pageform p {
	margin: 0 0 1rem;
}

.musaned-note-section .mr-gform textarea.widefat {
	min-height: 130px;
	line-height: 1.7;
}

.musaned-note-section .mr-pageform .button {
	display: block;
	min-width: 180px;
	min-height: 46px;
	margin: 0 auto;
	border-radius: var(--border-radius);
}

/* After sending: a check in a ring, then the thank-you. */
.musaned-note-section .mr-thanks {
	padding: .5rem 0;
	font-weight: 600;
}

.musaned-note-section .mr-thanks::before {
	content: "\2713";
	display: block;
	width: 44px;
	height: 44px;
	margin: 0 auto .75rem;
	border: 1px solid var(--border-color-dark);
	border-radius: 50%;
	line-height: 42px;
	font-size: 1.25rem;
}

@media (max-width: 576px) {
	.musaned-note-section {
		margin: 2rem 0;
		padding: 1.25rem 1rem;
	}

	.musaned-note-section .mr-pageform .button {
		width: 100%;
	}
}

/* Message popup: the form fills the dialog and the button is full width like the Send popup. */
#musanedMessageModal .mr-pageform {
	max-width: none;
}

#musanedMessageModal .mr-pageform p {
	margin: 0 0 12px;
}

#musanedMessageModal .mr-pageform .button {
	width: 100%;
	min-height: 46px;
	margin-top: .5rem;
}

#musanedMessageModal .mr-thanks {
	padding: .5rem 0;
	font-weight: 600;
}