/* Optimera Google-företagsprofil: formuläret och resultatvyn.

   Bygger på tokens i base.css (--background, --foreground, --accent, --line,
   --vt-hair, --radius-card). Bara det som är eget för det här verktyget ligger
   här. Resultatet ritas av gbp.js, avsnitt för avsnitt allteftersom stegen blir
   klara, så varje avsnitt måste stå för sig själv utan sina grannar. */

/* ============================ formuläret ============================
   Ett enda fält. Fältet och knappen står på samma rad på skärmar som rymmer
   det: verktygets hela löfte är att du bara fyller i en sak, och en knapp på
   egen rad under fältet gör det till två. */
.vt-form--one { grid-template-columns: 1fr !important; max-width: 38rem; }
.vt-lbl { display: block; font-size: .82rem; font-weight: 600; margin: 0 0 .4rem; }
.vt-one { display: flex; gap: .6rem; align-items: stretch; }
.vt-one input { flex: 1 1 auto; min-width: 0; }
.vt-one .pill { grid-column: auto; margin-top: 0; flex: 0 0 auto; align-self: stretch; }
@media (max-width: 34rem) {
  .vt-one { flex-direction: column; }
  .vt-one .pill { align-self: start; }
}

/* ============================= förloppet ============================
   Fem steg, ett per anrop. De rör sig när något verkligen händer, till
   skillnad från den animerade väntan verktyget hade tidigare. */
.gbp-progress { margin-top: 2rem; max-width: 34rem; }
.gbp-progress ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.gbp-progress li { display: grid; grid-template-columns: .7rem 1fr; align-items: start; gap: .8rem;
  color: color-mix(in srgb, var(--foreground) 45%, transparent); font-size: .98rem; }
.gbp-progress .d { width: .7rem; height: .7rem; border-radius: 50%; margin-top: .4rem;
  border: 1.5px solid color-mix(in srgb, var(--foreground) 22%, transparent); }
.gbp-progress em { grid-column: 2; display: block; font-style: normal; font-size: .84rem; margin-top: .15rem;
  color: color-mix(in srgb, var(--foreground) 45%, transparent); }
.gbp-progress em:empty { display: none; }
.gbp-progress li.is-active { color: var(--foreground); }
.gbp-progress li.is-active .d { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
  animation: gbp-pulse 1.4s ease-in-out infinite; }
.gbp-progress li.is-done { color: var(--foreground); }
.gbp-progress li.is-done .d { background: var(--accent); border-color: var(--accent); }
@keyframes gbp-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }
@media (prefers-reduced-motion: reduce) { .gbp-progress li.is-active .d { animation: none } }

/* ============================= resultatet =========================== */
.gbp-res { margin-top: 1rem; }
.gbp-res[hidden] { display: none; }

.gbp-sec { margin-top: 2.6rem; }
.gbp-sec__h { font-size: 1.3rem; margin: 0 0 .5rem; letter-spacing: -.01em; }
.gbp-sec__p { margin: 0 0 1.2rem; max-width: 60ch; color: color-mix(in srgb, var(--foreground) 62%, transparent); }
.gbp-sec__note { margin: 1rem 0 0; font-size: .87rem; line-height: 1.6; max-width: 62ch;
  color: color-mix(in srgb, var(--foreground) 55%, transparent); }
.gbp-muted { color: color-mix(in srgb, var(--foreground) 48%, transparent); }
.gbp-empty { margin: 0; padding: 1.3rem 1.5rem; border-radius: var(--radius-card-sm, 1.25rem);
  background: color-mix(in srgb, var(--foreground) 4%, transparent); line-height: 1.6; max-width: 62ch; }

/* poäng och kopiera-allt */
.gbp-top { display: grid; grid-template-columns: auto 1fr auto; gap: 1.6rem; align-items: center;
  padding: 1.6rem 1.8rem; border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  border-radius: var(--radius-card, 2rem); background: color-mix(in srgb, var(--foreground) 3%, transparent); }
