/*
 * EU Guarantee Notice and Durability Label.
 *
 * Reproduces Annexes I and II of Commission Implementing Regulation (EU)
 * 2025/1960 for an online interface.
 *
 * Reference colours, fixed by Annex I note 2 and Annex II note 2:
 *   Blue   Pantone Reflex Blue C   #003399
 *   Yellow Pantone Yellow C        #FFED00
 *   Black  Pantone Black 6 C       #000000
 *   White  Pantone 000C            #FFFFFF
 *
 * Annex II note 5 and recital 14: for a contract concluded through an online
 * interface the notice and the label SHALL be in colour. There is deliberately
 * no monochrome variant here, because black and white is only permitted
 * offline.
 *
 * Annex II note 6 specifies the font as Inter. It is requested first in every
 * stack below. The plugin does not bundle it and does not fetch it from a font
 * CDN: an outbound request to Google Fonts would leak a shopper's IP address
 * to a third party, which is exactly what the rest of this plugin refuses to
 * do. Sites that already load Inter get it; the rest fall back to the closest
 * available grotesque.
 *
 * The annex artwork is an A4 print document. This layout reflows to one column
 * on narrow screens, because an A4 raster on a phone is unreadable and an
 * unreadable notice satisfies nobody.
 */

.sbgn,
.sbgn-label {
	--sbgn-blue: #003399;
	--sbgn-yellow: #FFED00;
	--sbgn-black: #000000;
	--sbgn-white: #FFFFFF;
	--sbgn-rule: #d4d4d4;
	--sbgn-panel: #f2f2f2;

	font-family: Inter, "Inter var", -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.45;
	color: var(--sbgn-black);
	box-sizing: border-box;
	max-width: 46rem;
}

.sbgn *,
.sbgn-label * {
	box-sizing: inherit;
}

/* ---------------------------------------------------------------- Annex I */

.sbgn {
	border: 1px solid var(--sbgn-rule);
	background: var(--sbgn-white);
	margin: 1.5rem 0;
}

.sbgn__head {
	display: flex;
	align-items: center;
	gap: 1rem;
	background: var(--sbgn-blue);
	padding: 0.75rem 1.25rem;
}

.sbgn__emblem {
	flex: 0 0 auto;
	width: 52px;
	height: 71px;
	background: url( "img/eu-emblem.svg" ) center/contain no-repeat;
}

