/**
 * Buy or Rent calculator, product page edition.
 *
 * Scoped to .bor-pdp so it cannot reach the rest of the product page, and built
 * on the PDP v2 palette (#1f2b3d ink, #f99d1b accent) so it reads as part of the
 * buy box rather than a bolted-on widget.
 */

.bor-pdp {
	--bor-pdp-ink: #1f2b3d;
	--bor-pdp-muted: #6c757d;
	--bor-pdp-line: #e3e3e3;
	--bor-pdp-accent: #f99d1b;
	--bor-pdp-accent-dark: #e08c18;
	--bor-pdp-surface: #fff;
	--bor-pdp-surface-alt: #fafafa;
	--bor-pdp-tint: #fdf8ef;
	--bor-pdp-win: #f99d1c;
	--bor-pdp-win-bg: #fff0d6;
	margin: 1.25rem 0 0;
	border: 1px solid var(--bor-pdp-line);
	border-radius: 12px;
	background: var(--bor-pdp-surface);
	overflow: hidden;
}

.bor-pdp__intro {
	padding: 1.1rem 1.25rem;
	background: var(--bor-pdp-tint);
}

.bor-pdp .bor-pdp__heading {
	margin: 0 0 0.35rem;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--bor-pdp-ink);
	text-transform: none;
	letter-spacing: 0;
}

.bor-pdp .bor-pdp__lede {
	margin: 0 0 0.85rem;
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--bor-pdp-muted);
}

.bor-pdp__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.75rem 1.25rem;
	border: 1px solid var(--bor-pdp-accent);
	border-radius: 10px;
	background: var(--bor-pdp-surface);
	color: var(--bor-pdp-ink);
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.3;
	cursor: pointer;
	transition: box-shadow 0.2s, border-color 0.2s;
}

.bor-pdp__toggle:hover {
	border-color: var(--bor-pdp-accent-dark);
	box-shadow: 0 4px 12px rgba(249, 157, 27, 0.2);
}

.bor-pdp__toggle:focus-visible {
	outline: 3px solid var(--bor-pdp-ink);
	outline-offset: 2px;
}

.bor-pdp__toggle-chevron {
	width: 1.05rem;
	height: 1.05rem;
	flex: 0 0 auto;
	transition: transform 0.2s;
}

.bor-pdp__toggle[aria-expanded="true"] .bor-pdp__toggle-chevron {
	transform: rotate(180deg);
}

.bor-pdp__panel {
	padding: 1.25rem;
	border-top: 1px solid var(--bor-pdp-line);
}

.bor-pdp__panel[hidden] {
	display: none;
}

/* ------------------------------------------------------------- duration */

.bor-pdp .bor-pdp__label {
	display: block;
	margin: 0 0 0.6rem;
	font-size: 0.98rem;
	font-weight: 700;
	color: var(--bor-pdp-ink);
}

.bor-pdp__duration-controls {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	flex-wrap: wrap;
}

.bor-pdp__range {
	flex: 1 1 200px;
	min-width: 160px;
	height: 1.5rem;
	margin: 0;
	padding: 0;
	background: transparent;
	accent-color: var(--bor-pdp-accent-dark);
	cursor: pointer;
}

.bor-pdp__range:focus-visible {
	outline: 3px solid var(--bor-pdp-ink);
	outline-offset: 4px;
}

.bor-pdp__number-wrap {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	flex: 0 0 auto;
}

.bor-pdp .bor-pdp__number {
	width: 5rem;
	height: auto;
	padding: 0.5rem 0.6rem;
	border: 1px solid var(--bor-pdp-line);
	border-radius: 8px;
	background: var(--bor-pdp-surface);
	color: var(--bor-pdp-ink);
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
	box-shadow: none;
}

.bor-pdp .bor-pdp__number:focus-visible {
	outline: 3px solid var(--bor-pdp-ink);
	outline-offset: 2px;
}

.bor-pdp__number-unit {
	font-size: 0.9rem;
	color: var(--bor-pdp-muted);
}

/* --------------------------------------------------------------- result */

