/* ==========================================================================
   ForGamblers — fg-reviews.css (Kadence-safe, CLEAN)
   Page: CA Reviews hub (page-id-1322)
   Version: 2025-12-15 r6

   RU: Верхняя таблица (desktop) + карточки (mobile) + отдельная таблица логотипов.
   EN: Desktop top table + mobile cards + separate logos table styling.

   Scope / Область:
   body.page-id-1322 .entry-content ...
   ========================================================================== */


/* [00] Tokens / Токены ---------------------------------------------------------
   RU: Все переменные держим на body конкретной страницы, чтобы ничего не утекало
       на другие хабы/страницы.
   EN: Variables live on this page body only to avoid bleeding to other pages.
-------------------------------------------------------------------------------- */
body.page-id-1322{
  --fg-rv-surface: var(--cr-surface, #0c111b);
  --fg-rv-elev:    color-mix(in oklab, var(--fg-rv-surface), white 5%);
  --fg-rv-border:  var(--cr-border,  #2a3140);
  --fg-rv-head:    var(--cr-muted-strong, #f3f4ff);
  --fg-rv-text:    var(--cr-muted, #c5cee0);
  --fg-rv-subtle:  color-mix(in oklab, var(--fg-rv-text), black 25%);
  --fg-rv-accent:  var(--cr-accent, #ba6bff);

  --fg-rv-badge-good: color-mix(in oklab, #0dd978, #0b5533 35%);
  --fg-rv-badge-mid:  color-mix(in oklab, #ffcf33, #5c4400 35%);
  --fg-rv-badge-bad:  color-mix(in oklab, #ff4c4c, #5b1212 40%);
}


/* [10] Top table wrapper / Обёртка верхней таблицы -----------------------------
   RU: Рамка + фон + тень. overflow:hidden нужен для аккуратных скруглений.
   EN: Border + background + shadow. overflow:hidden keeps rounded corners clean.
-------------------------------------------------------------------------------- */
body.page-id-1322 .entry-content .fg-table-wrap{
  margin-block: clamp(1.5rem, 2vw, 2.25rem);
  border-radius: 18px;
  border: 1px solid var(--fg-rv-border);

  /* fallback background (if color-mix unsupported) */
  background-color: #111722;

  background:
    linear-gradient(135deg, rgba(163,82,234,0.22), transparent 55%),
    color-mix(in oklab, var(--fg-rv-surface), #171c2a 18%);

  box-shadow:
    0 18px 40px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.02);

  overflow: hidden;
}

/* RU: Убираем лишний отступ WP после шорткода-таблицы.
   EN: Remove extra WP paragraph spacing after the shortcode/table block. */
body.page-id-1322 .entry-content .fg-table-wrap + p{ margin-top: 0; }


/* [20] Table base / База таблицы ----------------------------------------------
   RU: Стандарт: 100% ширины, без “дыр”, читаемый размер.
   EN: Standard base: full width, clean borders, readable font size.
-------------------------------------------------------------------------------- */
body.page-id-1322 .entry-content table.fg-table{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.9375rem;
  color: var(--fg-rv-text);
}

/* Header / Шапка */
body.page-id-1322 .entry-content table.fg-table thead{
  background: linear-gradient(90deg, rgba(123,63,210,0.75), rgba(67,202,255,0.55));
}
body.page-id-1322 .entry-content table.fg-table thead tr{
  border-bottom: 1px solid rgba(0,0,0,0.4);
}

/* Cells / Ячейки */
body.page-id-1322 .entry-content table.fg-table :is(th, td){
  padding: 0.9rem 0.85rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

/* Column titles / Заголовки колонок */
body.page-id-1322 .entry-content table.fg-table th{
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-rv-head);
  white-space: nowrap;
}

/* Zebra rows / Зебра */
body.page-id-1322 .entry-content table.fg-table tbody tr:nth-child(odd){
  background-color: rgba(10,13,23,0.72);
}
body.page-id-1322 .entry-content table.fg-table tbody tr:nth-child(even){
  background-color: rgba(15,18,30,0.96);
}

/* Hover (desktop only) / Ховер (только desktop) */
@media (hover:hover) and (pointer:fine){
  body.page-id-1322 .entry-content table.fg-table tbody tr:hover{
    background:
      linear-gradient(90deg, rgba(163,82,234,0.16), transparent 65%),
      rgba(13,19,36,0.98);
  }
}


/* [30] Logo + name column / Колонка логотип + имя -----------------------------
   RU: Делаем “линейку”: круглый чип + название + рейтинг.
   EN: A clean row: round logo chip + name + rating pill.
-------------------------------------------------------------------------------- */
body.page-id-1322 .entry-content table.fg-table td.fg-col-logo{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  color: var(--fg-rv-head);
}

/* Logo chip / Чип логотипа */
body.page-id-1322 .entry-content .fg-logo-chip{
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(circle at 25% 0, #ffffff, #f7eaff 30%, #c4a3ff 65%, #6a35c0 100%);

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.45),
    0 8px 20px rgba(0,0,0,0.7);

  overflow: hidden;
}

body.page-id-1322 .entry-content .fg-logo-chip img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Rating pill / Пилюля рейтинга */
body.page-id-1322 .entry-content .fg-rating-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 2.4rem;
  padding: 0.15rem 0.55rem;

  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;

  background: rgba(0,0,0,0.55);
  color: #fff;
}

body.page-id-1322 .entry-content .fg-rating-pill[data-grade="good"]{ background: var(--fg-rv-badge-good); }
body.page-id-1322 .entry-content .fg-rating-pill[data-grade="mid"] { background: var(--fg-rv-badge-mid); }
body.page-id-1322 .entry-content .fg-rating-pill[data-grade="bad"] { background: var(--fg-rv-badge-bad); }


/* [40] Payout / rails / bonus columns -----------------------------------------
   RU: Основной текст + “подпись” меньшим кеглем.
   EN: Main text + smaller note under it.
-------------------------------------------------------------------------------- */
body.page-id-1322 .entry-content table.fg-table :is(td.fg-col-payout, td.fg-col-bonus, td.fg-col-rails){
  font-size: 0.87rem;
  line-height: 1.5;
}

body.page-id-1322 .entry-content :is(.fg-payout-main, .fg-bonus-main){
  font-weight: 700;
  color: var(--fg-rv-head);
}

body.page-id-1322 .entry-content :is(.fg-payout-note, .fg-bonus-note){
  display: block;
  font-size: 0.78rem;
  color: var(--fg-rv-subtle);
}

/* Rails chips / Чипы “рейлов” (Interac/Visa/etc.) */
body.page-id-1322 .entry-content .fg-rail-chip{
  display: inline-flex;
  align-items: center;

  padding: 0.15rem 0.5rem;
  margin-inline-end: 0.25rem;
  margin-block: 0.08rem;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);

  font-size: 0.78rem;

  background:
    radial-gradient(circle at 0 0, rgba(255,255,255,0.16), transparent 45%),
    rgba(9,12,22,0.95);
}


/* [50] CTA column / Колонка кнопки --------------------------------------------
   RU: Кнопка справа, без переноса.
   EN: Right aligned button, no wrapping.
-------------------------------------------------------------------------------- */
body.page-id-1322 .entry-content table.fg-table td.fg-col-cta{
  text-align: right;
  white-space: nowrap;
}

body.page-id-1322 .entry-content .fg-cta-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;

  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  border: none;

  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;

  text-decoration: none;
  color: #0b0715;

  background-image: linear-gradient(135deg, #ffdd5a, #ffa726 45%, #ff6d00 100%);

  box-shadow:
    0 0 0 1px rgba(0,0,0,0.55),
    0 14px 30px rgba(0,0,0,0.75);

  will-change: transform;
}

@media (hover:hover) and (pointer:fine){
  body.page-id-1322 .entry-content .fg-cta-btn:hover{
    transform: translateY(-1px);
    box-shadow:
      0 0 0 1px rgba(0,0,0,0.7),
      0 20px 40px rgba(0,0,0,0.9);
  }
}


/* [60] Mobile cards (only inside .fg-table-wrap) -------------------------------
   RU: На мобиле прячем таблицу и показываем карточки.
   EN: On mobile we hide the table and show cards.
-------------------------------------------------------------------------------- */
@media (max-width: 768px){

  /* Hide the desktop table inside the wrapper / Прячем таблицу в обёртке */
  body.page-id-1322 .entry-content .fg-table-wrap > table.fg-table{
    display: none;
  }

  /* Cards container / Контейнер карточек */
  body.page-id-1322 .entry-content .fg-table-wrap .fg-table-mobile{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem;
  }

  /* Single card / Одна карточка */
  body.page-id-1322 .entry-content .fg-table-wrap .fg-table-mobile .fg-card{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 0.35rem 0.75rem;

    padding: 0.9rem 0.9rem 1rem;

    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.06);

    background: linear-gradient(135deg, rgba(163,82,234,0.18), rgba(29,38,72,0.98));
    box-shadow: 0 14px 30px rgba(0,0,0,0.7);
  }

  /* Logo area spans rows / Лого занимает 2 строки */
  body.page-id-1322 .entry-content .fg-table-wrap .fg-table-mobile .fg-card-logo{
    grid-row: 1 / span 2;
  }

  /* Heading line / Заголовок карточки */
  body.page-id-1322 .entry-content .fg-table-wrap .fg-table-mobile .fg-card-heading{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.6rem;

    font-size: 0.98rem;
    font-weight: 700;
    color: var(--fg-rv-head);
  }

  /* Tags / Теги */
  body.page-id-1322 .entry-content .fg-table-wrap .fg-table-mobile .fg-card-tags{
    grid-column: 1 / -1;

    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;

    margin-top: 0.15rem;
  }

  /* Label/value rows / Пары “лейбл-значение” */
  body.page-id-1322 .entry-content .fg-table-wrap .fg-table-mobile .fg-card-row{
    grid-column: 1 / -1;

    display: flex;
    justify-content: space-between;
    gap: 0.75rem;

    margin-top: 0.35rem;
    font-size: 0.8rem;
  }

  body.page-id-1322 .entry-content .fg-table-wrap .fg-table-mobile .fg-card-label{
    color: var(--fg-rv-subtle);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  body.page-id-1322 .entry-content .fg-table-wrap .fg-table-mobile .fg-card-value{
    font-weight: 600;
    color: var(--fg-rv-head);
  }

  /* CTA row / Кнопка внизу */
  body.page-id-1322 .entry-content .fg-table-wrap .fg-table-mobile .fg-card-cta{
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    margin-top: 0.6rem;
  }
}


/* [70] WP Table block "logos" → cards on mobile (only this block) --------------
   RU: Превращаем конкретную таблицу логотипов в карточки на мобиле.
   EN: Convert the dedicated logos table into cards on mobile.
-------------------------------------------------------------------------------- */
@media (max-width: 768px){
  body.page-id-1322 .entry-content figure.wp-block-table.fg-table.fg-table--logos{
    padding: 10px;
    border-radius: 14px;
    border: 1px solid var(--fg-rv-border);

    /* fallback */
    background-color: #111722;

    background: color-mix(in oklab, var(--fg-rv-surface), white 4%);
    box-shadow: 0 10px 26px rgba(0,0,0,0.55);
  }

  body.page-id-1322 .entry-content figure.wp-block-table.fg-table.fg-table--logos > table{
    min-width: 0 !important;
    width: 100% !important;
    border-spacing: 0;
  }

  /* Hide header / Прячем шапку */
  body.page-id-1322 .entry-content .fg-table.fg-table--logos thead{ display: none; }

  body.page-id-1322 .entry-content .fg-table.fg-table--logos tbody{ display: block; }

  /* Each row becomes a card / Каждая строка как карточка */
  body.page-id-1322 .entry-content .fg-table.fg-table--logos tbody tr{
    display: flex;
    flex-direction: column;
    gap: 6px;

    margin-bottom: 10px;

    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.06);

    background: color-mix(in oklab, var(--fg-rv-surface), white 6%);
    box-shadow: 0 8px 18px rgba(0,0,0,0.45);

    overflow: hidden;
  }

  body.page-id-1322 .entry-content .fg-table.fg-table--logos tbody tr:last-child{ margin-bottom: 0; }

  body.page-id-1322 .entry-content .fg-table.fg-table--logos tbody td{
    display: block;
    width: 100%;
    padding: 10px 12px;

    border-bottom: 0;
    background: transparent;
    color: var(--fg-rv-text);
  }

  /* Brand line / Строка бренда */
  body.page-id-1322 .entry-content .fg-table.fg-table--logos tbody td.brand-cell{
    display: flex;
    align-items: center;
    gap: 10px;

    border-bottom: 1px solid rgba(255,255,255,0.08);

    color: var(--fg-rv-head);
    font-weight: 700;
  }

  body.page-id-1322 .entry-content .fg-table.fg-table--logos .cr-logo-img{
    max-height: 40px;
    width: auto;
  }

  body.page-id-1322 .entry-content .fg-table.fg-table--logos tbody td.fg-review-cta{
    padding-top: 4px;
  }

  /* CTA button inside this block / Кнопка CTA внутри блока */
  body.page-id-1322 .entry-content .fg-table.fg-table--logos .fg-btn{
    display: inline-flex;
    width: 100%;
    justify-content: center;

    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 700;
  }
}