/* PF Core — Frontend UI (directory + profile)
   Path: wp-content/mu-plugins/pf-core/frontend/assets/css/frontend.css
   DROP-IN REPLACEMENT
*/

/* ----------------------------------------------------
   1) TOKENS + RESET
---------------------------------------------------- */
:root{
  --pf-primary:#2596be;
  --pf-primary-glow:rgba(37,150,190,.45);

  --pf-bg-dark:#050816;
  --pf-bg-ink:#020617;

  --pf-text-main:#f9fafb;
  --pf-text-muted:#cbd5f5;
  --pf-border-light:rgba(148,163,184,0.30);

  --pf-radius:18px;

  /* Directory columns (KPI grid) */
  --pf-col-rating: 150px;
  --pf-col-reviews: 170px;
  --pf-col-hq: 90px;
  --pf-col-age: 80px;
  --pf-col-funding: 160px;
  --pf-col-profit: 150px;
  --pf-col-platforms: 180px;

  /* Directory shell */
  --pf-dir-maxw: 1240px;

  /* Mobile scroll width for directory rows */
  --pf-list-minw-mobile: 1180px;
}

.pf-dir *,
.pf-profile *{
  box-sizing:border-box;
}

/* ----------------------------------------------------
   2) LEGACY TABLE ([pf_firms]) + TOOLBAR
---------------------------------------------------- */
.pf-dir__toolbar{
  margin:8px 0 12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.pf-dir__search{
  width:100%;
  max-width:460px;
  height:40px;
  line-height:40px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid var(--pf-border-light);
  background:var(--pf-bg-dark);
  color:var(--pf-text-main);
  outline:0;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;
}
.pf-dir__search::placeholder{ color:rgba(148,163,184,0.9); }
.pf-dir__search:focus{
  border-color:var(--pf-primary);
  box-shadow:0 0 0 1px var(--pf-primary-glow);
  background:var(--pf-bg-ink);
}

.pf-dir__wrap{
  overflow:auto;
  border-radius:12px;
  border:1px solid rgba(148,163,184,0.25);
  background:radial-gradient(circle at top left, rgba(37,150,190,0.08), var(--pf-bg-dark));
}

.pf-dir__table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:720px;
  color:var(--pf-text-main);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.pf-dir__table thead th{
  position:sticky;
  top:0;
  z-index:1;
  background:rgba(15,23,42,0.98);
  font-weight:600;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border-bottom:1px solid rgba(148,163,184,0.30);
  padding:10px 12px;
  color:var(--pf-text-muted);
}

.pf-dir__table td{
  padding:10px 12px;
  border-bottom:1px solid rgba(15,23,42,0.85);
  vertical-align:top;
  font-size:13px;
}

.pf-dir__table tr:nth-child(odd) td{ background:rgba(15,23,42,0.90); }
.pf-dir__table tr:nth-child(even) td{ background:rgba(15,23,42,0.70); }
.pf-dir__table tr:hover td{ background:var(--pf-bg-ink); }

.pf-dir__firm{ font-weight:600; }
.pf-dir__cta{ white-space:nowrap; text-align:right; }

@media (max-width:640px){
  .pf-dir__table{ min-width:600px; }
}

/* Legacy shared button */
.pf-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 14px;
  border-radius:8px;
  border:1px solid var(--pf-primary);
  background:var(--pf-primary);
  color:#fff;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  line-height:1;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.pf-btn:hover{
  background:#1f7fa0;
  border-color:#1f7fa0;
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(15,23,42,0.60);
}
.pf-btn:active{ transform:translateY(0); box-shadow:none; }

/* ----------------------------------------------------
   3) PROFILE KV (generic)
---------------------------------------------------- */
.pf-profile__title{
  margin:0 0 10px 0;
  font-weight:700;
  color:var(--pf-text-main);
  font-family:"Space Grotesk",system-ui,sans-serif;
}
.pf-profile__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
}
.pf-kv{
  border:1px solid rgba(148,163,184,0.25);
  border-radius:10px;
  padding:10px;
  background:rgba(15,23,42,0.90);
  color:var(--pf-text-main);
}
.pf-kv__k{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  opacity:.80;
  margin-bottom:4px;
  color:var(--pf-text-muted);
}
.pf-kv__v{
  font-weight:600;
  word-break:break-word;
  font-size:13px;
}

