@charset "UTF-8";
/* The shared .kk-contact-form CSS was written for the bespoke blocks where the
   input sits inside the label. Here label + input are siblings, so retarget the
   spacing: a tight gap between a label and its own input, and clear separation
   between fields. Scoped to the generic form block so bespoke blocks are untouched. */
.section-block--form .kk-contact-form__field {
  margin-bottom: 1.15rem;
}

/* The acceptance checkbox is the last thing before the send button and reads as
   one more field, so it takes the same gap above it as the fields take between
   themselves. It had none: `.kk-contact-form__consent` sets `margin: 0 0 1.25rem`
   and the field above it contributes only its own bottom margin, which on a form
   that never loaded this stylesheet was nothing at all. */
.section-block--form .kk-contact-form__consent {
  margin-top: 1.15rem;
}

.section-block--form .kk-contact-form__field .kk-contact-form__label {
  margin-bottom: 0.3rem;
}

.section-block--form .kk-address__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.section-block--form .kk-required {
  color: #dc2626;
}

.section-block--form .kk-policy-link {
  color: var(--brand, #31522e);
  text-decoration: underline;
  font-weight: 600;
}

/* Consent/terms: align the checkbox to the first text line's centre (not the very
   top), so it lines up with the label on one line and stays put when it wraps. */
.section-block--form .kk-contact-form__consent {
  align-items: flex-start;
}

.section-block--form .kk-contact-form__consent > input[type=checkbox] {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin: 0.2rem 0 0;
}

.section-block--form .kk-contact-form__consent > span {
  line-height: 1.4;
}

.section-block--form .kk-wizard__nav button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Why the send button is down. Sits immediately above it and only while it is
   down, so it is read in the order the visitor meets the button — a disabled
   button is not focusable, so its `aria-describedby` is never announced on its
   own. Same muted note as the rest of the form's helper text. */
.section-block--form .kk-form-hint {
  margin: 0 0 0.5rem;
  color: #5f6d83;
  font-size: 0.9rem;
}

.section-block--form .kk-form-hint[hidden] {
  display: none;
}

.section-block--form .kk-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.section-block--form .kk-checkboxes__opt {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  padding: 0.6rem 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.section-block--form .kk-checkboxes__opt:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.section-block--form .kk-checkboxes__opt.is-checked,
.section-block--form .kk-checkboxes__opt:has(input:checked) {
  border-color: var(--brand, #31522e);
  background: rgba(49, 82, 46, 0.05);
}

.section-block--form .kk-checkboxes__opt input {
  flex: none;
}

.section-block--form .kk-checkboxes__icon {
  flex: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--brand, #31522e);
}

.section-block--form .kk-checkboxes__text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.section-block--form .kk-checkboxes__label {
  font-weight: 700;
}

.section-block--form .kk-checkboxes__head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.section-block--form .kk-checkboxes__desc {
  color: #64748b;
  font-size: 0.88em;
}

.section-block--form .kk-checkboxes__price {
  flex: none;
  margin-left: auto;
  font-weight: 700;
  color: var(--brand, #31522e);
  background: #f1f5f9;
  border-radius: 1rem;
  padding: 0.15rem 0.6rem;
  font-size: 0.9em;
  white-space: nowrap;
}

/* Same look as the preview .kk-wizard__notice: light-green box with an info
   icon (added via ::before since the markup has no icon element). */
.section-block--form .kk-step-info {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0.5rem 0 0;
  padding: 0.75rem 0.9rem;
  background: #e8f0e6;
  border-radius: var(--radius-md, 4px);
  color: #26401f;
  font-size: 0.95rem;
  line-height: 1.45;
}

/* `line-height: inherit` gives the glyph the same line box as the text beside
   it, so it centres on the first line instead of sitting above it. It was
   `line-height: 1` — a 17.6px box against the text's 22px — nudged down with a
   .1rem margin that only approximated the difference, and only at one font
   size. Aligning to the first line rather than the whole block is deliberate:
   these notes wrap to two or three lines, and an icon centred against all of
   them drifts away from the sentence it introduces. */
.section-block--form .kk-step-info::before {
  font-family: "bootstrap-icons";
  content: "\f431";
  flex: none;
  color: var(--brand, #31522e);
  font-size: 1.1rem;
  line-height: inherit;
}

/* Review step summary: label → value rows built from the filled form. */
.section-block--form .kk-wizard__restart-row {
  margin: 0 0 1rem;
  text-align: center;
}

.section-block--form .kk-wizard__restart-row[hidden] {
  display: none;
}

.section-block--form .kk-form-summary {
  margin: 0.25rem 0 1rem;
}

/* Calmer review list: no per-row rules — groups carry the only separators. */
.section-block--form .kk-form-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.28rem 0.1rem;
}

.section-block--form .kk-form-summary__label {
  color: #64748b;
  flex: 0 1 auto;
  min-width: 5.5rem;
  overflow-wrap: normal;
}

.section-block--form .kk-form-summary__value {
  font-weight: 600;
  text-align: right;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Device / contact info: stack label-over-value on narrow screens so long
   values (emails) take the full width and wrap cleanly, instead of being
   squeezed into a right column beside the label. */
@media (max-width: 560px) {
  .section-block--form .kk-form-summary__card--stacked .kk-form-summary__row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.05rem;
    padding: 0.35rem 0.1rem;
  }
  .section-block--form .kk-form-summary__card--stacked .kk-form-summary__label {
    font-size: 0.8em;
    color: #94a3b8;
  }
  .section-block--form .kk-form-summary__card--stacked .kk-form-summary__value {
    text-align: left;
  }
}
.section-block--form .kk-form-summary__intro {
  color: #64748b;
  margin: 0 0 0.75rem;
}

.section-block--form .kk-form-summary__empty {
  color: #94a3b8;
}

/* Parts-estimate line tied to the pack above it: indented, muted, smaller. */
.section-block--form .kk-form-summary__subrow {
  padding: 0.05rem 0.1rem;
}

.section-block--form .kk-form-summary__subrow .kk-form-summary__label {
  padding-left: 1rem;
  color: #94a3b8;
  font-size: 0.85em;
}

.section-block--form .kk-form-summary__subrow .kk-form-summary__value {
  color: #94a3b8;
  font-weight: 500;
  font-size: 0.85em;
}

/* Total row set apart from the item rows with a divider and heavier type. */
.section-block--form .kk-form-summary__total {
  margin-top: 0.5rem;
  padding-top: 0.6rem;
  border-top: 2px solid #e2e8f0;
}

.section-block--form .kk-form-summary__total .kk-form-summary__label,
.section-block--form .kk-form-summary__total .kk-form-summary__value {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--brand, #31522e);
}

/* Each review section is its own card so they're easy to tell apart. */
.section-block--form .kk-form-summary__card {
  border: 1px solid #e2e8f0;
  border-radius: 0.6rem;
  background: #fff;
  padding: 0.55rem 0.9rem 0.7rem;
  margin-bottom: 0.7rem;
}

.section-block--form .kk-form-summary__group-title {
  font-weight: 700;
  color: #475569;
  font-size: 0.8rem;
  margin: 0 0 0.3rem;
  padding: 0 0 0.35rem;
  border-bottom: 1px solid #f1f5f9;
}

.section-block--form .kk-form-summary__notes {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text, #1c1c1c);
}

/* Cross-sell offers on the preview step: selectable add-ons with a discounted
   price shown against the struck-through normal price. */
/* The cross-sell block is a card too, matching the review sections. */
.section-block--form .kk-xsell {
  margin: 0 0 0.7rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.6rem;
  background: #fff;
  padding: 0.7rem 0.9rem 0.8rem;
}

.section-block--form .kk-xsell__heading {
  font-size: 1rem;
  margin: 0 0 0.7rem;
}

.section-block--form .kk-xsell__intro {
  margin: 0 0 0.6rem;
  color: #64748b;
  font-weight: 400;
}

/* Offer header: icon before the title. */
.section-block--form .kk-xsell__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section-block--form .kk-xsell__icon {
  flex: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--brand, #31522e);
}

.section-block--form .kk-xsell__icon svg {
  width: 1.4rem;
  height: 1.4rem;
  display: block;
}

/* Cross-sell offers: quieter than the pack tiles — subtle fill with a light
   border; the brand ring returns when picked. */
.section-block--form .kk-xsell .kk-checkboxes__opt {
  border-color: #e2e8f0;
  background: #f6f8f7;
  padding: 0.5rem 0.7rem;
}

.section-block--form .kk-xsell .kk-checkboxes__opt:hover {
  background: #eef2f0;
  border-color: #cbd5e1;
}

.section-block--form .kk-xsell .kk-checkboxes__opt.is-checked,
.section-block--form .kk-xsell .kk-checkboxes__opt:has(input:checked) {
  border-color: var(--brand, #31522e);
}

/* Match the rest of the preview text sizes (not smaller) and give the content a
   little breathing room under the title. */
.section-block--form .kk-xsell .kk-checkboxes__label {
  font-size: 1rem;
}

.section-block--form .kk-xsell .kk-checkboxes__desc {
  font-size: 0.9rem;
  margin-top: 0.35rem;
}

.section-block--form .kk-xsell__price {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  white-space: nowrap;
}

.section-block--form .kk-xsell__old {
  color: #94a3b8;
  text-decoration: line-through;
  font-size: 0.75em;
}

.section-block--form .kk-xsell__now {
  font-weight: 800;
  color: var(--brand, #31522e);
  font-size: 1.2em;
}

/* Row badges: mark whether a recommended row is an upgrade or a plain offer. */
.section-block--form .kk-xsell__badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.28em 0.5em;
  border-radius: var(--radius, 2px);
  vertical-align: middle;
  white-space: nowrap;
}

.section-block--form .kk-xsell__badge--upgrade {
  background: var(--brand, #31522e);
  color: #fff;
}

.section-block--form .kk-xsell__badge--offer {
  background: #e8f0e6;
  color: var(--brand, #31522e);
}

/* Recommended offers use the same "green tick top-right" affordance as the pack
   tiles: hide the checkbox itself and reveal a check badge when selected. */
.section-block--form .kk-xsell .kk-checkboxes__opt {
  position: relative;
  padding-right: 0.7rem;
}

/* Reserve room for the top-right tick only when checked, so the price sits near
   the right edge in the (default) unchecked state instead of leaving a big gap. */
.section-block--form .kk-xsell .kk-checkboxes__opt.is-checked,
.section-block--form .kk-xsell .kk-checkboxes__opt:has(input:checked) {
  padding-right: 2.2rem;
}

.section-block--form .kk-xsell .kk-checkboxes__opt input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.section-block--form .kk-xsell__check {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--brand, #31522e);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

.section-block--form .kk-xsell .kk-checkboxes__opt.is-checked .kk-xsell__check,
.section-block--form .kk-xsell .kk-checkboxes__opt:has(input:checked) .kk-xsell__check {
  display: flex;
}

/* Circular badges (offer/pack tick, stepper dot): the bootstrap-icon baseline +
   text line-height push the glyph/number off-centre — cancel both so they sit
   dead-centre. */
.section-block--form .kk-xsell__check,
.section-block--form .kk-tile__check,
.section-block--form .kk-stepper__dot {
  line-height: 1;
}

.section-block--form .kk-xsell__check .bi,
.section-block--form .kk-tile__check .bi,
.section-block--form .kk-stepper__dot .bi {
  line-height: 1;
}

.section-block--form .kk-xsell__check .bi::before,
.section-block--form .kk-tile__check .bi::before,
.section-block--form .kk-stepper__dot .bi::before {
  vertical-align: middle;
}

/* On narrow screens stack the offer so the title gets the full card width, and
   move the price into a distinct footer band (like the frontpage service card's
   footer), a different colour from the card body, flush to the card edges. */
@media (max-width: 520px) {
  .section-block--form .kk-xsell .kk-checkboxes__opt {
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 0;
    overflow: hidden;
  }
  /* Full-width brand-green footer band (like the frontpage service-card
     footer). Margins match the card's own padding — incl. the 2.4rem right
     reserved for the check badge — so the band reaches both card edges. */
  .section-block--form .kk-xsell__price {
    margin: 0.6rem -2.4rem 0 -0.7rem;
    padding: 0.6rem 0.7rem;
    background: var(--brand, #31522e);
    justify-content: center;
    align-items: baseline;
    gap: 0.5rem;
  }
  .section-block--form .kk-xsell__price .kk-xsell__old {
    color: rgba(255, 255, 255, 0.6);
  }
  .section-block--form .kk-xsell__price .kk-xsell__now {
    color: #fff;
  }
}
/* "Näytä vaihtoehdot" pill under a selected pack + the alternatives-modal list. */
.section-block--form .kk-form-summary__info {
  display: inline-flex;
  align-items: center;
  margin-left: 0.35rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand, #31522e);
  cursor: pointer;
  font-size: 1.05em;
  line-height: 1;
  vertical-align: middle;
}

.section-block--form .kk-form-summary__info:hover {
  color: var(--brand-dark, #26401f);
}

.section-block--form .kk-form-summary__alt {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--brand, #31522e);
  background: #e8f0e6;
  border: 0;
  border-radius: var(--radius, 2px);
  padding: 0.25em 0.6em;
  cursor: pointer;
  vertical-align: middle;
}

.section-block--form .kk-form-summary__alt:hover {
  background: #d8e6d4;
}

/* Alternatives modal card: same concept as a Suosittelemme card — a light body
   (title + upgrade line) and a full-width coloured footer "button" carrying the
   action + price. Green for an upgrade, warning-orange for a downgrade. */
/* font: inherit — a <button> otherwise uses the tiny UA default instead of the
   16px body font, which shrank the title/argument. */
/* Same look as a Suosittelemme offer card: light body, dark title, muted line,
   coloured footer. font: inherit + explicit colour because a <button> otherwise
   uses the UA default font (tiny) and link-blue text. */
.section-block--form .kk-alt-option {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--text, #1c1c1c);
  background: #f6f8f7;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md, 4px);
  overflow: hidden;
  padding: 0;
  margin-bottom: 0.6rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.section-block--form .kk-alt-option:hover {
  border-color: var(--brand, #31522e);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.section-block--form .kk-alt-option__body {
  padding: 0.75rem 0.85rem;
}

.section-block--form .kk-alt-option__title {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text, #1c1c1c);
}

.section-block--form .kk-alt-option__arg {
  display: block;
  margin-top: 0.25rem;
  color: #64748b;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.4;
}

.section-block--form .kk-alt-option__footer {
  display: block;
  padding: 0.7rem 0.85rem;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
}

.section-block--form .kk-alt-option--upgrade .kk-alt-option__footer {
  background: var(--brand, #31522e);
}

.section-block--form .kk-alt-option--downgrade .kk-alt-option__footer {
  background: #c2410c;
}

/* Tile display for a multi-select group: square cards, each with an icon+title
   header, a description that flexes/clips, and a price footer pinned to the base. */
/* Tile display reuses the frontpage service-card look (.kk-categories__grid +
   .kk-category-card, defined globally in app.scss: 2 cols mobile / 3
   desktop, equal-height cards, icon → title → text → price footer). This only
   layers the interactive selection state on top. */
.section-block--form .kk-category-card.kk-tile {
  position: relative;
  cursor: pointer;
}

/* Larger service-pack tile icons for a clearer, more tappable look. */
.section-block--form [data-service-packs] .kk-category-card__icon {
  font-size: 2.9rem;
}

/* Center the service-pack tiles (incl. a partly-filled last row) instead of
   left-aligning them: flex-wrap + justify-content, keeping the same 1/2/3-column
   counts as the grid it replaces (breakpoints at 600/768px). */
.section-block--form [data-service-packs].kk-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.section-block--form [data-service-packs].kk-tiles > * {
  flex: 0 1 calc(50% - 0.5rem);
}

@media (min-width: 768px) {
  .section-block--form [data-service-packs].kk-tiles > * {
    flex: 0 1 calc(33.333% - 0.667rem);
  }
}
.section-block--form .kk-tile input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.section-block--form .kk-tile .kk-category-card__title {
  font-weight: 700;
}

/* Match the homepage service-category cards' hover feel. Those lift + deep-shadow
   only via `a.kk-category-card:hover`; the booking tiles are <label>s, so mirror it
   explicitly here (the base card already transitions box-shadow + transform). */
.section-block--form .kk-category-card.kk-tile:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.section-block--form .kk-tile.is-checked,
.section-block--form .kk-tile:has(input:checked) {
  border-color: var(--brand, #31522e);
  box-shadow: 0 0 0 2px var(--brand, #31522e);
}

/* Keep the selected ring while still lifting on hover. */
.section-block--form .kk-tile.is-checked:hover,
.section-block--form .kk-tile:has(input:checked):hover {
  box-shadow: 0 0 0 2px var(--brand, #31522e), 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.section-block--form .kk-tile__check {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--brand, #31522e);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

.section-block--form .kk-tile.is-checked .kk-tile__check,
.section-block--form .kk-tile:has(input:checked) .kk-tile__check {
  display: flex;
}

/* The old "Vaihe X / Y" text is kept for screen readers only; the stepper below
   is the visual progress indicator. */
.kk-wizard__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Step progress: numbered dots joined by a connector line; completed steps turn
   green with a tick, the current step is outlined, upcoming steps stay grey. */
/* .section-block--form scope so `padding:0` beats `.section-block ol`'s
   list-indent (1.5rem), which otherwise pushes the whole stepper right. */
.section-block--form .kk-stepper {
  list-style: none;
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0 0 1.25rem;
}

.kk-stepper__step {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
}

.kk-stepper__step:last-child {
  flex: 0 0 auto;
}

.kk-stepper__dot {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  background: #e2e8f0;
  color: #94a3b8;
  border: 2px solid #e2e8f0;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.kk-stepper__step::after {
  content: "";
  flex: 1 1 auto;
  height: 2px;
  min-width: 1rem;
  background: #e2e8f0;
  margin: 0;
  transition: background 0.2s;
}

.kk-stepper__step:last-child::after {
  display: none;
}

.kk-stepper__step.is-current .kk-stepper__dot {
  background: #fff;
  border-color: var(--brand, #31522e);
  color: var(--brand, #31522e);
}

.kk-stepper__step.is-done .kk-stepper__dot {
  background: var(--brand, #31522e);
  border-color: var(--brand, #31522e);
  color: #fff;
}

.kk-stepper__step.is-done::after {
  background: var(--brand, #31522e);
}

/* Mobile: the numbered-dot row can't shrink below ~350px (fixed 2rem dots +
   min-width connectors), so at 6 steps it overflows a phone's width. Swap it for
   a segmented progress bar — one flex-shrinking pill per step, filled up to the
   current one — and surface the otherwise sr-only "Vaihe N / M" label above it. */
@media (max-width: 640px) {
  .kk-wizard__label {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 0.45rem;
    padding: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #5f6d83;
  }
  .kk-stepper {
    gap: 0.3rem;
  }
  .kk-stepper__step,
  .kk-stepper__step:last-child {
    flex: 1 1 0;
  }
  .kk-stepper__step::after {
    display: none;
  }
  .kk-stepper__dot {
    width: 100%;
    height: 0.4rem;
    border-radius: 999px;
    border: 0;
    font-size: 0;
    background: #e2e8f0;
  }
  .kk-stepper__dot > i {
    display: none;
  }
  .kk-stepper__step.is-current .kk-stepper__dot,
  .kk-stepper__step.is-done .kk-stepper__dot {
    background: var(--brand, #31522e);
  }
}
/* flow-root contains child margins (so the animated + resting heights match and
   the form doesn't snap at the end of a step transition) without clipping the
   address typeahead dropdown the way overflow:hidden would. */
.kk-wizard__steps {
  transition: height 0.28s ease;
  display: flow-root;
}

@media (prefers-reduced-motion: reduce) {
  .kk-wizard__steps {
    transition: none;
  }
}
.kk-wizard__step-title {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
}

.section-block--form .kk-wizard__notice {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 1rem 0 0;
  padding: 0.75rem 0.9rem;
  background: #e8f0e6;
  border-radius: var(--radius-md, 4px);
  color: #26401f;
  font-size: 0.95rem;
  line-height: 1.45;
}

.section-block--form .kk-wizard__notice .bi {
  flex: none;
  margin-top: 0.1rem;
  color: var(--brand, #31522e);
  font-size: 1.1rem;
}

.kk-wizard__nav {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
  justify-content: flex-end;
}

.kk-wizard__nav .kk-btn--ghost {
  background: transparent;
  border: 1px solid #cbd5e1;
  color: #334155;
}

.section-block--form .kk-form-help {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  font-size: 0.9em;
  color: #5f6d83;
  flex-wrap: wrap;
}

.section-block--form .kk-form-help__btn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--brand, #31522e);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
}

/* The help/pack modal shells + the per-pack "Sisältö" trigger are styled in
   app.scss (shared with the public price list). */
/* Pickup transport quote result under the address field. */
.section-block--form .kk-transport {
  margin-top: 0.75rem;
  padding: 0.7rem 0.9rem;
  border-radius: 0.5rem;
  font-size: 0.92rem;
  line-height: 1.5;
}

.section-block--form .kk-transport[hidden] {
  display: none;
}

.section-block--form .kk-transport.is-loading {
  background: #f1f5f9;
  color: #475569;
}

.section-block--form .kk-transport.is-free {
  background: #dcfce7;
  color: #166534;
}

.section-block--form .kk-transport.is-priced {
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fed7aa;
}

.section-block--form .kk-transport.is-unavailable {
  background: #f1f5f9;
  color: #64748b;
}

.section-block--form .kk-transport__muted {
  color: #94a3b8;
  font-weight: 400;
}

.section-block--form .kk-transport__offer {
  margin-top: 0.6rem;
}

.section-block--form .kk-transport__offer-title {
  display: block;
  margin-bottom: 0.45rem;
  font-weight: 600;
  color: #9a3412;
}

.section-block--form .kk-transport__list {
  margin-top: 0.2rem;
}

.section-block--form .kk-transport__add-row {
  width: 100%;
  text-align: left;
  background: #fff;
  cursor: pointer;
  font: inherit;
}

.section-block--form .kk-transport__add-row:hover {
  border-color: var(--brand, #31522e);
  background: #f8fafc;
}

.section-block--form .kk-transport__add-icon {
  color: var(--brand, #31522e);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}

.section-block--form .kk-form-summary__free .kk-form-summary__value {
  color: #166534;
  font-weight: 800;
  font-size: 1.12em;
  letter-spacing: 0.02em;
}

.section-block--form .kk-transport__spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid #cbd5e1;
  border-top-color: #475569;
  border-radius: 50%;
  vertical-align: -0.15em;
  animation: kk-transport-spin 0.7s linear infinite;
}

@keyframes kk-transport-spin {
  to {
    transform: rotate(360deg);
  }
}
/* The fallback CTAs are <a> elements, so the section's link colour would tint
   their text; force the primary button's own white so it isn't green-on-green. */
.section-block--form a.kk-btn--primary {
  color: #fff;
}

.section-block--form a.kk-btn--primary:hover {
  color: #fff;
}

.section-block--form .kk-plate {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  flex-wrap: wrap;
}

.section-block--form .kk-plate [data-regnumber] {
  flex: 1 1 8rem;
  margin: 0;
}

.section-block--form .kk-plate__btn {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 8.5rem;
  margin: 0;
}

.section-block--form .kk-plate__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.section-block--form .kk-spinner {
  width: 1.15em;
  height: 1.15em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: kk-spin 0.7s linear infinite;
}

@keyframes kk-spin {
  to {
    transform: rotate(360deg);
  }
}
.section-block--form .kk-plate__result {
  margin-top: 0.6rem;
  padding: 0.6rem 0.8rem;
  border-radius: 0.45rem;
  font-size: 0.95em;
}

.section-block--form .kk-plate__result.is-ok {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}

.section-block--form .kk-plate__result.is-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.section-block--form .kk-form-gate {
  padding: 1.5rem;
  text-align: center;
}

.section-block--form .kk-form-gate__title {
  margin: 0 0 0.5rem;
}

.section-block--form .kk-form-gate__text {
  color: #334155;
  margin: 0 0 1.1rem;
}

/* [hidden] must beat .kk-btn's own display, so hidden nav buttons stay hidden. */
.kk-wizard [hidden] {
  display: none !important;
}

.kk-wizard__nav [data-wizard-next][disabled],
.kk-wizard__nav [data-wizard-submit][disabled] {
  pointer-events: none;
}