#fps-pc-finder {
  --fpspf-bg: #ffffff;
  --fpspf-card: #ffffff;
  --fpspf-soft: #f3f7fb;
  --fpspf-border: #dbe4f0;
  --fpspf-border2: #cfd9e7;
  --fpspf-text: #0f2242;
  --fpspf-muted: #5c6e87;

  --fpspf-navy: #142a4a;
  --fpspf-navy2: #0f2442;
  --fpspf-navyHover: #0b1c34;

  --fpspf-pill: #f1f5fb;
  --fpspf-pillText: #132f57;

  --fpspf-shadow: 0 10px 30px rgba(15, 34, 66, .08);
  --fpspf-shadow2: 0 6px 18px rgba(15, 34, 66, .10);

  --fpspf-radius: 18px;
  --fpspf-radius2: 22px;
  --fpspf-gap: 18px;

  color: var(--fpspf-text);
}

#fps-pc-finder * {
  box-sizing: border-box;
}

#fps-pc-finder img {
  max-width: 100%;
  height: auto;
  display: block;
}

#fps-pc-finder a {
  color: inherit;
}

#fps-pc-finder .fpspf-wrap {
  width: 100%;
}

#fps-pc-finder .fpspf-section {
  background: var(--fpspf-bg);
  border: 1px solid var(--fpspf-border);
  border-radius: var(--fpspf-radius2);
  padding: 22px;
  margin: 0 0 18px 0;
  box-shadow: 0 1px 0 rgba(15, 34, 66, .02);
}

#fps-pc-finder .fpspf-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
  position: relative;
}

#fps-pc-finder .fpspf-h {
  margin: 0 0 6px 0;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.2px;
  color: var(--fpspf-text);
}

#fps-pc-finder .fpspf-muted {
  color: var(--fpspf-muted);
  font-size: 16px;
  line-height: 1.35;
}

#fps-pc-finder .fpspf-right {
  flex: 0 0 auto;
  min-width: 340px;
  max-width: 520px;
}

/* Selected box (right) */
#fps-pc-finder .fpspf-selectedBox {
  background: linear-gradient(#ffffff 40%, #f4f8fd);
  border: 1px solid var(--fpspf-border);
  border-radius: var(--fpspf-radius);
  padding: 14px 14px 12px 14px;
  box-shadow: 0 10px 24px rgba(15, 34, 66, .06);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 110px;
  /* drží layout stabilní */
}

#fps-pc-finder .fpspf-selectedTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#fps-pc-finder .fpspf-selectedLabel {
  font-size: 14px;
  font-weight: 800;
  color: var(--fpspf-muted);
}

#fps-pc-finder .fpspf-selectedCount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  background: var(--fpspf-navy);
  color: #fff;
  font-weight: 900;
  letter-spacing: .2px;
  box-shadow: 0 10px 18px rgba(15, 34, 66, .18);
}

/* Selected list: mini cards (image + text under), scroll X only */
#fps-pc-finder .fpspf-selectedList {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0 6px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

#fps-pc-finder .fpspf-selCover {
  position: relative;
  flex: 0 0 auto;
  width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  border-radius: 14px;
  padding: 0;
  background: transparent;
  border: 0;
}

#fps-pc-finder .fpspf-selCover img,
#fps-pc-finder .fpspf-selCover-ph {
  width: 72px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  display: block;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .10);
  border: 1px solid rgba(20, 30, 55, .14);
  background: linear-gradient(180deg, #f2f5fb, #e8eef8);
}

#fps-pc-finder .fpspf-selCover-name {
  width: 72px;
  font-size: 11px;
  line-height: 1.1;
  font-weight: 700;
  color: #102a56;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .95;
}

#fps-pc-finder .fpspf-selCover-x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 14px;
  line-height: 1;
  background: rgba(16, 42, 86, .92);
  color: #fff;
  box-shadow: 0 10px 20px rgba(15, 23, 42, .18);
  pointer-events: none;
}

#fps-pc-finder .fpspf-selCover:hover img {
  transform: translateY(-1px);
  transition: transform .15s ease;
}

/* Games head (search + reset next to it) */
#fps-pc-finder .fpspf-gamesHead {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin: 14px 0 14px 0;
  flex-wrap: wrap;
}

#fps-pc-finder .fpspf-search {
  width: 100%;
  max-width: 420px;
}

#fps-pc-finder .fpspf-search-input {
  width: 100%;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--fpspf-border);
  background: #ffffff;
  padding: 0 14px;
  font-size: 14px;
  color: var(--fpspf-text);
  outline: none;
  box-shadow: 0 1px 0 rgba(15, 34, 66, .03);
}

#fps-pc-finder .fpspf-search-input::placeholder {
  color: rgba(15, 34, 66, .32);
  font-weight: 700;
}

#fps-pc-finder .fpspf-search-input:focus {
  border-color: #b7c6dd;
  box-shadow: 0 10px 22px rgba(15, 34, 66, .08);
}

/* Games grid */
#fps-pc-finder .fpspf-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width:1400px) {
  #fps-pc-finder .fpspf-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

@media (max-width:1100px) {
  #fps-pc-finder .fpspf-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width:820px) {
  #fps-pc-finder .fpspf-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #fps-pc-finder .fpspf-chip {
    font-size: 13px !important;
  }
}

@media (max-width:520px) {
  #fps-pc-finder .fpspf-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

#fps-pc-finder .fpspf-game {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #f2f6fc;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
  box-shadow: 0 6px 14px rgba(15, 34, 66, .06);
  aspect-ratio: 3 / 4;
}

#fps-pc-finder .fpspf-game img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1);
}

#fps-pc-finder .fpspf-game .name {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(10, 20, 38, .78);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

#fps-pc-finder .fpspf-game .sel {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--fpspf-navy);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 4px;
  display: none;
  box-shadow: 0 10px 18px rgba(15, 34, 66, .20);
}

