/* EVNET Biznes — add-business wizard styles.
   Utbruten ur business.css (våg 3, punkt 60).

   OBS (QA-runda 4): filen laddas INTE längre bara av add-business.html.
   Våg 3:s split flyttade hit hela det responsiva lagret för biznes-skalet
   (.biz-hero-*, .biz-search-*, .biz-category-card, .biz-deal-*, .biz-trust-*,
   .biz-footer-*) men länkade om det bara på formulärsidan — business.html stod
   därför helt utan mobillayout tills den länkades in igen. Allt som läggs här
   utan .add-business-page-scope slår alltså igenom på fler sidor än formuläret. */

/* HEADER: den ryska headern klipper språkväxlaren (QA B2 / QA4 C1). Fixen låg
   här, men gällde då bara formulärsidan. Den bor nu i business.css — sök
   "måste rymma det bredaste språket" — så att den täcker alla biznes-sidor.
   Duplicera den inte hit igen. */

/* =============================================================
   BUSINESS LISTING WIZARD
   ============================================================= */
.biz-form-shell {
  width: min(1320px, calc(100% - 40px));
  margin: 30px auto 90px;
}

.biz-form-intro {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  column-gap: 30px;
  row-gap: 10px;
  padding: 38px 8px 32px;
}
.biz-form-intro h1 { max-width: 760px; margin-top: 14px; font-size: clamp(2.5rem,5vw,5.2rem); line-height: .92; letter-spacing: -.065em; }
.biz-form-intro p { max-width: 650px; margin-top: 18px; color: var(--biz-muted); line-height: 1.7; }
/* Draft-status och ångra-knappen bildar en liten grupp i högerkolumnen. Utan
   explicit placering auto-placeras #draft-undo på rad 2 i 1fr-kolumnen och
   sträcks ut till en fullbreddsremsa (QA B1). */
.biz-draft-state { position: relative; z-index: 2; grid-column: 2; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: 8px; color: var(--biz-muted); font-size: .7rem; font-weight: 700; white-space: nowrap; }
.biz-draft-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--biz-teal); box-shadow: 0 0 0 5px rgba(91,189,183,.13); }
#draft-undo {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(91,189,183,.45);
  border-radius: 999px;
  background: rgba(129,216,208,.13);
  color: var(--tiffany-800, #2a706a);
  font-size: .66rem;
  font-weight: 800;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, transform .2s var(--biz-ease);
}
#draft-undo:hover { border-color: var(--tiffany-500, #5bbdb7); background: rgba(129,216,208,.24); }
#draft-undo:active { transform: translateY(1px); }
#draft-undo:focus-visible { outline: 2px solid var(--tiffany-500, #5bbdb7); outline-offset: 2px; }

.biz-wizard-layout { display: grid; grid-template-columns: 270px minmax(0,1fr); gap: 18px; align-items: start; }

.biz-wizard-rail {
  position: sticky;
  top: 96px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 27px;
  background: rgba(251,253,252,.75);
  box-shadow: var(--biz-shadow-sm);
  backdrop-filter: blur(16px);
}