.sbgn__title {
	margin: 0;
	color: var(--sbgn-white);
	font-size: clamp(1.5rem, 5vw, 2.4rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

/*
 * auto-fit + minmax, NOT a fixed "1.7fr 1fr".
 *
 * This block usually sits inside the WooCommerce product summary, which is a
 * narrow column, not the full page width. A viewport media query cannot see
 * that: the window can be 1100px while the container is 480px. A fixed two
 * column split in that space crushed the text column down to one character per
 * line. auto-fit collapses to a single column based on the space actually
 * available, which is the thing that matters.
 *
 * min-width: 0 on the children matters just as much. Grid items default to
 * min-width: auto, so a wide child (the QR) can refuse to shrink and push its
 * sibling to nothing.
 */
.sbgn__body {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
	gap: 1.25rem;
	padding: 1.25rem;
}

.sbgn__main,
.sbgn__side {
	min-width: 0;
}

.sbgn__lead {
	border: 1px solid var(--sbgn-blue);
	color: var(--sbgn-blue);
	font-size: 1.15rem;
	line-height: 1.3;
	margin: 0 0 1rem;
	padding: 0.75rem 0.9rem;
}

.sbgn__lead strong {
	font-weight: 700;
}

.sbgn__main p {
	margin: 0 0 0.75rem;
}

/*
 * The annex draws each of these bullets as a tick-mark, not a disc. Using the
 * real symbol rather than a list marker keeps the meaning when the stylesheet
 * is overridden by a theme.
 */
.sbgn__ticks {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.sbgn__ticks li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: 0.4rem;
}

.sbgn__ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 1.25rem;
	height: 0.95rem;
	background: url( "img/garan-tick.svg" ) left center/contain no-repeat;
}

.sbgn__side {
	background: var(--sbgn-panel);
	padding: 1rem;
	font-size: 0.95rem;
}

.sbgn__side p {
	margin: 0 0 0.75rem;
}

/*
 * A fixed width, never max-content. The QR is a replaced element, so
 * max-content asks the browser for its intrinsic size, and any SVG shipped
 * without width and height attributes reports the 300px default. That is what
 * blew the column apart. The assets now carry explicit dimensions as well, so
 * this is belt and braces.
 */
.sbgn__side .sbgn-qr {
	display: block;
	background: var(--sbgn-white);
	padding: 0.5rem;
	width: 8.5rem;
	max-width: 100%;
}

.sbgn__qrcaption {
	font-size: 0.8rem;
	word-break: break-all;
}

.sbgn__todo {
	border-top: 2px solid var(--sbgn-black);
	border-bottom: 2px solid var(--sbgn-black);
	padding: 1rem 1.25rem;
}

.sbgn__todo h3 {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 800;
}

.sbgn__todosub {
	margin: 0 0 0.6rem;
	font-weight: 600;
}

.sbgn__steps {
	margin: 0;
	padding-left: 1.4rem;
}

.sbgn__steps li {
	margin-bottom: 0.3rem;
}

.sbgn__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.25rem;
	align-items: flex-start;
	padding: 1.25rem;
}

.sbgn__foot p {
	flex: 1 1 15rem;
	min-width: 0;
}

.sbgn__foot p {
	margin: 0;
}

.sbgn__garan {
	background: var(--sbgn-panel);
	padding: 0.4rem 0.7rem;
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

/* --------------------------------------------------------------- Annex II */

.sbgn-label {
	border: 2px solid var(--sbgn-black);
	background: var(--sbgn-white);
	margin: 1.5rem 0;
	padding: 0;
	max-width: 26rem;
}

.sbgn-label__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	border-bottom: 2px solid var(--sbgn-black);
	padding: 0.6rem 0.9rem 0.5rem;
}

