/* Scoped visual upgrade for Strapi-powered FCX rating cards.
   Keep the parent section, heading, date, and content blocks on the site's original styles. */

.fcx .fcx__list{
  gap:24px !important;
}

.fcx .fcx__list .fcx__card{
  position:relative !important;
  display:grid !important;
  grid-template-columns:190px minmax(0,1fr) 230px !important;
  grid-template-areas:"logo main cta" "rate main cta" !important;
  align-items:start !important;
  gap:18px 28px !important;
  overflow:hidden !important;
  padding:30px 26px 24px !important;
  border:1px solid rgba(0,191,255,.26) !important;
  border-radius:18px !important;
  background:
    radial-gradient(110% 130% at 0% 0%, rgba(0,191,255,.14), rgba(0,0,0,0) 46%),
    radial-gradient(90% 120% at 100% 0%, rgba(238,80,75,.16), rgba(0,0,0,0) 46%),
    linear-gradient(180deg,#0a192f 0%,#060e1a 100%) !important;
  box-shadow:0 22px 54px -30px rgba(0,0,0,.78), inset 0 1px 0 rgba(255,255,255,.08) !important;
  color:#fff !important;
  transform:none !important;
}

.fcx .fcx__list .fcx__card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 0 auto !important;
  height:3px !important;
  background:linear-gradient(90deg,#64ffda,#00bfff 45%,#ee504b) !important;
}

.fcx .fcx__list .fcx__card:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(0,191,255,.42) !important;
  box-shadow:0 28px 58px -32px rgba(0,0,0,.86), inset 0 1px 0 rgba(255,255,255,.1) !important;
}

.fcx .fcx__list .fcx__card--top{
  border-color:rgba(100,255,218,.42) !important;
  padding-top:40px !important;
}

.fcx .fcx__top-tag{
  top:0 !important;
  left:26px !important;
  border-radius:0 0 10px 10px !important;
  background:linear-gradient(180deg,#8dffe4,#64ffda) !important;
  color:#061022 !important;
  box-shadow:0 12px 22px -14px rgba(100,255,218,.75) !important;
}

.fcx .fcx__rankcell{
  display:none !important;
}

.fcx .fcx__logo{
  grid-area:logo !important;
  width:100% !important;
  height:96px !important;
  padding:10px !important;
  border:1px solid rgba(255,255,255,.1) !important;
  border-radius:14px !important;
  background:linear-gradient(180deg,#112b51,#03070d) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

.fcx .fcx__card:hover .fcx__logo{
  transform:none !important;
}

.fcx .fcx__logo img{
  max-width:100% !important;
  max-height:76px !important;
}

.fcx .fcx__main{
  grid-area:main !important;
  min-width:0 !important;
}

.fcx .fcx__name{
  margin:0 0 6px !important;
  color:#64ffda !important;
  font-size:12px !important;
}

.fcx .fcx__name a{
  color:inherit !important;
}

.fcx .fcx__bonus{
  margin:0 0 15px !important;
  color:#fff !important;
  font-size:27px !important;
  font-weight:800 !important;
  line-height:1.16 !important;
  overflow-wrap:anywhere !important;
}

.fcx .fcx__features{
  gap:9px !important;
}

.fcx .fcx__feat{
  color:#ccd6f6 !important;
  font-size:15px !important;
  line-height:1.42 !important;
}

.fcx .fcx__feat svg{
  width:15px !important;
  height:15px !important;
  color:#64ffda !important;
  stroke-width:3.2 !important;
}

.fcx .fcx__rate{
  grid-area:rate !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  justify-self:center !important;
  text-align:center !important;
}

.fcx .fcx__score{
  color:#fff !important;
  font-size:36px !important;
  font-weight:800 !important;
}

.fcx .fcx__score::after{
  content:"/10";
  margin-left:3px;
  color:#ccd6f6;
  font-size:14px;
  font-weight:800;
}

.fcx .fcx__stars{
  margin-top:6px !important;
  color:#ffd950 !important;
  font-size:18px !important;
}

.fcx .fcx__stars-bg{
  color:rgba(204,214,246,.22) !important;
}

.fcx .fcx__stars-fill{
  color:#ffd950 !important;
}

.fcx .fcx__rate-label{
  color:#8da2c0 !important;
}

.fcx .fcx__cta{
  grid-area:cta !important;
  align-self:start !important;
  display:flex !important;
  min-height:62px !important;
  width:100% !important;
  padding:0 18px !important;
  border-radius:16px !important;
  background:linear-gradient(180deg,#ff6f61,#ee504b) !important;
  box-shadow:0 16px 32px -15px rgba(238,80,75,.78), inset 0 1px 0 rgba(255,255,255,.24) !important;
  color:#fff !important;
  font-size:18px !important;
  text-align:center !important;
}

.fcx .fcx__cta:hover{
  transform:translateY(-2px) !important;
  color:#fff !important;
  filter:brightness(1.05) !important;
}

@media (max-width:950px){
  .fcx .fcx__list .fcx__card{
    grid-template-columns:180px minmax(0,1fr) !important;
    grid-template-areas:"logo main" "rate main" "cta cta" !important;
  }

  .fcx .fcx__cta{
    max-width:420px !important;
    margin:0 auto !important;
  }
}

@media (max-width:620px){
  .fcx .fcx__wrap{
    max-width:100vw !important;
    overflow:hidden !important;
  }

  .fcx .fcx__head{
    max-width:calc(100vw - 32px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .fcx .fcx__list .fcx__card{
    width:100% !important;
    max-width:calc(100vw - 48px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    grid-template-columns:1fr !important;
    grid-template-areas:"logo" "rate" "main" "cta" !important;
    gap:20px !important;
    padding:28px 18px 22px !important;
    border-radius:14px !important;
  }

  .fcx .fcx__list .fcx__card--top{
    padding-top:40px !important;
  }

  .fcx .fcx__top-tag{
    left:18px !important;
  }

  .fcx .fcx__logo{
    width:100% !important;
    max-width:230px !important;
    height:90px !important;
    justify-self:center !important;
  }

  .fcx .fcx__main{
    width:100% !important;
    max-width:calc(100vw - 96px) !important;
    justify-self:center !important;
    overflow:hidden !important;
  }

  .fcx .fcx__bonus{
    max-width:100% !important;
    font-size:18px !important;
    text-align:center !important;
    line-height:1.22 !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }

  .fcx .fcx__features{
    max-width:calc(100vw - 96px) !important;
    margin:0 auto !important;
  }

  .fcx .fcx__feat{
    font-size:15px !important;
  }

  .fcx .fcx__cta{
    width:100% !important;
    max-width:calc(100vw - 96px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    white-space:normal !important;
  }
}