/* ----------------------------------------------------
   4) PF SHELL (controls width for filters + listing)
---------------------------------------------------- */
.pf-shell{
  width:100%;
  max-width:var(--pf-dir-maxw);
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}

@media (max-width:1280px){
  .pf-shell{
    padding-left:12px;
    padding-right:12px;
  }
}

/* These fill the shell */
.pf-directory-header,
.pf-filters,
.list{
  width:100%;
  max-width:none;
  margin:0;
  box-sizing:border-box;
}

/* ----------------------------------------------------
   5) FILTERS (desktop default)
---------------------------------------------------- */
.pf-filters{
  margin:28px 0 24px;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  position:relative;             /* needed for z-index layering */
  z-index:6000;                  /* ensures dropdown above directory header row */
}

.pf-filters .pf-filters-wrap{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  display:block;

  border-radius:18px;
  padding:14px 16px 16px;
  border:1px solid rgba(148,163,184,0.25);
  background:radial-gradient(circle at top left, rgba(37,150,190,0.16), rgba(5,8,22,0.95));
  box-shadow:0 18px 40px rgba(15,23,42,0.70);

  /* IMPORTANT: allow dropdown menus to render outside */
  overflow: visible;
}

.pf-filters-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.pf-filters-title{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--pf-text-muted);
}
.pf-filters-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--pf-primary);
  box-shadow:0 0 12px var(--pf-primary-glow);
}
.pf-filters-clear{
  border:1px solid transparent;
  background:transparent;
  color:var(--pf-text-muted);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  cursor:pointer;
  padding:6px 10px;
  border-radius:999px;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.pf-filters-clear:hover{
  border-color:rgba(148,163,184,0.30);
  background:rgba(15,23,42,0.90);
  color:var(--pf-text-main);
}

/* Grid (desktop/tablet default) */
.pf-filters-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(170px,1fr));
  gap:10px 12px;
  overflow: visible; /* allow dropdowns to show */
}

/* Filter pill */
.pf-filter{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(15,23,42,0.96);
  border:1px solid rgba(148,163,184,0.18);
  color:var(--pf-text-main);

  /* ensure open dropdown stacks above */
  z-index: 1;
}

.pf-filter.pf-dd-open{
  z-index: 8000;
}

.pf-filter-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.10em;
  white-space:nowrap;
  color:var(--pf-text-muted);
}

/* Native select hidden by JS */
.pf-filter-select{
  opacity:0;
  position:absolute;
  pointer-events:none;
  width:0;
  height:0;
}

/* Custom dropdown */
.pf-dd-toggle{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,0.18);
  background:rgba(255,255,255,0.06);
  color:var(--pf-text-main);
  font-size:13px;
  cursor:pointer;
  outline:none;
}
.pf-dd-toggle:hover{ background:rgba(255,255,255,0.10); }
.pf-dd-text{ white-space:nowrap; font-weight:700; }
.pf-dd-arrow{ font-size:12px; opacity:.9; }

.pf-dd-menu{
  display:none;
  position:absolute;
  left:0;
  top:calc(100% + 6px);
  width:100%;
  max-height:320px;
  overflow-y:auto;
  border-radius:14px;
  border:1px solid rgba(148,163,184,0.25);
  background:rgba(5,8,22,0.98);
  box-shadow:0 20px 40px rgba(0,0,0,0.75);
  padding:6px 0;

  /* must be above listing header row */
  z-index: 9000;
}
.pf-filter.pf-dd-open .pf-dd-menu{ display:block; }

.pf-dd-item{
  padding:10px 12px;
  font-size:13px;
  color:var(--pf-text-main);
  cursor:pointer;
}
.pf-dd-item:hover{ background:rgba(37,150,190,0.22); }
.pf-dd-item--active{ background:rgba(37,150,190,0.42); }

/* ----------------------------------------------------
   6) DIRECTORY LISTING ([pf_cards])
---------------------------------------------------- */
.list{
  display:flex;
  flex-direction:column;
  gap:14px;
  width:100%;
}

/* Card shell: logo | KPIs | actions */
.list .card{
  display:grid;
  grid-template-columns:108px minmax(0, 1fr) 190px;
  gap:14px;
  align-items:stretch;

  padding:14px;
  border-radius:var(--pf-radius);
  border:1px solid rgba(148,163,184,0.18);
  background:linear-gradient(to bottom right, rgba(15,23,42,0.92), rgba(15,23,42,0.72));
  box-shadow:0 18px 40px rgba(0,0,0,0.35);
}

