/* UberHeats Booking. Colours follow the site's Astra global colours, like the boiler quote tool.
   Astra and the Elementor kit restyle every button on hover and focus, so button styles below
   cover :hover, :focus and :active with !important (the same fix as the quote tool). */
.uhbk {
	/* UberHeats green (the logo's green). Fills use the logo green with dark text on it;
	   words and links use a darker green so they're easy to read on white. */
	--uhbk-accent: #7CDA24;
	--uhbk-accent-ink: #13240a;
	--uhbk-accent-text: #3B7A12;
	--uhbk-tint: #f4fbec;
	--uhbk-ink: var(--ast-global-color-2, #1c1c1c);
	--uhbk-text: var(--ast-global-color-3, #333);
	--uhbk-line: #c9c9c9;
	--uhbk-soft: #f5f5f3;
	--uhbk-ok: #1a6b35;
	--uhbk-error: #b00020;
	container-type: inline-size;
	scroll-margin-top: 110px;
	max-width: 1040px;
	margin: 0 auto;
	color: var(--uhbk-text);
	font-family: inherit;
	line-height: 1.55;
	background: #fff;
}
.uhbk *, .uhbk *::before, .uhbk *::after { box-sizing: border-box; }
/* UberCool blue for air conditioning: on the whole form once an A/C service is chosen,
   and on the A/C cards on the first step. */
.uhbk.is-cool, .uhbk .uhbk-card.is-cool {
	--uhbk-accent: #38B6FF;
	--uhbk-accent-ink: #062a40;
	--uhbk-accent-text: #0B6AA6;
	--uhbk-tint: #eef8ff;
}
.uhbk-closed { padding: 1em; background: #f5f5f3; }

.uhbk-testbar { background: #fff6dd; border-left: 4px solid #c98a00; padding: 10px 14px; margin: 0 0 18px; font-size: .95rem; }
.uhbk-testbar code { background: #fff; padding: 0 4px; }

.uhbk-bar { height: 4px; background: var(--uhbk-soft); margin-bottom: 22px; }
.uhbk-bar span { display: block; height: 100%; background: var(--uhbk-accent); transition: width .35s ease; }

.uhbk-layout { display: grid; gap: 28px; }
.uhbk-main { min-width: 0; }
@container (min-width: 820px) {
	.uhbk-layout.has-trail { grid-template-columns: minmax(0, 1fr) 270px; gap: 44px; align-items: start; }
}

.uhbk-stepno { margin: 0 0 .2em; font-size: .9rem; color: #666; }
.uhbk-q { color: var(--uhbk-ink); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.85rem); line-height: 1.2; margin: 0 0 .5em; font-weight: 700; outline: none; }
.uhbk-lead { font-size: 1.05rem; margin: 0 0 1.2em; max-width: 64ch; }
.uhbk h3 { color: var(--uhbk-ink); font-size: 1.12rem; margin: 1.6em 0 .5em; }
.uhbk a { color: var(--uhbk-accent-text); }
.uhbk-small, .uhbk-help { font-size: .92rem; max-width: 66ch; margin: .4em 0 0; color: #555; }
.uhbk-help--note { color: var(--uhbk-ink); background: var(--uhbk-soft); padding: 8px 12px; border-left: 3px solid var(--uhbk-accent); }
.uhbk-opt { font-weight: 400; color: #777; }
.uhbk-ok { color: var(--uhbk-ok); margin: .5em 0 0; font-weight: 600; }
.uhbk-error { color: var(--uhbk-error); margin: .5em 0 0; font-weight: 600; }
.uhbk-notice { background: #fde8e8; border-left: 4px solid var(--uhbk-error); padding: 10px 14px; margin: 0 0 18px; color: var(--uhbk-ink); }
.uhbk-loading { color: #666; }
.uhbk-aside { margin-top: 28px; padding: 14px 18px; background: var(--uhbk-soft); font-size: .95rem; }
.uhbk-aside p { margin: .3em 0; }

/* buttons */
.uhbk button { font: inherit; cursor: pointer; }
.uhbk-btn { font-weight: 700; border-radius: 6px; padding: .85em 1.5em; border: 2px solid var(--uhbk-accent); line-height: 1.2; }
.uhbk button.uhbk-btn, .uhbk button.uhbk-btn:hover, .uhbk button.uhbk-btn:focus, .uhbk button.uhbk-btn:active { border-width: 2px !important; border-style: solid !important; border-radius: 6px !important; padding: .85em 1.5em !important; line-height: 1.2 !important; text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; }
.uhbk button.uhbk-btn--primary, .uhbk button.uhbk-btn--primary:hover, .uhbk button.uhbk-btn--primary:focus, .uhbk button.uhbk-btn--primary:active { background: var(--uhbk-accent) !important; color: var(--uhbk-accent-ink) !important; border-color: var(--uhbk-accent) !important; }
.uhbk button.uhbk-btn--primary:hover { filter: brightness(.95); }
.uhbk button.uhbk-btn--primary:disabled { opacity: .5 !important; cursor: not-allowed; filter: none; }
.uhbk button.uhbk-btn--plain, .uhbk button.uhbk-btn--plain:focus, .uhbk button.uhbk-btn--plain:active { background: #fff !important; color: var(--uhbk-ink) !important; border-color: var(--uhbk-line) !important; }
.uhbk button.uhbk-btn--plain:hover { background: #fff !important; color: var(--uhbk-ink) !important; border-color: var(--uhbk-ink) !important; }
.uhbk button.uhbk-back, .uhbk button.uhbk-back:hover, .uhbk button.uhbk-back:focus, .uhbk button.uhbk-back:active { background: none !important; border: 0 !important; box-shadow: none !important; color: var(--uhbk-ink) !important; padding: .4em 0 !important; text-decoration: underline; text-underline-offset: 3px; }
.uhbk button.uhbk-link, .uhbk button.uhbk-link:hover, .uhbk button.uhbk-link:focus, .uhbk button.uhbk-link:active,
.uhbk button.uhbk-trail__change, .uhbk button.uhbk-trail__change:hover, .uhbk button.uhbk-trail__change:focus, .uhbk button.uhbk-trail__change:active { background: none !important; border: 0 !important; box-shadow: none !important; color: var(--uhbk-accent-text) !important; padding: 0 2px !important; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.uhbk button:focus-visible, .uhbk input:focus-visible, .uhbk textarea:focus-visible, .uhbk select:focus-visible, .uhbk label.uhbk-extra:focus-within { outline: 3px solid var(--uhbk-accent-text); outline-offset: 2px; }
.uhbk-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 28px; }

/* service cards */
.uhbk-cards { display: grid; gap: 12px; }
@container (min-width: 600px) { .uhbk-cards { grid-template-columns: 1fr 1fr; } }
.uhbk button.uhbk-card, .uhbk button.uhbk-card:hover, .uhbk button.uhbk-card:focus, .uhbk button.uhbk-card:active { display: flex !important; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; background: #fff !important; color: var(--uhbk-text) !important; border: 2px solid var(--uhbk-line) !important; border-radius: 8px !important; padding: 16px 18px !important; box-shadow: none !important; text-transform: none !important; letter-spacing: normal !important; line-height: 1.4 !important; width: 100%; }
.uhbk button.uhbk-card:hover, .uhbk button.uhbk-card.is-on { border-color: var(--uhbk-accent) !important; }
.uhbk-card__name { font-weight: 700; color: var(--uhbk-ink); font-size: 1.05rem; }
.uhbk-card__price { font-weight: 700; color: var(--uhbk-accent-text); }
.uhbk-card__price small { font-weight: 400; color: #666; }
.uhbk-card__blurb { font-size: .92rem; color: #555; }

/* calendar */
.uhbk-first { margin: 0 0 .6em; font-weight: 600; }
.uhbk-week { font-size: 1rem !important; margin: 1.2em 0 .4em !important; color: #555 !important; }
.uhbk-days { border-top: 1px solid var(--uhbk-line); }
.uhbk-day { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--uhbk-line); }
.uhbk-day__name { font-weight: 700; color: var(--uhbk-ink); }
.uhbk-day.is-full .uhbk-day__name { color: #999; font-weight: 400; }
.uhbk-day__slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.uhbk button.uhbk-slot, .uhbk button.uhbk-slot:hover, .uhbk button.uhbk-slot:focus, .uhbk button.uhbk-slot:active { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-height: 54px; background: #fff !important; color: var(--uhbk-ink) !important; border: 2px solid var(--uhbk-line) !important; border-radius: 6px !important; padding: 6px 4px !important; box-shadow: none !important; text-transform: none !important; letter-spacing: normal !important; line-height: 1.2 !important; width: 100%; }
.uhbk button.uhbk-slot:hover { border-color: var(--uhbk-accent) !important; }
.uhbk button.uhbk-slot.is-on, .uhbk button.uhbk-slot.is-on:hover, .uhbk button.uhbk-slot.is-on:focus { background: var(--uhbk-accent) !important; border-color: var(--uhbk-accent) !important; color: var(--uhbk-accent-ink) !important; }
.uhbk button.uhbk-slot:disabled, .uhbk button.uhbk-slot:disabled:hover { background: var(--uhbk-soft) !important; border-color: var(--uhbk-soft) !important; color: #aaa !important; cursor: not-allowed; }
.uhbk-slot__label { font-weight: 700; font-size: .95rem; }
.uhbk-slot__times { font-size: .8rem; }
@container (max-width: 420px) {
	.uhbk-day { grid-template-columns: 1fr; gap: 6px; }
	.uhbk-slot__times { font-size: .75rem; }
}
.uhbk-pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; }

/* fields */
.uhbk-field { margin: 0 0 20px; }
.uhbk-field label, .uhbk-field legend, .uhbk-label { display: block; font-weight: 700; color: var(--uhbk-ink); margin: 0 0 6px; }
.uhbk fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.uhbk-input { width: 100%; max-width: 520px; font: inherit; padding: .7em .8em; border: 2px solid var(--uhbk-line); border-radius: 6px; background: #fff; color: var(--uhbk-ink); }
.uhbk-input:focus { border-color: var(--uhbk-ink); }
/* 0.9.9: the theme forces drop-downs to 40px tall with line-height 1, which cut the text off */
.uhbk select.uhbk-input { height: auto; min-height: 3.1em; line-height: 1.4; padding: .7em 2.4em .7em .8em; }
textarea.uhbk-input { max-width: 640px; }
.uhbk-input--pc { max-width: 160px; text-transform: uppercase; }
.uhbk-inline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.uhbk-fixed { margin: 0; padding: .7em 0; font-weight: 600; }
.uhbk-grid { display: grid; gap: 0 18px; }
@container (min-width: 600px) { .uhbk-grid { grid-template-columns: 1fr 1fr; } }
.uhbk-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.uhbk button.uhbk-pill, .uhbk button.uhbk-pill:hover, .uhbk button.uhbk-pill:focus, .uhbk button.uhbk-pill:active { background: #fff !important; color: var(--uhbk-ink) !important; border: 2px solid var(--uhbk-line) !important; border-radius: 999px !important; padding: .55em 1.05em !important; box-shadow: none !important; text-transform: none !important; letter-spacing: normal !important; line-height: 1.25 !important; font-weight: 600; text-align: left; }
.uhbk button.uhbk-pill:hover { border-color: var(--uhbk-accent) !important; }
.uhbk button.uhbk-pill.is-on, .uhbk button.uhbk-pill.is-on:hover, .uhbk button.uhbk-pill.is-on:focus { background: var(--uhbk-accent) !important; border-color: var(--uhbk-accent) !important; color: var(--uhbk-accent-ink) !important; }
.uhbk-stepper { display: inline-flex; border: 2px solid var(--uhbk-line); border-radius: 6px; overflow: hidden; }
.uhbk-stepper .uhbk-input { width: 64px; border: 0; border-radius: 0; text-align: center; -moz-appearance: textfield; }
.uhbk-stepper .uhbk-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.uhbk button.uhbk-stepper__btn, .uhbk button.uhbk-stepper__btn:focus, .uhbk button.uhbk-stepper__btn:active { width: 44px; background: #fff !important; color: var(--uhbk-ink) !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; font-size: 1.3rem !important; box-shadow: none !important; }
.uhbk button.uhbk-stepper__btn:hover { background: var(--uhbk-soft) !important; }

/* extras and ticks */
.uhbk-extras { display: grid; gap: 10px; }
.uhbk-extra { display: grid !important; grid-template-columns: 22px 1fr; gap: 2px 12px; align-items: start; padding: 12px 14px; border: 2px solid var(--uhbk-line); border-radius: 8px; cursor: pointer; font-weight: 400 !important; }
.uhbk-extra.is-on { border-color: var(--uhbk-accent); background: var(--uhbk-tint); }
.uhbk-extra input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--uhbk-accent-text); grid-row: span 2; }
.uhbk-extra__top { display: flex; justify-content: space-between; gap: 12px; }
.uhbk-extra__name { font-weight: 700; color: var(--uhbk-ink); }
.uhbk-extra__price { font-weight: 700; color: var(--uhbk-accent-text); white-space: nowrap; }
.uhbk-extra__help { grid-column: 2; font-size: .9rem; color: #555; }
.uhbk-consents { margin: 22px 0 8px; display: grid; gap: 12px; }
.uhbk-tick { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; cursor: pointer; }
.uhbk-tick input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--uhbk-accent-text); }
.uhbk-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* summary */
.uhbk-summary { background: var(--uhbk-soft); padding: 14px 18px; border-radius: 8px; max-width: 640px; }
.uhbk-summary p { margin: 0 0 .6em; }
.uhbk-summary table { width: 100%; border-collapse: collapse; }
.uhbk-summary td { padding: 4px 0; vertical-align: top; }
.uhbk-summary td + td { text-align: right; white-space: nowrap; padding-left: 12px; }
.uhbk-summary .uhbk-total td { border-top: 1px solid var(--uhbk-line); padding-top: 8px; font-weight: 700; color: var(--uhbk-ink); font-size: 1.1rem; }

/* side summary */
.uhbk-trail { border: 1px solid var(--uhbk-line); border-radius: 8px; padding: 16px 18px; font-size: .95rem; position: sticky; top: 120px; }
.uhbk-trail h3 { margin: 0 0 .6em !important; }
.uhbk-trail p { margin: 0 0 .8em; }
.uhbk-trail__k { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: #777; }
.uhbk-trail__total { font-size: 1.3rem; color: var(--uhbk-ink); }
.uhbk-trail__small { font-size: .85rem; color: #666; }
@container (max-width: 819px) { .uhbk-trail { position: static; order: -1; padding: 10px 14px; } .uhbk-trail h3, .uhbk-trail__small { display: none; } .uhbk-trail p { margin: 0 0 .3em; } }

.uhbk-done { max-width: 640px; }
.uhbk-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--uhbk-soft); border: 1px solid var(--uhbk-accent); color: var(--uhbk-accent-text); font-size: .78rem; font-weight: 600; vertical-align: 1px; }
.uhbk a[href^="tel:"] { white-space: nowrap; }
.uhbk-price { font-size: 1.1rem; color: var(--uhbk-ink); margin: 0 0 .5em; }
.uhbk-setfirst { scroll-margin-top: 120px; border-top: 2px solid var(--uhbk-ink); padding-top: 18px; margin-top: 28px !important; }
.uhbk-about { margin-top: 1.8em !important; }
.uhbk-field.is-missing { border-left: 4px solid var(--uhbk-error); padding-left: 12px; }
.uhbk-field.is-missing legend::after, .uhbk-field.is-missing > label::after { content: " Please answer this"; color: var(--uhbk-error); font-weight: 600; font-size: .9rem; }
/* address lookup */
.uhbk-address { margin-top: 4px; }
.uhbk-sublabel { font-weight: 600 !important; font-size: .95rem; color: #555 !important; }
.uhbk-input--addr { max-width: 360px; }
.uhbk-chosen { margin: .2em 0 .4em; padding: 10px 14px; background: var(--uhbk-soft); border-left: 3px solid var(--uhbk-accent); color: var(--uhbk-ink); font-weight: 600; max-width: 420px; }
.uhbk-sugg { max-width: 520px; }
.uhbk-sugg__list { list-style: none; margin: 6px 0 0; padding: 0; border: 2px solid var(--uhbk-line); border-radius: 6px; overflow: hidden; }
.uhbk-sugg__list li + li { border-top: 1px solid var(--uhbk-line); }
.uhbk button.uhbk-sugg__item, .uhbk button.uhbk-sugg__item:hover, .uhbk button.uhbk-sugg__item:focus, .uhbk button.uhbk-sugg__item:active { display: block !important; width: 100%; text-align: left; background: #fff !important; color: var(--uhbk-ink) !important; border: 0 !important; border-radius: 0 !important; padding: 10px 12px !important; box-shadow: none !important; text-transform: none !important; letter-spacing: normal !important; line-height: 1.35 !important; font-weight: 400; }
.uhbk button.uhbk-sugg__item:hover, .uhbk button.uhbk-sugg__item:focus { background: var(--uhbk-soft) !important; }
.uhbk-sugg__item strong { display: block; }
.uhbk-sugg__item span { font-size: .88rem; color: #666; }
.uhbk-sugg__msg { margin: 6px 0 0; color: #666; font-size: .92rem; }
.uhbk button.uhbk-sugg__manual { margin-top: 8px; display: inline-block; }
.uhbk-sugg__by { margin: 4px 0 0; font-size: .75rem; color: #888; }
