/**
 * Kund / dokument-designsystem
 * Tokens: :root i app.css (--doc-*, --prose-*)
 * Spec: context/customer-design-system.md
 * Referens: /design/customer-design-system.html
 *
 * Arkitektur (best practice):
 * 1. Prose-motor — elementbaserad typografi i .doc-prose / .col (rubrik → innehåll)
 * 2. Layout — page, section, grid
 * 3. Komponenter — card, form, media (utan prose-hacks)
 * 4. Legacy-alias — quote-render, block-title (tills migrering klar)
 *
 * Portal (pris, hero, accept): app.css
 */

/* ========== Sidram ========== */

.customer-view > main.page,
.customer-view main.page {
  max-width: none;
  width: 100%;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

.customer-view main.page:has(.page-logo) {
  position: relative;
}

.customer-view .page,
.quote-view .quote-page {
  padding-top: var(--doc-pad-top);
}

.customer-view main.page:has(.page-logo) {
  padding-top: 0;
}

.page-header,
.quote-meta {
  max-width: var(--doc-width);
  margin: 0 auto;
  padding: var(--doc-header-pad-y) var(--doc-pad-x) var(--doc-header-pad-bottom);
}

/* Sidhuvud med viewport-logotyp (samma läge som quote-hero-logo) */
.page-header:has(.page-logo) {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: calc(var(--doc-logo-top-mobile) + var(--doc-logo-height-mobile) + var(--doc-logo-gap-below)) 0
    var(--doc-header-pad-bottom);
}

@media (min-width: 769px) {
  .page-header:has(.page-logo) {
    padding-top: calc(var(--doc-logo-top) + var(--doc-logo-height) + var(--doc-logo-gap-below));
  }
}

.page-header:has(.page-logo) > :not(.page-logo) {
  max-width: var(--doc-width);
  margin-inline: auto;
  padding-inline: var(--doc-pad-x);
  width: 100%;
  box-sizing: border-box;
}

.doc-content,
.quote-view .quote-render {
  padding: var(--doc-content-pad-y) var(--doc-pad-x);
  max-width: min(var(--doc-width), 100%);
  margin: 0 auto;
  min-width: 0;
}

.page-header + .doc-content {
  padding-top: var(--doc-space-2);
}

.doc-content > .section:first-child,
.quote-render > .section:first-child {
  padding-top: 0;
}

/* ========== Sidhuvud (utanför prose) ========== */

h1.heading-display,
.heading-display,
.quote-meta-project,
h1.quote-meta-project {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--doc-heading-display);
  font-weight: var(--doc-heading-weight-display);
  line-height: 1.06;
  letter-spacing: -0.038em;
  color: var(--text-color);
}

.text-meta,
.quote-meta-date {
  margin-top: var(--doc-space-1);
  font-size: var(--doc-text-meta);
  letter-spacing: 0.12em;
  opacity: 0.55;
}

.text-lead,
.lead {
  margin: var(--doc-lead-before) 0 0;
  font-size: var(--doc-text-lead);
  font-weight: 300;
  line-height: 1.55;
  color: var(--text-color);
}

.heading-display,
.text-meta,
.quote-meta-project,
.quote-meta-date,
.doc-content p,
.doc-content li,
.quote-render p,
.quote-render li,
.quote-page #metaText {
  overflow-wrap: break-word;
}

/* Kapitelrubrik direkt under section (utanför kolumn) */
.doc-content .section > h2.heading-1,
.doc-content .section > .heading-1,
.quote-render .section > h2.quote-section-heading,
.quote-render .section > h2.heading-1 {
  margin: 0 0 var(--prose-mb-h2);
  font-family: var(--font-display);
  font-size: var(--doc-heading-1);
  font-weight: var(--doc-heading-weight-1);
  letter-spacing: -0.036em;
  line-height: 1.14;
  color: var(--text-color);
}

/* ========== Prose-motor ========== */
/*
 * Kontexter där editorial HTML lever: explicit .doc-prose eller innehållskolumn.
 * Spacing: stor margin-top vid nytt block, liten margin-bottom (rubrik → text under).
 * Se USWDS Typography, Bringhurst 2.2.2.
 */