.sbgn-label__title {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: clamp(2rem, 9vw, 3.1rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

.sbgn-label__tick {
	display: inline-block;
	width: 0.62em;
	height: 0.47em;
	background: url( "img/garan-tick.svg" ) center/contain no-repeat;
}

.sbgn-label__emblem {
	flex: 0 0 auto;
	width: 44px;
	height: 60px;
	margin-top: -0.6rem;
	background: url( "img/eu-emblem.svg" ) center/contain no-repeat;
}

.sbgn-label__ids {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.5rem 0.9rem 0;
	font-size: 0.95rem;
}

.sbgn-label__main {
	display: grid;
	grid-template-columns: auto auto 1fr;
	align-items: end;
	gap: 0.5rem;
	padding: 0.25rem 0.9rem 0.9rem;
}

/*
 * Annex II note 3 sets this at 80pt against a 95mm label, roughly 30% of the
 * label width. clamp() holds that proportion instead of a fixed size, so the
 * number stays dominant on a phone as the annex intends.
 */
.sbgn-label__years {
	font-size: clamp(3.5rem, 20vw, 6rem);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.04em;
}

.sbgn-label__cal {
	width: 3rem;
	height: 3rem;
	background: url( "img/calendar.svg" ) center/contain no-repeat;
	/* The "365" is part of the official symbol artwork, so the text node is
	   hidden rather than removed: it stays available to assistive tech. */
	text-indent: -9999px;
	overflow: hidden;
	margin-bottom: 0.5rem;
}

.sbgn-label__main .sbgn-qr {
	justify-self: end;
	display: block;
	width: 6.5rem;
	max-width: 100%;
}

.sbgn-label__langs {
	border-top: 2px solid var(--sbgn-black);
	padding: 0.6rem 0.9rem;
	font-size: 0.72rem;
	line-height: 1.5;
	margin: 0;
}

.sbgn-label__lang:not(:last-child)::after {
	content: " | ";
	color: var(--sbgn-rule);
}

.sbgn-qr svg {
	display: block;
	width: 100%;
	height: auto;
	image-rendering: pixelated;
}

/* ------------------------------------------------------------- reflow */

/*
 * The notice reflows on its own now, via auto-fit and flex-wrap, so it needs
 * no rule here. Only the label does, because its three columns are sized by
 * content rather than by fraction.
 */
@media ( max-width: 640px ) {
	.sbgn-label__main {
		grid-template-columns: auto auto;
	}

	.sbgn-label__main .sbgn-qr {
		grid-column: 1 / -1;
		justify-self: start;
	}
}

/*
 * Print: the annex allows black and white only for contracts other than those
 * concluded through an online interface. A printed page is exactly that case,
 * so dropping the blue here is permitted rather than a shortcut.
 */
@media print {
	.sbgn__head {
		background: var(--sbgn-white);
		border-bottom: 2px solid var(--sbgn-black);
	}

	.sbgn__title {
		color: var(--sbgn-black);
	}
}

/* Settings screen. Moved out of an inline <style> in class-sbgn-settings.php
   so it is enqueued properly, per WordPress.org review 28 Aug 2026. */
.sbgn-admin{
			--ink:#16202A; --ink2:#33454F; --muted:#5C6E79; --line:#E2E8ED; --line2:#EDF1F4;
			--card:#fff; --eu:#003399; --eu-soft:#EAEFF9; --gold:#B8901B;
			max-width:1180px; margin:0; padding:0 20px 40px 0; color:var(--ink);
			font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased;
		}
		.sbgn-admin *{box-sizing:border-box}
		.sbgn-admin h1,.sbgn-admin h2,.sbgn-admin h3,.sbgn-admin p{margin:0;padding:0}

		.sbgn-mast{display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px 24px;padding:26px 0 22px}
		.sbgn-mast__id{flex:1 1 380px;min-width:0}
		.sbgn-mast h1{font-size:23px;line-height:1.25;font-weight:640;letter-spacing:-.017em}
		.sbgn-admin .sbgn-mast__line{margin-top:7px;max-width:62ch;color:var(--muted)}
		.sbgn-state{display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;padding:7px 13px 7px 11px;
			border:1px solid #BFCDE8;border-radius:999px;background:var(--eu-soft);
			font-size:12.5px;font-weight:560;color:#12295E;white-space:nowrap}
		.sbgn-state__dot{width:7px;height:7px;border-radius:50%;background:var(--eu);flex:0 0 auto}

		.sbgn-panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px 24px}
		.sbgn-h2{font-size:12px;font-weight:640;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

		.sbgn-admin .sbgn-count{margin-top:14px;font-size:38px;font-weight:650;letter-spacing:-.025em;line-height:1;
			font-variant-numeric:tabular-nums}
		.sbgn-admin .sbgn-count__sub{margin-top:8px;font-size:15px;color:var(--ink2);max-width:52ch}
		/* Goods against exclusions. Hatched means correctly out of scope, not missing. */
		.sbgn-bar{display:flex;height:16px;margin-top:18px;border-radius:6px;overflow:hidden;
			border:1px solid var(--line);background:#F7F9FA}
		.sbgn-bar__seg{display:block;height:100%}
		.sbgn-bar__seg--goods{background:var(--eu);border-right:2px solid var(--ink)}
		.sbgn-bar__seg--out{background:repeating-linear-gradient(135deg,#DDE3EC 0 5px,#F1F4F8 5px 11px)}
		.sbgn-keys{display:flex;flex-wrap:wrap;gap:22px;margin-top:13px}
		.sbgn-key{display:inline-flex;align-items:center;gap:8px;font-size:12.8px;color:var(--muted)}
		.sbgn-key::before{content:"";width:9px;height:9px;border-radius:2px;flex:0 0 auto}
		.sbgn-key--goods::before{background:var(--eu)}
		.sbgn-key--out::before{background:repeating-linear-gradient(135deg,#CBD4E2 0 3px,#EDF1F6 3px 6px);border:1px solid #D5DCE6}
		.sbgn-admin .sbgn-note{margin-top:20px;color:var(--ink2);max-width:70ch}
		.sbgn-admin .sbgn-note + .sbgn-note{margin-top:9px;padding-top:0;border-top:0}
		.sbgn-admin .sbgn-when{margin-top:18px;color:var(--muted);max-width:70ch}
		.sbgn-when strong{color:var(--ink);font-weight:640}

		.sbgn-form{margin-top:18px}
		.sbgn-preview{margin-top:18px}
		.sbgn-preview__head{display:flex;align-items:center;gap:10px}
		.sbgn-tag{font-size:10.5px;font-weight:640;letter-spacing:.05em;text-transform:uppercase;
			padding:3px 8px;border-radius:5px;background:var(--eu-soft);color:#12295E}
		.sbgn-admin .sbgn-preview__meta{margin-top:6px;color:var(--muted);font-size:13px;max-width:70ch}
		/* A neutral ground, so the notice is judged on its own and not on this screen. */
		.sbgn-preview__stage{margin-top:16px;padding:22px;border:1px solid var(--line);border-radius:10px;
			background:#F7F9FA}
		.sbgn-pro{margin-top:18px}
		.sbgn-admin .sbgn-pro__lead{margin-top:11px;font-size:14.5px;line-height:1.5;color:var(--ink)}
		.sbgn-admin .sbgn-pro__body{margin-top:8px;color:var(--ink2);max-width:74ch}
		.sbgn-pro__cols{display:flex;gap:34px;align-items:flex-start;margin-top:14px;flex-wrap:wrap}
		.sbgn-pro__cols > div:first-child{flex:1 1 340px;min-width:0}
		.sbgn-pro__buy{flex:0 0 auto;padding-left:26px;border-left:1px solid var(--line2)}
		@media (max-width:760px){.sbgn-pro__buy{padding-left:0;border-left:0}}
		.sbgn-pro__list{margin:0;display:flex;flex-direction:column;gap:8px;list-style:none;padding:0}
		.sbgn-pro__list li{position:relative;padding-left:19px;color:var(--ink2);font-size:13.4px;line-height:1.45}
		.sbgn-pro__list li::before{content:"";position:absolute;left:1px;top:6px;width:8px;height:8px;
			border-radius:2px;background:var(--eu)}
		.sbgn-admin .sbgn-pro__price{margin-top:2px;font-size:13.5px;color:var(--muted)}
		.sbgn-admin .sbgn-pro__price strong{font-size:22px;color:var(--ink);font-weight:650;letter-spacing:-.02em}
		.sbgn-admin .sbgn-buy{display:inline-block;margin-top:11px;padding:10px 19px;border-radius:8px;
			background:var(--eu);color:#fff;text-decoration:none;font-weight:600;font-size:14px}
		.sbgn-admin .sbgn-buy:hover,.sbgn-admin .sbgn-buy:focus{background:#00256E;color:#fff}
		.sbgn-pro__have{margin-top:17px;padding-top:14px;border-top:1px solid var(--line2)}
		.sbgn-pro__have summary{cursor:pointer;color:var(--muted);font-size:13px}
		.sbgn-pro__form{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap;align-items:center}
		.sbgn-admin .sbgn-key{flex:1 1 190px;min-width:0;height:34px;padding:0 10px;border:1px solid #CBD5DB;
			border-radius:7px;font-size:13.5px;box-shadow:none}
		.sbgn-admin .sbgn-pro__err{margin-top:9px;color:#B3261E;font-size:12.8px}
		.sbgn-admin .sbgn-linkbtn{background:none;border:0;padding:0;margin:14px 0 0;color:var(--muted);
			text-decoration:underline;cursor:pointer;font-size:12.8px}
		.sbgn-log{margin:14px 0 0;padding:0;list-style:none}
		.sbgn-log__row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
			padding:9px 0;border-bottom:1px solid var(--line2);font-size:13.4px}
		.sbgn-log__row:last-child{border-bottom:0}
		.sbgn-log__when{color:var(--muted);font-variant-numeric:tabular-nums}
		.sbgn-log__what{color:var(--ink2)}
		.sbgn-log__row--missing .sbgn-log__what{color:#B3261E;font-weight:620}
		.sbgn-log__row--present .sbgn-log__what{color:#0B6B45}
		.sbgn-panel--form{padding:0 24px}
		.sbgn-sec{display:grid;grid-template-columns:236px minmax(0,1fr);gap:34px;padding:26px 0;border-top:1px solid var(--line2)}
		.sbgn-sec:first-child{border-top:0}
		@media (max-width:900px){.sbgn-sec{grid-template-columns:1fr;gap:14px}}
		.sbgn-sec__head h3{margin:0;font-size:14.5px;font-weight:620;line-height:1.35}
		.sbgn-admin .sbgn-sec__head p{margin-top:5px;font-size:12.8px;color:var(--muted)}
		.sbgn-sec__body{min-width:0}
		.sbgn-admin .sbgn-desc{margin-top:11px;font-size:12.8px;color:var(--muted);max-width:64ch;line-height:1.5}

		.sbgn-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:11px 0}
		.sbgn-row + .sbgn-row{border-top:1px solid var(--line2)}
		.sbgn-row:first-child{padding-top:0}
		.sbgn-row__label{display:block;font-weight:560;cursor:pointer}
		.sbgn-admin .sbgn-row__note{margin-top:3px;font-size:12.8px;color:var(--muted);max-width:60ch}

		input[type=checkbox].sbgn-toggle{appearance:none;-webkit-appearance:none;position:relative;flex:0 0 auto;
			width:40px;min-width:40px;height:23px;margin:1px 0 0;padding:0;border:0;border-radius:999px;
			background:#C6D0D7;cursor:pointer;transition:background .15s ease;box-shadow:none}
		input[type=checkbox].sbgn-toggle::before{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;
			margin:0;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(16,32,42,.34);transition:transform .15s ease}
		input[type=checkbox].sbgn-toggle:checked{background:var(--eu)}
		input[type=checkbox].sbgn-toggle:checked::before{transform:translateX(17px)}
		input[type=checkbox].sbgn-toggle:focus{outline:2px solid var(--ink);outline-offset:2px;box-shadow:none}

		.sbgn-admin .sbgn-sec__body select,.sbgn-admin .sbgn-sec__body input[type=text]{height:36px;padding:0 11px;
			border:1px solid #CBD5DB;border-radius:7px;background:#fff;color:var(--ink);font-size:14px;box-shadow:none}
		.sbgn-admin .sbgn-sec__body select{min-width:280px}
		.sbgn-admin .sbgn-sec__body input[type=text]{width:90px;font-variant-numeric:tabular-nums}
		.sbgn-admin .sbgn-sec__body select:focus,.sbgn-admin .sbgn-sec__body input[type=text]:focus{
			border-color:var(--ink);outline:2px solid rgba(22,32,42,.14);box-shadow:none}

		.sbgn-save{display:flex;align-items:center;gap:16px;padding:18px 0;border-top:1px solid var(--line2)}
		.sbgn-admin .sbgn-save .button-primary{height:38px;padding:0 20px;border-radius:8px;font-size:14px;font-weight:560}
		.sbgn-admin .sbgn-save__hint{font-size:12.8px;color:var(--muted)}