/**
 * Free ASO Report — bespoke component styles
 *
 * Source: themes/apptweak-elementor/resources/css/_free-tools.css
 * Generated by: tailwindcss CLI (Method 2) — @apply directives fully expanded.
 * Do NOT add @apply here; plugin CSS is NOT processed by Tailwind.
 *
 * 2026-07 redesign: restyled to the marketing-site theme tokens (Isabelline
 * beige, jet-black, Karla/--sans) — see docs/superpowers/specs/2026-07-01-
 * free-aso-report-redesign-design.md §4/§7. Uses native CSS nesting (&) —
 * ships as static CSS, no build step, no @apply/@tailwind.
 */

@media (min-width: 960px) {
  body.page-aso-report {
    position: relative;
  }
}

.free-tool {
  margin-left: 1rem;
  margin-right: 1rem;
  border-radius: 1.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(244 240 231 / var(--tw-bg-opacity, 1));
  padding: 1rem;
  text-align: center;
}

@media (min-width: 960px) {
  /* Higher specificity than the theme app.css `.free-tool { flex-direction: row }`
     (shared by other free tools). Scoped here so only the ASO report stacks
     its search band above the results; free-aso-report.css only loads on this page. */
  .free-tool-wrapper .free-tool {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2.5rem;
  }
}

.free-tool {
  input.search-app {
    &:focus {
      --tw-text-opacity: 1;
      color: rgb(42 40 37 / var(--tw-text-opacity, 1));
    }
  }
  input::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(124 127 116 / var(--tw-text-opacity, 1));
  }
  input::placeholder {
    --tw-text-opacity: 1;
    color: rgb(124 127 116 / var(--tw-text-opacity, 1));
  }
  input::-moz-placeholder {
    opacity: 1;
  }
  input::placeholder {
    opacity: 1;
  }
}

/* =============================================================
   Intro band — beige, full-bleed feel
   ============================================================= */
.faso-intro {
  background-color: var(--Isabelline);
  border-radius: 1.5rem;
  padding: 1.5rem 1rem 2rem;
  text-align: left;
}

@media (min-width: 960px) {
  .faso-intro {
    padding: 2rem 2.5rem 2.5rem;
  }
}

.faso-subtitle {
  font-family: var(--sans);
  color: var(--artichoke);
  font-size: 1rem;
  margin: 0;
}

/* =============================================================
   Search row
   ============================================================= */
.faso-intro .search-bar-wrapper {
  background-color: var(--Isabelline-light);
  border: 1px solid var(--Isabelline-dark);
  border-radius: 0.75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (min-width: 960px) {
  /* Wrap (not nowrap): the store switch is wide (~250px with its labels), so on
     mid-width viewports the row can't fit — wrapping keeps the search field at
     its legible min-width instead of squeezing it, and avoids overlap. */
  .faso-intro .search-bar-wrapper {
    flex-wrap: wrap;
  }
}

.faso-intro .search-bar {
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (min-width: 960px) {
  .faso-intro .search-bar {
    flex-wrap: nowrap;
    align-items: center;
  }
}

/* Search form itself must be able to shrink too — it's a flex item in
   .search-bar-wrapper alongside the store toggle and Run-report button. */
#js-search-app {
  min-width: 220px;
}

@media (min-width: 960px) {
  /* Hold the search form to at least its content (search field 220 + country
     170 + gap). Without this the form shrinks to absorb the row's overflow,
     squeezing the placeholder and pushing the country over the store switch.
     Kept ≥ content so the WRAPPER wraps a trailing item instead. */
  #js-search-app {
    min-width: 400px;
  }
}

/* App search field — wide + affordant. min-width:0 overrides the flex-item
   default of min-width:auto so this field can actually shrink at ≥960px
   (nowrap row); otherwise it forces the row wider than its container and
   the country select / store toggle / CTA overlap. */
.faso-search-field {
  position: relative;
  min-width: 220px;
}

@media (min-width: 960px) {
  /* Keep the placeholder ("Search for an app") legible — 220px accounts for the
     input's 2.5rem side-padding (icon + clear). The wrapper wraps when tight. */
  .faso-search-field {
    min-width: 220px;
  }
}

.faso-search-input {
  font-family: var(--sans);
  width: 100%;
  height: 48px;
  padding: 0 2.5rem;
  background-color: #fff;
  border: 1px solid var(--Isabelline-dark);
  border-radius: 0.6rem;
  color: var(--jet-black);
  font-size: 1rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.faso-search-input:focus {
  outline: none;
  border-color: var(--artichoke);
  box-shadow: 0 0 0 3px rgba(124, 127, 116, 0.15);
}

.faso-search-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--artichoke);
}