.doc-prose,
.doc-content .col,
.quote-render .col {
  font-size: var(--doc-text-body);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: var(--prose-leading);
  color: var(--text-color);
}

/* — Rubrikstorlek per element (1:1 outline) — */

.doc-prose h2,
.doc-content .col h2,
.quote-render .col h2,
.doc-prose h2.heading-1,
.doc-content .col h2.heading-1,
.quote-render .col h2.heading-1,
.doc-prose h2.block-title,
.doc-content .col h2.block-title,
.quote-render .col h2.block-title,
.doc-prose h2.quote-section-heading,
.doc-content .col h2.quote-section-heading,
.quote-render .col h2.quote-section-heading {
  font-family: var(--font-display);
  font-size: var(--doc-heading-1);
  font-weight: var(--doc-heading-weight-1);
  letter-spacing: -0.036em;
  line-height: 1.14;
  color: var(--text-color);
}

.doc-prose h3,
.doc-content .col h3,
.quote-render .col h3,
.doc-prose h3.heading-2,
.doc-content .col h3.heading-2,
.quote-render .col h3.heading-2,
.doc-prose h3.price-spec-section-title,
.doc-content .col h3.price-spec-section-title,
.quote-render .col h3.price-spec-section-title,
.doc-content .col h3.block-title:not(.heading-3),
.quote-render .col h3.block-title:not(.heading-3) {
  font-family: var(--font-display);
  font-size: var(--doc-heading-2);
  font-weight: var(--doc-heading-weight-2);
  line-height: 1.2;
  letter-spacing: -0.026em;
  color: var(--text-color);
}

.doc-prose h4,
.doc-content .col h4,
.quote-render .col h4,
.doc-prose h4.heading-3,
.doc-content .col h4.heading-3,
.quote-render .col h4.heading-3,
.doc-content .col h4.block-title,
.quote-render .col h4.block-title {
  font-family: var(--font-display);
  font-size: var(--doc-heading-3);
  font-weight: var(--doc-heading-weight-3);
  letter-spacing: -0.024em;
  line-height: 1.26;
  color: var(--text-color);
}

.doc-prose h5,
.doc-content .col h5,
.quote-render .col h5,
.doc-prose h5.heading-4,
.doc-content .col h5.heading-4,
.quote-render .col h5.heading-4,
.doc-content .col h5.block-title,
.quote-render .col h5.block-title {
  font-family: var(--font-display);
  font-size: var(--doc-heading-4);
  font-weight: var(--doc-heading-weight-4);
  letter-spacing: -0.02em;
  line-height: 1.32;
  color: var(--text-color);
}

.doc-prose h6,
.doc-content .col h6,
.quote-render .col h6 {
  font-family: var(--font-display);
  font-weight: var(--doc-heading-weight-4);
}

/* Legacy: heading-3 på h3 (fel nivå) — behåll utseende tills HTML migrerats */
.doc-prose h3.heading-3,
.doc-content .col h3.heading-3,
.quote-render .col h3.heading-3 {
  font-family: var(--font-display);
  font-size: var(--doc-heading-3);
  font-weight: var(--doc-heading-weight-3);
  letter-spacing: -0.024em;
  line-height: 1.26;
  color: var(--text-color);
}

.doc-prose h4.heading-4,
.doc-content .col h4.heading-4,
.quote-render .col h4.heading-4 {
  font-family: var(--font-display);
  font-size: var(--doc-heading-4);
  font-weight: var(--doc-heading-weight-4);
  letter-spacing: -0.02em;
  line-height: 1.32;
  color: var(--text-color);
}

/* — Vertikal rytm: margin-top (nytt block) + margin-bottom (klistra mot innehåll) — */

.doc-prose h2,
.doc-content .col h2,
.quote-render .col h2 {
  margin: var(--prose-mt-h2) 0 var(--prose-mb-h2);
}

.doc-prose h3,
.doc-content .col h3,
.quote-render .col h3 {
  margin: var(--prose-mt-h3) 0 var(--prose-mb-h3);
}