.gbp-gauge { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--accent) calc(var(--v, 0) * 1%), color-mix(in srgb, var(--foreground) 12%, transparent) 0); }
.gbp-gauge b { width: 74px; height: 74px; border-radius: 50%; background: var(--background); display: grid; place-items: center;
  font-size: 1.5rem; font-weight: 600; }
.gbp-top__t h2 { margin: 0 0 .25rem; font-size: 1.05rem; letter-spacing: 0; }
.gbp-top__t p { margin: 0; color: color-mix(in srgb, var(--foreground) 62%, transparent); }

.gbp-prio { margin-top: 1.4rem; padding: 1.2rem 1.4rem; border-radius: var(--radius-card, 2rem);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.gbp-prio h3 { margin: 0 0 .6rem; font-size: .82rem; letter-spacing: .02em; color: var(--accent); }
.gbp-prio ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .5rem; }

/* ------------------------------ kort -------------------------------
   Ett kort per profilfält. Ingen "nuvarande"-spalt längre: underlaget är
   sajten, inte en befintlig profil, så det finns inget att ställa mot. */
.gbp-card { margin-top: .9rem; padding: 1.15rem 1.4rem; border: 1px solid var(--vt-hair, #e9e8e5);
  border-radius: var(--radius-card-sm, 1.25rem); background: var(--background); }
.gbp-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .55rem; }
.gbp-card__head h3 { margin: 0; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--foreground) 50%, transparent); }
.gbp-card__act { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }
.gbp-card__meta { font-size: .76rem; color: color-mix(in srgb, var(--foreground) 45%, transparent); }
.gbp-card__v { margin: 0; font-size: 1.02rem; line-height: 1.6; }
.gbp-card__why { margin: .7rem 0 0; font-size: .89rem; line-height: 1.6;
  color: color-mix(in srgb, var(--foreground) 55%, transparent); }

