/* =====================================================================
 * START: assets/css/nahse-gallery-lightbox.css  (NAHSE DFW Gallery v1.0.1)
 * ---------------------------------------------------------------------
 * CHANGELOG
 *  1.0.1  Closed viewer is forced to display:none so a theme or plugin
 *         dialog rule can never leave an invisible full-screen layer.
 * ---------------------------------------------------------------------
 * TO-DO
 *  1. Upload to /wp-content/themes/Avada-Child-Theme/assets/css/
 *  2. Shared by the single album page and the gallery page.
 * ---------------------------------------------------------------------
 * Every selector is scoped under .nahse-glb (the viewer dialog).
 * ===================================================================== */

html.nahse-glb-lock { overflow: hidden; }

.nahse-glb {
	position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
	margin: 0; padding: 0; border: 0; background: transparent; color: #fff; overflow: hidden;
	font-family: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.nahse-glb::backdrop { background: rgba(7, 22, 63, .94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.nahse-glb:not([open]) { display: none !important; pointer-events: none; }
.nahse-glb[open] { display: block; animation: nahse-glb-in .25s ease both; }
.nahse-glb *, .nahse-glb *::before, .nahse-glb *::after { box-sizing: border-box; }
.nahse-glb [hidden] { display: none !important; }

.nahse-glb__stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 72px 96px 40px; }
.nahse-glb__figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.nahse-glb__img { display: block; max-width: 100%; max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px); width: auto; height: auto; object-fit: contain; border-radius: 14px; background: #0a1433; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.nahse-glb__cap { display: flex; gap: 14px; align-items: baseline; justify-content: center; flex-wrap: wrap; text-align: center; font-size: 14px; color: #c7d3ff; }
.nahse-glb__title { font-weight: 600; color: #fff; }
.nahse-glb__count { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; }

.nahse-glb .nahse-glb__btn {
	-webkit-appearance: none; appearance: none; position: absolute; margin: 0; padding: 0; width: 52px; height: 52px; border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .3); background: rgba(10, 20, 51, .55); color: #fff; font: 400 30px/1 'Instrument Sans', sans-serif;
	display: flex; align-items: center; justify-content: center; cursor: pointer; text-transform: none; letter-spacing: normal; box-shadow: none; transition: background .2s, border-color .2s;
}
.nahse-glb .nahse-glb__btn:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .6); color: #fff; }
.nahse-glb .nahse-glb__btn:focus-visible { outline: 3px solid #f2c14e; outline-offset: 3px; }
.nahse-glb__close { top: 16px; right: 16px; }
.nahse-glb__nav { top: 50%; transform: translateY(-50%); }
.nahse-glb__prev { left: 20px; }
.nahse-glb__next { right: 20px; }

@keyframes nahse-glb-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 767px) {
	.nahse-glb__stage { padding: 64px 12px 96px; }
	.nahse-glb__img { max-height: calc(100vh - 200px); max-height: calc(100dvh - 200px); border-radius: 10px; }
	.nahse-glb .nahse-glb__btn { width: 46px; height: 46px; font-size: 26px; }
	.nahse-glb__close { top: 10px; right: 10px; }
	/* Thumb-reachable controls at the bottom on phones */
	.nahse-glb__nav { top: auto; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: none; }
	.nahse-glb__prev { left: calc(50% - 58px); }
	.nahse-glb__next { right: calc(50% - 58px); }
}

@media (prefers-reduced-motion: reduce) {
	.nahse-glb[open] { animation: none; }
	.nahse-glb .nahse-glb__btn { transition: none; }
}

/* =====================================================================
 * END: assets/css/nahse-gallery-lightbox.css
 * ===================================================================== */