.doc-prose h4,
.doc-content .col h4,
.quote-render .col h4 {
  margin: var(--prose-mt-h4) 0 var(--prose-mb-h4);
}

.doc-prose h5,
.doc-content .col h5,
.quote-render .col h5 {
  margin: var(--prose-mt-h5) 0 var(--prose-mb-h5);
}

.doc-prose h6,
.doc-content .col h6,
.quote-render .col h6 {
  margin: var(--prose-mt-h5) 0 var(--prose-mb-h5);
  font-size: var(--doc-heading-4);
}

/* Första barn: inget extra ovan */
.doc-prose > :is(h2, h3, h4, h5, h6):first-child,
.doc-content .col > :is(h2, h3, h4, h5, h6):first-child,
.quote-render .col > :is(h2, h3, h4, h5, h6):first-child {
  margin-top: 0;
}

/* Underpunkt direkt under avsnittsrubrik (t.ex. Roller → Magnus) */
.doc-prose h2 + h3,
.doc-content .col h2 + h3,
.quote-render .col h2 + h3 {
  margin-top: var(--prose-mt-h3-tight);
}

/* Avsnittsrubrik → första post (t.ex. Roller → Magnus), inte tight etikett-avstånd */
.doc-prose h3 + h4,
.doc-content .col h3 + h4,
.quote-render .col h3 + h4 {
  margin-top: var(--prose-mt-h4-section);
}

.doc-prose h4 + h5,
.doc-content .col h4 + h5,
.quote-render .col h4 + h5 {
  margin-top: var(--prose-mt-h5-tight);
}

/* Nytt block efter avslutat innehåll */
.doc-prose :is(p, ul, ol, .text-muted, .text-body, .block-text-body, .notice, .card, .meta-block, .button, button) + h3,
.doc-content .col :is(p, ul, ol, .text-muted, .text-body, .block-text-body, .notice, .card, .meta-block, .button, button) + h3,
.quote-render .col :is(p, ul, ol, .text-muted, .muted, .block-text-body, .notice, .card, .meta-block, .button, button) + h3 {
  margin-top: var(--prose-mt-h3);
}

.doc-prose :is(p, ul, ol, .text-muted, .text-body, .block-text-body, .notice, .card, .meta-block, .button, button) + h4,
.doc-content .col :is(p, ul, ol, .text-muted, .text-body, .block-text-body, .notice, .card, .meta-block, .button, button) + h4,
.quote-render .col :is(p, ul, ol, .text-muted, .muted, .block-text-body, .notice, .card, .meta-block, .button, button) + h4 {
  margin-top: var(--prose-mt-h4-flow);
}

.doc-prose :is(p, ul, ol, .text-muted, .text-body, .block-text-body) + h5,
.doc-content .col :is(p, ul, ol, .text-muted, .text-body, .block-text-body) + h5,
.quote-render .col :is(p, ul, ol, .text-muted, .muted, .block-text-body) + h5 {
  margin-top: var(--prose-mt-h5-flow);
}

/* Rubrik → följande innehåll: inget extra margin-top */
.doc-prose :is(h2, h3, h4, h5, h6) + *,
.doc-content .col :is(h2, h3, h4, h5, h6) + *,
.quote-render .col :is(h2, h3, h4, h5, h6) + * {
  margin-top: 0;
}

/* Meta-rad (omfattning m.m.) efter brödtext */
.doc-prose p + p.text-muted,
.doc-content .col p + p.text-muted,
.quote-render .col p + p.text-muted,
.doc-prose p + p.omfattning,
.doc-content .col p + p.omfattning,
.quote-render .col p + p.omfattning {
  margin-top: var(--prose-meta-gap);
}

/* CTA-rad (knapp i eget stycke) */
.doc-prose p:has(> .button),
.doc-content .col p:has(> .button),
.quote-render .col p:has(> .button),
.doc-prose p:has(> button.button),
.doc-content .col p:has(> button.button),
.quote-render .col p:has(> button.button) {
  margin-top: var(--prose-action-gap);
}