.faso-search-clear {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
}

/* Country select */
.faso-select {
  font-family: var(--sans);
  width: 100%;
  height: 48px;
  padding: 0 0.75rem;
  background-color: #fff;
  border: 1px solid var(--Isabelline-dark);
  border-radius: 0.6rem;
  color: var(--jet-black);
  cursor: pointer;
  box-sizing: border-box;
}

.faso-country {
  flex: none;
}

@media (min-width: 960px) {
  .faso-country {
    flex: none;
    width: 170px;
  }
}

/* Store switcher — ported from the algo-change-detector `label.switch`
   component (see the verbatim copy below); this wrapper just fits it into
   the search-bar row layout. */
.faso-store-switch {
  flex: none;
}

/* Below the desktop breakpoint the search bar wraps to multiple rows; the
   standalone app-icon then sits isolated on the left and squeezes the
   controls, so hide it here (the icon still shows on desktop inline, and in
   the phone preview + the App-icon check at every size). */
@media (max-width: 959px) {
  .faso-intro .search-bar-wrapper .app-icon {
    display: none;
  }
}

/* =============================================================
   label.switch component — copied verbatim from algo-change.css L1-138
   (that stylesheet does not load on this page, so it's duplicated here).
   ============================================================= */
label.switch {
  --switch-size: 45px;
  --thumb-gap: 4px;
  --thumb-size: calc(var(--switch-size) * 0.55 - var(--thumb-gap));
  --thumb-active-offset: calc(var(--switch-size) / 2);
  --track-radius: calc(var(--switch-size) / 1.6666);

  --thumb-color: #fff;
  --track-color: #c82c46;
  --accent-color: #c82c46;

  --transition: 200ms ease;
  display: inline-block;
  position: relative;
}

label.switch .track {
  width: var(--switch-size);
  height: calc(var(--switch-size) / 1.6666);
  background: var(--track-color);
  border-radius: calc(var(--track-radius) / 2);
  display: flex;
  align-items: center;
  box-shadow: inset 0px 0px 4px -2px rgba(0, 0, 0, 0.129);
  transition: 250ms ease;
}

label.switch .thumb {
  display: inline-block;
  background: var(--thumb-color);
  width: var(--thumb-size);
  height: var(--thumb-size);
  border-radius: 50%;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.17);
  transform: translateX(var(--thumb-gap));
  transition: transform 250ms ease-in-out;
}

label.switch input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}

label.switch input[type="checkbox"]:checked + .track {
  background: var(--accent-color);
}

label.switch input[type="checkbox"]:checked + .track .thumb {
  transform: translateX(var(--thumb-active-offset));
}

label.switch input[type="checkbox"]:focus + .track {
  box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 0.09);
}

/* Variation: has-indicator */
label.switch.has-inidicator .thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

label.switch.has-inidicator .thumb::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 6px;
  background: #d71830;
}

label.switch.has-inidicator
  input[type="checkbox"]:checked
  + .track
  .thumb::before {
  background: var(--accent-color);
}

/* Variation: has-label */
label.switch.has-label {
  display: grid;
  grid-template-areas: "col-1 col-2 col-3";
  grid-gap: 10px;
  align-items: center;
}

label.switch.has-label .chart,
label.switch.has-label .switch__opt-left {
  color: rgba(0, 0, 0, 0.6);
  grid-area: col-1;
  transition: var(--transition);
}

label.switch.has-label .map,
label.switch.has-label .switch__opt-right {
  color: rgba(0, 0, 0, 0.3);
  grid-area: col-3;
  transition: var(--transition);
}

label.switch.has-label .track {
  grid-area: col-2;
}

label.switch.has-label input[type="checkbox"]:checked ~ .map,
label.switch.has-label input[type="checkbox"]:checked ~ .switch__opt-right {
  color: rgba(0, 0, 0, 0.6);
}

label.switch.has-label input[type="checkbox"]:checked ~ .chart,
label.switch.has-label input[type="checkbox"]:checked ~ .switch__opt-left {
  color: rgba(0, 0, 0, 0.3);
}

/* Store toggle: keep each store icon + its label on a single line (the grid
   columns are content-sized, so without nowrap the longer "App Store" /
   "Play Store" labels wrapped to two lines). */
