/* Lightbox styles (module) */
.dm-lb{position:fixed;inset:0;display:none;z-index:10000;font-family:inherit}
.dm-lb.is-open{display:block}
.dm-lb__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px)}
.dm-lb__dialog{position:relative;inset:auto;max-width:1100px;margin:4vh auto;display:flex;align-items:stretch;border-radius:12px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.45);background:var(--wv-bg);max-height:92vh}
.dm-lb__close {
	position: absolute;
	inset-inline-end: 8px;
	top: 8px;
	z-index: 4;
	background: rgba(255,255,255,0.6);
	border: 0;
	font-size: 28px;
	line-height: 1;
	color: var(--wv-text);
	cursor: pointer;
	width: 32px;
	height: 32px;
	border-radius: 16px;
	transition: background .2s ease;
}
.dm-lb__close:hover {
	background: rgba(0,0,0,.15);
}
.dm-lb__close{
    position:absolute;inset-inline-end:8px;top:8px;z-index:4;background:rgba(255,255,255,0.6);border:0;padding:6px;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;color:var(--wv-text);cursor:pointer;transition:background .16s ease, transform .12s ease;
}
.dm-lb__close svg{display:block;width:20px;height:20px}
.dm-lb__close:hover{background:rgba(0,0,0,0.08);transform:translateY(-1px)}
.dm-lb__content {
	display: flex;
	flex-direction: row;
	gap: 20px;
	width: 100%;
	max-height: 100%;
}
.dm-lb__media{flex:1 1 55%;min-width:220px;background:var(--wv-soft);display:flex;align-items:center;justify-content:center}
.dm-lb__media-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}
.dm-lb__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	color: rgb(245, 245, 245);
}

/* Spinner when loading the large image */
.dm-lb__spinner{
	width:48px;height:48px;border-radius:50%;border:4px solid rgba(255,255,255,0.18);border-top-color:var(--accent);animation:dm-spin 1s linear infinite;position:absolute;z-index:3}

@keyframes dm-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* Hide spinner when lightbox is loaded */
.dm-lb.is-loaded .dm-lb__spinner{display:none}

/* meta column is relative so we can anchor flags and footer to its bottom */
.dm-lb__meta{flex:1 1 45%;padding:20px;display:flex;flex-direction:column;gap:12px;overflow:hidden;position:relative}
.dm-lb__header{display:flex;justify-content:space-between;align-items:start;gap:12px;padding-inline-end:56px}
.dm-lb__title{margin:0;font-size:1.25rem}
.dm-lb__price{font-weight:700;font-size: 20px;color:var(--accent)}

/* body takes remaining space and reserves room at bottom for flags/footer */
.dm-lb__body{overflow:auto;padding-inline-end:6px;flex: 1;}
.dm-lb__desc{margin:0 0 12px 0;color:var(--wv-text-muted);line-height:1.5}

/* flags anchored bottom-left inside the meta column — rely on global wv-flags and wv-flag-item styles */
:root {
    --dm-flag-padding: 6px 12px;
    --dm-flag-font-size: 0.95rem;
    --dm-flag-icon-size: 18px;
}

.dm-lb .wv-flags[data-flags-mode="icon-text"] .dm-lb__flags{position:absolute;inset-inline-start:20px;bottom:20px;display:block;max-width:calc(100% - 130px)}

/* The actual flag items use the global classes: .wv-flags .wv-flags-row .wv-flag-item */
/* Provide lightbox-specific adjustments but avoid overriding the global internals */
.dm-lb .wv-flags[data-flags-mode="icon-text"] .wv-flags-row{display:flex;flex-wrap:wrap;gap:8px}
.dm-lb .wv-flags[data-flags-mode="icon-text"] .wv-flag-item{padding:var(--dm-flag-padding)}
.dm-lb .wv-flags[data-flags-mode="icon-text"] .wv-flag-label{font-size:var(--dm-flag-font-size)}
.dm-lb .wv-flags[data-flags-mode="icon-text"] .wv-flag-icon{width:var(--dm-flag-icon-size);height:var(--dm-flag-icon-size)}

/* footer anchored bottom-right inside meta column */
.dm-lb__footer {
	inset-inline-end: 20px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.dm-lb__add {
	background: var(--accent);
	color: var(--button-text-accent);
	border: 0;
	padding: 10px 16px;
	border-radius: 10px;
	cursor: pointer;
    transition: background .2s ease;
}
.dm-lb__add:hover {
	background: var(--accent-hover);
}
.dm-lb .dm-lb__add {
	margin-inline-start:auto;
}
/* Responsive: stack and make flags/footer flow naturally */
@media (max-width:880px){
    .dm-lb__dialog{width:100%;margin:0;height:100vh;border-radius:0}
    .dm-lb__content{flex-direction:column}
    .dm-lb__media{flex:0 0 auto;block-size:44vh}
    .dm-lb__meta{flex:1;overflow:auto;padding:16px}

    /* mobile: let flags and footer be part of the flow at the bottom */
    .dm-lb__body{padding-bottom:12px}
    .dm-lb__header {
        padding-inline-end: 0;
    }
    .dm-lb__close:hover {
        background: rgba(255,255,255,0.8);
    }
}

/* small accessibility tweak: ensure close is always reachable */
.dm-lb__close:focus{outline:2px solid Highlight}

/* avoid close button overlapping price on wide titles — reserve space */
.dm-lb__header .dm-lb__price{padding-inline-start:auto}

/* make sure long flag lists wrap above footer if needed */
.dm-lb__flags .wv-flag-item{white-space:nowrap}