#fps-pc-finder .fpspf-game:hover {
  transform: translateY(-2px);
  border-color: #c6d3e6;
  box-shadow: 0 14px 28px rgba(15, 34, 66, .12);
}

#fps-pc-finder .fpspf-game.selected {
  border-color: #225097;
  box-shadow: 0 16px 30px rgba(15, 34, 66, .16);
}

#fps-pc-finder .fpspf-game.selected .sel {
  display: inline-flex;
}

#fps-pc-finder .fpspf-game.selected img {
  filter: saturate(1.05) contrast(1.02);
}

#fps-pc-finder .fpspf-game.locked {
  opacity: .45;
  filter: grayscale(1);
  cursor: not-allowed;
}

#fps-pc-finder .fpspf-game.locked:hover {
  transform: none;
  box-shadow: 0 6px 14px rgba(15, 34, 66, .06);
}

/* Buttons base */
#fps-pc-finder .fpspf-btn {
  border: none;
  border-radius: 14px;
  height: 40px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .2px;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, opacity .14s ease;
}

/* Primary (generic) */
#fps-pc-finder .fpspf-more-btn {
  background: var(--fpspf-navy);
  color: #fff;
  box-shadow: 0 12px 22px rgba(15, 34, 66, .18);
}

/* "Zobrazit doporučení" (Run) – stejný styl jako "Načíst další" */
#fps-pc-finder #fpspfRunBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  height: 46px;
  padding: 0 26px;
  border-radius: 14px;

  background: linear-gradient(135deg, var(--fpspf-navy) 0%, #1d3a66 55%, var(--fpspf-navyHover) 100%);
  border: 1px solid rgba(255, 255, 255, .14);

  color: #fff;
  font-size: 13.5px;
  font-weight: 900;
  letter-spacing: .25px;

  box-shadow: 0 14px 26px rgba(15, 34, 66, .20);
  position: relative;
  overflow: hidden;
}

/* jemný "sheen" pruh */
#fps-pc-finder #fpspfRunBtn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.16) 42%, rgba(255,255,255,.0) 72%);
  transform: translateX(-120%);
  transition: transform .55s ease;
  pointer-events: none;
}

#fps-pc-finder #fpspfRunBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(15, 34, 66, .24);
}

#fps-pc-finder #fpspfRunBtn:hover::before {
  transform: translateX(120%);
}

#fps-pc-finder #fpspfRunBtn:active {
  transform: translateY(0);
  box-shadow: 0 12px 22px rgba(15, 34, 66, .18);
}

#fps-pc-finder #fpspfRunBtn:focus-visible {
  outline: none;
  box-shadow:
    0 18px 32px rgba(15, 34, 66, .24),
    0 0 0 3px rgba(34, 80, 151, .22);
}

#fps-pc-finder #fpspfRunBtn:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

@media (max-width: 520px) {
  #fps-pc-finder #fpspfRunBtn {
    width: 100%;
    max-width: 420px;
  }
}

/* --- Vylepšené tlačítko "Načíst další sestavy" (pager) --- */
#fps-pc-finder #fpspfMorePCBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  height: 46px;
  padding: 0 26px;
  border-radius: 999px;

  background: linear-gradient(135deg, var(--fpspf-navy) 0%, #1d3a66 55%, var(--fpspf-navyHover) 100%);
  border: 1px solid rgba(255, 255, 255, .14);

  font-size: 13.5px;
  font-weight: 900;
  letter-spacing: .25px;

  box-shadow: 0 14px 26px rgba(15, 34, 66, .20);
  position: relative;
  overflow: hidden;
}

/* jemný "sheen" pruh */
#fps-pc-finder #fpspfMorePCBtn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.16) 42%, rgba(255,255,255,.0) 72%);
  transform: translateX(-120%);
  transition: transform .55s ease;
  pointer-events: none;
}

/* šipka vpravo */
#fps-pc-finder #fpspfMorePCBtn::after {
  content: "›";
  font-size: 18px;
  line-height: 1;
  margin-top: -1px;
  opacity: .95;
}

#fps-pc-finder #fpspfMorePCBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(15, 34, 66, .24);
}

#fps-pc-finder #fpspfMorePCBtn:hover::before {
  transform: translateX(120%);
}

#fps-pc-finder #fpspfMorePCBtn:active {
  transform: translateY(0);
  box-shadow: 0 12px 22px rgba(15, 34, 66, .18);
}

#fps-pc-finder #fpspfMorePCBtn:focus-visible {
  outline: none;
  box-shadow:
    0 18px 32px rgba(15, 34, 66, .24),
    0 0 0 3px rgba(34, 80, 151, .22);
}

#fps-pc-finder #fpspfMorePCBtn:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Loading state for "Načíst další sestavy" */
#fps-pc-finder #fpspfMorePCBtn.is-loading {
  position: relative;
  pointer-events: none;
  color: transparent;
}

#fps-pc-finder #fpspfMorePCBtn.is-loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.35);
  border-top-color: #ffffff;
  animation: fpspfBtnSpin .7s linear infinite;
}

@keyframes fpspfBtnSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 520px) {
  #fps-pc-finder #fpspfMorePCBtn {
    width: 100%;
    max-width: 420px;
  }
}

#fps-pc-finder .fpspf-more-btn:hover {
  background: var(--fpspf-navyHover);
  transform: translateY(-1px);
  box-shadow: 0 16px 28px rgba(15, 34, 66, .22);
}

#fps-pc-finder .fpspf-more-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Reset */
#fps-pc-finder .fpspf-reset-btn {
  background: #ffffff;
  color: #b42323;
  border: 1px solid #f0b7b7;
  box-shadow: 0 8px 18px rgba(180, 35, 35, .08);
  padding: 0 12px;
}

#fps-pc-finder .fpspf-reset-btn:hover {
  background: #fff3f3;
  border-color: #e9a2a2;
  transform: translateY(-1px);
}

/* Load more centered under grid */
#fps-pc-finder .fpspf-actionsRow {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
}