/* Upprepade poster: top-down spacing (Every Layout / design systems) */
.doc-items {
  display: flex;
  flex-direction: column;
  gap: var(--doc-item-gap);
}

.doc-item > :is(h2, h3, h4, h5, h6):first-child {
  margin-top: 0;
}

/* Casting: röstprov under rollkort */
.casting-voice-intro {
  margin-bottom: 1.5rem;
}

.casting-voice-intro ol {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
}

.casting-voice-intro li + li {
  margin-top: 0.35rem;
}

.casting-voice-panel {
  margin: 0.75rem 0 1.25rem;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: rgba(14, 61, 58, 0.02);
  overflow: hidden;
}

.casting-voice-panel__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-color);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.casting-voice-panel__summary::-webkit-details-marker {
  display: none;
}

.casting-voice-panel__summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid var(--muted-color);
  border-bottom: 1.5px solid var(--muted-color);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  margin-top: -0.15rem;
}

.casting-voice-panel[open] .casting-voice-panel__summary {
  border-bottom: 1px solid var(--border-color);
}

.casting-voice-panel[open] .casting-voice-panel__summary::after {
  transform: rotate(-135deg);
  margin-top: 0.15rem;
}

.casting-voice-panel .casting-lines {
  margin: 0;
  padding: 1rem;
}

.casting-lines {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.casting-line {
  margin: 0;
}

.casting-line__label {
  margin: 0 0 0.35rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-color);
}

.casting-line__context {
  margin: 0 0 0.5rem;
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--muted-color);
  line-height: 1.45;
}

.casting-line__text {
  margin: 0;
  padding: 0.85rem 1rem;
  border-left: 3px solid rgba(14, 61, 58, 0.35);
  background: rgba(14, 61, 58, 0.04);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-color);
}

/* — Brödtext och listor — */