label.switch.has-label .switch__opt-left,
label.switch.has-label .switch__opt-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

label.switch.has-label .switch__store-icon {
  height: 18px;
  width: auto; /* preserve each icon's aspect ratio (Play icon isn't square) */
  flex: 0 0 auto;
  display: inline-block;
}

/* Run report CTA — brand red, at the end of the bar */
.faso-run-report {
  font-family: var(--sans);
  flex: none;
  background-color: var(--brand-color);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0 1.6rem;
  height: 48px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease-in-out;
}

.faso-run-report:hover {
  background-color: #a52a3b;
}

/* Loading spinner — dependency-free, replaces the Font Awesome Pro spinner */
@keyframes faso-spin {
  to {
    transform: rotate(360deg);
  }
}

.faso-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: faso-spin 0.7s linear infinite;
}

/* Search-results loader row — only .faso-spinner spins; the container
   (spinner + "Fetching apps…" text) must stay static. Was previously
   `class="loader"`, which collided with the theme's global `.loader { animation: spin }`. */
.faso-search-loader {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--artichoke);
}

#js-search-results li {
  a,
  span {
    display: flex;
  }
  a,
  span {
    align-items: center;
  }
}

#js-search-results {
  font-family: var(--sans);
  li:focus-within,
  li:has(a):hover {
    --tw-bg-opacity: 1;
    background-color: rgb(200 44 70 / var(--tw-bg-opacity, 1));
  }
  li:focus-within,
  li:has(a):hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
  li:focus-within,
  li:has(a):hover {
    a:focus {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
  }
  li:has(span) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
  }
}

/* =============================================================
   Featured apps grid (empty state)
   ============================================================= */
.free-tool-starting-app {
  border-color: transparent;
  line-height: 1;
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.free-tool-starting-app:hover {
  --tw-border-opacity: 1;
  border-color: rgb(200 44 70 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(200 44 70 / var(--tw-text-opacity, 1));
}

@media (min-width: 960px) {
  .free-tool-starting-app {
    margin: 1rem;
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 218 202 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 0.5rem;
  }
}

/* Featured-app name: kill the default paragraph margin so align-items:center
   centers the TEXT (not the text + its bottom margin) against the icon. */
.free-tool-starting-app p {
  margin: 0;
}

/* =============================================================
   Results — two columns
   ============================================================= */
.dashboard-wrapper {
  align-items: flex-start;
}

.faso-preview-col {
  width: 100%;
}

.faso-report-col {
  width: 100%;
  text-align: left;
}

@media (min-width: 960px) {
  .faso-preview-col {
    width: 33%;
    flex: 0 0 33%;
    position: sticky;
    top: 1rem;
    align-self: flex-start;
  }

  .faso-report-col {
    width: 63%;
    flex: 1 1 auto;
  }
}

.faso-card {
  background-color: #fff;
  border: 1px solid var(--Isabelline-dark);
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin-top: 1rem;
  text-align: left;
}

/* =============================================================
   Light / Dark segmented pill (phone preview theme toggle)
   ============================================================= */
.toggle-darkmode-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 0.75rem;
}

/* Two-segment pill — matches ASO Report Redesign.dc.html L71-74. */
.faso-theme-toggle {
  display: inline-flex;
  background: var(--Isabelline-light);
  border: 1px solid var(--Isabelline-dark);
  border-radius: 20px;
  padding: 3px;
  gap: 2px;
}

.faso-theme-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--sans);
  font: 600 12px var(--sans);
  padding: 6px 15px;
  border-radius: 16px;
  color: var(--artichoke);
  transition: background-color 0.2s, color 0.2s;
}

.faso-theme-opt.is-active {
  background-color: #fff;
  color: var(--jet-black);
  box-shadow: var(--shadow-elevation-low);
}

/* =============================================================
   Phone preview
   ============================================================= */
.smartphone-mockup-wrapper {
  margin-bottom: 1rem;
  margin-top: 0.5rem;
}

