/*
 * Delivery Proof — lightbox overlay (shows the real uploaded delivery photo,
 * inside the reference's browser-chrome frame, on tile click)
 * Depends on: design-tokens.css
 * Page: body.log-delivery-proof-page
 */

.lb-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 28, 25, .6);
	backdrop-filter: blur(5px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 400;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s var(--ease);
}

.lb-overlay.open {
	opacity: 1;
	pointer-events: auto;
}

.lb-box {
	position: relative;
	background: var(--white);
	border-radius: var(--r-lg);
	max-width: 420px;
	width: 100%;
	box-shadow: var(--shadow-lg);
	transform: scale(.9) translateY(20px);
	transition: transform .35s var(--ease);
	/* Flex column so .lb-content (flex:1, below) always shrinks to whatever
	 * height is left after .lb-chrome + .lb-caption, instead of the image's
	 * old fixed 33em height overflowing max-height and forcing a scrollbar
	 * on short/mobile viewports. No screen should ever need to scroll this.
	 * height (not just max-height) is fixed at 80% of viewport so the modal
	 * is consistently large rather than shrinking to the image's natural
	 * size — 20px overlay padding on each side still fits within the
	 * remaining 20vh on any realistic screen height. */
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height: 80vh;
	max-height: 80vh;
}

.lb-overlay.open .lb-box {
	transform: scale(1) translateY(0);
}

.lb-close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: var(--ink-700);
	box-shadow: var(--shadow-sm);
	transition: all .25s var(--ease);
}

.lb-close:hover {
	background: var(--blush-100);
	color: var(--plum-700);
}

.lb-chrome {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 12px 16px;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
	flex-shrink: 0;
}

.lb-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--gray-400);
}

.lb-url {
	margin-left: 8px;
	font-size: 11px;
	line-height: 1.2;
	color: var(--gray-600);
	font-weight: 600;
}

.lb-content {
	padding: 0;
	/* Shrinks to whatever space remains under .lb-chrome/.lb-caption inside
	 * the fixed-height .lb-box; min-height:0 lets it go below the image's
	 * intrinsic size instead of forcing the flex column to overflow.
	 * display:flex (not block) is what makes max-height:100% on the image
	 * below resolve reliably as a flex item against this flex container —
	 * the same percentage on a plain block child of a flex item did not
	 * reliably resolve against it in testing. */
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lb-content img {
	width: 100%;
	height: 100%;
	/* Fills the content area edge-to-edge (no letterbox blank space),
	 * cropping overflow instead of shrinking to fit — replaces the old
	 * fixed 33em height that overflowed on short screens. */
	object-fit: cover;
	display: block;
}

.lb-caption {
	padding: 14px 18px 18px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	flex-shrink: 0;
}

.lb-verified-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--blush-100);
	color: var(--plum-700);
	font-size: 10px;
	font-weight: 800;
	line-height: 1.2;
	padding: 5px 11px;
	border-radius: var(--r-pill);
}

.lb-verified-tag .icon {
	width: 10px;
	height: 10px;
}

.lb-med-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	padding: 7px 14px;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--ink-900);
}