.biz-wizard-progress { padding: 16px 15px 22px; border-bottom: 1px solid var(--biz-line); }
.biz-wizard-progress-row { display: flex; justify-content: space-between; gap: 10px; color: var(--biz-muted); font-size: .65rem; font-weight: 750; }
.biz-progress-track { height: 6px; margin-top: 11px; overflow: hidden; border-radius: 999px; background: #e5ebe8; }
.biz-progress-fill { width: 16.66%; height: 100%; border-radius: inherit; background: var(--biz-teal); transition: width .45s var(--biz-ease); }
/* QA-runda 5 (D2): mätaren mäter obligatoriska fält, inte steg. Så länge något
   saknas står texten i terrakotta och stapeln i dämpad teal — full teal är
   reserverad för "går att skicka", annars ser en ofullständig annons färdig ut
   precis som den gjorde för testaren. */
#business-progress-label.is-incomplete { color: #b3402f; }
.biz-progress-fill:not(.is-complete) { background: #a8ded9; }

.biz-step-list { display: grid; gap: 4px; margin-top: 12px; }
.biz-step-link {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 7px 10px;
  border: 0;
  border-radius: 15px;
  background: transparent;
  color: var(--biz-muted);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.biz-step-link:hover { background: rgba(91,189,183,.07); }
.biz-step-link.is-active { background: var(--tiffany-700, #37918a); color: #fff; }
.biz-step-link.is-done { color: var(--biz-teal-deep); }
.biz-step-index { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid currentColor; border-radius: 11px; font-size: .64rem; font-weight: 850; }
.biz-step-link.is-active .biz-step-index { border-color: var(--biz-lime); background: var(--biz-lime); color: var(--biz-ink); }
.biz-step-link strong { display: block; font-size: .72rem; color: inherit; }
.biz-step-link small { display: block; margin-top: 2px; font-size: .58rem; color: inherit; opacity: .72; }

.biz-wizard-main {
  min-height: 680px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 32px;
  background: rgba(251,253,252,.82);
  box-shadow: var(--biz-shadow-sm);
  backdrop-filter: blur(18px);
}

.biz-form-step { display: none; animation: bizStepIn .45s var(--biz-ease); }
.biz-form-step.is-active { display: block; }
@keyframes bizStepIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.biz-form-step-head { padding: 38px 42px 28px; border-bottom: 1px solid var(--biz-line); }
.biz-form-step-head-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 26px; }
.biz-form-step-num { display: inline-flex; margin-bottom: 13px; color: var(--biz-teal-deep); font-size: .65rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.biz-form-step-head h2 { font-size: clamp(1.7rem,3vw,2.8rem); line-height: 1; letter-spacing: -.045em; }
.biz-form-step-head p { max-width: 620px; margin-top: 11px; color: var(--biz-muted); font-size: .78rem; line-height: 1.7; }
.biz-head-illustration { flex: 0 0 auto; width: 92px; height: 72px; }

.biz-form-body { padding: 34px 42px 42px; }
.biz-field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 19px; }
.biz-field-grid--3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.biz-field { min-width: 0; }
/* Steg 4 döljer hyresfälten när lokalen inte är hyrd (QA-runda 6, E5). Regeln
   står här och inte på hoppet om webbläsarens standard: `.biz-field` kan när
   som helst få en egen display och då slutar [hidden] att bita. */
.biz-field[hidden] { display: none; }
.biz-field--full { grid-column: 1 / -1; }
.biz-field label,
.biz-field legend { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--biz-ink-soft); font-size: .66rem; font-weight: 800; }
.biz-required { color: #d16c59; }
.biz-help { color: #95a2a2; font-size: .58rem; font-weight: 550; }
/* QA-runda 6, E4. Etikettraden med en knapp bredvid. Knappen låg tidigare INUTI
   <label>, vilket gjorde den otryckbar på iOS (labeln vidarebefordrar trycket
   till fältet). Raden här ger samma visuella resultat utan den fällan — så
   behöver ingen någonsin lägga tillbaka en kontroll inuti en etikett. */
.biz-label-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 8px; }
.biz-label-row > label { flex: 1 1 auto; margin-bottom: 0; }
.biz-label-row > .biz-mini-btn { flex: 0 0 auto; }
/* Utan konsol på telefonen är ett tyst AI-fel osynligt — statusraden är det enda
   stället där "det pågår", "det gick fel" och "svaret var tomt" kan synas. */
.biz-ai-status {
  margin: 8px 0 0;
  padding: 8px 11px;
  border: 1px solid rgba(91,189,183,.35);
  border-radius: 11px;
  background: rgba(129,216,208,.10);
  color: var(--biz-ink-soft, #2a4a47);
  font-size: .66rem;
  font-weight: 700;
  line-height: 1.5;
}
.biz-ai-status[hidden] { display: none; }
.biz-ai-status[data-state="error"] { border-color: rgba(209,108,89,.4); background: #fdf4f1; color: #8a3d2c; }

/* .biz-input/.biz-select/.biz-textarea är delade primitives — bor i business.css */

.biz-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.biz-choice-grid--3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.biz-choice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  min-height: 100px;
  padding: 17px;
  border: 1px solid rgba(16,42,43,.11);
  border-radius: 18px;
  background: rgba(255,255,255,.66);
  cursor: pointer;
  transition: transform .25s var(--biz-ease), border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.biz-choice:hover { transform: translateY(-3px); border-color: rgba(91,189,183,.5); background: #fff; }
.biz-choice input { position: absolute; opacity: 0; pointer-events: none; }
.biz-choice:has(input:checked) { border-color: var(--biz-teal); background: #f4fffd; box-shadow: 0 0 0 3px rgba(91,189,183,.1); }
.biz-choice-icon { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 13px; background: #e1ece8; color: var(--biz-ink); }
.biz-choice:nth-child(2) .biz-choice-icon { background: #d5f5f2; }
.biz-choice:nth-child(3) .biz-choice-icon { background: #a8e8e3; }
.biz-choice:nth-child(4) .biz-choice-icon { background: #eefcfb; }
.biz-choice-icon svg { width: 20px; height: 20px; }
.biz-choice strong { display: block; font-size: .75rem; }
.biz-choice small { display: block; margin-top: 5px; color: var(--biz-muted); font-size: .61rem; line-height: 1.45; }
/* QA-runda 6, E3. Bocken såg avklippt ut på riktig telefon. Två saker låg
   bakom, och båda är åtgärdade här:
   1. ✓-tecknet ärvde sidans teckenstorlek (16px) medan ringen är låst till
      20px. Glyfen sticker då ut ur cirkeln — och växer ytterligare med iOS
      "Större text", vilket är varför emulatorn på 390px inte visade något.
      Egen font-size + line-height + overflow:hidden håller den innanför.
   2. Kortets textspalt kunde tvinga kortet bredare än sin spalt (se
      minmax(0,1fr) i mobilbrytpunkten), och då hamnade hela högerkanten —
      bocken med — utanför skärmen. */
.biz-choice-check {
  position: absolute;
  inset-inline-end: 12px;
  top: 12px;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 20px; height: 20px;
  border: 1px solid #ccd6d3; border-radius: 50%;
  color: transparent;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
}
.biz-choice:has(input:checked) .biz-choice-check { border-color: var(--biz-teal-deep); background: var(--biz-teal-deep); color: #fff; }
/* Flexbarn har min-width:auto som standard: ett långt ryskt ord i <small> kunde
   annars sätta kortets minsta bredd och spränga spalten. */
.biz-choice > span { min-width: 0; }
.biz-choice strong,
.biz-choice small { overflow-wrap: anywhere; }

.biz-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 17px 18px;
  border: 1px solid rgba(16,42,43,.09);
  border-radius: 17px;
  background: rgba(255,255,255,.65);
}
.biz-toggle-row strong { display: block; font-size: .73rem; }
.biz-toggle-row small { display: block; margin-top: 4px; color: var(--biz-muted); font-size: .6rem; }
.biz-switch { position: relative; flex: 0 0 auto; width: 46px; height: 26px; }
.biz-switch input { position: absolute; opacity: 0; }
.biz-switch span { position: absolute; inset: 0; border-radius: 999px; background: #d9e0de; cursor: pointer; transition: background .25s ease; }
.biz-switch span::after { content: ""; position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.12); transition: transform .3s var(--biz-ease); }
.biz-switch input:checked + span { background: var(--biz-teal-deep); }
.biz-switch input:checked + span::after { transform: translateX(20px); }

.biz-check-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.biz-check-chip { position: relative; display: flex; align-items: center; min-height: 44px; padding: 0 13px; border: 1px solid rgba(16,42,43,.1); border-radius: 13px; background: rgba(255,255,255,.65); color: var(--biz-ink-soft); font-size: .65rem; font-weight: 720; cursor: pointer; }
.biz-check-chip input { margin-right: 8px; accent-color: var(--biz-teal-deep); }
.biz-check-chip:has(input:checked) { border-color: rgba(91,189,183,.65); background: #f2fffc; color: var(--biz-ink); }

/* Obligatoriska samtycken på steg 7 (QA B16) — en toast räcker inte, rutan
   som saknas måste peka ut sig själv. Terrakotta i stället för bootstrap-rött,
   samma ton som .biz-required, så att felet ryms i tiffany-paletten. */
.biz-check-chip.is-invalid {
  border-color: #d16c59;
  background: #fdf4f1;
  color: var(--biz-ink);
  box-shadow: 0 0 0 3px rgba(209,108,89,.12);
  scroll-margin-top: 96px;
  animation: bizConsentAlert .55s var(--biz-ease);
}
.biz-check-chip.is-invalid input { accent-color: #c2543f; }
/* Skyddsnät: kryssar användaren i rutan innan JS hinner rensa klassen ska
   chipet direkt se giltigt ut igen. */
.biz-check-chip.is-invalid:has(input:checked) { border-color: rgba(91,189,183,.65); background: #f2fffc; box-shadow: none; animation: none; }
/* Ikonen ligger sist i chipet och ankras i högerkanten, mitt emot kryssrutan. */
.biz-consent-warn { flex: 0 0 auto; display: flex; align-items: center; margin-left: auto; padding-left: 10px; color: #c2543f; }
.biz-consent-warn svg { width: 17px; height: 17px; }
.biz-check-chip:not(.is-invalid) .biz-consent-warn { display: none; }
/* Feltexten är syskon till labeln, inte barn, så :not(.is-invalid)-regeln ovan
   når den aldrig. Utan de här två raderna syns "kryssa i rutan" direkt vid
   sidladdning, innan användaren gjort något fel. */
.biz-consent-error { display: none; align-items: center; gap: 6px; margin-top: 7px; color: #b3402f; font-size: .63rem; font-weight: 750; line-height: 1.45; }
.biz-check-chip.is-invalid + .biz-consent-error { display: flex; }
@keyframes bizConsentAlert {
  0% { box-shadow: 0 0 0 0 rgba(209,108,89,.3); }
  55% { box-shadow: 0 0 0 7px rgba(209,108,89,.08); }
  100% { box-shadow: 0 0 0 3px rgba(209,108,89,.12); }
}
@media (prefers-reduced-motion: reduce) { .biz-check-chip.is-invalid { animation: none; } }

.biz-inline-note { display: flex; gap: 12px; margin-top: 22px; padding: 15px 17px; border-radius: 16px; background: #eef5f3; color: #536969; font-size: .65rem; line-height: 1.6; }
.biz-inline-note svg { flex: 0 0 auto; width: 19px; height: 19px; color: var(--biz-teal-deep); }
.biz-inline-note--warm { background: #f0fdfb; color: #2a706a; }

.biz-upload-zone {
  display: grid;
  place-items: center;
  min-height: 190px;
  padding: 30px;
  border: 1.5px dashed rgba(47,133,128,.35);
  border-radius: 22px;
  background: rgba(91,189,183,.045);
  text-align: center;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .25s var(--biz-ease);
}
.biz-upload-zone:hover { transform: translateY(-3px); border-color: var(--biz-teal-deep); background: rgba(91,189,183,.08); }
.biz-upload-zone input { display: none; }
.biz-upload-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: #fff; color: var(--biz-teal-deep); box-shadow: var(--biz-shadow-sm); }
.biz-upload-icon svg { width: 23px; height: 23px; }
.biz-upload-zone strong { margin-top: 15px; font-size: .75rem; }
.biz-upload-zone span { margin-top: 6px; color: var(--biz-muted); font-size: .61rem; }
.biz-file-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.biz-file-pill { padding: 8px 11px; border-radius: 999px; background: #e4efec; color: var(--biz-ink-soft); font-size: .6rem; font-weight: 700; }

.biz-form-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 42px; border-top: 1px solid var(--biz-line); background: rgba(245,248,247,.72); }
.biz-form-nav-note { color: var(--biz-muted); font-size: .61rem; }
.biz-form-nav-actions { display: flex; gap: 9px; margin-left: auto; }
.biz-nav-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 45px; padding: 0 18px; border: 1px solid rgba(16,42,43,.11); border-radius: 999px; background: #fff; color: var(--biz-ink); font-family: inherit; font-size: .7rem; font-weight: 800; cursor: pointer; transition: transform .23s var(--biz-ease), background .2s ease; }
.biz-nav-btn:hover { transform: translateY(-2px); }
.biz-nav-btn--next { border-color: var(--tiffany-500, #5bbdb7); background: var(--tiffany-500, #5bbdb7); color: #0a3d3a; }
.biz-nav-btn--next:hover { background: var(--tiffany-400, #6dcac2); }
.biz-nav-btn[hidden] { display: none; }

.biz-review-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.biz-review-card { padding: 18px; border: 1px solid rgba(16,42,43,.09); border-radius: 17px; background: rgba(255,255,255,.7); }
.biz-review-card h3 { color: var(--biz-teal-deep); font-size: .63rem; letter-spacing: .08em; text-transform: uppercase; }
.biz-review-list { display: grid; gap: 8px; margin-top: 13px; }
.biz-review-row { display: flex; justify-content: space-between; gap: 20px; color: var(--biz-muted); font-size: .64rem; }
.biz-review-row strong { max-width: 60%; color: var(--biz-ink); text-align: right; }

/* QA-runda 5 (D2): ett tomt obligatoriskt fält i granskningen såg exakt ut som
   ett tomt frivilligt — båda ritades som "—". Terrakottan är densamma som
   .biz-consent-error / .biz-check-chip.is-invalid, så formulärets alla fel
   talar med en röst i stället för att introducera ett nytt rött. Frivilliga
   tomma fält rör vi inte: de ska fortsätta se neutrala ut. */
.biz-review-row.is-missing > span { color: #b3402f; font-weight: 750; }
.biz-review-fix {
  max-width: 60%;
  padding: 3px 9px;
  border: 1px solid #d16c59;
  border-radius: 999px;
  background: #fdf4f1;
  color: #b3402f;
  font: inherit;
  font-size: .62rem;
  font-weight: 800;
  text-align: right;
  cursor: pointer;
}
.biz-review-fix:hover { border-color: #c2543f; background: #fbe9e4; }
.biz-review-fix:focus-visible { outline: 2px solid #c2543f; outline-offset: 2px; }

/* Sammanfattningen ovanför granskningsrutorna. Den listar det som saknas på
   ANDRA steg — fält man inte kan se härifrån. Steg 7:s egna samtyckesrutor
   hålls utanför (add-business.js, renderMissingPanel): en varning som tänds
   varje gång man kommer hit slutar man läsa. */
.biz-review-missing {
  margin-bottom: 14px;
  padding: 15px 17px;
  border: 1px solid #d16c59;
  border-radius: 17px;
  background: #fdf4f1;
}
.biz-review-missing[hidden] { display: none; }
.biz-review-missing-head { display: flex; align-items: center; gap: 9px; color: #b3402f; font-size: .68rem; font-weight: 800; line-height: 1.45; }
.biz-review-missing-head svg { flex: 0 0 auto; width: 18px; height: 18px; color: #c2543f; }
.biz-review-missing-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.biz-review-missing-chip {
  padding: 6px 12px;
  border: 1px solid #d16c59;
  border-radius: 999px;
  background: #fff;
  color: #b3402f;
  font: inherit;
  font-size: .63rem;
  font-weight: 750;
  cursor: pointer;
}
.biz-review-missing-chip:hover { background: #fbe9e4; }
.biz-review-missing-chip:focus-visible { outline: 2px solid #c2543f; outline-offset: 2px; }

.biz-demo-disclaimer { display: flex; gap: 12px; margin-top: 20px; padding: 17px; border: 1px solid rgba(91,189,183,.24); border-radius: 17px; background: #f0fdfb; color: #2a706a; font-size: .66rem; line-height: 1.6; }
.biz-demo-disclaimer svg { flex: 0 0 auto; width: 20px; height: 20px; }

.biz-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(460px, calc(100% - 28px));
  padding: 13px 17px;
  border-radius: 999px;
  background: var(--tiffany-800, #2a706a);
  color: #fff;
  box-shadow: 0 20px 50px rgba(16,42,43,.25);
  font-size: .68rem;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 18px);
  transition: opacity .3s ease, transform .3s var(--biz-ease);
}
.biz-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Tiffany SVG motion system ---------------------------------- */
.biz-form-intro { position: relative; overflow: hidden; }
.biz-form-intro > div { position: relative; z-index: 2; }
.biz-form-intro-art {
  position: absolute;
  z-index: 1;
  right: 132px;
  top: -5px;
  width: 330px;
  height: 190px;
  opacity: .76;
  pointer-events: none;
}

.biz-svg-flow { animation: bizSvgFlow 15s linear infinite; }
.biz-svg-orbit { transform-box: fill-box; transform-origin: center; animation: bizSvgOrbit 18s linear infinite; }
.biz-svg-orbit--reverse { animation-direction: reverse; animation-duration: 25s; }
.biz-svg-shop { transform-box: fill-box; transform-origin: center; animation: bizSvgShop 6s var(--biz-ease) infinite; }
.biz-svg-spark { transform-box: fill-box; transform-origin: center; animation: bizSvgSpark 3.4s ease-in-out infinite; }
.biz-svg-spark--two { animation-delay: -1.5s; animation-duration: 4.2s; }
.biz-svg-node { transform-box: fill-box; transform-origin: center; animation: bizSvgNode 3.8s ease-in-out infinite; }
.biz-svg-node--two { animation-delay: -1.8s; }
.biz-svg-document { transform-box: fill-box; transform-origin: center; animation: bizSvgDocument 5.4s ease-in-out infinite; }
.biz-svg-chart { stroke-dasharray: 120; stroke-dashoffset: 120; animation: bizSvgChart 3.8s var(--biz-ease) infinite; }

.biz-category-art > circle,
.biz-category-art > rect { transform-box: fill-box; transform-origin: center; animation: bizSvgNode 4.8s ease-in-out infinite; }
.biz-category-art > path:nth-of-type(2),
.biz-category-art > path:nth-of-type(3) { stroke-dasharray: 220; animation: bizSvgLine 7s ease-in-out infinite; }
.biz-category-card:nth-child(even) .biz-category-art > * { animation-delay: -2s; }
.biz-trust-item svg path,
.biz-process-icon svg path { stroke-dasharray: 80; stroke-dashoffset: 0; animation: bizSvgLine 8s ease-in-out infinite; }
.biz-process-card:nth-child(2) svg path { animation-delay: -2s; }
.biz-process-card:nth-child(3) svg path { animation-delay: -4s; }
.biz-process-card:nth-child(4) svg path { animation-delay: -6s; }
.biz-head-illustration { animation: bizSvgHead 5.8s ease-in-out infinite; }
.biz-head-illustration circle { transform-box: fill-box; transform-origin: center; animation: bizSvgSpark 3.6s ease-in-out infinite; }
.biz-head-illustration path { stroke-dasharray: 120; animation: bizSvgLine 7s ease-in-out infinite; }
.biz-form-step:nth-child(even) .biz-head-illustration { animation-delay: -2.8s; }
.biz-search-field:focus-within > svg,
.biz-filter-field:focus-within > svg { animation: bizSvgIconPop .65s var(--biz-ease); }

@keyframes bizSvgFlow { to { stroke-dashoffset: -240; } }
@keyframes bizSvgOrbit { to { transform: rotate(360deg); } }
@keyframes bizSvgShop { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-7px) scale(1.015); } }
@keyframes bizSvgSpark { 0%,100% { transform: scale(.88) rotate(-4deg); opacity: .72; } 50% { transform: scale(1.08) rotate(4deg); opacity: 1; } }
@keyframes bizSvgNode { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.06); } }
@keyframes bizSvgDocument { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(-5px,-8px) rotate(-2deg); } }
@keyframes bizSvgChart { 0% { stroke-dashoffset: 120; opacity: .35; } 45%,80% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: -120; opacity: .4; } }
@keyframes bizSvgLine { 0%,100% { stroke-dashoffset: 0; opacity: .68; } 50% { stroke-dashoffset: 35; opacity: 1; } }
@keyframes bizSvgHead { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(1.5deg); } }
@keyframes bizSvgIconPop { 0% { transform: scale(.82) rotate(-7deg); } 60% { transform: scale(1.14) rotate(4deg); } 100% { transform: scale(1); } }

/* Responsive ------------------------------------------------- */
@media (max-width: 1120px) {
  .biz-hero-grid { grid-template-columns: 1fr .92fr; }
  .biz-hero-copy { padding-left: 48px; }
  .biz-search-grid { grid-template-columns: 1.25fr repeat(2,.7fr) auto; }
  .biz-search-grid .biz-search-field:nth-child(4) { display: none; }
  .biz-category-card { grid-column: span 4; }
  .biz-category-card:nth-child(1), .biz-category-card:nth-child(6) { grid-column: span 4; }
  .biz-deal-copy { padding: 52px; }
  .biz-deal-ui { padding-right: 30px; }
}

@media (max-width: 900px) {
  .biz-shell, .biz-form-shell { width: min(100% - 24px, 1380px); }
  .biz-section { padding: 72px 0; }
  .biz-hero { min-height: 930px; border-radius: 32px; }
  .biz-hero-grid { display: block; min-height: 930px; }
  .biz-hero-copy { justify-content: flex-start; padding: 62px 42px 0; }
  .biz-hero-copy > p { max-width: 520px; }
  .biz-hero-visual { position: absolute; left: 22%; right: -7%; top: 310px; height: 490px; }
  .biz-hero-art { width: 620px; max-width: none; right: -4%; }
  .biz-float-card--verified { top: 35%; }
  .biz-float-card--private { bottom: 20%; }
  .biz-search-deck { left: 16px; right: 16px; bottom: 16px; }
  .biz-search-grid { grid-template-columns: 1fr 1fr auto; }
  .biz-search-grid .biz-search-field:nth-child(3) { display: none; }
  .biz-trust-rail { grid-template-columns: repeat(2,1fr); }
  .biz-section-head { align-items: flex-start; flex-direction: column; }
  .biz-category-grid { grid-template-columns: repeat(2,1fr); grid-auto-rows: 190px; }
  .biz-category-card, .biz-category-card:nth-child(1), .biz-category-card:nth-child(6) { grid-column: span 1; }
  .biz-deal-stage-grid { grid-template-columns: 1fr; }
  .biz-deal-copy { padding-bottom: 20px; }
  .biz-deal-ui { padding: 30px 35px 60px; }
  .biz-process-grid { grid-template-columns: repeat(2,1fr); }
  .biz-wizard-layout { grid-template-columns: 1fr; }
  .biz-form-intro-art { right: 0; opacity: .48; }
  .biz-wizard-rail { position: static; padding: 10px; overflow: hidden; }
  .biz-step-list { display: flex; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
  .biz-step-list::-webkit-scrollbar { display: none; }
  .biz-step-link { flex: 0 0 170px; }
}

@media (max-width: 680px) {
  body.business-page,
  body.add-business-page { overflow-x: clip; -webkit-tap-highlight-color: transparent; }
  .business-page .header-inner,
  .add-business-page .header-inner { min-height: 64px; padding-inline: 12px; }
  .business-page .header .nav,
  .add-business-page .header .nav { background: #fbfdfc; }
  .business-page .header .nav.nav-open,
  .add-business-page .header .nav.nav-open {
    align-items: stretch;
    gap: 4px;
    padding: 12px 14px 18px;
    border-bottom: 1px solid rgba(55,145,138,.14);
    background: rgba(255,255,255,.96);
    box-shadow: 0 24px 58px rgba(18,58,56,.14);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
  }
  .business-page .nav.nav-open .nav-link,
  .add-business-page .nav.nav-open .nav-link {
    width: 100%;
    min-height: 48px;
    padding: 14px 16px;
    border: 0;
    border-radius: 14px;
    text-align: left;
  }
  .business-page .hamburger:focus-visible,
  .add-business-page .hamburger:focus-visible { outline: 2px solid var(--tiffany-500, #5bbdb7); outline-offset: 2px; }
  .business-page .nav.nav-open .biz-nav-active,
  .add-business-page .nav.nav-open .biz-nav-active { background: var(--tiffany-50, #f0fdfb); }
  .business-page .nav.nav-open .biz-nav-active::after,
  .add-business-page .nav.nav-open .biz-nav-active::after { left: auto; right: 16px; bottom: 50%; transform: translateY(50%); }
  .business-page .nav.nav-open .header-actions,
  .add-business-page .nav.nav-open .header-actions { border-color: rgba(55,145,138,.14); }
  .business-page .nav.nav-open .biz-header-cta,
  .business-page .nav.nav-open .biz-button,
  .add-business-page .nav.nav-open .biz-header-cta,
  .add-business-page .nav.nav-open .biz-button { width: 100%; min-height: 50px; justify-content: center; }
  .biz-logo-suffix { display: none; }
  .biz-shell { width: calc(100% - 20px); }
  .biz-section { padding: 60px 0; }
  .biz-section--tight { padding: 48px 0; }
  .biz-hero-wrap { padding-top: 10px; }
  .biz-hero { min-height: 870px; border-radius: 26px; }
  .biz-hero-grid { min-height: 870px; }
  .biz-hero-copy { padding: 42px 23px 0; }
  .biz-hero h1 { font-size: clamp(3rem,14vw,4.2rem); }
  .biz-hero-copy > p { margin-top: 20px; font-size: .94rem; line-height: 1.68; }
  .biz-hero-actions { margin-top: 23px; }
  .biz-hero-actions .biz-button { min-height: 50px; padding-inline: 20px; }
  .biz-hero-actions .biz-button--ghost { display: none; }
  .biz-hero-visual { left: 2%; right: -26%; top: 330px; height: 390px; }
  .biz-hero-art { width: 520px; right: 0; }
  .biz-float-card--verified { right: 24%; top: 42%; }
  .biz-float-card--private { display: none; }
  .biz-search-deck { padding: 10px; border-radius: 22px; }
  .biz-search-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; overflow: visible; margin-left: 0; scrollbar-width: none; }
  .biz-search-tab { min-width: 0; min-height: 34px; padding-inline: 4px; font-size: .64rem; line-height: 1.15; white-space: nowrap; }
  .biz-search-grid { grid-template-columns: 1fr auto; }
  .biz-search-grid .biz-search-field:nth-child(n+2) { display: none; }
  .biz-search-field { height: 56px; }
  .biz-search-submit { width: 56px; height: 56px; }
  .biz-trust-rail { grid-template-columns: 1fr; }
  .biz-trust-item:nth-child(n+3) { display: none; }
  .biz-section-head { gap: 16px; margin-bottom: 27px; }
  .biz-section-head h2 { font-size: clamp(2.15rem,11vw,2.55rem); }
  .biz-category-grid { grid-template-columns: 1fr; grid-auto-rows: 178px; }
  .biz-deal-stage { border-radius: 27px; }
  .biz-deal-copy { padding: 42px 24px 20px; }
  .biz-deal-ui { padding: 24px 18px 42px; }
  .biz-demo-image { height: 185px; }
  .biz-demo-verify { grid-template-columns: 1fr; }
  .biz-process-grid { grid-template-columns: 1fr; }
  .biz-process-card { min-height: 235px; }
  .biz-final-cta { min-height: 450px; padding: 46px 25px; border-radius: 28px; }
  .biz-final-cta::after { right: -260px; }
  .biz-footer-top, .biz-footer-bottom { align-items: flex-start; flex-direction: column; }

  .biz-form-shell { width: calc(100% - 16px); margin-top: 8px; }
  .biz-form-intro { grid-template-columns: 1fr; row-gap: 18px; padding: 30px 5px 22px; }
  .biz-form-intro-art { width: 230px; height: 132px; right: -78px; top: 4px; opacity: .28; }
  .biz-form-intro h1 { font-size: clamp(2.55rem,12.5vw,3rem); line-height: .94; }
  .biz-form-intro p { font-size: .94rem; line-height: 1.65; }
  /* Enkolumnsläge: nolla desktopplaceringen, annars skapar grid-column: 2 en
     implicit andra kolumn och intron blir smal igen. */
  .biz-draft-state,
  #draft-undo { grid-column: 1; grid-row: auto; justify-self: start; }
  #draft-undo { min-height: 42px; padding: 0 16px; font-size: .72rem; }
  .biz-wizard-rail { border-radius: 23px; }
  .biz-step-list { gap: 4px; scroll-snap-type: x proximity; }
  .biz-step-link { flex-basis: 164px; min-height: 62px; scroll-snap-align: start; }
  .biz-wizard-main { border-radius: 25px; }
  .biz-form-step-head { padding: 29px 22px 23px; }
  .biz-form-step-head h2 { font-size: clamp(1.9rem,9vw,2.3rem); }
  .biz-form-step-head p { font-size: .82rem; }
  .biz-head-illustration { display: none; }
  .biz-form-body { padding: 25px 22px 32px; }
  /* minmax(0,1fr), inte 1fr: `1fr` har min-content som golv, så ett långt ord i
     ett kort kunde göra spalten bredare än formuläret. Kortets högerkant — och
     därmed bocken — hamnade då utanför skärmen (QA-runda 6, E3). */
  .biz-field-grid, .biz-field-grid--3, .biz-choice-grid, .biz-choice-grid--3, .biz-review-grid { grid-template-columns: minmax(0,1fr); }
  .biz-check-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .biz-choice { min-height: 94px; padding: 15px; }
  .biz-choice strong { padding-inline-end: 30px; font-size: .8rem; }
  .biz-choice small { font-size: .66rem; }
  /* QA-runda 6, E2: QR-överlämningen "Telefonda davam et" flyttar ett påbörjat
     utkast från dator till telefon. På telefonen är den meningslös. Brytpunkt
     i stället för enhetssniffning; bindMobileHandoff() i add-business.js
     kontrollerar synligheten innan den binder någon lyssnare. */
  #mobile-handoff { display: none; }
  /* Knappen var otryckbar på iOS och är det inte längre — då ska den också vara
     bekväm att träffa, inte 36px hög bredvid en etikett. */
  .biz-label-row > .biz-mini-btn { min-height: 44px; padding-inline: 14px; }
  .biz-field label,
  .biz-field legend { font-size: .72rem; }
  .biz-input,
  .biz-select,
  .biz-textarea { font-size: 16px; }
  .biz-input,
  .biz-select { min-height: 52px; }
  .biz-check-chip { min-height: 48px; font-size: .7rem; }
  .biz-toggle-row { gap: 14px; padding: 17px 15px; }
  .biz-form-nav { align-items: stretch; flex-direction: column; padding: 17px 22px; }
  .biz-form-nav-note { text-align: center; }
  .biz-form-nav-actions { width: 100%; margin: 0; }
  .biz-nav-btn { flex: 1; min-height: 52px; font-size: .76rem; }
  .biz-upload-zone { min-height: 170px; padding: 24px 18px; }
  .biz-inline-note,
  .biz-demo-disclaimer { font-size: .72rem; }
  .biz-consent-error { font-size: .7rem; }
  .biz-consent-warn svg { width: 19px; height: 19px; }
}

@media (max-width: 380px) {
  .biz-hero-copy { padding-inline: 19px; }
  .biz-hero h1 { font-size: clamp(2.75rem,14vw,3.25rem); }
  .biz-hero-visual { right: -32%; }
  .biz-search-deck { left: 9px; right: 9px; bottom: 9px; }
  .biz-search-tab { font-size: .59rem; }
  .biz-form-intro { padding-top: 26px; }
  .biz-form-intro h1 { font-size: 2.42rem; }
  .biz-form-body,
  .biz-form-step-head { padding-inline: 18px; }
  .biz-check-grid { grid-template-columns: 1fr; }
  .biz-review-row { align-items: flex-start; flex-direction: column; gap: 5px; }
  .biz-review-row strong { max-width: 100%; text-align: left; }
  .biz-review-fix { max-width: 100%; text-align: left; }
  .biz-form-nav { padding-inline: 18px; }
}

@media (hover: none) and (pointer: coarse) {
  .biz-button:hover,
  .biz-choice:hover,
  .biz-nav-btn:hover,
  .biz-upload-zone:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .biz-orbit-path,
  .biz-art-building,
  .biz-art-float-a,
  .biz-art-float-b,
  .biz-art-float-c,
  .biz-art-pulse,
  .biz-float-card,
  .biz-final-cta::after { animation: none !important; }
  .biz-svg-flow,
  .biz-svg-orbit,
  .biz-svg-shop,
  .biz-svg-spark,
  .biz-svg-node,
  .biz-svg-document,
  .biz-svg-chart,
  .biz-category-art > *,
  .biz-trust-item svg path,
  .biz-process-icon svg path,
  .biz-head-illustration,
  .biz-head-illustration * { animation: none !important; }
  .biz-reveal { opacity: 1; transform: none; }
}


/* VIP upsell inside the add-business review step ------------- */
.biz-vip-offer {
  margin-top: 22px;
  padding: 22px;
  border: 1px solid rgba(214, 158, 46, .3);
  border-radius: 24px;
  background: linear-gradient(135deg, #fffdf5, #fdf6e4);
}
.biz-vip-offer .biz-eyebrow { color: #a8720f; }
.biz-vip-offer .biz-eyebrow::before { background: #d99a1f; box-shadow: 0 0 0 5px rgba(217, 154, 31, .16); }
.biz-vip-head h3 { margin-top: 10px; font-size: 1.15rem; letter-spacing: -.02em; }
.biz-vip-head p { max-width: 660px; margin-top: 8px; color: var(--biz-muted); font-size: .74rem; line-height: 1.65; }
.biz-vip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.biz-vip-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 96px;
  padding: 14px;
  border: 1.5px solid rgba(16, 42, 43, .1);
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.biz-vip-card:hover { transform: translateY(-2px); }
.biz-vip-card input { position: absolute; opacity: 0; pointer-events: none; }
.biz-vip-card em { color: var(--biz-muted); font-size: .58rem; font-style: normal; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.biz-vip-card strong { font-size: .88rem; letter-spacing: -.01em; }
.biz-vip-price { color: #9a620f; font-size: .84rem; font-weight: 850; }
.biz-vip-price small { color: var(--biz-muted); font-size: .6rem; font-weight: 600; }
.biz-vip-card:has(input:checked) { border-color: #d99a1f; box-shadow: 0 10px 26px rgba(217, 154, 31, .18); }
.biz-vip-card:focus-within { outline: 2px solid rgba(217, 154, 31, .4); outline-offset: 2px; }
.biz-vip-badge { position: absolute; top: -9px; right: 10px; padding: 3px 9px; border-radius: 999px; background: linear-gradient(135deg, #f6b84a, #d88612); color: #fff; font-size: .54rem; font-weight: 900; letter-spacing: .08em; }
.biz-vip-note { margin-top: 13px; color: var(--biz-muted); font-size: .64rem; }
@media (max-width: 860px) { .biz-vip-grid { grid-template-columns: 1fr 1fr; } }


/* Add-business: photo guide + valuation hint */
.biz-photo-guide { background:#f2fbfa; border:1px solid rgba(129,216,208,.5); border-radius:16px; padding:16px 18px; margin-bottom:16px; }
.biz-photo-guide strong { display:block; font-size:.84rem; margin-bottom:8px; }
.biz-photo-guide ul { margin:0; padding-left:18px; }
.biz-photo-guide li { font-size:.78rem; color:#3d5a56; line-height:1.6; }
.biz-valuation-hint { display:block; margin-top:6px; font-size:.74rem; color:#37918a; font-weight:600; }




/* =============================================================
   B13 — SKÄRMINIATYRER PÅ STEG 6
   =============================================================
   Filnamnschips gick inte att bedöma: säljaren såg inte vilken bild som var
   vilken, vilken som blev hero eller vad hen sorterade. Bilden är objektet nu;
   knapparna sitter på kortet. `.biz-file-list` behåller sin flex-layout för
   dokumentlistan — fotorutnätet lägger sig som en egen rad i den. */
.biz-photo-grid { display: block; }
.biz-photo-meter { margin: 12px 0 8px; color: var(--biz-muted); font-size: .66rem; font-weight: 800; }
.biz-photo-meter.is-short { color: #b3402f; }
.biz-photo-meter.is-ok { color: var(--biz-teal-deep); }
.biz-photo-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
}
.biz-photo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 7px;
  border: 1.5px solid rgba(16,42,43,.1);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--biz-shadow-sm);
  /* Kortet är draggbart i sin helhet; texten inuti ska inte markeras i stället. */
  cursor: grab;
  user-select: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s var(--biz-ease);
}
.biz-photo-card:hover { transform: translateY(-2px); }
.biz-photo-card.is-hero { border-color: var(--biz-lime-deep); box-shadow: 0 10px 26px rgba(91,189,183,.22); }
.biz-photo-card.is-flagged { border-color: rgba(179,64,47,.45); }
.biz-photo-card.is-dragging { opacity: .45; cursor: grabbing; }
.biz-photo-card.is-drop-target { border-color: var(--biz-teal-deep); box-shadow: 0 0 0 3px rgba(91,189,183,.25); }
.biz-photo-frame {
  position: relative;
  overflow: hidden;
  /* Samma 4:3 som marknadskortet, så miniatyren visar exakt det köparen ser. */
  aspect-ratio: 4 / 3;
  border-radius: 11px;
  background: #e8f4f2;
}
.biz-photo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.biz-photo-order {
  position: absolute; top: 6px; left: 6px;
  display: grid; place-items: center;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px;
  background: rgba(9,32,31,.62); color: #fff;
  font-size: .58rem; font-weight: 900;
}
.biz-photo-hero {
  position: absolute; top: 6px; right: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--biz-lime-deep); color: #06302d;
  font-size: .53rem; font-weight: 900; letter-spacing: .03em; white-space: nowrap;
}
/* Kvalitetsvarningen ligger på bilden den handlar om — som "⚠" i filnamnet
   lästes den aldrig, och man kunde inte se om den stämde. */
.biz-photo-flag {
  position: absolute; left: 6px; bottom: 6px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px 3px 6px;
  border-radius: 999px;
  background: #b3402f; color: #fff;
  font-size: .54rem; font-weight: 900;
  cursor: help;
}
.biz-photo-flag svg { width: 11px; height: 11px; }
.biz-photo-card.is-flagged .biz-photo-frame::after {
  content: ""; position: absolute; inset: 0;
  border: 2px solid rgba(179,64,47,.65); border-radius: 11px; pointer-events: none;
}
.biz-photo-name {
  margin: 7px 2px 0;
  overflow: hidden;
  color: var(--biz-muted);
  font-size: .56rem; font-weight: 700;
  text-overflow: ellipsis; white-space: nowrap;
}
.biz-photo-tools { display: flex; gap: 3px; justify-content: center; margin-top: 6px; }
.biz-photo-btn {
  display: grid; place-items: center;
  /* 30px tappmål — knapparna är sista utvägen på touch där drag inte funkar. */
  width: 30px; height: 30px;
  border: 1px solid rgba(16,42,43,.1);
  border-radius: 9px;
  background: #f4f9f8; color: var(--biz-ink-soft);
  font-size: .72rem; line-height: 1; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.biz-photo-btn:hover:not(:disabled) { background: #e2f2f0; color: var(--biz-ink); }
.biz-photo-btn:disabled { opacity: .3; cursor: default; }
.biz-photo-btn--hero { color: #b3830f; }
.biz-photo-btn--hero:hover:not(:disabled) { background: #fdf3dd; color: #8a640a; }
.biz-photo-btn--remove:hover:not(:disabled) { background: #fbe9e6; color: #b3402f; }
.biz-photo-hint { margin: 10px 0 0; color: var(--biz-muted); font-size: .64rem; }
@media (max-width: 520px) {
  .biz-photo-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =============================================================
   B14 — BESKÄRNINGSVY MED SYNLIGT 4:3-UTSNITT
   =============================================================
   Den gamla dialogen ritade *resultatet* på en canvas: man såg bara det som
   blev kvar, aldrig det som klipptes bort, och slidern hade varken skala eller
   ram. Nu visas hela bilden med det bortklippta mörklagt.
   Egna klassnamn (biz-crop2-*) därför att den gamla .biz-crop-CSS:en bor i
   business-market.css, som laddas EFTER den här filen och annars vinner. */
/* Alla modaler på sidan satt fastklistrade uppe i vänstra hörnet. Orsak:
   `*, *::before, *::after { margin: 0 }` i style.css slår ut webbläsarens
   `dialog { margin: auto }`, som är det som centrerar en <dialog>. Klassen
   väger tyngre än universalselektorn, så en rad räcker — och den gäller alla
   .biz-dialog på add-business.html, inte bara beskärningsvyn. */
.biz-dialog { margin: auto; max-height: calc(100vh - 40px); overflow-y: auto; }

/* QA-runda 6, E6 — SCROLL CHAINING PÅ iOS.
   Dialogen var högre än skärmen och `overflow-y:auto` på själva <dialog>
   räckte inte: när fingret hamnade på ett barn som inte kunde scrolla tog
   sidan bakom över, och knapparna längst ned gick aldrig att nå.
   Tre saker krävs, och alla tre finns här:
   1. Dialogen blir en flexkolumn med FAST huvud och fot och EN scrollande
      mitt. Då finns det exakt en yta som kan ta emot ett svep.
   2. `overscroll-behavior: contain` på den ytan, så att en svepning som når
      slutet inte lämnas vidare till <body>.
   3. `position: fixed` på <body> medan dialogen är öppen — sköts av
      lockPageScroll() i add-business.js. Enbart `overflow:hidden` ignoreras
      av iOS Safari.
   `dialog` i selektorn (typ + klass) väger tyngre än `.biz-dialog` i
   business-market.css, som laddas EFTER den här filen. */
dialog.biz-dialog {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: hidden;
}
dialog.biz-dialog[open] { display: flex; flex-direction: column; }
dialog.biz-dialog > .biz-dialog-head { flex: 0 0 auto; }
dialog.biz-dialog > .biz-dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* Foten ligger UTANFÖR den scrollande mitten: "Kəs və əlavə et" och "Orijinalı
   saxla" ska aldrig kräva att man hittar en scroll för att se dem. */
.biz-dialog-foot {
  flex: 0 0 auto;
  padding: 14px 27px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--biz-line);
  background: var(--biz-paper);
}

.biz-crop2 { width: min(620px, calc(100% - 28px)); }
.biz-crop2-stagewrap {
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
  border-radius: 16px;
  background: #0d201f;
}
/* Scenen krymper runt bilden i stället för att få en egen storlek: då är
   scenens ruta exakt bildens ruta, och procenten på fönstret nedan motsvarar
   pixlar i originalet utan någon omräkning. Höjdtaket sitter på <img>, annars
   växer ett stående foto förbi knapparna och man ser inte vad man väljer. */
.biz-crop2-stage {
  position: relative;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  border-radius: 8px;
  line-height: 0;
  cursor: grab;
  touch-action: none;
}
.biz-crop2-stage:active { cursor: grabbing; }
/* `touch-action: none` överallt (raden ovan) åt även de svep som INTE kan
   flytta utsnittet, och de svepen såg ut att inte göra någonting. Nu släpps
   den riktning som beskärningen ändå inte använder vidare till dialogens
   scroll: en liggande bild panoreras i sidled och sveps vertikalt för att
   scrolla, en stående tvärtom (QA-runda 6, E6). */
.biz-crop2-stage.is-horizontal { touch-action: pan-y; }
.biz-crop2-stage.is-vertical { touch-action: pan-x; }
.biz-crop2-img { display: block; width: auto; height: auto; max-width: 100%; max-height: 44vh; user-select: none; -webkit-user-drag: none; }
.biz-crop2-shade { position: absolute; background: rgba(6,20,19,.72); pointer-events: none; }
.biz-crop2-window {
  position: absolute;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(6,20,19,.45), 0 6px 22px rgba(0,0,0,.35);
  pointer-events: none;
}
/* Tredjedelslinjer: gör det uppenbart att rutan är en beskärningsram och inte
   bara en kantlinje runt bilden. */
.biz-crop2-window::before,
.biz-crop2-window::after {
  content: ""; position: absolute; inset: 0;
  background-repeat: no-repeat;
  pointer-events: none;
}
.biz-crop2-window::before {
  background-image: linear-gradient(to right, rgba(255,255,255,.32) 1px, transparent 1px);
  background-size: 33.333% 100%;
  background-position: 33.333% 0;
}
.biz-crop2-window::after {
  background-image: linear-gradient(to bottom, rgba(255,255,255,.32) 1px, transparent 1px);
  background-size: 100% 33.333%;
  background-position: 0 33.333%;
}
.biz-crop2-tag {
  position: absolute; top: 6px; left: 6px;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(255,255,255,.9); color: #0b3d39;
  font-size: .55rem; font-weight: 900; letter-spacing: .06em;
}
.biz-crop2-legend { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: var(--biz-muted); font-size: .66rem; line-height: 1.5; }
.biz-crop2-legend i { flex: 0 0 auto; width: 22px; height: 14px; border-radius: 3px; background: rgba(6,20,19,.72); }
.biz-crop2-slider { display: flex; align-items: center; gap: 12px; margin-top: 12px; color: var(--biz-ink-soft); font-size: .7rem; font-weight: 800; }
.biz-crop2-slider input { flex: 1; min-width: 0; accent-color: var(--biz-teal-deep); }
.biz-crop2-batch { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--biz-line); border-radius: 12px; background: #f4faf9; color: var(--biz-ink-soft); font-size: .68rem; font-weight: 700; cursor: pointer; }
.biz-crop2-batch input { accent-color: var(--biz-teal-deep); }
.biz-crop2-batch[hidden] { display: none; }
/* Ingen margin-top: knapparna bor i .biz-dialog-foot, som har sin egen padding. */
.biz-crop2-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* Knapparna sa inte vad de gjorde. Konsekvensen står nu under etiketten,
   så valet går att fatta utan att gissa. */
.biz-crop2-act {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  height: auto; padding: 11px 15px;
  text-align: left; white-space: normal;
}
.biz-crop2-act strong { font-size: .74rem; font-weight: 850; }
.biz-crop2-act small { font-size: .6rem; font-weight: 600; line-height: 1.45; opacity: .78; }
@media (max-width: 560px) {
  .biz-crop2-actions { grid-template-columns: 1fr; }
  /* Staplade knappar tar dubbelt så mycket höjd — annars hamnar
     "Orijinalı saxla" under skärmkanten på ett stående foto. Taket räknas mot
     dvh: 33vh är den STORA viewporten på iOS och överskattar höjden med hela
     adressfältet så länge det syns. */
  .biz-crop2-img { max-height: 33vh; max-height: 30dvh; }
  /* Förklaringstexten under knapptexten står kvar med flit (QA-runda 4, B14) —
     den är hela anledningen till att valet går att fatta utan att gissa. */
  .biz-dialog-foot { padding-inline: 20px; }
  .biz-crop2-act { padding: 9px 14px; }
}

/* =============================================================
   B15 — BILDKARUSELL I FÖRHANDSVISNINGEN PÅ STEG 7
   =============================================================
   Kortet visade bara första bilden, så ordningen gick inte att kontrollera
   innan publicering. Kontrollerna ligger över .biz-card-media, som har en
   gradient på ::after — därav z-index. */
.biz-card-media .biz-pcar-track { position: absolute; inset: 0; }
.biz-card-media .biz-pcar-track img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .3s var(--biz-ease);
}
.biz-card-media .biz-pcar-track img.is-active { opacity: 1; }
.biz-pcar-nav {
  position: absolute; top: 50%; z-index: 3;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  margin-top: -16px;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.9); color: #0b3d39;
  box-shadow: 0 4px 14px rgba(8,29,29,.25);
  cursor: pointer;
  opacity: .85;
  transition: opacity .18s ease, transform .18s var(--biz-ease);
}
.biz-pcar-nav:hover { opacity: 1; transform: scale(1.07); }
.biz-pcar-nav svg { width: 15px; height: 15px; }
.biz-pcar-nav--prev { left: 8px; }
.biz-pcar-nav--next { right: 8px; }
/* Nere till höger, inte uppe: kortets övre hörn är upptagna av badges
   ("İşlək biznes", "Yeni", VIP) och räknaren hamnade rakt ovanpå dem. */
.biz-pcar-count {
  position: absolute; right: 8px; bottom: 7px; z-index: 3;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(9,32,31,.66); color: #fff;
  font-size: .57rem; font-weight: 800; letter-spacing: .02em;
}
.biz-pcar-dots { position: absolute; z-index: 3; right: 0; bottom: 9px; left: 0; display: flex; gap: 5px; justify-content: center; }
.biz-pcar-dot {
  width: 7px; height: 7px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.5);
  cursor: pointer;
  transition: background .18s ease, transform .18s var(--biz-ease);
}
.biz-pcar-dot.is-active { background: #fff; transform: scale(1.35); }
.biz-card-media:focus-visible { outline: 2px solid var(--biz-teal-deep); outline-offset: 2px; }

/* =============================================================
   B11 — "ÜNVAN INTE SYNKAD MED XƏRİTƏ NİŞANI"
   =============================================================
   Koordinat och adress kunde peka på olika platser i samma annons. Rutan visar
   antingen att kartan uppdaterade adressen, eller att de två har glidit isär
   och att säljaren måste välja. Den får aldrig vara tyst. */
.biz-addr-sync {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin-top: 8px;
  padding: 9px 12px;
  border: 1px solid rgba(91,189,183,.35);
  border-radius: 12px;
  background: #f0fdfb;
}
.biz-addr-sync[hidden] { display: none; }
.biz-addr-sync p { flex: 1 1 220px; margin: 0; color: #2a706a; font-size: .64rem; font-weight: 700; line-height: 1.5; }
/* Gult, inte rött: ingenting är fel ännu — men det kan bli det om man låter bli. */
.biz-addr-sync[data-state="stale"],
.biz-addr-sync[data-state="conflict"] { border-color: rgba(200,140,20,.4); background: #fdf7e9; }
.biz-addr-sync[data-state="stale"] p,
.biz-addr-sync[data-state="conflict"] p { color: #8a5f0a; }
.biz-addr-sync-acts { display: flex; flex-wrap: wrap; gap: 7px; margin-left: auto; }
.biz-addr-sync-btn {
  padding: 6px 12px;
  border: 1px solid rgba(16,42,43,.14);
  border-radius: 999px;
  background: #fff; color: var(--biz-ink);
  font-family: inherit; font-size: .62rem; font-weight: 800;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.biz-addr-sync-btn:hover { background: #eef7f5; }
.biz-addr-sync-btn.is-primary { border-color: var(--biz-lime-deep); background: var(--biz-lime-deep); color: #06302d; }
.biz-addr-sync-btn.is-primary:hover { background: #6dcac2; }

/* NDA förklarad i klartext (QA-runda 5, D1). En lugn informationsruta, inte en
   varning: valet är fullt legitimt, säljaren behöver bara veta vad det innebär. */
.biz-nda-explainer {
  margin: 12px 0 0;
  padding: 11px 14px;
  border: 1px solid rgba(91,189,183,.35);
  border-radius: 12px;
  background: rgba(129,216,208,.10);
  color: var(--biz-ink-soft, #2a4a47);
  font-size: .68rem;
  line-height: 1.6;
}
.biz-nda-note { display: block; margin-top: 6px; opacity: .85; }