.smartphone-mockup {
  position: relative;
  z-index:1;
  align-self: top;
  background-size: contain;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: top center;
  border-radius: 16px;

  /* &.is-ios {
    min-height: 1000px;
    aspect-ratio: 261 / 574;
    background-image: url('https://www.apptweak.com/img/2023/11/TJgPwg4o-iphone-x.png?auto=format&q=95');

    &.dark-active {
      background-image: url('https://www.apptweak.com/img/2023/11/9gyXiI8s-iphone-x-dark.png?auto=format&q=95');
    }
  } */

  &.is-android, &.is-ios {
    /* min-height: 500px; */
    width: 100%;
    aspect-ratio: 461 / 952;
    background-image: url('https://www.apptweak.com/img/2023/11/pixel2-xl.png?auto=format&q=95');
    &.dark-active {
      background-image: url('https://www.apptweak.com/img/2023/11/pixel2-xl-dark.png?auto=format&q=95');
    }
  }
  &.dark-active {
    * {
      --tw-text-opacity: 1;
      color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    }
  }
}

/* =============================================================
   Score summary card — gauges + verdict
   ============================================================= */
.faso-score-summary {
  background-color: var(--Isabelline);
  border: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
}

.faso-score-summary .progress-bar-circle {
  margin: 0;
  flex-shrink: 0;
}

.faso-score-summary .js-verdict {
  font-family: var(--sans);
  color: var(--artichoke);
  flex: 1 1 220px;
}

/* Gauge geometry — viewBox 0 0 124 124, r=54, stroke-width=10 (matches
   ASO Report Redesign.dc.html L82-94). Track circle (first, static, no id)
   + progress arc (#js-svg-app-power / #js-svg-aso-score, rounded cap,
   rotated -90° in the markup so it starts at 12 o'clock). */
.progress-bar-circle svg {
  width: 116px;
  height: 116px;
  margin: 0.4rem 0;
}

.progress-bar-circle svg > circle:first-child {
  stroke: var(--Isabelline-dark);
}

.progress-bar-circle svg > circle#js-svg-app-power,
.progress-bar-circle svg > circle#js-svg-aso-score {
  transition: stroke-dashoffset 0.6s ease-in-out, stroke 0.3s ease-in-out;
}

/* Arc color by score value — set via JS (setGaugeArc): ≥67 good, 34–66
   warn, <34 bad. `.green` kept as the pre-color-coding default/fallback. */
/* .free-tool-wrapper prefix raises specificity above the theme app.css
   `.progress-bar-circle .green { stroke:#48b06b }` (same 0,2,0, loads later),
   which otherwise overrode the score-based arc color on both gauges. */
.free-tool-wrapper .progress-bar-circle .green,
.free-tool-wrapper .progress-bar-circle .gauge-good {
  stroke: #239c4b;
}

.free-tool-wrapper .progress-bar-circle .gauge-warn {
  stroke: #e07925;
}

.free-tool-wrapper .progress-bar-circle .gauge-bad {
  stroke: #d9443c;
}

.progress-bar-circle {
  font-family: var(--sans);
  text-align: center;
}

.progress-bar-circle .progress-bar-circle__value {
  font: 600 33px var(--sans);
  fill: var(--jet-black);
  /* number is now the only text in the ring (no "/100"), so y=62 + middle
     baseline centers it dead-center. */
  dominant-baseline: middle;
}

.progress-bar-circle span {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--artichoke);
  margin-top: -0.25rem;
}

/* =============================================================
   Groups + check cards
   ============================================================= */

.faso-group {
  margin-top: 1rem;
}

.faso-group__header {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--jet-black);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.faso-group__header::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--gold);
}

.faso-group--good .faso-group__header::before {
  background-color: #48b06b;
}

.faso-check {
  background-color: #fff;
  border: 1px solid var(--Isabelline-dark);
  border-left: 4px solid var(--Isabelline-dark);
  /* Square left corners so the colored status rail sits flush; round right only. */
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 0.85rem 1rem;
  margin-bottom: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Two-region layout (label/value left, teaser/link right) via CSS grid —
   robust to the flat DOM order (head, value, teaser, learn) rendered by
   renderCheckCard() in free-aso-report.js. */
@media (min-width: 768px) {
  .faso-check {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto auto;
    column-gap: 1.25rem;
    row-gap: 0.35rem;
    align-items: start;
  }

  .faso-check__head {
    grid-column: 1;
    grid-row: 1;
  }

  .faso-check__value {
    grid-column: 1;
    grid-row: 2;
  }

  .faso-check__teaser {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }
}

.faso-check--bad {
  border-left-color: #dc2626;
}

.faso-check--warn {
  border-left-color: var(--gold);
}

.faso-check--good {
  border-left-color: #48b06b;
}

.faso-group--good .faso-check {
  background-color: var(--Isabelline-light);
}

.faso-check__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-family: var(--sans);
}

