/*
 * The calculator. It reads the design system's custom properties when sigma-blocks is
 * present and falls back to its own values when it is not, so the plugin still looks
 * right on a site that does not have the Sigma theme layer.
 */

.wdebk,
.wdegp {
	--wdebk-navy:   var(--sigma-navy, #141D38);
	--wdebk-yellow: var(--sigma-yellow-2, #F5C400);
	--wdebk-cream:  var(--sigma-cream, #FBF8E9);
	--wdebk-grey:   var(--sigma-grey-1, #424242);
	--wdebk-line:   rgba(20, 29, 56, .12);
	--wdebk-radius: var(--sigma-radius-card, 24px);
}

/* ---- compact, the hero form ---- */

.wdegp__form { display: grid; gap: 16px 20px; }
.wdegp--compact .wdegp__form { grid-template-columns: 1fr 1fr; align-items: end; }
.wdegp__field { display: flex; flex-direction: column; gap: 6px; }
.wdegp__field label { font-size: 14px; line-height: 20px; color: var(--wdebk-navy); }

.wdegp__field input,
.wdegp__field select {
	height: 44px; margin: 0; padding: 0 14px; border: 0; border-radius: 10px;
	background: #fff; color: var(--wdebk-grey); font-size: 16px; line-height: 42px;
	box-shadow: none; -webkit-appearance: none; appearance: none;
}

.wdegp__field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23141D38' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
	padding-right: 36px;
}

.wdegp__submit {
	height: 50px; padding: 0 25px; border: 0; border-radius: 999px;
	background: #fff; color: #333; font-size: 18px; font-weight: 500; cursor: pointer;
}

.wdegp__submit:hover { background: var(--wdebk-cream); }
.wdegp__heading { margin: 0 0 12px; font-size: 20px; font-weight: 500; color: var(--wdebk-navy); }

/* ---- full calculator ---- */

.wdebk__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
.wdebk__field { display: flex; flex-direction: column; gap: 6px; }
.wdebk__field--wide { grid-column: 1 / -1; }
.wdebk__field label { font-size: 14px; line-height: 20px; color: var(--wdebk-navy); font-weight: 500; }

/* FlatSome sets its own height and line-height on form controls, which clipped the
   text in every select. Height is set explicitly here rather than left to padding. */
.wdebk__field input,
.wdebk__field select {
	height: 50px; margin: 0; padding: 0 14px; border: 1px solid var(--wdebk-line);
	border-radius: 12px; background: #fff; color: var(--wdebk-grey); font-size: 16px;
	line-height: 48px; box-shadow: none; -webkit-appearance: none; appearance: none;
}

.wdebk__field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23141D38' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px;
	padding-right: 38px;
}

.wdebk__field textarea {
	margin: 0; padding: 12px 14px; border: 1px solid var(--wdebk-line); border-radius: 12px;
	background: #fff; color: var(--wdebk-grey); font-size: 16px; line-height: 24px; box-shadow: none;
}

.wdebk__field input:focus,
.wdebk__field select:focus,
.wdebk__field textarea:focus { border-color: var(--wdebk-yellow); outline: 2px solid rgba(245, 196, 0, .35); outline-offset: 1px; }

.wdebk__quote { margin: 26px 0 0; transition: opacity .15s ease; }
.wdebk__quote.is-loading { opacity: .45; }

.wdebk__card { padding: 26px 28px; background: var(--wdebk-cream); border-radius: var(--wdebk-radius); }
.wdebk__card--msg { color: var(--wdebk-grey); font-size: 16px; line-height: 26px; }

.wdebk__total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.wdebk__total span { font-size: 18px; color: var(--wdebk-navy); }
.wdebk__total strong { font-size: clamp(30px, 4vw, 44px); font-weight: 500; color: var(--wdebk-navy); line-height: 1.1; }
.wdebk__gst { margin: 4px 0 18px; font-size: 14px; color: var(--wdebk-grey); }

.wdebk__lines { border-top: 1px solid var(--wdebk-line); padding-top: 14px; }
.wdebk__line { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; line-height: 26px; color: var(--wdebk-grey); }
.wdebk__line span:last-child { font-weight: 500; color: var(--wdebk-navy); white-space: nowrap; }

.wdebk__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 22px; border-top: 1px solid var(--wdebk-line); padding-top: 18px; }
.wdebk__col h4 { margin: 0 0 8px; font-size: 15px; font-weight: 500; color: var(--wdebk-navy); text-transform: none; letter-spacing: normal; }
.wdebk__col ul { margin: 0; padding: 0; list-style: none; }
.wdebk__col li { position: relative; padding-left: 22px; margin: 0 0 6px; font-size: 14px; line-height: 22px; color: var(--wdebk-grey); }

.wdebk__yes li::before,
.wdebk__no li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.wdebk__yes li::before { content: '\2713'; color: #137333; }
.wdebk__no li::before  { content: '\2715'; color: #B3261E; }

.wdebk__details { margin-top: 30px; }
.wdebk__h3 { margin: 0 0 16px; font-size: 22px; font-weight: 500; color: var(--wdebk-navy); }

.wdebk__pay {
	margin-top: 20px; height: 54px; padding: 0 32px; border: 0; border-radius: 999px;
	background: var(--wdebk-yellow); color: #333; font-size: 18px; font-weight: 500; cursor: pointer;
}

.wdebk__pay:hover:not(:disabled) { background: var(--sigma-yellow-dark, #DB9901); }
.wdebk__pay:disabled { opacity: .6; cursor: default; }

.wdebk__secure { margin: 12px 0 0; font-size: 13px; color: var(--wdebk-grey); }
.wdebk__error { margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; background: #FDECEA; color: #B3261E; font-size: 15px; }

/* honeypot, hidden from people and left visible to bots */
.wdebk__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 720px) {
	.wdegp--compact .wdegp__form,
	.wdebk__grid { grid-template-columns: 1fr; }
	.wdebk__cols { grid-template-columns: 1fr; }
	.wdebk__card { padding: 20px 18px; }
	.wdebk__pay { width: 100%; }
}

/* Enquiry mode confirmation. Replaces the button once the details are away, so the
   form ends on a statement rather than on a button that now does nothing. */
.wdebk__done {
	margin: 18px 0 0;
	padding: 16px 20px;
	background: #F1F8F2;
	border: 1px solid #2E7D32;
	border-radius: 12px;
	font-size: 16px;
	line-height: 24px;
	color: #1B5E20;
}

/* ============================================================ the booking page
 *
 * Figma 241:2721, "Book your bin". Two columns: everything the customer tells us on the
 * left, the order and the payment choice on the right. The order panel is sticky, so the
 * price stays on screen while the form is being filled in, which is the whole point of
 * putting it in a column rather than under the fields. D209.
 */
.wdebk__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: 30px;
	align-items: start;
}

.wdebk__panel {
	background: var(--sigma-cream, #FBF8E9);
	border-radius: 24px;
	padding: 32px 34px 34px;
	margin-bottom: 20px;
}

.wdebk__panel:last-child { margin-bottom: 0; }

.wdebk__h3 {
	margin: 0 0 20px;
	font-size: 22px;
	line-height: 30px;
	font-weight: 600;
	color: var(--sigma-navy, #141D38);
}

.wdebk__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px;
}

.wdebk__field--wide { grid-column: 1 / -1; }

.wdebk__note {
	margin: 10px 0 0;
	padding: 12px 14px;
	border-radius: 12px;
	background: rgba(249, 180, 1, .16);
	font-size: 15px;
	line-height: 22px;
	color: var(--sigma-navy, #141D38);
}

/* ------------------------------------------------------------ the order panel */

/* Clears the theme's sticky header, and the admin bar when logged in. At 24px the order
   panel slid up under the header and its top rows were hidden. Babar, 27 September 2026. */
.wdebk__side { position: sticky; top: 110px; }
.admin-bar .wdebk__side { top: 142px; }

.wdebk__order,
.wdebk__pay-block {
	background: var(--sigma-cream, #FBF8E9);
	border-radius: 24px;
	padding: 28px 30px 30px;
}

.wdebk__pay-block { margin-top: 20px; }

.wdebk__empty { margin: 0; font-size: 16px; line-height: 24px; color: #424242; }

.wdebk__rows { display: flex; flex-direction: column; }

.wdebk__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid rgba(20, 29, 56, .09);
	font-size: 16px;
	line-height: 24px;
	color: #424242;
}

.wdebk__row span:last-child { white-space: nowrap; color: var(--sigma-navy, #141D38); }

.wdebk__row--total {
	border-bottom: 0;
	padding-top: 18px;
	font-weight: 600;
	font-size: 18px;
	color: var(--sigma-navy, #141D38);
}

.wdebk__row--total span:last-child { font-size: 20px; }

.wdebk__inc { margin: 18px 0 0; padding-left: 18px; font-size: 15px; line-height: 23px; color: #424242; }

/* ------------------------------------------------------------ the payment choice */

.wdebk__choice {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-bottom: 12px;
	padding: 16px 18px;
	border: 1px solid rgba(20, 29, 56, .12);
	border-radius: 14px;
	background: #fff;
	cursor: pointer;
	font-size: 15px;
	line-height: 22px;
	color: #424242;
}

.wdebk__choice input { margin-top: 3px; accent-color: var(--sigma-yellow, #F9B401); }
.wdebk__choice strong { display: block; color: var(--sigma-navy, #141D38); font-weight: 600; }
.wdebk__choice:has(input:checked) { border-color: var(--sigma-yellow, #F9B401); box-shadow: 0 0 0 1px var(--sigma-yellow, #F9B401); }

.wdebk__stripe {
	margin: 6px 0 18px;
	padding: 20px;
	border: 1px dashed rgba(20, 29, 56, .18);
	border-radius: 14px;
	text-align: center;
	background: #fff;
}

.wdebk__stripe-label,
.wdebk__stripe-note { display: block; font-size: 13px; line-height: 20px; color: #6b6b6b; }
.wdebk__stripe-note { margin-top: 8px; }

.wdebk__terms { margin: 14px 0 0; font-size: 13px; line-height: 20px; color: #6b6b6b; text-align: center; }
.wdebk__terms a { color: #6b6b6b; text-decoration: underline; }

@media (max-width: 1099px) {
	.wdebk__layout { grid-template-columns: 1fr; }
	.wdebk__side { position: static; }
}

@media (max-width: 649px) {
	.wdebk__grid { grid-template-columns: 1fr; }
	.wdebk__panel { padding: 24px 20px 26px; }
	.wdebk__order, .wdebk__pay-block { padding: 22px 20px 24px; }
}