.gbp-warn { margin: .7rem 0 0; padding: .85rem 1.1rem; border-radius: var(--radius-control, .875rem);
  background: color-mix(in srgb, #a52a2a 8%, transparent); font-size: .92rem; line-height: 1.6; }
.gbp-warn b { margin-right: .3rem; }

.gbp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.gbp-chips li { font-size: .9rem; padding: .3rem .8rem; border-radius: 999px;
  border: 1px solid var(--vt-hair, #e9e8e5); background: color-mix(in srgb, var(--foreground) 3%, transparent); }
.gbp-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; font-size: 1rem; line-height: 1.55; }
.gbp-hours { border-collapse: collapse; font-size: .97rem; }
.gbp-hours th { text-align: left; font-weight: 500; padding: .2rem 1.4rem .2rem 0;
  color: color-mix(in srgb, var(--foreground) 60%, transparent); }
.gbp-hours td { padding: .2rem 0; }

/* tjänster och produkter */
.gbp-svc { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.gbp-svc li { display: grid; gap: .1rem; padding: .7rem 0; border-top: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent); }
.gbp-svc li:first-child { border-top: 0; padding-top: 0; }
.gbp-svc b { font-weight: 600; font-size: 1rem; }
.gbp-svc b em { font-style: normal; font-weight: 400; font-size: .88rem; margin-left: .4rem; color: var(--accent); }
.gbp-svc span { font-size: .93rem; line-height: 1.55; color: color-mix(in srgb, var(--foreground) 62%, transparent); }
.gbp-svc i { font-style: normal; font-size: .76rem; color: color-mix(in srgb, var(--foreground) 40%, transparent); }

/* ----------------------------- bilderna ---------------------------- */
.gbp-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .9rem; }
.gbp-photo { margin: 0; border: 1px solid var(--vt-hair, #e9e8e5); border-radius: var(--radius-card-sm, 1.25rem);
  overflow: hidden; background: var(--background); display: flex; flex-direction: column; }
/* height:auto måste stå kvar. Bilderna bär width- och height-attribut med sina
   verkliga mått, och utan det här vinner attributens höjd över aspect-ratio —
   då blir en stående bild dubbelt så hög som sina grannar i rutnätet. */
.gbp-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  display: block; background: var(--surface, #f1f0ee); }
.gbp-photo figcaption { padding: .6rem .75rem .7rem; display: grid; gap: .18rem; }
.gbp-photo__cat { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.gbp-photo__f { font-size: .76rem; word-break: break-all; color: color-mix(in srgb, var(--foreground) 55%, transparent); }
.gbp-photo__alt { font-size: .82rem; line-height: 1.45; color: color-mix(in srgb, var(--foreground) 70%, transparent); }
/* Skelettet håller platsen medan bildsteget körs, så sidan inte hoppar. */
.gbp-photo--skel { aspect-ratio: 4 / 3; border-style: dashed;
  background: color-mix(in srgb, var(--foreground) 4%, transparent); animation: gbp-pulse 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .gbp-photo--skel { animation: none } }

.gbp-dl { margin-top: 1.4rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.gbp-dl__x { font-size: .82rem; color: color-mix(in srgb, var(--foreground) 45%, transparent); }

/* ------------------------- inlägg och frågor ----------------------- */
.gbp-posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .9rem; }
.gbp-post { margin: 0; padding: 1.2rem 1.35rem; border: 1px solid var(--vt-hair, #e9e8e5);
  border-radius: var(--radius-card-sm, 1.25rem); display: flex; flex-direction: column; gap: .55rem; }
.gbp-post h3 { margin: 0; font-size: 1.02rem; }
.gbp-post p { margin: 0; font-size: .94rem; line-height: 1.6; color: color-mix(in srgb, var(--foreground) 70%, transparent); }
.gbp-post footer { margin-top: auto; padding-top: .6rem; display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.gbp-pillbtn { font-size: .76rem; padding: .25rem .7rem; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }

.gbp-faq { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.gbp-faq li { display: grid; gap: .25rem; padding: 1rem 0; border-top: 1px solid color-mix(in srgb, var(--foreground) 9%, transparent); }
.gbp-faq li:first-child { border-top: 0; padding-top: 0; }
.gbp-faq b { font-size: 1rem; }
.gbp-faq span { font-size: .94rem; line-height: 1.6; color: color-mix(in srgb, var(--foreground) 65%, transparent); }
.gbp-faq .gbp-copy { justify-self: start; }

.gbp-quote { padding: 1.3rem 1.5rem; border-radius: var(--radius-card-sm, 1.25rem);
  background: color-mix(in srgb, var(--accent) 6%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.gbp-quote p { margin: 0 0 .9rem; line-height: 1.65; }

.gbp-code { border: 1px solid var(--vt-hair, #e9e8e5); border-radius: var(--radius-card-sm, 1.25rem); padding: 1rem 1.2rem; }
.gbp-code pre { margin: 0 0 .9rem; overflow-x: auto; }
.gbp-code code { font-size: .78rem; line-height: 1.55; white-space: pre; }

/* ------------------------ jämförelse och åtgärder ------------------ */
.gbp-benchwrap { overflow-x: auto; }
.gbp-bench { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 34rem; }
.gbp-bench th, .gbp-bench td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid color-mix(in srgb, var(--foreground) 9%, transparent); }
.gbp-bench th { font-weight: 600; color: color-mix(in srgb, var(--foreground) 55%, transparent); font-size: .82rem; }
.gbp-bench tr.is-you td { background: color-mix(in srgb, var(--accent) 8%, transparent); font-weight: 600; }

.gbp-gaps { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.gbp-gaps li { display: grid; gap: .15rem; padding: .85rem 0; border-top: 1px solid color-mix(in srgb, var(--foreground) 9%, transparent); }
.gbp-gaps li:first-child { border-top: 0; padding-top: 0; }
.gbp-gaps span { font-size: .93rem; line-height: 1.55; color: color-mix(in srgb, var(--foreground) 62%, transparent); }

.gbp-check { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.gbp-check li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .7rem; padding: .8rem 0;
  border-top: 1px solid color-mix(in srgb, var(--foreground) 9%, transparent); }
.gbp-check li:first-child { border-top: 0; }
.gbp-check .m { width: 1.1rem; height: 1.1rem; border-radius: 50%; margin-top: .15rem; }
.gbp-check .m--bra { background: #2f6f3e; }
.gbp-check .m--forbattra { background: var(--accent); }
.gbp-check .m--saknas { background: color-mix(in srgb, var(--foreground) 25%, transparent); }
.gbp-check .t b { display: block; font-weight: 600; margin-bottom: .15rem; }
.gbp-check .t span { color: color-mix(in srgb, var(--foreground) 62%, transparent); font-size: .95rem; }

/* --------------------------- knappar och märken -------------------- */
.gbp-copy { font: inherit; font-size: .82rem; cursor: pointer; background: none; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--foreground) 20%, transparent); border-radius: 999px;
  padding: .3rem .8rem; color: var(--foreground); transition: color .15s, border-color .15s; }
.gbp-copy:hover { border-color: var(--accent); color: var(--accent); }
.gbp-copy.is-done { color: var(--accent); border-color: var(--accent); }
.gbp-copy--all { align-self: center; }
.gbp-quote .gbp-copy, .gbp-code .gbp-copy, .gbp-svc + .gbp-copy { margin-top: 0; }

.gbp-tag { font-size: .72rem; padding: .22rem .6rem; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.gbp-tag--bra { color: #2f6f3e; background: color-mix(in srgb, #2f6f3e 12%, transparent); }
.gbp-tag--forbattra { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.gbp-tag--risk { color: #a23; background: color-mix(in srgb, #a23 12%, transparent); }
.gbp-tag--saknas { color: color-mix(in srgb, var(--foreground) 55%, transparent); background: color-mix(in srgb, var(--foreground) 8%, transparent); }

.gbp-disclaimer { margin-top: 2.4rem; font-size: .85rem; line-height: 1.6; max-width: 68ch;
  color: color-mix(in srgb, var(--foreground) 50%, transparent); }

@media (max-width: 720px) {
  .gbp-top { grid-template-columns: auto 1fr; }
  .gbp-copy--all { grid-column: 1 / -1; justify-self: start; }
  .gbp-sec { margin-top: 2rem; }
}

/* =========================================================
   Delar hämtade ur frontness.se som bara det här verktyget
   använder, och som därför inte ligger i base.css.
   ========================================================= */

/* ----------------- körlayout: förloppet som högerspalt ----------------
   Heron ska äga första skärmen: formuläret är sidans enda uppgift. min-height
   på dvh, inte vh, så mobilens adressfält inte klipper botten. */
.subhero:has(.vt-run) { display: flex; align-items: center; min-height: 100dvh; }
.vt-run { display: grid; gap: 2.5rem; width: 100%; }
@media (min-width: 1024px) {
  /* Före inskick tar bilden högerspalten. När körningen startat är det
     resultatet som ska stå där: bilden lämnar plats, den har gjort sitt. */
  .vt-run:not(.is-running) { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 4rem; align-items: center; }
  .vt-run.is-running { grid-template-columns: minmax(0, 1fr) 25rem; gap: 3.5rem; align-items: start; }
}
.vt-run.is-running .vt-run__media { display: none; }

/* ---------------------------- CTA-bandet ---------------------------- */
.ctaband { background: var(--background); }
.ctaband__panel {
  position: relative; overflow: hidden; border-radius: var(--radius-card); background: var(--ink); color: #fff;
  padding: 4rem 1.5rem; text-align: center;
}
@media (min-width: 640px) { .ctaband__panel { padding: 5.5rem 2rem } }
.ctaband h2 { margin: 1.25rem auto 0; max-width: 16ch; font-size: 2.25rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.05; }
@media (min-width: 640px)  { .ctaband h2 { font-size: 3rem } }
@media (min-width: 1024px) { .ctaband h2 { font-size: 3.75rem } }
.ctaband p { margin: 1.5rem auto 0; max-width: 52ch; font-size: 1rem; line-height: 1.7; color: rgba(255, 255, 255, .55); }
.ctaband .pill { margin-top: 2.25rem; }