/**
 * JD Credit — the apply button and the Singpass line in the calculator.
 *

/* --------------------------------------------------------- card layout -- */

.calc-container .calc-list-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

/* Cost Calculator Builder's own `.calc-container .calc-list
   .calc-fields-container { display:grid }` is three classes deep, so this
   matches the field list's two classes to outweigh it. */
.calc-container .calc-fields.calc-list .calc-fields-container {
	display: contents;
}

.calc-container .calc-item-title,
.calc-container .calc-fields-container > .calc-item {
	width: 100%;
}

/* Replaces the grid's row-gap. The last field keeps its 20px, which with the
   results bar's own 15px top margin reproduces the spacing the grid gave. */
.calc-container .calc-fields-container > .calc-item {
	margin-bottom: 14px;
}

/* Promotes the button cell and the Singpass row to siblings of the results
   bar. The HTML field renders before the bar, so both are ordered past it. */
.calc-container .calc-fields-container > .calc-item.html {
	display: contents;
}

/* ---------------------------------------------------------- results bar -- */

/* Two thirds for the two figures at half each, which makes all three cells of
   the bar exactly a third of the card. */
.calc-container .calculator-result-css {
	width: 66.666%;
	border-radius: 15px 0 0 15px;
}

/* The .total class outweighs the Customizer's Additional CSS, which prints
   after the theme's stylesheets. The hidden third total was only ever a
   spacer for the absolutely positioned button. */
.calculator-result-css .sub-list-item.total {
	width: 50%;
}

.calculator-result-css #total_field_id_4 {
	display: none;
}

/* ------------------------------------------------------- button cell -- */

/* The last cell of the bar: same grey, squared off where the two meet, so the
   row reads as one continuous bar rather than two blocks. */
.calc-container .jd-calc-apply {
	order: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 33.334%;
	/* Must match the results bar's own top margin, or the two cells of the
	   same row start at different heights and the seam shows. */
	margin-top: 15px;
	padding: 10px;
	background-color: #ebebeb;
	border-radius: 0 15px 15px 0;
}

/* Beats `a.apply-now { position:absolute; right:40px; top:45px }` from the
   Customizer, so the button fills its cell instead of positioning itself over
   the figures. */
.calc-container .jd-calc-apply a.apply-now {
	position: static;
	right: auto;
	top: auto;
	display: block;
	width: 100%;
	padding: 12px 10px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	white-space: nowrap;
	border-radius: 10px;
	transition: background-color 0.2s ease;
}

.calc-container .jd-calc-apply a.apply-now:hover,
.calc-container .jd-calc-apply a.apply-now:focus-visible {
	background: #1565a8;
	color: #fff;
}

/* ------------------------------------------------------ Singpass row -- */

/* A tinted band rather than loose text on white: it groups the claim with the
   badge, and lifts the line off the card so it reads as a second route in
   rather than as a caption under the button. */
.calc-container .jd-calc-singpass-row {
	order: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	margin-top: 12px;
	padding: 9px 16px;
	background-color: #f2f8fd;
	border-radius: 12px;
}

/* Plain inline text, not a flex container: as a flex parent every text run
   either side of <b> becomes its own item and picks up the gap, which opens
   a hole around "faster". The bolt is spaced with a margin instead. */
.calc-container .jd-calc-singpass-row__text {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	color: #212121;
	letter-spacing: -0.01em;
}

/* The benefit is the one word worth colouring — "faster" is why anyone would
   take the Singpass route over the form. */
.calc-container .jd-calc-singpass-row__text b {
	font-weight: 700;
	color: #1565a8;
}

.calc-container .jd-calc-singpass-row__bolt {
	display: inline-block;
	width: 17px;
	height: 17px;
	margin-right: 6px;
	vertical-align: -3px;
	color: #1565a8;
}

/* The card around the wordmark is drawn here rather than baked into the PNG.
   The 2023 asset had its shadow and rounded pill painted into the bitmap, which
   left a grey halo on every background, corners that could not match a CSS
   radius, and a pill clipped square where it ran off the canvas. Attachment
   17656 is the wordmark alone, evenly trimmed, so the frame below stays sharp
   at any size and sits cleanly on white or on the grey bar. */
.calc-container a.jd-calc-singpass {
	display: block;
	line-height: 0;
	padding: 7px 12px;
	background-color: #fff;
	border: 1px solid #d4e4f2;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(0, 25, 49, 0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Cost Calculator Builder sets `width:100%` on every image inside the field
   container at the same weight as a three-class rule, so this one carries an
   extra class to win on specificity rather than on stylesheet order. */
.calc-container .calc-fields-container a.jd-calc-singpass img {
	display: block;
	width: 96px;
	height: auto;
	max-width: none;
}

.calc-container a.jd-calc-singpass:hover,
.calc-container a.jd-calc-singpass:focus-visible {
	transform: translateY(-1px);
	border-color: #9dc2e0;
	box-shadow: 0 4px 12px rgba(21, 101, 168, 0.18);
}

.calc-container a.jd-calc-singpass:focus-visible {
	outline: 2px solid #1565a8;
	outline-offset: 3px;
}

/* ------------------------------------------------------- small print -- */

/* Last thing in the card, kept quiet: it has to be readable and it has to be
   there, but it must not compete with the figures or the button above it. A
   hairline rule separates it from the Singpass band without adding weight. */
.calc-container .jd-calc-disclaimer {
	order: 3;
	width: 100%;
	margin: 12px 0 0;
	padding-top: 12px;
	border-top: 1px solid #ededed;
	font-size: 11.5px;
	font-weight: 400;
	line-height: 1.5;
	color: #8a8a8a;
	text-align: left;
	text-wrap: pretty;
}

/* ---------------------------------------------------------------- narrow -- */

/* A third of the card stops fitting "Apply in 3 Minutes" on one line once the
   page container starts shrinking, so below that the button takes a row of
   its own and the bar goes back to full width. */
@media (max-width: 1199px) {
	.calc-container .calculator-result-css {
		width: 100%;
		border-radius: 15px;
	}

	.calc-container .jd-calc-apply {
		width: 100%;
		padding: 0;
		background-color: transparent;
		border-radius: 0;
	}

	.calc-container .jd-calc-apply a.apply-now {
		padding: 15px 20px;
		font-size: 16px;
	}
}

/* ------------------------------------------------------------- compact -- */

/* Cost Calculator Builder sets a 25px line box on everything inside the card,
   which is generous for a 14px label and a 12px range end. Tightening the two
   text rows of each slider and the padding of the results bar takes about
   100px off the card without touching the slider itself — the drag target and
   the small print keep their size. */

/* The card's own padding comes from Cost Calculator Builder's per-calculator
   stylesheet with !important, so it is left alone rather than fought over;
   change it in the calculator's design settings if it ever needs to move. The
   results bar's padding and top margin live in the Customizer's Additional
   CSS, and were trimmed there so there is only one value to read. The 20px
   under the card title is another per-calculator !important and is left as
   it is. */
/* Label and value sit on one row above the slider. */
.calc-container .calc-range .calc-item__title,
.calc-container .calc-range .ccb-range-label,
.calc-container .calc-range .ccb-range-value {
	line-height: 20px;
	height: auto;
}

.calc-container .calc-range .calc-item__title {
	margin-bottom: 2px;
}

/* The min and max under the slider. */
.calc-container .calc-range .calc-range-slider-min-max,
.calc-container .calc-range .calc-range-slider-min-max span {
	line-height: 18px;
	height: auto;
}