/* === Variables & Reset === */
:root {
  --clr-bg: #fdfdfd;
  --clr-bg-alt: #f7f7f9;
  --clr-bg-card: #ffffff;
  --clr-border: #e0e0e0;
  --clr-accent: #007aff;
  --clr-accent-hover: #005ecb;
  --clr-text: #1c1c1c;
  --clr-text-light: #4d4d4d;
  --clr-title: #000;
  --clr-bubble: #f0f0f3;
  --radius-card: 18px;
  --shadow: 0 4px 24px rgba(0,0,0,0.04);
  --transition: .17s cubic-bezier(.46,.03,.52,.96);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }

body {
  background: var(--clr-bg);
  color: var(--clr-text);
  font-family: 'Inter', Arial, sans-serif;
  font-size:17px; line-height:1.65;
}

/* === Typography === */
h1,h2,h3,h4,h5 { font-weight:800; letter-spacing:-.03em; color:var(--clr-title); margin:.7em 0; line-height:1.15; }
h1 { font-size:2.15em; }
h2 { font-size:1.42em; }
h3 { font-size:1.17em; }

p,ul,ol { margin-bottom:1.3em; color:var(--clr-text-light); font-size:1.09em; }
ul,ol { padding-left:1.3em; }

/* === Layout === */
.container,.tp-container { max-width:1140px; padding:0 15px; margin:0 auto; }

/* === Header (menu.css) === */
.header-flex { display:flex; align-items:center; justify-content:space-between; padding:0 18px; min-height:66px; }
.site-branding { flex:auto; }
.categories-link,.categories-burger {
  display:flex; gap:10px; font-size:19px; font-weight:700; color:var(--clr-accent); cursor:pointer; padding:9px 0; align-items:center;
  background:none; border:none;
}
.categories-list {
  display:none; flex-wrap:wrap; gap:7px; background:var(--clr-bg-card); padding:15px; border-radius:14px;
  position:absolute; top:66px; left:0; right:0; max-width:98vw; box-shadow:0 6px 22px rgba(0,0,0,.25); z-index:99; margin:0 auto;
}
.categories-list.active { display:flex!important; }
.categories-list a {
  font-size:15px; color:var(--clr-text); background:var(--clr-bg-alt); padding:7px 13px; border-radius:10px; transition:background .15s;
}
.categories-list a:hover { background:var(--clr-accent-hover); color:#111; }


/* === Logo === */
.logo-text {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -0.03em;
  line-height: 1;
  text-decoration: none;
  display: inline-block;
}

.logo-fap {
  color: #007aff;
}

.logo-rate {
  color: #4d4d4d;
}

@media (max-width: 768px) {
  .logo-text {
    font-size: 1.6rem;
  }
}


/* === Mobile Categories Menu === */
.categories-burger {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
}

.categories-burger .cat-icon {
  display: inline-block;
  width: 26px;
  height: 26px;
  background: url('/wp-content/themes/faprate/icons/grid-dots.svg') no-repeat center/contain;
}

/* Меню категорий на мобиле */
.categories-list {
  display: none;
  flex-wrap: wrap;
  gap: 9px 7px;
  background: var(--clr-bg-alt);
  padding: 15px 12px 10px;
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.2);
  position: absolute;
  top: 66px;
  left: 0;
  right: 0;
  z-index: 99;
  max-width: 98vw;
  margin: 0 auto;
}
.categories-list.active {
  display: flex !important;
}

.categories-list a {
  font-size: 15px;
  background: var(--clr-bg-card);
  color: var(--clr-text);
  border-radius: 10px;
  padding: 8px 14px;
  text-decoration: none;
  transition: background 0.15s;
}
.categories-list a:hover {
  background: var(--clr-accent-hover);
  color: #111;
}


.categories-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e0e0e0;
}
.categories-menu-title {
  font-size: 1.15em;
  font-weight: 800;
  color: var(--clr-title);
  letter-spacing: -0.02em;
}
.categories-menu-close {
  background: none;
  border: none;
  font-size: 2em;
  font-weight: 400;
  color: #888;
  cursor: pointer;
  line-height: 1;
  margin-left: 6px;
  transition: color .15s;
}
.categories-menu-close:hover {
  color: #e63946;
}