/* Settings controls */
#fps-pc-finder .fpspf-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width:1100px) {
  #fps-pc-finder .fpspf-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:640px) {
  #fps-pc-finder .fpspf-controls {
    grid-template-columns: 1fr;
  }
}

#fps-pc-finder .fpspf-box {
  border: 1px solid var(--fpspf-border);
  border-radius: var(--fpspf-radius);
  background: linear-gradient(#ffffff 40%, #f4f8fd);
  padding: 14px;
}

#fps-pc-finder .fpspf-box .label {
  font-size: 13px;
  font-weight: 900;
  color: var(--fpspf-muted);
  margin-bottom: 10px;
}


#fps-pc-finder .fpspf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}


/* ===== Nastavení: Profil + Rozpočet – bez posuvníku, vše viditelné =====
   Na desktopu zobrazíme "chips" jako mřížku (bez horizontal scrollu).
   Profil: 3 položky vedle sebe.
   Rozpočet: 5 položek do 3+2 (nebo 2 řady dle šířky).
*/

/* výchozí chování (mobil): necháme původní zalamování, jen sjednotíme rozestupy */
#fps-pc-finder .fpspf-controls .fpspf-box:nth-child(2) .fpspf-chips,
#fps-pc-finder .fpspf-controls .fpspf-box:nth-child(3) .fpspf-chips {
  display: grid;
  gap: 10px;
}

/* Rozlišení (1. box) – stejné chování jako Profil/Rozpočet */
#fps-pc-finder .fpspf-controls .fpspf-box:nth-child(1) .fpspf-chips {
  display: grid;
  gap: 10px;
}

@media (min-width: 821px) {
  #fps-pc-finder .fpspf-controls .fpspf-box:nth-child(1) .fpspf-chips {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  #fps-pc-finder .fpspf-controls .fpspf-box:nth-child(1) .fpspf-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  #fps-pc-finder .fpspf-controls .fpspf-box:nth-child(1) .fpspf-chips {
    grid-template-columns: 1fr;
  }
}

#fps-pc-finder .fpspf-controls .fpspf-box:nth-child(1) .fpspf-chip {
  width: 100%;
  justify-content: center;
  white-space: nowrap;
}

/* Profil (2. box) */
@media (min-width: 821px) {
  #fps-pc-finder .fpspf-controls .fpspf-box:nth-child(2) .fpspf-chips {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Rozpočet (3. box) */
@media (min-width: 821px) {
  #fps-pc-finder .fpspf-controls .fpspf-box:nth-child(3) .fpspf-chips {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* tablet: 2 sloupce */
@media (max-width: 820px) {
  #fps-pc-finder .fpspf-controls .fpspf-box:nth-child(2) .fpspf-chips,
  #fps-pc-finder .fpspf-controls .fpspf-box:nth-child(3) .fpspf-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* malé mobily: 1 sloupec */
@media (max-width: 520px) {
  #fps-pc-finder .fpspf-controls .fpspf-box:nth-child(2) .fpspf-chips,
  #fps-pc-finder .fpspf-controls .fpspf-box:nth-child(3) .fpspf-chips {
    grid-template-columns: 1fr;
  }
}

/* v mřížce chceme chipy na 100% šířky a zarovnané na střed */
#fps-pc-finder .fpspf-controls .fpspf-box:nth-child(2) .fpspf-chip,
#fps-pc-finder .fpspf-controls .fpspf-box:nth-child(3) .fpspf-chip {
  width: 100%;
  justify-content: center;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Rozpočet: jemně menší text + padding, aby se vše vešlo a vypadalo čistě */
#fps-pc-finder .fpspf-controls .fpspf-box:nth-child(3) .fpspf-chip {
  font-size: 10.25px;
  padding: 0 11px;
}

#fps-pc-finder .fpspf-chip {
  border: 1px solid var(--fpspf-border);
  background: #fff;
  color: var(--fpspf-text);
  border-radius: 10px;
  height: 36px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  font-size: 10.5px;
  cursor: pointer;
  transition: background .14s ease, transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  user-select: none;
  position: relative;
  z-index: 1;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

#fps-pc-finder .fpspf-chip:hover {
  transform: translateY(-1px);
  border-color: #c6d3e6;
  box-shadow: 0 10px 18px rgba(15, 34, 66, .08);
}

#fps-pc-finder .fpspf-chip.active {
  background: var(--fpspf-navy);
  border-color: rgba(20, 42, 74, .65);
  color: #fff;
  box-shadow: 0 12px 22px rgba(15, 34, 66, .18);
}

#fps-pc-finder .fpspf-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Run akce – bez rámování/pozadí, centrované (vypadá jako "Načíst") */
#fps-pc-finder .fpspf-actions {
  align-items: center;
}

/* pokud je Run akce vložená do "boxu", zneviditelni vizuální obal */
#fps-pc-finder .fpspf-box:has(#fpspfRunBtn) {
  background: transparent;
  border: 0;
  padding: 0;
}

#fps-pc-finder .fpspf-box:has(#fpspfRunBtn) .label {
  display: none;
}

#fps-pc-finder .fpspf-box:has(#fpspfRunBtn) .fpspf-note,
#fps-pc-finder .fpspf-box:has(#fpspfRunBtn) .fpspf-note-inline {
  text-align: center;
}

#fps-pc-finder .fpspf-box:has(#fpspfRunBtn) #fpspfRunBtn {
  margin: 0 auto;
}

/* Pomocný text k tlačítku – dáme ho NAD tlačítko (méně rušivé) */
#fps-pc-finder .fpspf-note {
  color: var(--fpspf-muted);
  font-size: 13px;
  line-height: 1.35;
  display: block;
  width: 100%;
  text-align: center;
  margin: 0 0 8px 0;
}