.list .card:hover{
  border-color:rgba(37,150,190,0.35);
  box-shadow:0 22px 50px rgba(0,0,0,0.45);
}

/* Sticky header row */
.list .card.card--header{
  position:sticky;
  top:0;
  z-index:200; /* lower than filters dropdown */
  padding:10px 14px;
  background:rgba(5,8,22,0.98);
  border:1px solid rgba(148,163,184,0.22);
  box-shadow:none;
  backdrop-filter: blur(10px);
}

/* Logo cell */
.list .card .id{
  display:flex;
  align-items:center;
  justify-content:center;
}
.list .card .logo-link{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  text-decoration:none;
}

.list .card .logo2{
  width:92px;
  height:92px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at top left, rgba(37,150,190,0.20), rgba(5,8,22,0.85));
  border:1px solid rgba(37,150,190,0.35);
  overflow:hidden;
  padding:0;

  /* pulse only via shadow (no scaling) */
  animation: pfLogoGlowPulse 1.8s ease-in-out infinite;

  /* keep compositing stable */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}


.list .card .firm-logo{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;

  /* small crispness improvements (browser-dependent) */
  image-rendering: auto;
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
}


/* Header left label */
.list .card--header .id .header-label{
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--pf-text-muted);
}

/* KPI grid (shrinkable) */
.list .card .stats,
.list .card--header .stats{
  display:grid;
  grid-template-columns:
    minmax(110px, var(--pf-col-rating))
    minmax(130px, var(--pf-col-reviews))
    minmax(70px,  var(--pf-col-hq))
    minmax(60px,  var(--pf-col-age))
    minmax(120px, var(--pf-col-funding))
    minmax(110px, var(--pf-col-profit))
    minmax(140px, var(--pf-col-platforms));
  gap:12px;
  align-items:stretch;
  min-width:0;
}

.list .card .kpi,
.list .card .kpi .t,
.list .card .kpi .v{
  min-width:0;
}

.list .card .kpi{
  min-height:84px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,0.18);
  background:rgba(2,6,23,0.35);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.list .card .kpi .t{
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--pf-text-muted);
  margin-bottom:6px;
  line-height:1.2;
}