.bor-pdp__result {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--bor-pdp-line);
}

.bor-pdp .bor-pdp__result-heading {
	margin: 0 0 0.75rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--bor-pdp-ink);
	text-transform: none;
	letter-spacing: 0;
}

.bor-pdp__tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

.bor-pdp__tile {
	position: relative;
	padding: 0.9rem 1rem;
	border: 1px solid var(--bor-pdp-line);
	border-radius: 10px;
	background: var(--bor-pdp-surface-alt);
}

.bor-pdp__tile--rent {
	border-top: 4px solid var(--bor-pdp-accent);
}

.bor-pdp__tile--buy {
	border-top: 4px solid var(--bor-pdp-ink);
}

/* The better fit stands out: brighter HME orange surface, orange ring and a
   soft glow. The ring is a box-shadow so the two tiles keep the same size. */
.bor-pdp__tile.is-recommended {
	background: var(--bor-pdp-win-bg);
	border-color: var(--bor-pdp-win);
	border-top-color: var(--bor-pdp-win);
	box-shadow: 0 0 0 2px var(--bor-pdp-win), 0 8px 22px rgba(249, 157, 28, 0.3);
}

.bor-pdp__tile.is-recommended .bor-pdp__tile-title {
	color: var(--bor-pdp-ink);
}

.bor-pdp .bor-pdp__tile-title {
	margin: 0 0 0.3rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bor-pdp-muted);
}

.bor-pdp .bor-pdp__tile-amount {
	margin: 0 0 0.25rem;
	font-size: 1.35rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--bor-pdp-ink);
}

.bor-pdp .bor-pdp__tile-amount--quote {
	font-size: 1.05rem;
}

.bor-pdp__from,
.bor-pdp .bor-pdp__tile-unit {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--bor-pdp-muted);
}

.bor-pdp .bor-pdp__tile-detail {
	margin: 0;
	font-size: 0.86rem;
	line-height: 1.45;
	color: var(--bor-pdp-muted);
}

.bor-pdp .bor-pdp__tile-note {
	margin: 0.4rem 0 0;
	font-size: 0.79rem;
	line-height: 1.4;
	color: var(--bor-pdp-muted);
}

/* The recommendation is never signalled by colour alone: this short label
   states it. It sits beside the tile title, so it stays one short pill even in
   the narrow buy box column. Ink on HME orange is about 6.7:1. */
.bor-pdp__tile-flag {
	display: inline-block;
	margin-left: 0.35rem;
	padding: 0.12rem 0.5rem;
	border-radius: 999px;
	background: var(--bor-pdp-win);
	color: var(--bor-pdp-ink);
	font-size: 0.68rem;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.04em;
	vertical-align: 0.05em;
	white-space: nowrap;
}

.bor-pdp__verdict {
	margin-top: 0.85rem;
	padding: 0.85rem 1rem;
	border-left: 4px solid var(--bor-pdp-muted);
	border-radius: 0 8px 8px 0;
	background: var(--bor-pdp-surface-alt);
}

.bor-pdp__verdict.is-rent,
.bor-pdp__verdict.is-buy {
	border-left-color: var(--bor-pdp-win);
	background: var(--bor-pdp-tint);
}

.bor-pdp .bor-pdp__verdict-title {
	margin: 0;
	font-size: 0.96rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--bor-pdp-ink);
}

.bor-pdp .bor-pdp__disclaimer {
	margin: 0.75rem 0 0;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--bor-pdp-muted);
}

/* -------------------------------------------------------------- actions */

.bor-pdp__actions {
	display: flex;
	gap: 0.65rem;
	margin-top: 1.1rem;
	flex-wrap: wrap;
}

.bor-pdp__btn {
	flex: 1 1 10rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.1rem;
	border: 1px solid transparent;
	border-radius: 10px;
	font-size: 0.96rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
}

.bor-pdp__btn:focus-visible {
	outline: 3px solid var(--bor-pdp-ink);
	outline-offset: 2px;
}