.doc-prose p,
.doc-content .col p,
.quote-render .col p {
  margin: 0 0 var(--prose-p-after);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.doc-prose li,
.doc-content .col li,
.quote-render .col li {
  margin-bottom: var(--doc-space-1);
}

.doc-prose ul,
.doc-prose ol,
.doc-content .col ul,
.doc-content .col ol,
.quote-render .col ul,
.quote-render .col ol {
  margin: 0 0 var(--prose-p-after) 18px;
  padding: 0;
}

.doc-prose ol,
.doc-content .col ol,
.quote-render .col ol {
  list-style-type: decimal;
}

/* Redaktörstext med radbrytningar (offert) — inte statisk HTML */
.block-text-body {
  white-space: pre-line;
}

.text-muted,
.doc-prose .text-muted,
.doc-content .col .text-muted,
.quote-render .col .text-muted,
.quote-view .muted,
.customer-view .muted {
  color: var(--muted-color);
  font-size: inherit;
  font-weight: 300;
  line-height: inherit;
}

.doc-prose a:not(.button):not([class*="button"]),
.doc-content .col a:not(.button):not([class*="button"]),
.quote-render .col a:not(.button):not([class*="button"]),
.quote-meta a:not(.button):not([class*="button"]),
.page-header a:not(.button):not([class*="button"]) {
  color: var(--accent-color);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.doc-prose a:not(.button):not([class*="button"]):hover,
.doc-content .col a:not(.button):not([class*="button"]):hover,
.quote-render .col a:not(.button):not([class*="button"]):hover,
.quote-meta a:not(.button):not([class*="button"]):hover,
.page-header a:not(.button):not([class*="button"]):hover {
  color: var(--color-accent-primary-hover);
}

/* ========== Avstånd: sektioner och grid ========== */

.doc-content .section,
.quote-render .section {
  padding: var(--doc-section-pad-top) 0 var(--doc-section-pad-bottom) 0;
}

.doc-content > .section ~ .section,
.quote-render > section.section ~ section.section {
  padding-top: var(--doc-space-chapter);
}

.doc-content .grid,
.quote-render .cols {
  display: grid;
  gap: var(--doc-space-3);
  grid-template-columns: 1fr;
  min-width: 0;
}

.doc-content .grid > .col,
.quote-render .cols > .col {
  min-width: 0;
}

@media (min-width: 760px) {
  .doc-content .grid,
  .quote-render .cols {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .doc-content .grid > .col,
  .quote-render .cols > .col {
    grid-column: span 12;
  }

  .doc-content .col-span-1,
  .quote-render .cols > .col.span-1 { grid-column: span 1; }
  .doc-content .col-span-2,
  .quote-render .cols > .col.span-2 { grid-column: span 2; }
  .doc-content .col-span-3,
  .quote-render .cols > .col.span-3 { grid-column: span 3; }
  .doc-content .col-span-4,
  .quote-render .cols > .col.span-4 { grid-column: span 4; }
  .doc-content .col-span-5,
  .quote-render .cols > .col.span-5 { grid-column: span 5; }
  .doc-content .col-span-6,
  .quote-render .cols > .col.span-6 { grid-column: span 6; }
  .doc-content .col-span-7,
  .quote-render .cols > .col.span-7 { grid-column: span 7; }
  .doc-content .col-span-8,
  .quote-render .cols > .col.span-8 { grid-column: span 8; }
  .doc-content .col-span-9,
  .quote-render .cols > .col.span-9 { grid-column: span 9; }
  .doc-content .col-span-10,
  .quote-render .cols > .col.span-10 { grid-column: span 10; }
  .doc-content .col-span-11,
  .quote-render .cols > .col.span-11 { grid-column: span 11; }
  .doc-content .col-span-12,
  .quote-render .cols > .col.span-12 { grid-column: span 12; }
}

/* ========== Sidhuvud: logotyp ========== */

.page-logo,
.work-casting__logo {
  position: absolute;
  top: var(--doc-logo-top-mobile);
  left: var(--doc-logo-left-mobile);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  margin: 0;
  text-decoration: none;
}

.page-logo img,
.work-casting__logo img {
  height: var(--doc-logo-height-mobile);
  width: auto;
  display: block;
}

.page-logo:hover,
.work-casting__logo:hover {
  text-decoration: none;
  opacity: 0.82;
}

@media (min-width: 769px) {
  .page-logo,
  .work-casting__logo {
    top: var(--doc-logo-top);
    left: var(--doc-logo-left);
  }

  .page-logo img,
  .work-casting__logo img {
    height: var(--doc-logo-height);
  }
}

/* ========== Etikett / kicker ========== */

.doc-prose .kicker,
.doc-content .kicker,
.quote-render .kicker,
.page-header .kicker,
.quote-meta .kicker {
  font-size: var(--doc-text-meta);
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--muted-color);
  margin: 0 0 var(--doc-space-1) 0;
}

/* ========== Paneler ========== */

.notice,
.doc-prose .notice,
.doc-content .col .notice,
.quote-render .col .notice {
  border: 1px solid rgba(14, 61, 58, 0.22);
  background: rgba(14, 61, 58, 0.07);
  border-radius: 12px;
  padding: 10px 12px;
  color: rgba(10, 10, 10, 0.82);
  margin: var(--doc-notice-margin-y) 0;
}

.card,
.meta-block {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: var(--doc-card-pad-y) var(--doc-card-pad-x);
  margin: var(--doc-card-pad-y) 0;
  box-shadow: var(--shadow);
}

.card > :is(h2, h3, h4, h5):first-child,
.meta-block > :is(h2, h3, h4, h5):first-child,
.card__title {
  margin: 0 0 var(--prose-mb-h4);
  font-family: var(--font-display);
  font-size: var(--doc-heading-3);
  font-weight: var(--doc-heading-weight-3);
  letter-spacing: -0.024em;
  line-height: 1.26;
  color: var(--text-color);
}

.card p:last-child,
.meta-block p:last-child {
  margin-bottom: 0;
}

.card strong,
.meta-block strong {
  font-weight: 500;
  color: var(--text-color);
}

/* ========== Adresspanel ========== */

.address-panel,
.quote-address-window {
  margin: var(--doc-address-margin-y);
}

.address-panel__grid,
.quote-address-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--doc-address-gap);
  padding: var(--doc-address-pad-y) var(--doc-address-pad-x);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: rgba(10, 10, 10, 0.02);
}