@media (min-width: 768px) {
  .faso-check__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
}

.faso-check__label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--artichoke);
}

.faso-check__value {
  font-family: var(--sans);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--jet-black);
  word-break: break-word;
}

.faso-check__teaser {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--artichoke);
  margin: 0 0 0.35rem;
  line-height: 1.4;
}

/* Inline "learn more" — reads as part of the teaser sentence, not a
   separate CTA block: same color as the surrounding text, just underlined. */
.faso-check__learn {
  color: inherit;
  /* !important beats the theme `a` font-size rule so it matches the teaser text */
  font-size: inherit !important;
  /* !important beats the theme/Elementor link reset that otherwise strips it */
  text-decoration: underline !important;
  cursor: pointer;
  white-space: nowrap;
}

.faso-check__learn:hover {
  text-decoration-thickness: 2px;
}

/* Drop the theme .badge-score `ml-2` (0.5rem) within this widget. The rule
   lives in the theme's compiled app.css (from _free-tools.css `@apply … ml-2`)
   and is shared by other tools, so out-specify it here instead of editing/
   recompiling the theme. */
.free-tool .badge-score {
  margin-left: 0;
}

/* Screenshots check — full-width row of small clickable thumbnails under the tip. */
.faso-check__shots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0.6rem;
}

@media (min-width: 768px) {
  /* Span both grid columns so the thumbnails sit as a second, full-width row. */
  .faso-check__shots {
    grid-column: 1 / -1;
  }
}

.faso-check__shot {
  display: inline-block;
  line-height: 0;
}

.faso-check__shot img {
  height: 68px;
  width: auto;
  border-radius: 6px;
  border: 1px solid var(--Isabelline-dark);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.faso-check__shot:hover img {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

/* App-icon check — show the real icon in the value slot. */
.faso-check__icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  border: 1px solid var(--Isabelline-dark);
  object-fit: cover;
}

/* =============================================================
   Category ranking history — SVG sparkline
   ============================================================= */
.faso-category-ranking #rankings_chart {
  margin-top: 0.5rem;
}

.faso-ranking-sparkline {
  display: block;
  width: 100%;
}

.faso-ranking-sparkline-area {
  fill: rgba(72, 176, 107, 0.12);
  stroke: none;
}

.faso-ranking-sparkline-line {
  stroke: #48b06b !important;
}

.faso-ranking-sparkline-dot {
  fill: #48b06b !important;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}

.faso-ranking-sparkline:hover .faso-ranking-sparkline-dot {
  opacity: 0.6;
}

.faso-chart-empty {
  font-family: var(--sans);
  color: var(--artichoke);
  font-size: 0.85rem;
  text-align: center;
  padding: 2rem 0;
}

/* =============================================================
   Keyword position — SVG scatter
   ============================================================= */
.faso-keyword-scatter {
  display: block;
  width: 100%;
  max-width: 100%;
}

.faso-keyword-scatter-grid {
  stroke: var(--Isabelline-dark) !important;
}

.faso-keyword-scatter-point {
  fill: var(--brand-color) !important;
  cursor: pointer;
  transition: r 0.15s ease-in-out;
}

.faso-keyword-scatter-point:hover {
  r: 7;
}

/* Shared chart hover tooltip (JS sets position/background/color inline;
   only add what JS does not already set). */
.faso-chart-tooltip {
  font-family: var(--sans);
  box-shadow: var(--shadow-elevation-medium);
}

/* =============================================================
   Similar apps
   ============================================================= */
.faso-similar-apps .js-similar-apps {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-top: 0.5rem;
  list-style: none;
  margin: 0;
}

.faso-similar-apps .js-similar-apps li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 4.5rem;
}