/* ===== „Doplňte: …“ – jednoduchý text (bez pozadí), aby nekolidoval s oranžovým upozorněním ===== */
#fps-pc-finder .fpspf-note-inline {
  /* pokud je uvnitř gridu (fpspf-controls), roztáhnout přes celou šířku a centrovat */
  grid-column: 1 / -1;
  justify-self: center;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  width: 100%;
  max-width: 100%;

  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;

  color: var(--fpspf-muted);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .1px;

  margin: 10px auto 8px auto;
  text-align: center;
}

/* optické vycentrování: jemné linky vlevo/vpravo */
#fps-pc-finder .fpspf-note-inline::before,
#fps-pc-finder .fpspf-note-inline::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(207, 217, 231, .9);
}

/* stavové varianty (pokud JS přidá třídy .is-missing / .is-ready) */
#fps-pc-finder .fpspf-note-inline.is-missing {
  color: var(--fpspf-muted);
}

#fps-pc-finder .fpspf-note-inline.is-missing::before,
#fps-pc-finder .fpspf-note-inline.is-missing::after {
  background: rgba(207, 217, 231, .9);
}

#fps-pc-finder .fpspf-note-inline.is-ready {
  color: #065f46;
}

#fps-pc-finder .fpspf-note-inline.is-ready::before,
#fps-pc-finder .fpspf-note-inline.is-ready::after {
  background: rgba(16, 185, 129, .22);
}

@media (max-width: 520px) {
  #fps-pc-finder .fpspf-note-inline {
    max-width: 100%;
    width: 100%;
    margin: 10px auto 12px auto;
    gap: 10px;
    font-size: 12.5px;
    padding: 0 6px;
  }

  #fps-pc-finder .fpspf-note-inline::before,
  #fps-pc-finder .fpspf-note-inline::after {
    min-width: 22px;
  }
}

/* Re-order: note nad tlačítko (funguje i když je v DOM až za tlačítkem) */
#fps-pc-finder .fpspf-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#fps-pc-finder .fpspf-actions .fpspf-note {
  order: 1;
}

#fps-pc-finder .fpspf-actions #fpspfRunBtn {
  order: 2;
}

/* původní selektor necháme jako no-op kompatibilitu */
#fps-pc-finder #fpspfRunBtn + .fpspf-note {
  width: 100%;
  text-align: center;
}

/* ===== Nastavení: výrazné upozornění vpravo nahoře (setup alert) ===== */
#fps-pc-finder .fpspf-section {
  position: relative;
}

/* preferovaná třída z JS: .fpspf-setup-alert.visible */
#fps-pc-finder .fpspf-setup-alert {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;

  display: none;
  align-items: center;
  gap: 10px;

  padding: 10px 14px;
  border-radius: 999px;

  background: linear-gradient(135deg, #fff7ed 0%, #fffbeb 55%, #ffffff 100%);
  border: 1px solid rgba(217, 119, 6, .28);
  box-shadow: 0 14px 28px rgba(15, 34, 66, .10);

  color: #92400e;
  font-weight: 900;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .1px;
  white-space: nowrap;
}

#fps-pc-finder .fpspf-setup-alert.visible {
  display: inline-flex;
}

#fps-pc-finder .fpspf-setup-alert::before {
  content: "⚠";
  font-size: 14px;
  line-height: 1;
}

/* fallback: pokud někde zůstane stará třída .fpspf-alert */
#fps-pc-finder .fpspf-alert {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;

  display: none;
  align-items: center;
  gap: 10px;

  padding: 10px 14px;
  border-radius: 999px;

  background: linear-gradient(135deg, #fff7ed 0%, #fffbeb 55%, #ffffff 100%);
  border: 1px solid rgba(217, 119, 6, .28);
  box-shadow: 0 14px 28px rgba(15, 34, 66, .10);

  color: #92400e;
  font-weight: 900;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .1px;
  white-space: nowrap;
}

#fps-pc-finder .fpspf-alert.visible {
  display: inline-flex;
}

#fps-pc-finder .fpspf-alert::before {
  content: "⚠";
  font-size: 14px;
  line-height: 1;
}

@media (max-width: 640px) {
  #fps-pc-finder .fpspf-setup-alert,
  #fps-pc-finder .fpspf-alert {
    /* na mobilu nechceme absolutní pozicování – a zároveň to musíme vycentrovat i uvnitř flexu */
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    transform: none;
    margin: 10px auto 12px auto;
    width: max-content;
    max-width: calc(100% - 24px);
    justify-content: center;
    white-space: normal;
    text-align: center;
    align-self: center;
    margin-left: auto;
    margin-right: auto;
  }
}


/* Results */
#fps-pc-finder .fpspf-results {
  margin-top: 6px;
  display: none; /* zobrazí až JS po kliknutí */
}

/* Sort (Results) */
#fps-pc-finder .fpspf-sortBar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 12px 0;
}

#fps-pc-finder .fpspf-sortLabel {
  font-size: 13px;
  font-weight: 900;
  color: var(--fpspf-muted);
  margin-right: 6px;
}

#fps-pc-finder .fpspf-sortChips {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#fps-pc-finder .fpspf-sortChip {
  border: 1px solid var(--fpspf-border);
  background: #fff;
  color: var(--fpspf-text);
  border-radius: 999px;
  height: 36px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  transition: background .14s ease, transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  user-select: none;
  white-space: nowrap;
}

#fps-pc-finder .fpspf-sortChip:hover {
  transform: translateY(-1px);
  border-color: #c6d3e6;
  box-shadow: 0 10px 18px rgba(15, 34, 66, .08);
}

#fps-pc-finder .fpspf-sortChip.active {
  background: var(--fpspf-navy);
  border-color: rgba(20, 42, 74, .65);
  color: #fff;
  box-shadow: 0 12px 22px rgba(15, 34, 66, .18);
}


@media (max-width: 640px) {
  #fps-pc-finder .fpspf-sortBar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 6px;
  }

  #fps-pc-finder .fpspf-sortChips {
    flex-wrap: nowrap;
  }
}


