/* =============================================================
   css/rating.css — spsa.sk

   Вне бандла assets/opt/app.css: подключается отдельным <link>
   с ?v=filemtime после инлайнового блока темы, чтобы перебивать её
   правила и не пересобираться вместе с ней (_buildcss.php его не
   трогает).

   Геометрия этого сайта — «полка»: слева во всю высоту сиреневая
   панель бренда с вырубленной ступенькой места, по центру сверху
   оффер и под ним лента характеристик, справа во всю высоту колонка
   действия, внизу общая полоса платежей. Первое место забирает
   золото темы — тем же приёмом, что и старая таблица.

   Структурные правила намеренно написаны как `body .sps-card .x`:
   тема бьёт по голым тегам и утилитам, а сброс ниже объявлен через
   :where() с нулевым весом.
   ============================================================= */

:root{
  --spsInk:#2A2650;
  --spsViolet:#6D51FE;
  --spsViolet2:#9A7BFF;
  --spsSoft:#F4F1FF;
  --spsLine:#E7E3F7;
  --spsMuted:#6E6A93;
  --spsGold:#F4A72A;
  --spsGold2:#FB8B1A;
}

/* -------------------- сброс темы --------------------
   Без margin и padding: тема объявляет их с большим весом, и если
   перечислить их здесь, собственные отступы блока пропадут. */

body .sps-list :where(div,ul,ol,li,span,p,b,i,em,strong,small,img,svg,a,article){
  box-sizing:border-box;
}
body .sps-list :where(ul,ol,li){list-style:none}
body .sps-list :where(p){margin:0}
body .sps-list :where(span,b,i,em,small,code){
  background:none;
  padding:0;
  border-radius:0;
  color:inherit;
}
body .sps-list :where(a){text-decoration:none}
body .sps-list :where(img){max-width:100%}

/* -------------------- список -------------------- */

body .sps-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin:0 0 8px;
  padding:0;
}

/* -------------------- карточка -------------------- */

body .sps-list .sps-card{
  display:grid;
  grid-template-columns:200px minmax(0,1fr) 214px;
  grid-template-areas:
    "brand offer act"
    "brand stats act"
    "foot  foot  foot";
  align-items:stretch;
  background:#fff;
  border:1px solid #DCD4F8;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 16px 36px -24px rgba(34,26,85,.42);
  transition:transform .18s ease, box-shadow .18s ease;
}
body .sps-list .sps-card:hover{
  transform:translateY(-2px);
  box-shadow:0 26px 46px -26px rgba(109,81,254,.38);
}

body .sps-list .sps-card--top{
  border-color:#F0CB84;
  box-shadow:0 18px 42px -22px rgba(244,167,42,.55);
}

/* -------------------- панель бренда -------------------- */

