.miegn-notice--inline {
	display: block;
	margin: 1.5em 0;
}

.miegn-notice--inline img,
.miegn-notice__dialog-inner img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Popup trigger + dialog */

.miegn-notice--popup {
	display: inline-block;
}

/*
 * Deliberately no color/text-decoration here: the trigger is a real <a>,
 * so it inherits this site's own link styling (colour, hover, focus)
 * instead of anything this plugin would otherwise invent.
 */
.miegn-notice__trigger {
	cursor: pointer;
}

/*
 * The dialog is a fixed, full-viewport backdrop with the notice centered
 * inside it — a real modal, not a small box anchored under the trigger —
 * so it always fits the screen (scrolling internally if the notice is
 * taller than the viewport) instead of overlapping the page around it.
 */
.miegn-notice__dialog {
	position: fixed;
	inset: 0;
	/* The maximum valid z-index value — guarantees this sits above every
	 * other themed/plugin element on the page (sticky headers, cookie
	 * banners, chat widgets, cart drawers) regardless of what z-index
	 * they use. */
	z-index: 2147483647;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vh 1em;
	background: rgba( 0, 0, 0, 0.5 );
}

.miegn-notice__dialog[hidden] {
	display: none;
}

.miegn-notice__dialog-inner {
	position: relative;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 8px 30px rgba( 0, 0, 0, 0.25 );
	/* Let the card size itself to the notice image's own width (an A4 page,
	 * ~595px) instead of forcing a guessed fixed width: a fixed width wider
	 * than the image just left blank space beside it. min-width is a safety
	 * net only, in case a future notice asset is unusually narrow.
	 * max-width still keeps it within the viewport on small screens. */
	width: auto;
	min-width: 240px;
	max-width: 94vw;
	/* This is a ceiling on the whole card, not a target height — the image
	 * itself is what's constrained to fit under it (see the img rule below).
	 * Kept here too as a hard backstop. */
	max-height: 92vh;
	/* Only clips the corners of the scrolling area below to the card's own
	 * rounded shape — the close button lives outside that scrolling area
	 * (see .miegn-notice__dialog-scroll) so it's never affected by this. */
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.miegn-notice__dialog-scroll {
	padding: 2.5em 1em 1em;
	/* Kept as a backstop, not the primary fit mechanism: the image below is
	 * scaled to already fit, so this should rarely need to actually scroll. */
	overflow: auto;
}

/*
 * The notice image is scaled down — proportionally, never cropped or
 * distorted — to fit inside the available height, not just the width.
 * Without this, a tall viewport constraint on the card (max-height: 92vh
 * above) clipped the image and forced an internal scrollbar even though
 * the whole point of a modal is to show the notice at a glance. The
 * subtracted amount is the dialog-scroll padding this image sits inside
 * (2.5em top + 1em bottom), so the image plus its padding lands exactly
 * at the card's own max-height, with no scrolling needed in the common
 * case (it only kicks in as a backstop on extremely short viewports).
 */
.miegn-notice__dialog-inner img {
	max-height: calc( 92vh - 3.5em );
}

.miegn-notice__close {
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	width: 28px;
	height: 28px;
	line-height: 26px;
	text-align: center;
	background: #fff;
	border: 1px solid #ccd0d4;
	border-radius: 50%;
	font-size: 18px;
	cursor: pointer;
	padding: 0;
	z-index: 1;
}

.miegn-missing-asset {
	margin: 1em 0;
	padding: 0.75em 1em;
	background: #fff3cd;
	border: 1px solid #d8b100;
	color: #664d03;
	font-size: 0.9em;
}