.address-panel__meta,
.quote-address-meta {
  margin-top: 10px;
}

@media (max-width: 680px) {
  .address-panel__grid,
  .quote-address-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ========== Media ========== */

.doc-prose .attachments a,
.doc-content .col .attachments a,
.quote-render .col .attachments a {
  display: inline-block;
  margin: 0 10px 8px 0;
}

.doc-prose .video-embed,
.doc-content .col .video-embed,
.quote-render .col .video-embed {
  border-radius: 0;
  border: 0;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
  margin: 0 0 var(--doc-space-2) 0;
}

.doc-prose .video-embed iframe,
.doc-content .col .video-embed iframe,
.quote-render .col .video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.doc-prose .image-block,
.doc-content .col .image-block,
.quote-render .col .image-block {
  margin: 0 auto var(--doc-space-2);
}

.doc-prose .image-block.w-1-4,
.doc-content .col .image-block.w-1-4,
.quote-render .col .image-block.w-1-4 { max-width: 25%; }
.doc-prose .image-block.w-1-3,
.doc-content .col .image-block.w-1-3,
.quote-render .col .image-block.w-1-3 { max-width: 33.333%; }
.doc-prose .image-block.w-1-2,
.doc-content .col .image-block.w-1-2,
.quote-render .col .image-block.w-1-2 { max-width: 50%; }
.doc-prose .image-block.w-2-3,
.doc-content .col .image-block.w-2-3,
.quote-render .col .image-block.w-2-3 { max-width: 66.666%; }
.doc-prose .image-block.w-1-1,
.doc-content .col .image-block.w-1-1,
.quote-render .col .image-block.w-1-1 { max-width: 100%; }

.doc-prose .image-block img,
.doc-content .col .image-block img,
.quote-render .col .image-block img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  border: 0;
}

.doc-prose .image-caption,
.doc-content .col .image-caption,
.quote-render .col .image-caption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted-color);
}

@media (max-width: 640px) {
  .doc-prose .image-block:is(.w-1-4, .w-1-3, .w-1-2, .w-2-3),
  .doc-content .col .image-block:is(.w-1-4, .w-1-3, .w-1-2, .w-2-3),
  .quote-render .col .image-block:is(.w-1-4, .w-1-3, .w-1-2, .w-2-3) {
    max-width: 100%;
  }
}

/* ========== Knappar ========== */

.customer-view .button,
.customer-view button.button,
.quote-view .button,
.quote-view button.button,
.doc-content .button,
.doc-content button.button,
:is(.form, .work-form) .button,
:is(.form, .work-form) button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  background: #fff;
  color: var(--text-color);
  font-family: var(--font-main);
  font-weight: var(--doc-button-font-weight);
  font-size: var(--doc-button-font-size);
  line-height: var(--doc-button-line-height);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.customer-view .button:hover,
.customer-view button.button:hover,
.quote-view .button:hover,
.quote-view button.button:hover,
.doc-content .button:hover,
.doc-content button.button:hover,
:is(.form, .work-form) .button:hover,
:is(.form, .work-form) button.button:hover {
  transform: translateY(-1px);
}

.customer-view .button.primary,
.customer-view .button--primary,
.customer-view button.button.primary,
.customer-view button.button--primary,
.quote-view .button.primary,
.quote-view .button--primary,
.quote-view button.button.primary,
.quote-view button.button--primary,
.doc-content .button.primary,
.doc-content .button--primary,
.doc-content button.button.primary,
.doc-content button.button--primary,
:is(.form, .work-form) .button.primary,
:is(.form, .work-form) .button--primary,
:is(.form, .work-form) button.button.primary,
:is(.form, .work-form) button.button--primary {
  background: var(--accent-color);
  border-color: rgba(14, 61, 58, 0.38);
  color: #fff;
}

.customer-view .button:focus,
.customer-view button.button:focus,
.quote-view .button:focus,
.quote-view button.button:focus,
.doc-content .button:focus,
.doc-content button.button:focus,
:is(.form, .work-form) .button:focus,
:is(.form, .work-form) button.button:focus {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}

