/* ibr-vpd-calculator — front-end styles (single product summary column).
   Designed to read as a SELF-CONTAINED, isolated panel — clearly separated
   from the surrounding product content (thick border + flanked title rules),
   in the spirit of the Kaching "Bundle & Save!" block. Column-width, not
   full-bleed. Collapsed by default: title + excerpt visible, calculator opens
   on click via a native <details>. Per-instance values held as CSS custom
   properties on the wrapper. */

.ibr-vpd-calc-wrapper {
	--ibr-vpd-border: #d5d5d5;
	--ibr-vpd-panel-border: #0c447c;   /* thick isolating border */
	--ibr-vpd-panel-bg: #f6f9fd;       /* subtle tint so the panel lifts off white */
	--ibr-vpd-bg: #ffffff;
	--ibr-vpd-muted: #55606b;
	--ibr-vpd-text: #14202b;
	--ibr-vpd-accent: #0c447c;
	--ibr-vpd-accent-bg: #e7f0fa;
	--ibr-vpd-radius: 10px;
	--ibr-vpd-field-radius: 7px;
}

/* Logical-margin fix (see project learnings): .is-layout-constrained silently
   overrides physical margins with logical ones, causing phantom gaps. Restate
   as logical properties at raised specificity, and again in the mobile query. */
.single-product .ibr-vpd-calc-wrapper {
	margin-block-start: 1.25rem;
	margin-block-end: 1.25rem;
}

/* -- The isolated panel ---------------------------------------------------- */
.ibr-vpd-calc {
	box-sizing: border-box;
	width: 100%;
	font-family: Arial, Helvetica, sans-serif;
	color: var(--ibr-vpd-text);
	background: var(--ibr-vpd-panel-bg);
	border: 3px solid var(--ibr-vpd-panel-border);
	border-radius: var(--ibr-vpd-radius);
	padding: 20px;
}

.ibr-vpd-calc *,
.ibr-vpd-calc *::before,
.ibr-vpd-calc *::after {
	box-sizing: border-box;
}

/* -- Flanked title (like "Bundle & Save!") --------------------------------- */
.ibr-vpd-calc-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 14px;
}

.ibr-vpd-calc-head::before,
.ibr-vpd-calc-head::after {
	content: "";
	flex: 1 1 16px;
	min-width: 14px;
	height: 3px;
	background: var(--ibr-vpd-accent);
	border-radius: 2px;
}

.ibr-vpd-calc-title {
	flex: 0 1 auto;
	font-size: 21px;
	font-weight: 700;
	letter-spacing: 0.2px;
	color: var(--ibr-vpd-accent);
	text-align: center;
}

/* -- Intro / excerpt (always visible, with the GOV.UK link) ---------------- */
.ibr-vpd-calc-intro {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ibr-vpd-text);
	margin: 0 0 16px;
}

.ibr-vpd-calc-govlink {
	color: var(--ibr-vpd-accent);
	font-weight: 700;
	text-decoration: underline;
}

/* Continuation of the excerpt, revealed on expand (the "…" resolves here). */
.ibr-vpd-calc-more {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ibr-vpd-text);
	margin: 0 0 16px;
}

/* -- Collapse / expand ----------------------------------------------------- */
.ibr-vpd-calc-details {
	margin: 0;
}

/* The clickable affordance — a button-styled bar with a chevron. */
.ibr-vpd-calc-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	cursor: pointer;
	list-style: none;
	padding: 13px 16px;
	background: var(--ibr-vpd-accent);
	color: #ffffff;
	font-size: 15.5px;
	font-weight: 700;
	border-radius: var(--ibr-vpd-field-radius);
	text-align: center;
	user-select: none;
}

/* Remove the default disclosure triangle (all engines). */
.ibr-vpd-calc-toggle::-webkit-details-marker { display: none; }
.ibr-vpd-calc-toggle::marker { content: ""; }

.ibr-vpd-calc-toggle:hover,
.ibr-vpd-calc-toggle:focus-visible {
	background: #0a3a6b;
	outline: none;
}

/* Down chevron (drawn with borders), flips up when open. */
.ibr-vpd-calc-chevron {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	margin-top: -4px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease, margin-top 0.2s ease;
}