/* Mobile: komponenty (pill) na 2 řádky místo jedné dlouhé řady */
@media (max-width: 520px) {
  /* PC specifikace: 2x2 mřížka
     1. řada: CPU | GPU
     2. řada: RAM | SSD */
  #fps-pc-finder .fpspf-pcMeta {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    justify-content: center;
  }

  #fps-pc-finder .fpspf-pcMeta .m {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 9px !important;
  }

  /* pořadí: CPU, GPU, RAM, SSD */
  #fps-pc-finder .fpspf-pcMeta .m:nth-child(1) { order: 1; } /* CPU */
  #fps-pc-finder .fpspf-pcMeta .m:nth-child(2) { order: 2; } /* GPU */
  #fps-pc-finder .fpspf-pcMeta .m:nth-child(3) { order: 3; } /* RAM */
  #fps-pc-finder .fpspf-pcMeta .m:nth-child(4) { order: 4; } /* SSD */
}

/* Center sort chips when left "Doporučení / Hotovo" block is removed
   - nechceme rozbíjet mobil (kde má být 1 řádek se scroll)
   - proto centrování aplikujeme až od 521px
*/
@media (min-width: 521px) {
  #fps-pc-finder .fpspf-sortBar {
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 18px;
  }

  #fps-pc-finder .fpspf-sortLabel {
    display: none;
  }

  #fps-pc-finder .fpspf-sortChips {
    justify-content: center;
    gap: 12px;
  }

  #fps-pc-finder .fpspf-sortChip {
    font-size: 13px;
    padding: 0 16px;
    height: 38px;
  }
}

/* Mobile: fpspf-sort vždy v jednom řádku + menší písmo (bez "odskočení") */
@media (max-width: 520px) {
  #fps-pc-finder .fpspf-sortBar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;

    justify-content: flex-start !important;
    gap: 8px;

    padding: 0 2px 8px 2px;
    margin: 6px 0 14px 0;
  }

  #fps-pc-finder .fpspf-sortChips {
    flex-wrap: nowrap !important;
    gap: 8px;
  }

  #fps-pc-finder .fpspf-sortChip {
    height: 34px;
    padding: 0 10px;
    font-size: 11px;
    white-space: nowrap;
  }
}

/* =====================================================
   SORT (Results) – aktuální HTML používá .fpspf-resultsHead > .fpspf-sort
   (ne .fpspf-sortBar/.fpspf-sortChip). Přidáváme styly pro tuto variantu.
   ===================================================== */

#fps-pc-finder .fpspf-resultsHead {
  margin: 4px 0 12px 0;
}

#fps-pc-finder .fpspf-resultsHead .fpspf-sort {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* tlačítka ve sortu jsou stejné .fpspf-chip, jen mají navíc .fpspf-chip-sm */
#fps-pc-finder .fpspf-resultsHead .fpspf-sort .fpspf-chip,
#fps-pc-finder .fpspf-resultsHead .fpspf-sort .fpspf-chip.fpspf-chip-sm {
  border-radius: 999px;
  height: 38px;
  padding: 0 16px;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

/* Mobile: sort vždy v jednom řádku, bez odskoku + menší font */
@media (max-width: 520px) {
  #fps-pc-finder .fpspf-resultsHead {
    margin: 6px 0 14px 0;
  }

  #fps-pc-finder .fpspf-resultsHead .fpspf-sort {
    justify-content: flex-start;
    flex-wrap: nowrap;           /* NEzalomit do 2 řádků */
    overflow-x: auto;            /* vodorovný scroll */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;

    gap: 8px;
    padding: 0 2px 8px 2px;
  }

  #fps-pc-finder .fpspf-resultsHead .fpspf-sort .fpspf-chip,
  #fps-pc-finder .fpspf-resultsHead .fpspf-sort .fpspf-chip.fpspf-chip-sm {
    height: 34px;
    padding: 0 10px;
    font-size: 11px !important;
  }
  #fps-pc-finder .fpspf-chip.active {
    box-shadow: none !important;
  }
}

#fps-pc-finder .fpspf-group {
  margin-top: 18px;
}

#fps-pc-finder .fpspf-group-title {
  margin: 0 0 12px 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.2px;
  color: var(--fpspf-text);
}

#fps-pc-finder .fpspf-pcGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width:980px) {
  #fps-pc-finder .fpspf-pcGrid {
    grid-template-columns: 1fr;
  }
}

#fps-pc-finder .fpspf-pcCard {
  border: 1px solid var(--fpspf-border);
  border-radius: var(--fpspf-radius2);
  background: linear-gradient(#ffffff 42%, #f4f8fd);
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 16px;
  padding: 16px;
  box-shadow: 0 10px 24px rgba(15, 34, 66, .06);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}


#fps-pc-finder .fpspf-pcCard:hover {
  transform: translateY(-2px);
  border-color: #c6d3e6;
  box-shadow: 0 18px 34px rgba(15, 34, 66, .12);
}

/* =============================
   TOP zvýraznění (podle tříd z JS)
   - aktivní pouze když JS přidá .is-top-1/2/3 (tj. jen v "Doporučujeme")
   - vizuálně jemnější, prémiovější, s ikonou
   ============================= */

#fps-pc-finder .fpspf-pcCard {
  position: relative;
}

#fps-pc-finder .fpspf-pcCard.is-top-1::before,
#fps-pc-finder .fpspf-pcCard.is-top-2::before,
#fps-pc-finder .fpspf-pcCard.is-top-3::before {
  position: absolute;
  top: -16px;
  right: -12px;
  left: auto;
  z-index: 6;
  pointer-events: none;

  height: 28px;
  padding: 0 14px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18px;

  transform: translateY(-2px);
  background-clip: padding-box;
  box-shadow: 0 14px 26px rgba(15, 34, 66, .16);
}


/* TOP 1 – jemný highlight karty (ne přepálený) */
#fps-pc-finder .fpspf-pcCard.is-top-1 {
  border-color: rgba(34, 80, 151, .42);
  box-shadow: 0 18px 34px rgba(15, 34, 66, .11);
  background: linear-gradient(#ffffff 42%, #f3f8ff);
}