/* === Intro Minimal (Title only) === */
.intro-minimal {
  text-align: center;
  margin: 3em auto 2em auto;
  padding: 0 16px;
}

.intro-minimal .entry-title {
  font-size: 2.3em;
  font-weight: 800;
  color: var(--clr-title);
  line-height: 1.3;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .intro-minimal .entry-title {
    font-size: 1.8em;
  }
}


/* === Flat header with scroll arrows === */
.group__item-title-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #f7f7f9;
  border-radius: 14px;
  padding: 13px 15px 13px 16px;
  margin-bottom: 18px;
}
.group__item-title {
  font-size: 1.22em;
  font-weight: 800;
  margin: 0;
  color: var(--clr-title, #181818);
  letter-spacing: -0.02em;
  background: none;
  border: none;
  padding: 0;
}
.scroll-arrows { display: flex; gap: 7px; }
.scroll-arrow-btn {
  background: #f0f0f3;
  border: none;
  border-radius: 50%;
  width: 36px; height: 36px;
  font-size: 1.18em; color: #007aff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .14s, color .14s;
}
.scroll-arrow-btn:hover { background: #007aff; color: #fff; }


/* === Cards (card.css) === */
.card {
  background: #fff;
  border-radius: 13px;
  box-shadow: none;
  border: 1.2px solid #ececec;
  transition: transform .14s;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  margin-bottom: 18px;
}
.card:hover {
  transform: translateY(-2px) scale(1.012);
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}
.card-image-wrapper { position: relative; }
.card-image-link { display: block; position: relative; }
.card-image {
  width: 100%; height: 200px;
  object-fit: cover; display: block;
  border-top-left-radius: 13px;
  border-top-right-radius: 13px;
  transition: transform .14s;
}
.card-image-link:hover .card-image { transform: scale(1.035); }


/* === Card Labels / Метки === */
.card-score, .card-bonus, .card-discount {
  position: absolute;
  font-weight: 700;
  z-index: 2;
  font-size: 0.85em;
  border-radius: 30px;
  padding: 4px 10px;
  box-shadow: none;
  pointer-events: none;
}
.card-score {
  top: 7px; right: 10px;
  background: rgba(234,244,255,0.80); color: #007aff;
  pointer-events: auto;
}
.card-bonus {
  top: 7px; left: 10px;
  background: rgba(255,244,225,0.80); color: #ff9800;
}
.card-discount {
  top: 36px; left: 10px;
  background: rgba(228,248,230,0.80); color: #2e7d32;
}
/* Only bottom right! */
.card-notupdated-bottom {
  position: absolute;
  right: 10px; bottom: 10px;
  background: rgb(250 235 235 / 0.80);
  color: #bf1a1a;
  padding: 4px 12px;
  border-radius: 17px;
  font-size: 0.91em;
  font-weight: 600;
  z-index: 2;
  box-shadow: none;
}


/* === Card Body & Content === */
.card-body {
  padding: 10px 11px 8px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-title {
  font-size: 1.09em;
  font-weight: 800;
  margin: 0 0 7px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  width: 100%;
}
.card-title-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-title a {
  color: inherit;
  text-decoration: none;
  transition: color .14s;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
.card-title a:hover { color: #007aff; }
.go-link-icon {
  flex: 0 0 auto;
  margin-left: 14px;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.btn-icon-end-tag {
  display: inline-block;
  width: 20px; height: 20px;
  background: url('/wp-content/themes/faprate/icons/link-ext.svg') no-repeat center/contain;
}


/* === Meta: Tags & Date === */
.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 0.96em;
  margin-bottom: 3px;
  gap: 10px;
}
.card-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.review-meta--categories {
  display: inline-block;
  background: #f5f5f7;
  border-radius: 7px;
  padding: 3px 10px;
  margin-right: 4px;
  font-size: 0.97em;
  color: #2959b3;
  font-weight: 600;
}
.review-meta__link {
  color: #2959b3;
  text-decoration: none;
  border-bottom: 1px dashed #a3bcf7;
  transition: color .12s;
}
.review-meta__link:hover {
  color: #007aff;
  border-bottom: 1px solid #007aff;
}
.card-date {
  color: #b2b2b2;
  font-size: 0.92em;
  font-weight: 500;
  padding-left: 7px;
}


/* === Card Description (Excerpt) === */
.card-description {
  margin-top: 2px;
  font-size: 0.97em;
  color: #595959;
  line-height: 1.48;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.1em;
  max-height: 4.4em;
}


/* === Horizontal scroll cards (mobile slider style) === */
.horizontal-scroll-cards {
  overflow-x: auto;
  display: flex;
  gap: 10px;
  padding-bottom: 10px;
  scroll-behavior: smooth;
  position: relative;
}
/*.horizontal-scroll-cards::-webkit-scrollbar { display: none; }*/
.horizontal-scroll-cards .card {
  min-width: 270px;
  max-width: 320px;
  flex: 0 0 auto;
}

/* Маленькая кнопка-стрелка всегда справа по центру слайдера */
.slider-arrow-last {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  max-width: 46px;
  height: auto;
  margin-bottom: 0;
  margin-right: 0;
  /* Если нужна симметрия — можно чуть увеличить ширину/высоту */
}

.slider-arrow-last .btn-showall--icon {
  pointer-events: auto;
}

/* === Flat кнопка (для стрелки и show all) === */
.btn-showall {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1em;
  color: #fff;
  background: #007aff;
  border-radius: 999px;
  padding: 0.48em 1.12em;
  text-decoration: none;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 9px rgba(0,80,255,0.07);
  border: none;
  transition: background .15s, color .13s, box-shadow .17s;
  margin: 0 auto;
  line-height: 1;
  cursor: pointer;
}
.btn-showall:hover,
.btn-showall:focus {
  background: #005ecb;
  color: #fff;
  box-shadow: 0 2px 13px rgba(0,80,255,0.13);
  text-decoration: none;
}
.arrow-symbol {
  font-size: 1.1em;
  margin-left: 0.34em;
  font-weight: bold;
  line-height: 1;
  display: inline-block;
}
.btn-showall--icon {
  padding: 0;
  min-width: 38px;
  min-height: 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #007aff;
  color: #fff;
  font-size: 1.23em;
  box-shadow: 0 1px 7px rgba(0,80,255,0.10);
  justify-content: center;
}
.btn-showall--icon .arrow-symbol {
  margin-left: 0;
  font-size: 1.32em;
}
.btn-showall--icon:hover,
.btn-showall--icon:focus {
  background: #005ecb;
  color: #fff;
}

/* Bottom кнопка (Show all) */
.showall-bottom-link {
  margin: 16px 0;
  text-align: center;
}

/* === Responsive: Mobile Adaptation === */
@media (max-width: 768px) {
  .horizontal-scroll-cards {
    gap: 8px;
    padding-left: 0;
    padding-right: 35vw;
    margin-left: 0;
  }
  .horizontal-scroll-cards .card {
    min-width: 84vw;
    max-width: 67vw;
    box-shadow: none;
    border: 1.2px solid #ececec;
    margin-right: 0;
    background: #fff;
  }
  .card-body { padding: 7px 7px 5px; }
  .card-title { font-size: 0.97em; margin-bottom: 3px; }
  .card-score,
  .card-bonus,
  .card-discount { font-size: 0.90em; top: 5px; padding: 3px 7px; }
  .card-description {
    font-size: 0.95em;
    -webkit-line-clamp: 2;
    min-height: 2.2em;
    max-height: 2.8em;
  }
}
@media (max-width: 600px) {
  .btn-showall,
  .btn-showall--icon {
  
    height: 32px;
    font-size: 1.1em;
    min-height: 32px;

    padding: 0.36em 0.95em;
  }
  .arrow-symbol {
    font-size: 1em;
    margin-left: 0.22em;
  }
  .slider-arrow-last {
    min-width: 32px;
    max-width: 40px;
  }
}




/* === Иконка Go (справа от названия) === */
.go-link-icon {
  margin-left: 10px;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.btn-icon-end-tag {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url('/wp-content/themes/faprate/icons/link-ext.svg') no-repeat center/contain;
}



/* === Review (review.css) === */
.entry-header { margin-bottom:24px; }
.entry-title { font-size:2rem; font-weight:bold; }
.tagline { font-style:italic; color:#888; margin-top:8px; }
.review-preview { display:flex; gap:16px; align-items:center; margin-bottom:32px; flex-wrap:wrap; }
.review-thumbnail img { border-radius:8px; }
.review-score-badge .score-value { font-size:2rem; color:#e63946; }
.review-visit { background:#111; color:#fff; padding:8px 16px; border-radius:6px; font-weight:600; }
.review-pros-cons { display:flex; gap:32px; margin:32px 0; }
.review-content { margin:32px 0; line-height:1.6; }
.review-screenshots-slider { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }

/* === Taxonomy (taxonomy.css) === */
.taxonomy-page { padding:40px 0; }
.taxonomy-header { margin-bottom:40px; }
.taxonomy-title { font-size:2rem; font-weight:bold; margin-bottom:16px; }
.taxonomy-description { font-size:1rem; color:#888; line-height:1.6; margin-top:12px; }
.taxonomy-section { margin-bottom:60px; }
.taxonomy-section__title { font-size:1.5rem; text-align:center; margin-bottom:20px; }

/* === Scroll Arrows / UI === */
.scroll-arrows { display:flex; gap:10px; }
.scroll-arrow-btn {
  background:#e8e8e8; border-radius:50%; color:var(--clr-accent); width:40px; height:40px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s;
}
.scroll-arrow-btn:hover { background:var(--clr-accent); color:#fff; }

/* === Responsive === */
.desktop-only { display:flex; }
.mobile-only { display:none!important; }

@media(max-width:800px) {
  .desktop-only { display:none!important; }
  .mobile-only { display:flex!important; }
  .header-flex { padding:0 10px; }
}



/* 🔹 Категории */
.category-bubbles {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}
.category-bubble-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.category-bubble-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}
.category-bubble {
  width: 90px;
  height: 90px;
  background: var(--clr-bubble);
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s;
}
.category-bubble img {
  width: 100%;
  height: 100%;
  object-fit: cover;
    display: block;

}
.category-bubble-link:hover .category-bubble {
  transform: scale(1.1);
}
.category-bubble-title {
  margin-top: 8px;
  font-size: 0.95em;
  color: var(--clr-title);
  text-align: center;
  font-weight: 600;
  text-decoration: none !important;
}

@media (max-width: 600px) {
  .category-bubble { width: 62px; height: 62px; }
  .category-bubble-title { font-size: 0.88em; }
}
/* Сетка 4-в-ряд для рубрики */
.cards.cards-4{
  display:flex;          /* переопределяем block */
  flex-wrap:wrap;
  gap: var(--gap, 1rem); /* если в теме используется css-переменная --gap */
}

/* ширина карточки = 25% минус gap */
.cards.cards-4 > .card{
  flex: 0 0 calc(25% - var(--gap,1rem));
}

/* адаптив: 3-в-ряд и 2-в-ряд */
@media (max-width:1024px){
  .cards.cards-4 > .card{ flex:0 0 calc(33.333% - var(--gap,1rem)); }
}
@media (max-width:768px){
  .cards.cards-4 > .card{ flex:0 0 calc(100% - var(--gap,1rem)); }
}


/* --- Hero: круг вместо квадрата --- */
.category-hero__bubble {
  width: 120px;
  height: 120px;
  flex: 0 0 auto;      /* не растягиваемся */
}

@media (max-width: 600px) {
  .category-hero__bubble {
    width: 80px;
    height: 80px;
  }
}

/* --- Ограничиваем ширину текста, чтобы не «лип» к кругу --- */
.category-hero__text {
  flex: 1 1 0;
 /* max-width: 640px; */
}


/* ---------- Hero two-column layout ---------- */
.category-hero__content{
  display:flex;
  align-items:flex-start;
  gap:2rem;
}

.category-hero__image{          /* круг остаётся прежним */
  flex:0 0 120px;
  width:120px; height:120px;
}

.category-hero__body{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:1rem;                     /* расстояние между h1 и текстом */
  min-width:0;                  /* чтобы текст нормально ужимался */
}

.category-hero__title{
  margin:0;                     /* убираем авто-отступы */
  line-height:1.25;
}

/* mobile: стекаем в колонку */
@media(max-width:640px){
  .category-hero__content{
   /*  flex-direction:column; */
    align-items:center;
    text-align:center;
  }
  .category-hero__body{
    align-items:center;
  }
}



/* ----- прокручиваемый текст ----------------------------------- */
.scrollbox{
  max-height:260px;      /* при необходимости подкорректируйте */
  overflow:auto;
  padding-right:1rem;    /* чтобы скроллбар не налезал на текст */
}