/**
 * Boat Sales Hub — floating finance preferences widget.
 * Neutral styling, kept low-specificity so a theme can override easily.
 */

.bsh-finance-widget {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
}

/* --- collapsed pill --- */
.bsh-fw-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	border: 0;
	border-radius: 999px;
	background: #1c2d39;
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

.bsh-fw-toggle:hover { background: #243a4a; }
.bsh-fw-toggle:focus-visible { outline: 2px solid #3ed8a6; outline-offset: 2px; }

.bsh-fw-toggle-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	font-size: 13px;
	font-weight: 700;
}

/* The brand mark carries its own shape, so drop the tinted disc it would
   otherwise sit inside and let the logo read at its intended 20x20. */
.bsh-fw-toggle-icon.has-img {
	width: 20px;
	height: 20px;
	border-radius: 0;
	background: none;
}

.bsh-fw-toggle-icon.has-img img {
	display: block;
	width: 20px;
	height: 20px;
	object-fit: contain;
}

.bsh-finance-widget.is-active .bsh-fw-toggle { background: #0f7a4f; }
.bsh-finance-widget.is-active .bsh-fw-toggle:hover { background: #128f5c; }

/* --- expanded panel --- */
.bsh-fw-panel {
	position: absolute;
	right: 0;
	bottom: calc(100% + 10px);
	width: 300px;
	max-width: calc(100vw - 40px);
	padding: 16px;
	border: 1px solid #dcdcde;
	border-radius: 10px;
	background: #fff;
	color: #1c2d39;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

.bsh-fw-panel[hidden] { display: none; }

.bsh-fw-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

.bsh-fw-title { font-size: 15px; }

.bsh-fw-close {
	border: 0;
	background: transparent;
	font-size: 22px;
	line-height: 1;
	color: #6b7a83;
	cursor: pointer;
	padding: 0 2px;
}

.bsh-fw-close:hover { color: #d63638; }

.bsh-fw-note {
	margin: 0 0 12px;
	font-size: 13px;
	color: #5c6b74;
}

.bsh-fw-field { display: block; margin-bottom: 10px; }

.bsh-fw-field > span {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	font-weight: 600;
}

.bsh-fw-field input,
.bsh-fw-field select {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 10px;
	border: 1px solid #c3c9cd;
	border-radius: 6px;
	font-size: 15px;
	background: #fff;
	color: inherit;
}

.bsh-fw-field input:focus,
.bsh-fw-field select:focus {
	outline: none;
	border-color: #1c2d39;
	box-shadow: 0 0 0 2px rgba(28, 45, 57, .12);
}

/* Standing note of the provider's deposit floor; turns amber for the one
   repaint after a typed figure has been raised to meet it. */
.bsh-fw-hint {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.35;
	opacity: .7;
}

.bsh-fw-hint.is-warning {
	color: #8a5300;
	opacity: 1;
}

.bsh-fw-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
}

.bsh-fw-apply {
	flex: 1;
	padding: 10px 14px;
	border: 0;
	border-radius: 6px;
	background: #1c2d39;
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
}

.bsh-fw-apply:hover { background: #243a4a; }

.bsh-fw-reset {
	border: 0;
	background: transparent;
	color: #5c6b74;
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
	padding: 4px;
}

.bsh-fw-reset:hover { color: #d63638; }

/* --- busy state --- */
.bsh-finance-widget.is-busy .bsh-fw-panel { opacity: .6; pointer-events: none; }

@media (max-width: 480px) {
	.bsh-finance-widget { right: 12px; bottom: 12px; }
	.bsh-fw-toggle { padding: 11px 15px; font-size: 14px; }
}

@media print {
	.bsh-finance-widget { display: none; }
}

/* --- recalculating -------------------------------------------------------
   While a figure is being recomputed the old number fades almost out and the
   brand mark sits over it, so a stale price is never presented as if it were
   the visitor's. Deliberately still: a grid can hold dozens of these at once,
   and dozens of pulsing logos is worse than none.

   Overlaid rather than inserted above the figure — an in-flow mark pushed the
   price down and made the card jump on every refresh. */
.rb-boat-finance--loading {
	position: relative;
}

.rb-boat-finance-loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	line-height: 0;
	pointer-events: none;
}

.rb-boat-finance-loading img {
	display: block;
	width: auto;
	max-width: 140px;
	height: auto;
	opacity: .55;
	filter: grayscale(1);
}

/* Faint enough to read as "being replaced", not as a value. */
.rb-boat-finance--loading .rb-boat-finance-monthly,
.rb-boat-finance--loading .rb-boat-finance-deposit,
.rb-boat-finance--loading .rb-boat-finance-label {
	opacity: .12;
}

@media (prefers-reduced-motion: reduce) {
	.rb-boat-finance-loading img { transition: none; }
}

/* --- deposit shortfall notice --------------------------------------------
   Shown on a single boat when the visitor's deposit is below THIS boat's
   minimum — the one reason for "Enquire" they can actually act on. */

.rb-boat-finance-notice {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
	padding: 12px 14px;
	border: 1px solid #f0d9a8;
	border-left: 3px solid #d59b1e;
	border-radius: 6px;
	background: #fdf8ee;
	font-size: 14px;
	line-height: 1.45;
	color: #5c4a1e;
}

.rb-boat-finance-notice-fix {
	flex: none;
	border: 0;
	border-radius: 6px;
	padding: 9px 16px;
	background: #1c2d39;
	color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

.rb-boat-finance-notice-fix:hover { filter: brightness(1.15); }
.rb-boat-finance-notice-fix:focus-visible { outline: 2px solid #1c2d39; outline-offset: 2px; }

/* The mark covers the figures, not the explanation of why there are none. */
.rb-boat-finance--loading .rb-boat-finance-notice { opacity: 1; }