#fps-pc-finder .fpspf-pcCard.is-top-1:hover {
  box-shadow: 0 22px 42px rgba(15, 34, 66, .13);
}

#fps-pc-finder .fpspf-pcCard.is-top-1::before {
  content: "👑 TOP doporučení";
  color: #fff;
  background: linear-gradient(135deg, #0f2442 0%, #225097 55%, #0f2442 100%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 16px 28px rgba(15, 34, 66, .18);
}

#fps-pc-finder.fpspf-lang-sk .fpspf-pcCard.is-top-1::before {
  content: "👑 TOP odporúčanie";
}

#fps-pc-finder.fpspf-lang-hu .fpspf-pcCard.is-top-1::before {
  content: "👑 TOP ajánlás";
}

/* Fallback when JS lang class is missing: respect <html lang="..."> */
html[lang^="sk"] #fps-pc-finder .fpspf-pcCard.is-top-1::before {
  content: "👑 TOP odporúčanie";
}

html[lang^="hu"] #fps-pc-finder .fpspf-pcCard.is-top-1::before {
  content: "👑 TOP ajánlás";
}

/* zrušeno: v Safari to působí jako rušivý vnitřní border */
#fps-pc-finder .fpspf-pcCard.is-top-1::after {
  content: none;
}

/* TOP 2–3 – jen čistý štítek, bez zásahu do pozadí */
#fps-pc-finder .fpspf-pcCard.is-top-2,
#fps-pc-finder .fpspf-pcCard.is-top-3 {
  border-color: rgba(20, 42, 74, .22);
  box-shadow: 0 14px 28px rgba(15, 34, 66, .085);
}

#fps-pc-finder .fpspf-pcCard.is-top-2::before,
#fps-pc-finder .fpspf-pcCard.is-top-3::before {
  content: "★ TOP";
  color: var(--fpspf-navy2);
  background: #ffffff;
  border: 1px solid rgba(219, 228, 240, .95);
  box-shadow: 0 12px 22px rgba(15, 34, 66, .12);
}

@media (max-width: 520px) {
  #fps-pc-finder .fpspf-pcCard.is-top-1::before,
  #fps-pc-finder .fpspf-pcCard.is-top-2::before,
  #fps-pc-finder .fpspf-pcCard.is-top-3::before {
    top: -12px;
    right: -10px;
    left: auto;
    height: 27px;
    padding: 0 12px;
    transform: translateY(-1px);
  }

  #fps-pc-finder .fpspf-pcCard.is-top-1::after {
    inset: 9px;
  }
}

#fps-pc-finder .fpspf-pcMedia {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(219, 228, 240, .9);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
}

#fps-pc-finder .fpspf-pcMedia img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

#fps-pc-finder .fpspf-pcBody {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#fps-pc-finder .fpspf-pcName {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.25;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--fpspf-navy2);
  margin-bottom: 10px;
  display: block;
  font-family: "new_font", sans-serif !important;
  text-align: center;
}

#fps-pc-finder .fpspf-pcMeta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;  /* centrování celé skupiny */
  gap: 6px;                 /* mezery mezi pill */
  margin: 6px 0 12px 0;
}

#fps-pc-finder .fpspf-pcMeta .m {
  font-size: 11px;
  color: var(--fpspf-pillText);
  background: var(--fpspf-pill);
  border: 1px solid var(--fpspf-border);
  padding: 4px 6px;
  border-radius: 10px;
  text-align: center;       /* centrování textu uvnitř pill */
}

#fps-pc-finder .fpspf-pcFoot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

#fps-pc-finder .fpspf-pcFoot .fpspf-actions-right {
  display: flex;
  gap: 8px;
}

#fps-pc-finder .fpspf-pcPrice {
  display: flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}

#fps-pc-finder .fpspf-pcPrice .k {
  color: var(--fpspf-muted);
  font-weight: 400;
  font-size: 14px;
  font-family: "new_font", sans-serif;
}

#fps-pc-finder .fpspf-pcPrice strong {
  font-size: 22px;
  font-weight: 400;
  color: #222;
  font-family: "new_font", sans-serif;
}

#fps-pc-finder .fpspf-pcBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 40px;
  border-radius: 14px;
  background: var(--fpspf-navy);
  color: #fff;
  font-weight: 900;
  text-decoration: none !important;
  box-shadow: 0 12px 22px rgba(15, 34, 66, .18);
  transition: background .14s ease, transform .14s ease, box-shadow .14s ease;
  position: relative;
  overflow: hidden;
  font-size: 13px;
}

#fps-pc-finder .fpspf-pcBtn:link,
#fps-pc-finder .fpspf-pcBtn:visited,
#fps-pc-finder .fpspf-pcBtn:hover,
#fps-pc-finder .fpspf-pcBtn:active {
  text-decoration: none !important;
}

#fps-pc-finder .fpspf-pcBtn * {
  text-decoration: none !important;
}

#fps-pc-finder .fpspf-pcBtn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.20) 42%, rgba(255,255,255,0) 72%);
  transform: translateX(-120%);
  transition: transform .55s ease;
  pointer-events: none;
}

#fps-pc-finder .fpspf-pcBtn:hover {
  background: linear-gradient(135deg, var(--fpspf-navy) 0%, #1d3a66 55%, var(--fpspf-navyHover) 100%);
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(15, 34, 66, .24);
}

#fps-pc-finder .fpspf-pcBtn:hover::before {
  transform: translateX(120%);
}

/* =====================================================
   PC CARD – Compare button (refined)
   ===================================================== */

#fps-pc-finder .fpspf-pcCompareBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;

  height: 25px;
  border-radius: 999px;

  background: #f1f5fb;
  border: 1px solid #dbe4f0;

  color: #0f2442;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .2px;

  cursor: pointer;
  transition: all .15s ease;
}