.bor-pdp .bor-pdp__btn--buy {
	background: linear-gradient(135deg, var(--bor-pdp-accent) 0%, var(--bor-pdp-accent-dark) 100%);
	color: var(--bor-pdp-ink);
}

.bor-pdp .bor-pdp__btn--buy:hover {
	box-shadow: 0 6px 16px rgba(249, 157, 27, 0.35);
	text-decoration: none;
}

.bor-pdp .bor-pdp__btn--rent {
	background: var(--bor-pdp-surface);
	border-color: #d8d8d8;
	color: var(--bor-pdp-ink);
}

.bor-pdp .bor-pdp__btn--rent:hover {
	border-color: var(--bor-pdp-accent);
	box-shadow: 0 4px 12px rgba(249, 157, 27, 0.2);
	text-decoration: none;
}

.bor-pdp .bor-pdp__btn.is-disabled,
.bor-pdp .bor-pdp__btn[disabled] {
	background: #f2f2f2;
	border-color: var(--bor-pdp-line);
	color: #767676;
	cursor: not-allowed;
	box-shadow: none;
}

.bor-pdp .bor-pdp__actions-note {
	margin: 0.6rem 0 0;
	font-size: 0.83rem;
	line-height: 1.5;
	color: var(--bor-pdp-muted);
}

/* ----------------------------------------------------------- specialist */

.bor-pdp__specialist {
	margin-top: 1.1rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--bor-pdp-line);
}

.bor-pdp .bor-pdp__specialist-title {
	margin: 0 0 0.6rem;
	font-size: 0.94rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--bor-pdp-ink);
}

.bor-pdp__specialist-actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.bor-pdp .bor-pdp__btn--ghost {
	flex: 0 1 auto;
	background: var(--bor-pdp-surface);
	border-color: var(--bor-pdp-ink);
	color: var(--bor-pdp-ink);
}

.bor-pdp .bor-pdp__btn--ghost:hover {
	background: var(--bor-pdp-ink);
	color: #fff;
	text-decoration: none;
}

.bor-pdp .bor-pdp__phone {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--bor-pdp-ink);
	text-decoration: underline;
}

.bor-pdp .bor-pdp__phone:focus-visible {
	outline: 3px solid var(--bor-pdp-ink);
	outline-offset: 2px;
}

/* Visible only to assistive technology: the result is already on screen. */
.bor-pdp .bor-pdp__announce {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ----------------------------------------------------------- responsive */

@media (max-width: 480px) {
	.bor-pdp__tiles {
		grid-template-columns: minmax(0, 1fr);
	}

	.bor-pdp__intro,
	.bor-pdp__panel {
		padding: 1rem;
	}

	.bor-pdp__actions {
		flex-direction: column;
	}

	.bor-pdp__btn {
		flex: 1 1 auto;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bor-pdp__toggle,
	.bor-pdp__toggle-chevron,
	.bor-pdp__btn {
		transition: none;
	}
}

/* ------------------------------------------------ product page hierarchy */

/* PDP v2 lays out "gallery summary" / "below summary", so the Features,
   Specifications and Downloads accordions sit in the left column under the
   gallery, level with this panel. The client wants them there, beside the
   calculator, rather than in a full-width row underneath it (2026-10-15), so
   this panel no longer changes the grid. Below 992px PDP v2 stacks gallery,
   summary (with this panel), then the accordions. */

/* Open on arrival, so the intro reads as a section heading rather than a
   button that hides the answer. */
.bor-pdp[data-bor-open="true"] .bor-pdp__intro {
	padding-bottom: 0.9rem;
}

.bor-pdp[data-bor-open="true"] .bor-pdp__lede {
	margin-bottom: 0;
}

.bor-pdp[data-bor-open="true"] .bor-pdp__toggle {
	width: auto;
	margin-top: 0.85rem;
	padding: 0.45rem 0.9rem;
	border-color: transparent;
	background: transparent;
	font-size: 0.86rem;
	text-decoration: underline;
}

.bor-pdp[data-bor-open="true"] .bor-pdp__toggle:hover {
	border-color: transparent;
	box-shadow: none;
	color: var(--bor-pdp-accent-dark);
}