/* ==============================================
   QUOTE SECTION (begär offert page)
   ============================================== */
.quote-section {
  padding: var(--section-spacing-desktop) 0;
  background: var(--cream);
}
.quote-section-inner {
  width: calc(100% - 48px);
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: 40px;
  align-items: start;
}
/*
   A form with a grid in it needs the width the grid was drawn for. The quote page's form is
   ninety-seven fields in rows of three and four; in the narrower of two columns those rows
   come out at 150px a field. When the form has rows, it takes the page and the reassurances
   sit under it.
*/
.quote-section-inner:has(.ff-t-container) {
  grid-template-columns: minmax(0, 1fr);
}
.quote-section-inner:has(.ff-t-container) .contact-info-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px 32px;
  align-items: start;
}
/* The dividers are for a column of items, not a row of them. */
.quote-section-inner:has(.ff-t-container) .contact-info-divider {
  display: none;
}
.quote-section .hero-form-card {
  box-shadow: 0 16px 40px rgba(32, 32, 30, 0.08);
}
.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.social-link {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--brand-orange);
  background: var(--white);
  transition: transform var(--transition), border-color var(--transition), color var(--transition);
}
.social-link:hover {
  transform: translateY(-2px);
  border-color: var(--brand-orange);
  color: var(--brand-orange-dark);
}
.footer .social-link {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
}
.footer .social-link:hover {
  color: var(--brand-orange-light);
  border-color: var(--brand-orange);
}
@media (max-width: 768px) {
  .quote-section {
    padding: var(--section-spacing-mobile) 0;
  }
  .quote-section-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* Twelve rows at 7px apiece inside 28px of padding is a wall of figures on a phone.
       Less padding around the panel buys width for the labels; more padding inside each
       row buys the separation that width alone does not. */
  .price-quote {
    padding: 20px 16px;
    margin-top: 20px;
  }
  .price-quote-headline {
    padding-bottom: 16px;
  }
  .price-quote-lines {
    margin-top: 16px;
  }
  .price-quote-lines > div {
    padding: 10px 0;
    gap: 12px;
  }
  .price-quote-caveat {
    margin-top: 16px;
    text-align: left;
  }
}
/* Optional section header — the design's quote page leads with the page hero instead. */
.quote-section .quote-header {
  max-width: var(--container);
  margin: 0 auto 40px;
  padding-inline: 24px;
  text-align: center;
}
.quote-section .quote-header .eyebrow {
  display: block;
  margin-bottom: 10px;
}
/* Arriving at #offert-form from the hero teaser: the header is sticky, so an unadjusted
   jump puts the card's own heading underneath it. */
.quote-section .hero-form-card {
  scroll-margin-top: 104px;
}
/* ==============================================
   PRIS DIREKT — the price the calculator works out
   Sits under the form, hidden until there is something to show.
   ============================================== */
/* Sized like the form's own submit, which now sits below the price table: the two are the
   same action at two stages and should not look like different kinds of button. */
.price-quote-button {
  margin-top: 8px;
}
.price-quote {
  margin-top: 28px;
  padding: 28px;
  border: 1px solid var(--brand-orange-light);
  border-radius: var(--radius-lg);
  background: var(--brand-orange-tint);
  animation: ffm-thanks 320ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
.price-quote[hidden] {
  display: none;
}
.price-quote-headline {
  text-align: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--brand-orange-light);
}
.price-quote-label {
  display: block;
  font-size: var(--font-size-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-soft);
}
.price-quote-total {
  display: block;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.price-quote-note {
  margin: 4px 0 0;
  font-size: var(--font-size-small);
  color: var(--text-soft);
}
.price-quote-lines {
  margin: 20px 0 0;
  display: grid;
  gap: 2px;
}
.price-quote-lines > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(243, 146, 1, 0.35);
}
.price-quote-lines > div[hidden] {
  display: none;
}
.price-quote-lines dt {
  color: var(--text-soft);
  font-size: var(--font-size-small);
  /* The label is the half that should wrap when the row runs out of width. min-width
           is what lets it: a flex item will not shrink below its longest word without it,
           and "Transportör och ansvarsförsäkring" is a long word. */
  flex: 1 1 auto;
  min-width: 0;
}
.price-quote-lines dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  /* Never mid-figure: overflow-wrap: anywhere here broke "12 500 kr" across two
           lines on a phone, which is where the table looked most cramped. */
  flex: 0 0 auto;
  white-space: nowrap;
}
.price-quote-sum {
  font-weight: 700;
}
.price-quote-sum dt {
  color: var(--text);
  font-weight: 700;
}
/* The submit sits under the price table now, and needs air between the two. */
.price-quote + .ff_submit_btn_wrapper {
  margin-top: 24px;
}
.price-quote-caveat {
  margin: 18px 0 0;
  font-size: var(--font-size-small);
  color: var(--text-soft);
  text-align: center;
  text-wrap: balance;
}
/*# sourceMappingURL=style.css.map */
/*# sourceMappingURL=data:application/json;charset=utf8;base64,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 */