/**
 * Modal & bottom sheet — built on the native <dialog> element.
 *
 * Markup pattern:
 *
 *   <dialog class="nbf-modal" aria-labelledby="modal-title">
 *     <div class="nbf-modal__header">
 *       <h2 id="modal-title" class="nbf-modal__title">…</h2>
 *       <button class="nbf-icon-btn" data-nbf-modal-close aria-label="بستن">✕</button>
 *     </div>
 *     <div class="nbf-modal__body">…</div>
 *     <div class="nbf-modal__footer">…</div>
 *   </dialog>
 *
 * Add .nbf-modal--sheet for the mobile bottom-sheet presentation
 * (used by the search overlay and pickers on small screens).
 * Opening/closing is done by the consuming component's JS via
 * showModal()/close(); <dialog> provides focus trapping and Esc.
 */

.nbf-modal {
	inline-size: min(34rem, calc(100vw - 2 * var(--nbf-space-4)));
	max-block-size: min(85vh, 46rem);
	padding: 0;
	border: 0;
	border-radius: var(--nbf-radius-xl);
	background: var(--nbf-color-surface);
	color: var(--nbf-color-text);
	box-shadow: var(--nbf-shadow-lg);
	overflow: hidden;
	display: none;
	flex-direction: column;
}

.nbf-modal[open] {
	display: flex;
}

.nbf-modal::backdrop {
	background: var(--nbf-color-backdrop);
}

.nbf-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nbf-space-3);
	padding: var(--nbf-space-4) var(--nbf-space-5);
	border-block-end: 1px solid var(--nbf-color-border);
	flex-shrink: 0;
}

.nbf-modal__title {
	margin: 0;
	font-size: var(--nbf-fs-lg);
	font-weight: var(--nbf-fw-black);
}

.nbf-modal__body {
	padding: var(--nbf-space-5);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.nbf-modal__footer {
	display: flex;
	gap: var(--nbf-space-3);
	padding: var(--nbf-space-4) var(--nbf-space-5);
	border-block-start: 1px solid var(--nbf-color-border);
	flex-shrink: 0;
}

/* Entry animation */
@media (prefers-reduced-motion: no-preference) {
	.nbf-modal[open] {
		animation: nbf-modal-in var(--nbf-duration-slow) var(--nbf-ease);
	}
}

@keyframes nbf-modal-in {
	from {
		opacity: 0;
		transform: translateY(0.75rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* --- Bottom sheet (mobile) --- */
@media (max-width: 767px) {
	.nbf-modal--sheet {
		inline-size: 100vw;
		max-inline-size: 100vw;
		max-block-size: calc(100dvh - 2.5rem);
		margin: 0;
		margin-block-start: auto;
		inset-block-end: 0;
		border-radius: var(--nbf-radius-xl) var(--nbf-radius-xl) 0 0;
		padding-block-end: env(safe-area-inset-bottom, 0);
	}

	.nbf-modal--sheet::before {
		content: "";
		display: block;
		inline-size: 2.5rem;
		block-size: 0.25rem;
		margin-block-start: var(--nbf-space-2);
		margin-inline: auto;
		border-radius: var(--nbf-radius-pill);
		background: var(--nbf-color-border-strong);
		flex-shrink: 0;
	}

	@media (prefers-reduced-motion: no-preference) {
		.nbf-modal--sheet[open] {
			animation-name: nbf-sheet-in;
		}
	}
}

@keyframes nbf-sheet-in {
	from {
		transform: translateY(100%);
	}

	to {
		transform: none;
	}
}

/* Full-screen variant (mobile search overlay shell) */
@media (max-width: 767px) {
	.nbf-modal--fullscreen {
		inline-size: 100vw;
		max-inline-size: 100vw;
		block-size: 100dvh;
		max-block-size: 100dvh;
		margin: 0;
		border-radius: 0;
	}
}

/* ------------------------------------------------------------------
 * Media lightbox (gallery popup)
 *
 * Dark backdrop, project radii and shadows, arrows that stay reachable at
 * 360px. Built by lightbox.js on first open.
 * ---------------------------------------------------------------- */
.nbf-lightbox {
	inline-size: 100vw;
	max-inline-size: 100vw;
	block-size: 100dvh;
	max-block-size: 100dvh;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: hidden;
}

.nbf-lightbox::backdrop {
	background: rgb(10 26 43 / 0.88);
}

.nbf-lightbox__inner {
	position: relative;
	display: grid;
	grid-template-rows: 1fr auto;
	align-items: center;
	justify-items: center;
	gap: var(--nbf-space-3);
	inline-size: 100%;
	block-size: 100%;
	padding: var(--nbf-space-12) var(--nbf-space-4) var(--nbf-space-6);
}

.nbf-lightbox__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	min-block-size: 0;
	max-block-size: 100%;
}

.nbf-lightbox__media {
	max-inline-size: min(100%, 68rem);
	max-block-size: 100%;
	inline-size: auto;
	block-size: auto;
	border-radius: var(--nbf-radius-lg);
	box-shadow: var(--nbf-shadow-lg);
	background: #000;
}

.nbf-lightbox__caption {
	margin: 0;
	color: rgb(255 255 255 / 0.86);
	font-size: var(--nbf-fs-sm);
	text-align: center;
}

.nbf-lightbox__close,
.nbf-lightbox__nav {
	position: absolute;
	z-index: 2;
	background: rgb(255 255 255 / 0.92);
	color: var(--nbf-color-text);
	box-shadow: var(--nbf-shadow-md);
}

.nbf-lightbox__close {
	inset-block-start: var(--nbf-space-4);
	inset-inline-end: var(--nbf-space-4);
}

.nbf-lightbox__nav {
	inset-block-start: 50%;
	transform: translateY(-50%);
}

.nbf-lightbox__nav--prev {
	inset-inline-start: var(--nbf-space-3);
}

.nbf-lightbox__nav--next {
	inset-inline-end: var(--nbf-space-3);
}

@media (max-width: 767px) {
	.nbf-lightbox__inner {
		padding-inline: var(--nbf-space-2);
	}

	/* Keep the arrows clear of the media at phone widths. */
	.nbf-lightbox__nav {
		inset-block-start: auto;
		inset-block-end: var(--nbf-space-12);
		transform: none;
	}
}

/* Position counter ("۱ / ۲۰") in the popup's top corner. */
.nbf-lightbox__counter {
	position: absolute;
	inset-block-start: var(--nbf-space-4);
	inset-inline-start: var(--nbf-space-4);
	z-index: 2;
	padding: 0.25rem var(--nbf-space-3);
	border-radius: var(--nbf-radius-full);
	background: rgb(255 255 255 / 0.16);
	color: #fff;
	font-size: var(--nbf-fs-sm);
	font-variant-numeric: tabular-nums;
}

.nbf-lightbox__counter:empty {
	display: none;
}