.similar-app {
  display: inline-block;
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  img {
    border-radius: 0.5rem;
  }
  img {
    border-width: 1px;
  }
  img {
    --tw-border-opacity: 1;
    border-color: rgb(124 127 116 / var(--tw-border-opacity, 1));
  }
  img {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
  img {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  img {
    transition-duration: 300ms;
  }
  img {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  &:hover img {
    --tw-border-opacity: 1;
    border-color: rgb(42 40 37 / var(--tw-border-opacity, 1));
  }
  &:hover img {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}

.faso-similar-apps .similar-app {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--jet-black);
  text-align: center;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

/* =============================================================
   Keyword density card + keyword-position paywall trigger
   ============================================================= */
.faso-keyword-density .js-keywords-density {
  list-style: none;
  margin: 0;
}

.faso-keyword-density .js-keywords-density li {
  background-color: var(--Isabelline-light);
  border: 1px solid var(--Isabelline-dark);
  border-radius: 0.375rem;
  font-family: var(--sans);
}

.faso-keyword-density .js-paywall-trigger,
.faso-keyword-position .js-paywall-trigger {
  cursor: pointer;
}

.faso-keyword-density .js-paywall-trigger > div,
.faso-keyword-position .js-paywall-trigger > div {
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--jet-black);
}

.faso-keyword-position .js-category-name {
  color: var(--brand-color);
}

/* =============================================================
   Dark CTA footer
   ============================================================= */
.faso-cta {
  background-color: var(--black);
  border: none;
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.faso-cta-headline {
  font-family: var(--sans);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
}

.faso-cta-subtext {
  font-family: var(--sans);
  color: var(--artichoke-light);
  font-size: 0.85rem;
  margin: 0;
}

.faso-cta .btn-primary {
  border-radius: 999px;
  white-space: nowrap;
  background-color: var(--brand-color);
  border-color: var(--brand-color);
  color: #fff;
}

/* =============================================================
   Responsive — single column on mobile
   ============================================================= */
@media (max-width: 768px) {
  .dashboard-wrapper {
    flex-direction: column;
  }

  .faso-preview-col,
  .faso-report-col {
    width: 100%;
    position: static;
  }

  .faso-check {
    flex-direction: column;
  }

  .faso-cta {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

.badge-score {
  margin-left:0;
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: 0.75rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
  --tw-ring-color: rgb(22 163 74 / 0.2);
  &.error, &.bad {
    --tw-bg-opacity: 1;
    background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
  }
  &.error, &.bad {
    --tw-text-opacity: 1;
    color: rgb(185 28 28 / var(--tw-text-opacity, 1));
  }
  &.error, &.bad {
    --tw-ring-color: rgb(220 38 38 / 0.2);
  }
  &.error, &.bad {
    /* Add fontawesome icon for error */
    &:after{
      content: "\f071";
      font-weight: 900;
    }
    &:after {
      font-family: "Font Awesome 6 Pro", sans-serif;
    }
  }
  &.ok {
    --tw-bg-opacity: 1;
    background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
  }
  &.ok {
    --tw-text-opacity: 1;
    color: rgb(21 128 61 / var(--tw-text-opacity, 1));
  }
  &.ok {
    --tw-ring-color: rgb(22 163 74 / 0.2);
  }
  &.ok {
    /* Add fontawesome icon for checked */
    &:after{
      content: "\f00c";
      font-weight: 900;
    }
    &:after {
      font-family: "Font Awesome 6 Pro", sans-serif;
    }
  }
  &.warning {
    --tw-bg-opacity: 1;
    background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
  }
  &.warning {
    --tw-text-opacity: 1;
    color: rgb(161 98 7 / var(--tw-text-opacity, 1));
  }
  &.warning {
    --tw-ring-color: rgb(202 138 4 / 0.2);
  }
  &.warning {
    /* Add fontawesome icon for warning */
    &:after{
      content: "\f071";
      font-weight: 900;
    }
    &:after {
      font-family: "Font Awesome 6 Pro", sans-serif;
    }
  }
}

.atm-swipe-scroll {
  cursor: url("data:image/svg+xml, %3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='14' cy='14' r='14' fill='%234C4C4C' fill-opacity='0.6'/%3E%3Ccircle cx='14' cy='14' r='13.5' stroke='white' stroke-opacity='0.6'/%3E%3C/svg%3E%0A") 14 14, grab;
  height: 100%;
  overflow: hidden;
}

.js-app-screenshots .js-screenshot-gallery {
  height: 100%;
  overflow: hidden;
  img {
    /* Prevent event bubbling */
    pointer-events: none;
  }
}

/* (Removed dead .stores-buttons / .store-button — the old icon store toggle,
   replaced by the ported label.switch slider in round 3.) */

.freetool-tip {
  position: relative;
  &::before {
    content: attr(data-tip-content);
    position: absolute;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background-color: white;
    color: var(--color-jet-black);
    box-shadow: var(--shadow-elevation-high);
    box-sizing: border-box;
    display: none;
    z-index: 1000;
  }
  &:hover::before {
    display: block;
  }
}

.embed-container {
  position: relative;
  /* padding-bottom: 56.25%; */
  overflow: hidden;
  max-width: 100%;
  height: auto;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}