.customer-view .button:disabled,
.customer-view button.button:disabled,
.quote-view .button:disabled,
.quote-view button.button:disabled,
.doc-content .button:disabled,
.doc-content button.button:disabled,
:is(.form, .work-form) .button:disabled,
:is(.form, .work-form) button.button:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

/* ========== Formulär ========== */

:is(.form, .work-form) {
  margin-top: var(--doc-card-pad-y);
  padding: var(--doc-form-pad);
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

:is(.form, .work-form) label {
  display: block;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.35rem;
  color: var(--text-color);
}

:is(.form, .work-form) .field {
  margin-bottom: 1.1rem;
}

:is(.form, .work-form) input[type="text"],
:is(.form, .work-form) input[type="email"],
:is(.form, .work-form) input[type="tel"],
:is(.form, .work-form) input[type="file"],
:is(.form, .work-form) select,
:is(.form, .work-form) textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font: inherit;
  font-weight: 400;
  background: var(--bg-color);
  color: var(--text-color);
}

:is(.form, .work-form) textarea {
  min-height: 5rem;
  resize: vertical;
}

:is(.form, .work-form) input:focus,
:is(.form, .work-form) select:focus,
:is(.form, .work-form) textarea:focus {
  outline: 2px solid var(--focus-color);
  outline-offset: 1px;
}

:is(.form, .work-form) .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--doc-space-3);
}

:is(.form, .work-form) .checkbox-field {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-weight: 300;
  font-size: var(--doc-footnote-size);
  color: var(--text-color);
}

:is(.form, .work-form) .checkbox-field input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

:is(.form, .work-form) .hint {
  font-size: 13px;
  font-weight: 300;
  color: var(--muted-color);
  margin-top: 0.3rem;
}

:is(.form, .work-form) .hp {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.privacy-note,
.text-footnote {
  font-size: var(--doc-footnote-size);
  font-weight: 300;
  color: var(--muted-color);
  margin-top: 1rem;
  line-height: 1.55;
}

.form-message--error,
.form-error {
  background: var(--color-danger-soft);
  color: var(--color-danger);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.form-message--notice {
  background: var(--color-accent-highlight-soft);
  border: 1px solid rgba(187, 140, 46, 0.35);
  color: var(--text-color);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.form-message--notice strong,
.casting-guardian-notice strong {
  color: var(--color-accent-highlight-hover);
}

.form-message--notice p {
  margin: 0;
}

.casting-guardian-notice {
  background: var(--color-accent-highlight-soft);
  border: 1px solid rgba(187, 140, 46, 0.35);
  color: var(--text-color);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.form-message--success,
.form-success {
  background: var(--color-accent-primary-soft);
  border: 1px solid rgba(14, 61, 58, 0.2);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  text-align: center;
  scroll-margin-top: 1.25rem;
}

.form-message--success h2,
.form-success h2 {
  border: none;
  margin: 0 0 0.5rem;
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--doc-heading-1);
  font-weight: var(--doc-heading-weight-1);
  color: var(--color-accent-primary);
}

.omfattning {
  color: var(--muted-color);
}

@media (max-width: 640px) {
  :is(.form, .work-form) .field-row {
    grid-template-columns: 1fr;
  }
}

#ansok,
[id^="role-"] {
  scroll-margin-top: 1.25rem;
}

:is(.form, .work-form) select.role-highlight {
  animation: rolePulse 1.2s ease;
}

@keyframes rolePulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
  30% {
    box-shadow: 0 0 0 3px var(--color-accent-highlight-soft);
  }
}

/* Casting stängd */
.casting-closed-faq .heading-2 {
  margin-top: 0;
}

.casting-closed-faq .heading-3 {
  margin-top: 1.25rem;
  margin-bottom: 0.35rem;
}

.casting-closed-faq p {
  margin-top: 0;
}

.casting-closed-signoff {
  margin-top: 1.75rem;
  line-height: 1.55;
}

.casting-closed-home {
  margin-top: 0.75rem;
}

.casting-closed-faq {
  margin-top: 2rem;
}