/* Icon (Font Awesome ready) */
#fps-pc-finder .fpspf-pcCompareBtn::before {
  content: "\f24e"; /* fa-balance-scale */
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  font-size: 12px;
}

#fps-pc-finder .fpspf-pcCompareBtn:hover {
  background: #e6edf7;
  border-color: #c6d3e6;
  transform: translateY(-1px);
}

/* ACTIVE (already selected for compare) */
#fps-pc-finder .fpspf-pcCompareBtn.is-active {
  background: linear-gradient(135deg, #142a4a 0%, #1d3a66 55%, #0f2442 100%);
  border-color: rgba(20, 42, 74, .65);
  color: #ffffff;
  box-shadow: 0 12px 22px rgba(15, 34, 66, .18);
  cursor: pointer; /* allow unselect */
}

#fps-pc-finder .fpspf-pcCompareBtn.is-active::before {
  content: "\f00c"; /* fa-check */
}

#fps-pc-finder .fpspf-pcCompareBtn.is-active:hover {
  transform: none;
  box-shadow: 0 12px 22px rgba(15, 34, 66, .18);
}

/* =====================================================
   PC CARD – PC card buttons container (layout & order)
   ===================================================== */
#fps-pc-finder .fpspf-pcBtns {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Force Compare button BEFORE Show button */
#fps-pc-finder .fpspf-pcCompareBtn {
  order: 1;
}

#fps-pc-finder .fpspf-pcBtn {
  order: 2;
}


/* Header responsive */
@media (max-width:980px) {
  #fps-pc-finder .fpspf-section-head {
    flex-direction: column;
    align-items: stretch;
  }

  #fps-pc-finder .fpspf-right {
    min-width: 0;
    max-width: 100%;
  }

  #fps-pc-finder .fpspf-search {
    max-width: 100%;
  }
}

@media (max-width:520px) {
  /* Mobile: vycentrování vybraných her (odstranění levé mezery ve scroll listu) */
  #fps-pc-finder .fpspf-selectedList {
    padding-left: 0;
    padding-right: 0;
    justify-content: center; /* když se vejde, bude to působit vycentrovaně */
    scroll-padding-left: 0;
  }
  #fps-pc-finder .fpspf-section {
    padding: 16px;
  }

  #fps-pc-finder .fpspf-selectedBox {
    min-height: 104px;
  }

  #fps-pc-finder .fpspf-selCover {
    width: 66px;
  }

  #fps-pc-finder .fpspf-selCover img,
  #fps-pc-finder .fpspf-selCover-ph {
    width: 78px;
    height: 52px;
  }

  #fps-pc-finder .fpspf-selCover-name {
    width: 69px;
    font-size: 8px !important;
  }

  #fps-pc-finder .fpspf-game .name,
  #fps-pc-finder .fpspf-game .sel {
    font-size: 8px !important;
  }

  #fps-pc-finder .fpspf-pcCard {
    grid-template-columns: 1fr;
  }

  #fps-pc-finder .fpspf-pcMedia {
    height: 160px;
  }
}

/* Safety: ensure clicks work (no accidental overlay blocking) */
#fps-pc-finder .fpspf-box,
#fps-pc-finder .fpspf-chips,
#fps-pc-finder .fpspf-chip,
#fps-pc-finder #fpspfRunBtn,
#fps-pc-finder .fpspf-more-btn,
#fps-pc-finder .fpspf-reset-btn {
  pointer-events: auto;
}

#fps-pc-finder .fpspf-results {
  position: relative;
  z-index: 0;
}

/* ===== FPS per-game štítky v kartě PC ===== */
#fps-pc-finder .fpspf-fpsRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 10px 0;
}

#fps-pc-finder .fpspf-fpsPill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--fpspf-border);
  background: #fff;
  box-shadow: 0 8px 16px rgba(15, 34, 66, .06);
  max-width: 100%;
}

#fps-pc-finder .fpspf-fpsPill .g {
  font-weight: 900;
  font-size: 12px;
  color: var(--fpspf-navy2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#fps-pc-finder .fpspf-fpsPill .v {
  font-weight: 900;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 8px;
  color: #fff;
  background: #1f7a4a;
  /* zelená default */
}

#fps-pc-finder .fpspf-fpsPill .v.low {
  background: #b42323;
}

#fps-pc-finder .fpspf-fpsPill .v.mid {
  background: #b7791f;
}

#fps-pc-finder .fpspf-fpsPill .v.high {
  background: #1f7a4a;
}

#fps-pc-finder .fpspf-fpsPill .v.soon {
  background: #64748b;
}

@media (max-width:520px) {
  #fps-pc-finder .fpspf-fpsPill .g {
    max-width: 120px;
  }
}

/* FPS blok v kartě PC – odlišný styl + pod sebou */
.fpspf-fpsRow {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  border: 1px dashed rgba(20, 42, 74, .28);
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fe 100%);
  border-radius: 16px;
  padding: 10px;
}

.fpspf-fpsPill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(219, 228, 240, .9);
  background: #fff;
  box-shadow: 0 8px 16px rgba(15, 34, 66, .06);
}

.fpspf-fpsPill .g {
  font-weight: 900;
  font-size: 12px;
  color: #0f2442;
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fpspf-fpsPill .v {
  flex: 0 0 auto;
  font-weight: 900;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
  background: #64748b;
  /* default = soon */
}

.fpspf-fpsPill .v.low {
  background: #b42323;
}

.fpspf-fpsPill .v.mid {
  background: #b7791f;
}

.fpspf-fpsPill .v.high {
  background: #1f7a4a;
}

.fpspf-fpsPill .v.soon {
  background: #64748b;
}

.pc-card-content {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-gap: 16px;
  align-items: start;
}

.pc-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pc-components {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pc-components .component-pill {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f1f5fb;
  border: 1px solid #dbe4f0;
  font-size: 12px;
  font-weight: 600;
  color: #0f2442;
  width: fit-content;
}




/* =====================================================
   COMPARE BAR (floating bottom panel)
   ===================================================== */

#fpspfCompareBar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;

  display: flex;
  justify-content: center;

  padding: 14px 18px 18px;
  pointer-events: auto;
}

#fpspfCompareBar .fpspf-compareInner {
  width: 100%;
  max-width: 1200px;

  background: linear-gradient(180deg, #ffffff 0%, #f4f8fd 100%);
  border: 1px solid #dbe4f0;
  border-radius: 22px;

  box-shadow: 0 25px 50px rgba(15, 34, 66, .18);

  padding: 14px 16px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  pointer-events: auto; /* enable interaction */
}

#fpspfCompareBar .fpspf-compareItems {
  display: flex;
  align-items: center;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1 1 auto;
  scrollbar-width: thin;
}