.ibr-vpd-calc-details[open] .ibr-vpd-calc-chevron {
	margin-top: 4px;
	transform: rotate(225deg);
}

.ibr-vpd-calc-body {
	padding-top: 18px;
}

/* -- Fields ---------------------------------------------------------------- */
.ibr-vpd-calc-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 16px;
}

.ibr-vpd-calc-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

/* Bottle size and the custom-size row span the full width; qty + price share a row. */
.ibr-vpd-calc-field-size,
.ibr-vpd-calc-field-custom {
	grid-column: 1 / -1;
}

.ibr-vpd-calc-field-custom[hidden] {
	display: none;
}

.ibr-vpd-calc-label {
	font-size: 15px;
	font-weight: 700;
	color: var(--ibr-vpd-text);
}

.ibr-vpd-calc select,
.ibr-vpd-calc input {
	width: 100%;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	height: auto;
	min-height: 46px;
	padding: 11px 12px;
	color: var(--ibr-vpd-text);
	background: var(--ibr-vpd-bg);
	border: 2px solid var(--ibr-vpd-border);
	border-radius: var(--ibr-vpd-field-radius);
}

/* Selects need the line-height restated (some themes force a tight one that
   clips the option text top and bottom); vertical-align keeps it centred. */
.ibr-vpd-calc select {
	line-height: 1.4;
	vertical-align: middle;
}

.ibr-vpd-calc select:focus,
.ibr-vpd-calc input:focus {
	outline: none;
	border-color: var(--ibr-vpd-accent);
	box-shadow: 0 0 0 2px var(--ibr-vpd-accent-bg);
}

/* -- Results --------------------------------------------------------------- */
.ibr-vpd-calc-results {
	border-top: 3px solid var(--ibr-vpd-accent);
	padding-top: 14px;
}

.ibr-vpd-calc-row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 14.5px;
	color: var(--ibr-vpd-muted);
	margin-bottom: 8px;
}

.ibr-vpd-calc-row .ibr-vpd-calc-val {
	color: var(--ibr-vpd-text);
	font-weight: 700;
}

.ibr-vpd-calc-row-strong {
	font-size: 15.5px;
	color: var(--ibr-vpd-text);
	font-weight: 700;
}

/* -- Headline result ------------------------------------------------------- */
.ibr-vpd-calc-headline {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-top: 12px;
	padding: 14px 16px;
	border: 2px solid var(--ibr-vpd-accent);
	background: var(--ibr-vpd-accent-bg);
	border-radius: var(--ibr-vpd-radius);
}

.ibr-vpd-calc-headline-label {
	font-size: 15px;
	font-weight: 700;
	color: var(--ibr-vpd-accent);
}

.ibr-vpd-calc-headline-val {
	font-size: 26px;
	font-weight: 700;
	color: var(--ibr-vpd-accent);
	white-space: nowrap;
}

.ibr-vpd-calc-perml {
	font-size: 13.5px;
	color: var(--ibr-vpd-muted);
	text-align: center;
	margin: 12px 0 0;
}

/* -- Footer ---------------------------------------------------------------- */
.ibr-vpd-calc-foot {
	font-size: 13px;
	line-height: 1.55;
	color: var(--ibr-vpd-muted);
	margin: 16px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--ibr-vpd-border);
}

.ibr-vpd-calc-link {
	color: var(--ibr-vpd-accent);
	font-weight: 700;
	text-decoration: underline;
}

/* -- Mobile ---------------------------------------------------------------- */
@media (max-width: 480px) {
	/* Restate the logical margins inside the mobile query (see learnings). */
	.single-product .ibr-vpd-calc-wrapper {
		margin-block-start: 1.25rem;
		margin-block-end: 1.25rem;
	}

	.ibr-vpd-calc {
		padding: 16px;
	}

	/* Drop the flanking rules on narrow screens so a longer title doesn't get
	   squeezed; keep it centred and bold. */
	.ibr-vpd-calc-head::before,
	.ibr-vpd-calc-head::after {
		display: none;
	}

	.ibr-vpd-calc-title {
		font-size: 19px;
	}

	.ibr-vpd-calc-headline {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.ibr-vpd-calc-headline-val {
		font-size: 24px;
	}
}