.list .card .kpi .v{
  font-size:14px;
  color:var(--pf-text-main);
  font-weight:800;
  line-height:1.25;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
.list .card .kpi .v p{ margin:0; }

/* Rating highlight */
.list .card .kpi.rate .rating-main{
  font-size:20px;
  font-weight:900;
  color:#4ade80;
  text-shadow:0 0 14px rgba(74,222,128,0.18);
}

/* Platforms: keep icons inside the platforms cell */
.list .card .kpi.kpi-platforms{
  min-width:0;
}
.list .card .kpi.kpi-platforms .v,
.list .card .kpi .v.v-platforms{
  max-width:100%;
  overflow:hidden;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:8px;
}
.list .card .kpi.kpi-platforms img,
.list .card .kpi .v.v-platforms img{
  max-height:18px;
  width:auto;
}


/* HQ (3rd KPI) — make flag bigger and not cut */
.list .card:not(.card--header) .stats > .kpi:nth-child(3) .v{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Works for IMG flags rendered by pf_graphics_render_value() */
.list .card:not(.card--header) .stats > .kpi:nth-child(3) .v img{
  width: 72px;
  height: 48px;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;      /* IMPORTANT: prevents cutting */
  object-position: center;
  border-radius: 10px;
  display:block;
}

/* If your flag renderer outputs SVGs sometimes */
.list .card:not(.card--header) .stats > .kpi:nth-child(3) .v svg{
  width: 72px;
  height: 48px;
  max-width: 100%;
  max-height: 100%;
  display:block;
}


/* Header KPI cells wrap */
.list .card--header .kpi{
  min-height:44px;
  padding:0 6px;
  border:0;
  background:transparent;
  box-shadow:none;
  color:var(--pf-text-muted);
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  white-space:normal;
  line-height:1.15;
}

/* Sort buttons */
.list .card--header .pf-sort{
  width:100%;
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
  color:inherit;
  font:inherit;
  text-transform:inherit;
  letter-spacing:inherit;
  line-height:inherit;
  white-space:normal;
  word-break:break-word;
}
.list .card--header .pf-sort:hover{ color:var(--pf-text-main); }

/* Sort state arrows */
.list .pf-sort-active{ color:var(--pf-primary); }
.list .pf-sort-active::after{ content:" ▼"; font-size:.85em; }
.list .pf-sort-active.pf-sort-desc::after{ content:" ▲"; }

/* Actions column */
.list .card .actions{
  width:190px;
  min-width:190px;
  max-width:190px;
  overflow:hidden;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.list .card .actions .header-label{
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--pf-text-muted);
}

/* Compare */
.list .card .compare{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
}
.list .card .compare input.cmp{
  width:16px;
  height:16px;
  accent-color:var(--pf-primary);
  cursor:pointer;
}
.list .card .compare label{
  font-size:12px;
  color:var(--pf-text-muted);
  cursor:pointer;
  user-select:none;
}

/* Buttons inside cards */
.list .card .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid rgba(37,150,190,0.55);
  background:rgba(37,150,190,0.20);
  color:var(--pf-text-main);
  font-weight:800;
  font-size:13px;
  text-decoration:none;
  cursor:pointer;
  transition:all .15s ease;
  width:100%;
  max-width:170px;
  white-space:nowrap;
}
.list .card .btn:hover{
  background:rgba(37,150,190,0.32);
  border-color:rgba(37,150,190,0.75);
  box-shadow:0 14px 30px rgba(0,0,0,0.35);
}

/* ----------------------------------------------------
   7) MOBILE: DIRECTORY LIST horizontal scroll + sticky header + sticky logo
---------------------------------------------------- */
@media (max-width: 900px){
  .list{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:10px;
    position:relative;
  }

  /* Force header row visible */
  .list .card.card--header{
    display:grid !important;
  }

  /* Ensure scroll width */
  .list .card,
  .list .card.card--header{
    min-width: var(--pf-list-minw-mobile);
  }

  /* Sticky logo column */
  .list .card .id{
    position:sticky;
    left:0;
    z-index:140;
    background:rgba(5,8,22,0.96);
    border-right:1px solid rgba(148,163,184,0.14);
    border-top-left-radius: var(--pf-radius);
    border-bottom-left-radius: var(--pf-radius);
  }

  /* Header logo cell above row logo cells */
  .list .card.card--header .id{
    z-index:260;
    background:rgba(5,8,22,0.98);
  }
}

/* ----------------------------------------------------
   8) MOBILE FILTERS: horizontal strip + PORTAL bottom-sheet menu
---------------------------------------------------- */

@media (max-width: 820px){

  /* Horizontal strip */
  .pf-filters-grid{
    display:flex;
    flex-wrap:nowrap;
    gap:10px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    padding-bottom:14px;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .pf-filters-grid::-webkit-scrollbar{ display:none; }

  /* Each chip-like filter */
  .pf-filter{
    flex:0 0 auto;
    min-width: 240px;
  }

  /* Dim background when open (JS adds class on .pf-filters) */
  .pf-filters.pf-dd-mobile-open::before{
    content:"";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.60);
    z-index: 999990;
  }

  /* When JS portals the menu to body, it gets this class */
.pf-dd-menu--portal{
  display: block !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;

  width: 100% !important;
  max-height: 62vh !important;
  overflow-y: auto !important;

  margin: 0 !important;
  padding: 10px 0 calc(18px + env(safe-area-inset-bottom)) 0 !important;
  padding-left: 0 !important;

  list-style: none !important;

  border-radius: 20px 20px 0 0 !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-bottom: 0 !important;

  background: #0b1220 !important;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.55) !important;

  z-index: 999999 !important;
  box-sizing: border-box !important;
}


  .pf-dd-menu--portal .pf-dd-item{
    padding: 14px 18px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    background: transparent !important;
  }
  .pf-dd-menu--portal .pf-dd-item:last-child{
    border-bottom: 0 !important;
  }
  .pf-dd-menu--portal .pf-dd-item:hover,
  .pf-dd-menu--portal .pf-dd-item:active{
    background: rgba(37,150,190,0.18) !important;
  }
}

/* Optional scroll lock while a mobile menu is open */
.pf-dd-lock,
.pf-dd-lock body{
  overflow:hidden !important;
}

/* ----------------------------------------------------
   9) COMPARE BAR
---------------------------------------------------- */
.cmp-bar{
  display:none;

  position: fixed !important;
  left: 50% !important;
  bottom: 20px !important;
  transform: translateX(-50%) !important;

  z-index: 999999 !important;

  background: rgba(5,8,22,0.92);
  border: 1px solid rgba(37,150,190,0.65);
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}

/* ----------------------------------------------------
   10) SMALL UTILITY MESSAGE
---------------------------------------------------- */
.pf-msg{
  padding:12px 14px;
  border:1px solid rgba(148,163,184,0.25);
  border-radius:8px;
  background:rgba(15,23,42,0.90);
  color:var(--pf-text-main);
  font-size:13px;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* ----------------------------------------------------
   11) LOGO PULSE (directory firm logo box)
---------------------------------------------------- */
@keyframes pfLogoGlowPulse {
  0% {
    box-shadow:
      inset 0 0 0 1px rgba(0,0,0,0.35),
      0 0 0 1px rgba(37,150,190,0.18),
      0 0 18px rgba(37,150,190,0.28),
      0 0 42px rgba(37,150,190,0.20);
  }
  45% {
    box-shadow:
      inset 0 0 0 1px rgba(0,0,0,0.35),
      0 0 0 1px rgba(37,150,190,0.30),
      0 0 26px rgba(37,150,190,0.55),
      0 0 64px rgba(37,150,190,0.36);
  }
  100% {
    box-shadow:
      inset 0 0 0 1px rgba(0,0,0,0.35),
      0 0 0 1px rgba(37,150,190,0.18),
      0 0 18px rgba(37,150,190,0.28),
      0 0 42px rgba(37,150,190,0.20);
  }
}


@keyframes pfLogoAuraRing {
  0%   { opacity: .10; transform: translate(-50%,-50%) scale(1.0); }
  55%  { opacity: .38; transform: translate(-50%,-50%) scale(1.28); }
  100% { opacity: .10; transform: translate(-50%,-50%) scale(1.0); }
}

.list .card .logo2{
  position: relative;
  animation: pfLogoGlowPulse 1.8s ease-in-out infinite;
  will-change: transform, box-shadow;
}

.list .card .logo2::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:110px;
  height:110px;
  border-radius:999px;
  border: 2px solid rgba(37,150,190,0.45);
  box-shadow: 0 0 28px rgba(37,150,190,0.30);
  transform: translate(-50%,-50%);
  opacity: .16;
  pointer-events:none;
  animation: pfLogoAuraRing 1.8s ease-in-out infinite;
}