body .sps-list .sps-brand{
  grid-area:brand;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:16px 14px 14px;
  text-align:center;
  background:linear-gradient(170deg,#F8F5FF,#EDE7FF);
  border-right:1px solid var(--spsLine);
}
body .sps-list .sps-card--top .sps-brand{
  background:linear-gradient(170deg,#FFF9EC,#FFEFD3);
  border-right-color:#F0CB84;
}

body .sps-list .sps-rank{
  position:absolute;
  top:0;
  left:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:54px;
  padding:6px 4px 5px;
  border-radius:0 0 14px 0;
  background:linear-gradient(135deg,var(--spsViolet2),var(--spsViolet));
  color:#fff;
}
body .sps-list .sps-card--top .sps-rank{
  background:linear-gradient(135deg,var(--spsGold),var(--spsGold2));
  color:#3F2207;
}
body .sps-list .sps-rank b{font-size:17px;line-height:1;font-weight:800;color:inherit}
body .sps-list .sps-rank i{
  font-style:normal;
  font-size:8.5px;
  line-height:1.2;
  letter-spacing:.07em;
  text-transform:uppercase;
  opacity:.88;
  color:inherit;
}

body .sps-list .sps-logo{
  display:block;
  height:44px;
  width:auto;
  max-width:148px;
  object-fit:contain;
  margin-top:12px;
}
body .sps-list .sps-name{
  font-size:17px;
  line-height:1.15;
  font-weight:700;
  color:var(--spsInk);
  overflow-wrap:break-word;
}
body .sps-list .sps-rate{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:12px;
  color:var(--spsMuted);
}
body .sps-list .sps-rate .sps-star{color:var(--spsGold)}
body .sps-list .sps-rate b{font-size:14px;font-weight:700;color:var(--spsInk)}
body .sps-list .sps-rate i{font-style:normal;color:var(--spsMuted)}

/* -------------------- оффер -------------------- */

body .sps-list .sps-offer{
  grid-area:offer;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
  padding:16px 18px 10px;
  min-width:0;
}
body .sps-list .sps-kicker{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--spsViolet);
}
body .sps-list .sps-card--top .sps-kicker{color:#C97C10}
body .sps-list .sps-bonus{
  font-size:15.5px;
  line-height:1.35;
  font-weight:600;
  color:var(--spsInk);
  overflow-wrap:break-word;
}
body .sps-list .sps-bonus div{margin:0}
body .sps-list .sps-promo{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 10px;
  border:1px dashed var(--spsViolet2);
  border-radius:9px;
}
body .sps-list .sps-promo i{
  font-style:normal;
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--spsMuted);
}
body .sps-list .sps-promo b{font-size:13px;font-weight:800;letter-spacing:.04em;color:var(--spsViolet)}

/* -------------------- лента характеристик -------------------- */

body .sps-list .sps-stats{
  grid-area:stats;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(124px,1fr));
  gap:6px;
  margin:0;
  padding:0 18px 14px;
  align-content:start;
}
body .sps-list .sps-stat{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:7px 9px;
  background:var(--spsSoft);
  border:1px solid var(--spsLine);
  border-radius:11px;
}
body .sps-list .sps-stat__ic{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:9px;
  background:#fff;
  border:1px solid var(--spsLine);
  color:var(--spsViolet);
}
body .sps-list .sps-card--top .sps-stat__ic{color:#D2860F}
body .sps-list .sps-stat__txt{display:flex;flex-direction:column;min-width:0}
body .sps-list .sps-stat__txt b{
  font-size:13.5px;
  font-weight:700;
  line-height:1.15;
  color:var(--spsInk);
  overflow-wrap:break-word;
}
body .sps-list .sps-stat__txt i{
  font-style:normal;
  font-size:10.5px;
  line-height:1.25;
  color:var(--spsMuted);
  overflow-wrap:break-word;
}

/* -------------------- колонка действия -------------------- */

body .sps-list .sps-act{
  grid-area:act;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  gap:8px;
  padding:16px;
  border-left:1px solid var(--spsLine);
}
body .sps-list .sps-card--top .sps-act{border-left-color:#F0CB84}

body .sps-list .sps-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:13px 14px;
  border-radius:12px;
  font-size:14px;
  font-weight:800;
  letter-spacing:.02em;
  text-align:center;
  color:#fff;
  background:linear-gradient(92deg,var(--spsViolet),var(--spsViolet2));
  box-shadow:0 14px 24px -14px rgba(109,81,254,.9);
  transition:transform .16s ease;
}
body .sps-list .sps-cta:hover{transform:translateY(-2px);color:#fff}
body .sps-list .sps-card--top .sps-cta{
  color:#3A2000;
  background:linear-gradient(92deg,var(--spsGold),var(--spsGold2));
  box-shadow:0 14px 24px -14px rgba(244,167,42,.9);
}
body .sps-list .sps-cta--off{opacity:.45;cursor:default}
body .sps-list .sps-rev{
  font-size:12px;
  text-align:center;
  color:var(--spsMuted);
  text-decoration:underline;
}

/* -------------------- подвал -------------------- */

body .sps-list .sps-foot{
  grid-area:foot;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:6px 14px;
  padding:9px 16px;
  border-top:1px solid var(--spsLine);
  background:#FBFAFF;
}
body .sps-list .sps-card--top .sps-foot{background:#FFFBF2;border-top-color:#F0CB84}
body .sps-list .sps-pay{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px 10px;
  margin:0;
  padding:0;
  min-width:0;
}
body .sps-list .sps-pay__t{
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--spsMuted);
}
body .sps-list .sps-pay li{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:11.5px;
  color:var(--spsMuted);
}
body .sps-list .sps-pay li svg{width:16px;height:16px;color:var(--spsViolet)}
body .sps-list .sps-card--top .sps-pay li svg{color:#D2860F}
/* строка 18+ переносится на свою строку целиком, иначе overflow:hidden
   карточки молча её срежет */
body .sps-list .sps-rg{
  flex:1 1 300px;
  text-align:right;
  font-size:10.5px;
  line-height:1.3;
  color:var(--spsMuted);
}

/* ==================== мобильная ==================== */

@media (max-width:767.98px){

  body .sps-list{gap:12px}

  /* карточка тонируется целиком, а ячейки характеристик и подвал
     остаются белыми — так она отделяется от светлого фона страницы */
  body .sps-list .sps-card{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"brand" "offer" "stats" "act" "foot";
    background:#F6F3FF;
    border-color:#D8CFFA;
    border-radius:16px;
    box-shadow:0 12px 26px -16px rgba(34,26,85,.5);
  }
  body .sps-list .sps-card:hover{transform:none}
  body .sps-list .sps-card--top{border-color:#EEC377}

  body .sps-list .sps-brand{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-start;
    text-align:left;
    gap:4px 10px;
    padding:9px 12px 9px 64px;
    border-right:0;
    border-bottom:1px solid var(--spsLine);
  }
  body .sps-list .sps-rank{
    width:54px;
    height:100%;
    border-radius:0;
    padding:4px;
  }
  body .sps-list .sps-logo{margin-top:0;height:32px;max-width:88px}
  body .sps-list .sps-name{flex:1 1 auto;font-size:20px;line-height:1.1}
  body .sps-list .sps-rate{flex:1 1 100%;font-size:11.5px}

  body .sps-list .sps-offer{padding:10px 12px 8px;gap:6px}
  body .sps-list .sps-bonus{font-size:14.5px;line-height:1.3}

  body .sps-list .sps-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:5px;
    padding:0 12px 10px;
  }
  body .sps-list .sps-stat{background:#fff;padding:6px 8px;gap:7px}
  body .sps-list .sps-stat__ic{width:27px;height:27px;border-radius:8px}
  body .sps-list .sps-stat__ic svg{width:18px;height:18px}
  body .sps-list .sps-stat__txt b{font-size:13px}
  body .sps-list .sps-stat__txt i{font-size:10px}

  body .sps-list .sps-act{
    border-left:0;
    padding:0 12px 10px;
    gap:6px;
  }
  body .sps-list .sps-cta{padding:11px 14px;font-size:13.5px}

  body .sps-list .sps-foot{
    background:#fff;
    padding:8px 12px;
    gap:5px 10px;
  }
  body .sps-list .sps-card--top .sps-foot{background:#fff}
  body .sps-list .sps-pay li{font-size:11px}
  body .sps-list .sps-pay li svg{width:15px;height:15px}
  body .sps-list .sps-rg{flex:1 1 100%;text-align:left;font-size:10px}
}

/* очень узкие экраны: порог ниже 330px, иначе правило накрывает
   360 и 375, то есть все реальные телефоны */
@media (max-width:329.98px){
  body .sps-list .sps-stats{grid-template-columns:minmax(0,1fr)}
  body .sps-list .sps-brand{padding-left:58px}
  body .sps-list .sps-name{font-size:18px}
  body .sps-list .sps-logo{height:28px;max-width:76px}
}