#fpspfCompareBar .fpspf-compareItem {
  display: flex;
  align-items: center;
  gap: 10px;

  background: #ffffff;
  border: 1px solid #dbe4f0;
  border-radius: 14px;

  padding: 6px 10px;
  min-width: 160px;
  position: relative;
}

#fpspfCompareBar .fpspf-compareItem img {
  width: 46px;
  height: 34px;
  object-fit: contain;
  border-radius: 8px;
}

#fpspfCompareBar .fpspf-compareName {
  font-size: 12px;
  font-weight: 800;
  color: #0f2442;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}

#fpspfCompareBar .fpspf-compareRemove {
  border: none;
  background: #0f2442;
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  display: grid;
  place-items: center;
  line-height: 1;
  transition: background .15s ease, transform .15s ease;
}

#fpspfCompareBar .fpspf-compareRemove:hover {
  background: #225097;
  transform: scale(1.05);
}

#fpspfCompareBar .fpspf-compareActions {
  flex: 0 0 auto;
}

#fpspfCompareBar .fpspf-compareOpenBtn {
  height: 44px;
  padding: 0 22px;
  border-radius: 14px;

  border: none;
  cursor: pointer;

  background: linear-gradient(135deg, #142a4a 0%, #1d3a66 55%, #0f2442 100%);
  color: #fff;

  font-size: 13px;
  font-weight: 900;
  letter-spacing: .25px;

  box-shadow: 0 14px 26px rgba(15, 34, 66, .22);
  transition: transform .15s ease, box-shadow .15s ease;
}

#fpspfCompareBar .fpspf-compareOpenBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(15, 34, 66, .26);
}

/* Mobile */
@media (max-width: 640px) {
  #fpspfCompareBar {
    padding: 10px 10px 14px;
  }

  #fpspfCompareBar .fpspf-compareInner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  #fpspfCompareBar .fpspf-compareItems {
    justify-content: flex-start;
  }

  #fpspfCompareBar .fpspf-compareOpenBtn {
    width: 100%;
  }
}

/* Prevent content from being hidden behind compare bar */
body {
  padding-bottom: 120px;
}

/* ===== FORCE BUTTON ORDER (Compare BEFORE Show) ===== */
#fps-pc-finder .fpspf-pcBtns {
  display: flex !important;
  flex-direction: row !important;
}

#fps-pc-finder .fpspf-pcCompareBtn {
  order: 0 !important;
}

#fps-pc-finder .fpspf-pcBtn {
  order: 1 !important;
}


/* =====================================================
   LOADING STATE (Recommendations)
   ===================================================== */

#fps-pc-finder .fpspf-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;

  padding: 60px 20px;
  border-radius: 22px;

  background: linear-gradient(180deg, #ffffff 0%, #f4f8fd 100%);
  border: 1px solid #dbe4f0;

  box-shadow: 0 18px 34px rgba(15, 34, 66, .10);
}

#fps-pc-finder .fpspf-loading-spinner {
  width: 44px;
  height: 44px;
  border-radius: 999px;

  border: 4px solid rgba(20, 42, 74, .15);
  border-top-color: #142a4a;

  animation: fpspf-spin 0.8s linear infinite;
}

#fps-pc-finder .fpspf-loading-text {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .2px;
  color: #0f2442;
  text-align: center;
}

@keyframes fpspf-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 520px) {
  #fps-pc-finder .fpspf-loading {
    padding: 40px 16px;
  }

  #fps-pc-finder .fpspf-loading-spinner {
    width: 36px;
    height: 36px;
  }

  #fps-pc-finder .fpspf-loading-text {
    font-size: 13px;
  }
}

/* =====================================================
   PC CARD – Selected for Compare (card highlight)
   JS must toggle .compare-active on .fpspf-pcCard
   ===================================================== */

#fps-pc-finder .fpspf-pcCard.compare-active {
  border-color: #225097 !important;
  box-shadow: 0 22px 44px rgba(15, 34, 66, .22) !important;
  background: linear-gradient(#ffffff 42%, #eaf2ff 100%) !important;
}

#fps-pc-finder .fpspf-pcCard.compare-active::after {
  content: "Vybráno k porovnání";
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;

  background: #225097;
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  padding: 6px 12px;
  border-radius: 999px;

  box-shadow: 0 12px 24px rgba(15, 34, 66, .22);
  letter-spacing: .2px;
}

/* Language variants for compare badge */
html[lang^="sk"] #fps-pc-finder .fpspf-pcCard.compare-active::after {
  content: "Vybrané na porovnanie";
}

html[lang^="hu"] #fps-pc-finder .fpspf-pcCard.compare-active::after {
  content: "Kiválasztva összehasonlításhoz";
}

/* Support both .is-active and .active states for compare button */
#fps-pc-finder .fpspf-pcCompareBtn.active {
  background: linear-gradient(135deg, #142a4a 0%, #1d3a66 55%, #0f2442 100%);
  border-color: rgba(20, 42, 74, .65);
  color: #ffffff;
  box-shadow: 0 12px 22px rgba(15, 34, 66, .18);
}

#fps-pc-finder .fpspf-pcCompareBtn.active::before {
  content: "\f00c";
}