.list .card:hover .logo2{
  animation-duration: 1.2s;
}

@media (prefers-reduced-motion: reduce){
  .list .card .logo2,
  .list .card .logo2::after{
    animation: none !important;
  }
}

/* ---------------------------------------------
   FIX: Platforms ↔ Actions collision (real gutter)
---------------------------------------------- */

/* make actions column a bit narrower */
.list .card{
  grid-template-columns:108px minmax(0, 1fr) 172px; /* was 190px */
}

/* match actions column widths */
.list .card .actions{
  width:172px;
  min-width:172px;
  max-width:172px;

  /* create a gutter from the KPI grid */
  padding-left:12px;
  border-left:1px solid rgba(148,163,184,0.10);
}

/* keep platforms content inside its own cell and away from the edge */
.list .card .stats{
  padding-right:12px;
}

/* slightly smaller button so it never touches the divider */
.list .card .btn{
  max-width:150px;
  height:38px;
  padding:0 12px;
  border-radius:11px;
  font-size:12.5px;
}

/* mobile: keep original width for horizontal scroll layout */
@media (max-width: 900px){
  .list .card{
    grid-template-columns:108px minmax(0, 1fr) 190px;
  }
  .list .card .actions{
    width:190px;
    min-width:190px;
    max-width:190px;
    border-left:0;
    padding-left:0;
  }
  .list .card .stats{
    padding-right:0;
  }
}

/* Compare bar must stay above footer and any sticky elements */
.cmp-bar{
  z-index: 999999 !important;
}

/* ----------------------------------------------------
   FIX v3: Give long-label filters more width (no "Any" styling changes)
---------------------------------------------------- */

/* Desktop/tablet only */
@media (min-width: 821px){

  /* Make the filter grid allocate wider tracks so MAX FUNDING / PROFIT SHARE fit */
  .pf-filters-grid{
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important; /* was 170px */
    gap: 10px 14px !important;
  }

  /* Optional: slightly more inner padding so labels feel less cramped */
  .pf-filter{
    padding: 10px 14px !important;
  }

  /* Ensure label stays one line and doesn't get visually squeezed */
  .pf-filter-label{
    white-space: nowrap;
  }
}
