/* ==========================================================================
ForGamblers — fg-single-casino.css
Version: 2025-12-07 r16 (CLEAN, UNIFIED, MOBILE)
SINGLE REVIEW — 1440 HERO + STRIPS + STICKY CTA + LIGHT TABLES
Scope: Single casino reviews (/reviews/…)
Target: body.single-casino-reviews, body.single-reviews
========================================================================== */
/* ========================================================================== */
/* [00] БАЗОВЫЙ КОНТЕЙНЕР + ОБЩАЯ ТИПОГРАФИКА */
/* ========================================================================== */
body.single-casino-reviews .entry-content,
body.single-reviews .entry-content{
max-width: min(1440px, 100% - 48px); /* максимум 1440px, по 24px полей */
margin: 32px auto 64px;
padding: 32px 32px 48px;
background:
radial-gradient(120% 220% at 0% 0%, rgba(129, 140, 248, 0.18), transparent),
radial-gradient(120% 220% at 100% 0%, rgba(236, 72, 153, 0.18), transparent),
#020617;
border-radius: 32px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
position: relative;
overflow: hidden;
color: #e3eaf7;
}
/* в контенте не ограничиваем ширину “чёрных” блоков */
body.single-casino-reviews .entry-content > *:not(.fg-review-hero):not(.fg-review-strip):not(.fg-review-proscons):not(.fg-review-sticky):not(.fg-terms-note),
body.single-reviews .entry-content > *:not(.fg-review-hero):not(.fg-review-strip):not(.fg-review-proscons):not(.fg-review-sticky):not(.fg-terms-note){
max-width: 100%;
}
/* H1 */
body.single-casino-reviews .entry-content h1,
body.single-reviews .entry-content h1{
font-size: clamp(2rem, 2.4vw, 2.6rem);
line-height: 1.05;
letter-spacing: 0.01em;
margin: 0 0 4px;
}
/* Базовый текст: абзацы и списки */
body.single-casino-reviews .entry-content p,
body.single-reviews .entry-content p,
body.single-casino-reviews .entry-content li,
body.single-reviews .entry-content li{
font-size: 1.05rem;
line-height: 1.65;
margin: 0 0 10px;
}
body.single-casino-reviews .entry-content p + p,
body.single-reviews .entry-content p + p{
margin-top: 2px;
}
/* Списки */
body.single-casino-reviews .entry-content ul,
body.single-casino-reviews .entry-content ol,
body.single-reviews .entry-content ul,
body.single-reviews .entry-content ol{
padding-left: 1.2rem;
margin: 4px 0 16px;
}
body.single-casino-reviews .entry-content li,
body.single-reviews .entry-content li{
margin-bottom: 4px;
}
/* Жирный текст */
body.single-casino-reviews .entry-content strong,
body.single-reviews .entry-content strong{
color: #ffffff;
font-weight: 700;
}
/* Strong-текст внутри светлых таблиц — делаем тёмным */
body.single-casino-reviews .entry-content table strong,
body.single-reviews .entry-content table strong{
color: #111827; /* можно и inherit, но так надёжнее */
}
/* H2 — неоновые секции */
body.single-casino-reviews .entry-content h2,
body.single-reviews .entry-content h2{
position: relative;
margin: 38px 0 16px;
font-size: clamp(1.35rem, 1.15rem + 0.5vw, 1.6rem);
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: #f9fafb;
padding-bottom: 10px;
}
body.single-casino-reviews .entry-content h2::after,
body.single-reviews .entry-content h2::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 120px;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg,#a855ff,#fbbf24);
box-shadow: 0 0 12px rgba(180,120,255,.6);
}
/* Первый h2 после вводной — ближе к началу */
body.single-casino-reviews .entry-content h1 + p + p + h2,
body.single-reviews .entry-content h1 + p + p + h2{
margin-top: 30px;
}
/* Краткий текст сразу под H2 (интро секций, Game Providers и т.п.) */
body.single-casino-reviews .entry-content h2 + p,
body.single-reviews .entry-content h2 + p{
font-size: 0.94rem;
opacity: 0.9;
margin-bottom: 6px;
}
body.single-casino-reviews .entry-content h2 + p br,
body.single-reviews .entry-content h2 + p br{
display: none;
}
/* H3 / H4 */
body.single-casino-reviews .entry-content h3,
body.single-reviews .entry-content h3{
margin: 26px 0 10px;
font-size: clamp(1.12rem, 1.02rem + 0.3vw, 1.3rem);
font-weight: 700;
color: #e5e9f5;
}
body.single-casino-reviews .entry-content h4,
body.single-reviews .entry-content h4{
margin: 18px 0 8px;
font-size: 1.02rem;
font-weight: 600;
color: #cbd5f5;
}
/* Разделители / hr */
body.single-casino-reviews .entry-content hr,
body.single-reviews .entry-content hr{
border: 0;
height: 1px;
margin: 30px 0 24px;
background: linear-gradient(
90deg,
rgba(15,19,27,0),
rgba(148,163,184,.8),
rgba(15,19,27,0)
);
opacity: .85;
}
/* Встроенный FAQ (details) по умолчанию */
body.single-casino-reviews .entry-content details,
body.single-reviews .entry-content details{
margin: 8px 0;
padding: 10px 14px;
border-radius: 12px;
background: rgba(15,23,42,.9);
border: 1px solid rgba(148,163,184,.35);
}
body.single-casino-reviews .entry-content details summary,
body.single-reviews .entry-content details summary{
cursor: pointer;
font-weight: 600;
color: #e5e9f5;
}
body.single-casino-reviews .entry-content details[open],
body.single-reviews .entry-content details[open]{
box-shadow: 0 10px 28px rgba(0,0,0,.55);
}
/* ========================================================================== */
/* [01] ХЕРО-ЗОНА ВНУТРИ КОНТЕНТА (H1 + РЕЙТИНГ + БОНУС + CTA) */
/* ========================================================================== */
/* сам H1 чуть ниже */
body.single-casino-reviews .entry-content > h1,
body.single-reviews .entry-content > h1{
margin-top: 8px;
}
/* Рейтинг сразу после h1 */
body.single-casino-reviews .entry-content h1 + p,
body.single-reviews .entry-content h1 + p{
font-weight: 600;
font-size: 1rem;
color: var(--fg-accent, #fbbf24);
margin-bottom: 4px;
}
/* Строка с бонусом */
body.single-casino-reviews .entry-content h1 + p + p,
body.single-reviews .entry-content h1 + p + p{
font-size: 1rem;
font-weight: 500;
margin-bottom: 8px;
}
/* Wagering / License / Withdrawal speed */
body.single-casino-reviews .entry-content h1 + p + p + p,
body.single-casino-reviews .entry-content h1 + p + p + p + p,
body.single-casino-reviews .entry-content h1 + p + p + p + p + p,
body.single-reviews .entry-content h1 + p + p + p,
body.single-reviews .entry-content h1 + p + p + p + p,
body.single-reviews .entry-content h1 + p + p + p + p + p{
font-size: 0.94rem;
opacity: 0.92;
}
/* CTA-кнопки (Play Now / Visit Site) */
body.single-casino-reviews .entry-content a[href*="/go/"],
body.single-reviews .entry-content a[href*="/go/"]{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 22px;
margin: 10px 10px 12px 0;
border-radius: 999px;
background: linear-gradient(135deg, #facc15, #f97316);
color: #050816 !important;
font-weight: 600;
font-size: 0.97rem;
text-decoration: none;
white-space: nowrap;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.75);
transition: transform 0.12s ease,
box-shadow 0.12s ease,
background 0.12s ease;
}
body.single-casino-reviews .entry-content a[href*="/go/"]:hover,
body.single-reviews .entry-content a[href*="/go/"]:hover{
transform: translateY(-1px);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9);
background: linear-gradient(135deg, #fde047, #fb923c);
}
/* Вторая кнопка (Visit Site) — outline */
body.single-casino-reviews .entry-content a[href*="/go/"]:last-of-type,
body.single-reviews .entry-content a[href*="/go/"]:last-of-type{
background: transparent;
color: #fbbf24 !important;
border: 1px solid rgba(248, 250, 252, 0.28);
box-shadow: none;
}
body.single-casino-reviews .entry-content a[href*="/go/"]:last-of-type:hover,
body.single-reviews .entry-content a[href*="/go/"]:last-of-type:hover{
background: rgba(15, 23, 42, 0.9);
}
/* Небольшой отступ вниз перед секцией Payments (первый H2) */
body.single-casino-reviews .entry-content h2:first-of-type,
body.single-reviews .entry-content h2:first-of-type{
margin-top: 20px;
}
/* ========================================================================== */
/* [02] PAYMENTS — ОБЩИЙ ВАРИАНТ В ТЕКСТЕ */
/* ========================================================================== */
body.single-casino-reviews .entry-content .fg-payments-row,
body.single-reviews .entry-content .fg-payments-row{
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
justify-content: flex-start;
margin: 4px 0 6px;
}
/* “Чипы” внутри текстовых блоков под H2 (если без .fg-review-strip) */
body.single-casino-reviews .entry-content h2 + p img,
body.single-reviews .entry-content h2 + p img{
vertical-align: middle;
margin: 2px 4px 2px 0;
padding: 5px 9px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.95);
box-shadow: 0 9px 22px rgba(0,0,0,0.58);
max-height: 24px;
width: auto;
}
/* ========================================================================== */
/* [03] ПРОС / КОНС / FAQ — БАЗОВЫЕ H3, СПИСКИ (ДО ЧЁРНОГО БЛОКА) */
/* ========================================================================== */
body.single-casino-reviews .entry-content h3,
body.single-reviews .entry-content h3{
font-size: 1.05rem;
}
/* (списки уже описаны в [00], здесь только FAQ-обёртка см. выше) */
/* ========================================================================== */
/* [04] ADAPTIVE ДЛЯ ОБЩЕГО КОНТЕЙНЕРА */
/* ========================================================================== */
@media (max-width: 1024px){
body.single-casino-reviews .entry-content,
body.single-reviews .entry-content{
max-width: min(100% - 32px, 900px);
padding: 24px 18px 40px;
margin: 20px auto 48px;
border-radius: 24px;
}
body.single-casino-reviews .entry-content a[href*="/go/"],
body.single-reviews .entry-content a[href*="/go/"]{
width: 100%;
justify-content: center;
margin-right: 0;
}
}
@media (max-width: 768px){
/* Чтобы липкая CTA-плашка снизу не перекрывала последние строки */
body.single-casino-reviews #page,
body.single-reviews #page {
padding-bottom: calc(120px + env(safe-area-inset-bottom));
}
body.single-casino-reviews .entry-content,
body.single-reviews .entry-content{
max-width: 100%;
margin: 16px 0 40px;
padding: 24px 14px 36px;
border-radius: 0;
box-shadow: none;
}
body.single-casino-reviews .entry-content h1,
body.single-reviews .entry-content h1{
font-size: 1.8rem;
}
body.single-casino-reviews .entry-content p,
body.single-reviews .entry-content p{
font-size: 1.02rem;
}
}
@media (max-width: 640px){
body.single-casino-reviews .entry-content,
body.single-reviews .entry-content{
margin: 0 0 40px;
padding: 20px 10px 34px;
}
}
/* ========================================================================== */
/* [10] HERO 1440 (ОТДЕЛЬНЫЙ БЛОК НАД КОНТЕНТОМ) */
/* ========================================================================== */
.fg-review-hero{
max-width: 1440px;
margin: 16px auto 0;
padding: 8px 20px 18px;
border-radius: 32px;
background: rgba(8, 14, 35, 0.98);
box-shadow: 0 24px 60px rgba(0,0,0,0.9);
display: grid;
grid-template-columns: minmax(230px,260px) minmax(0,1fr) minmax(190px,220px);
column-gap: 32px;
row-gap: 14px;
align-items: flex-start;
}
/* левая колонка — логотип */
.fg-review-hero > *:nth-child(1){
display: flex;
align-items: flex-start;
justify-content: center;
}
/* средняя колонка — название, рейтинг, бонус, мета */
.fg-review-hero > *:nth-child(2) p{
margin: 0;
font-size: 0.96rem;
}
/* первая строка — Bonus (десктоп) */
.fg-review-hero > *:nth-child(2) p:nth-of-type(1){
font-size: 1.6rem;
font-weight: 600;
margin-top: 4px;
margin-bottom: 10px;
}
/* остальные строки — Wagering / License / Withdrawal speed */
.fg-review-hero > *:nth-child(2) p:nth-of-type(n+2){
font-size: 0.92rem;
opacity: 0.9;
}
/* строка «название + рейтинг» */
.cr-title-row{
display:flex;
align-items:center;
gap:16px;
}
.cr-title-row h1{
margin:0;
font-size:22px;
line-height:1.25;
}
/* плашка рейтинга рядом с заголовком */
.cr-rating{
display:inline-flex;
align-items:center;
background:#020617;
border-radius:999px;
padding:4px 10px 4px 8px;
box-shadow:0 0 0 1px rgba(148,163,184,0.35);
font-size:13px;
}
.cr-rating__stars{
color:#fbbf24;
letter-spacing:2px;
font-size:14px;
margin-right:6px;
}
.cr-rating__score{
color:#e5e7eb;
}
/* правая колонка — две кнопки */
.fg-review-hero > *:nth-child(3){
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
}
.fg-review-hero > *:nth-child(3) a[href*="/go/"]{
min-width: 160px;
}
/* текстовый столбец без лишних паддингов */
.fg-review-hero > *:nth-child(2){
width: 100%;
padding: 0;
}
/* Планшет до 1024: hero в две строки */
@media (max-width: 1024px){
.fg-review-hero{
grid-template-columns: minmax(200px,240px) minmax(0,1fr);
grid-template-rows: auto auto;
}
.fg-review-hero > *:nth-child(3){
grid-column: 1 / -1;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
}
/* Мобилка до 768px: одна колонка */
@media (max-width: 768px){
.fg-review-hero{
grid-template-columns: minmax(0,1fr);
padding: 6px 14px 12px;
row-gap: 8px;
align-items: flex-start;
border-radius: 0 0 32px 32px;
}
.fg-review-hero > *:nth-child(3){
justify-content: center;
flex-direction: column;
align-items: stretch;
}
.fg-review-hero > *:nth-child(3) a[href*="/go/"]{
width: 100%;
}
/* В hero на мобиле показываем только первую CTA-кнопку */
.fg-review-hero > *:nth-child(3) a[href*="/go/"]:not(:first-of-type){
display: none !important;
}
}
/* ========================================================================== */
/* [20] PAYMENTS + PROVIDERS — ТАБЛЕТКА ПОД HERO */
/* ========================================================================== */
.fg-review-strip{
max-width: 1440px;
margin: 20px auto 0;
padding: 18px 24px 20px;
border-radius: 28px;
background: rgba(8, 14, 35, 0.96);
box-shadow: 0 18px 40px rgba(0,0,0,0.75);
}
.fg-review-strip h2{
margin: 0 0 8px;
font-size: 0.98rem;
letter-spacing: .08em;
text-transform: uppercase;
}
.fg-review-strip h2::after{
content:"";
display:block;
width:52px;
height:3px;
border-radius:999px;
margin-top:6px;
background:linear-gradient(90deg,#6366f1,#ec4899);
}
/* PAYMENTS: первый h2 + p (или .fg-payments-row) — строка с «чипами» */
.fg-review-strip h2:first-of-type + p,
.fg-review-strip h2:first-of-type + .fg-payments-row{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center; /* центрируем платёжки по горизонтали */
gap:8px;
margin:6px 0 4px;
line-height:0;
}
/* сами логотипы-«чипы» в блоке payments (десктоп) */
.fg-review-strip h2:first-of-type + p img,
.fg-review-strip h2:first-of-type + .fg-payments-row img{
display:inline-block;
vertical-align:middle;
margin:0;
padding:6px 10px;
border-radius:999px;
background:rgba(15,23,42,0.96);
box-shadow:0 10px 24px rgba(0,0,0,0.6);
max-height:24px;
width:auto;
}
/* GAME PROVIDERS: второй h2 + текст (сам список провайдеров — .cr-prov) */
.fg-review-strip h2:nth-of-type(2){
margin-top:14px;
}
.fg-review-strip h2:nth-of-type(2) + p,
.fg-review-strip .fg-providers-text{
margin-top:4px;
font-size: 0.94rem;
opacity: 0.9;
line-height:1.55;
}
.fg-review-strip h2:nth-of-type(2) + p br{
display:none;
}
/* Мобилка: чёрная полоска ближе к краям */
@media (max-width: 768px){
.fg-review-strip{
margin: 16px 0 0;
padding: 12px 10px 14px;
border-radius: 22px;
}
}
@media (max-width: 640px){
.fg-review-strip{
margin: 12px 0 0;
padding: 10px 8px 12px;
border-radius: 18px;
}
}
/* ========================================================================== */
/* [21] PROS / CONS / FAQ — 2 КОЛОНКИ */
/* ========================================================================== */
.fg-review-proscons{
max-width: 1440px;
margin: 20px auto 0;
padding: 22px 24px 26px;
border-radius: 28px;
background: rgba(8, 14, 35, 0.96);
box-shadow: 0 18px 40px rgba(0,0,0,0.75);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 32px;
row-gap: 20px;
}
/* Внутренний отступ колонок */
.fg-review-proscons > *{
font-size: 1.02rem;
padding-inline: 12px;
}
/* третий блок (FAQ) — на всю ширину */
.fg-review-proscons > *:nth-child(3){
grid-column: 1 / -1;
padding-inline: 0;
margin-top: 4px;
}
/* заголовки и списки внутри */
.fg-review-proscons h2,
.fg-review-proscons h3{
margin: 0 0 8px;
font-size: 1.02rem;
}
.fg-review-proscons ul{
margin: 0 0 8px 1.1rem;
padding: 0;
}
.fg-review-proscons li{
margin-bottom: 4px;
line-height: 1.55;
word-break: normal;
overflow-wrap: break-word;
white-space: normal;
}
.fg-review-proscons details{
margin: 4px 0;
}
.fg-review-proscons details summary{
cursor: pointer;
font-size: 0.98rem;
}
/* Планшет: две колонки */
@media (max-width: 1024px){
.fg-review-proscons{
grid-template-columns: 1fr 1fr;
row-gap: 24px;
}
}
/* Мобилка: одна колонка */
@media (max-width: 768px){
.fg-review-proscons{
margin: 16px 0 0;
padding: 16px 10px 20px;
grid-template-columns: 1fr;
row-gap: 18px;
}
.fg-review-proscons > *{
padding-inline: 0;
}
.fg-review-proscons > *:nth-child(3){
grid-column: 1;
margin-top: 10px;
}
}
@media (max-width: 640px){
.fg-review-proscons{
margin: 14px 0 0;
padding: 14px 8px 18px;
}
}
/* ========================================================================== */
/* [22] CTA-BAR ВНИЗУ (STICKY / FIXED) */
/* ========================================================================== */
.fg-review-sticky{
position: fixed;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
z-index: 1200;
max-width: 1440px;
width: calc(100% - 32px);
box-sizing: border-box;
padding: 10px 20px;
border-radius: 999px;
background: rgba(8, 14, 35, 0.98);
box-shadow: 0 20px 60px rgba(0,0,0,0.9);
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity .2s ease,
transform .2s ease,
visibility 0s linear .2s;
}
.fg-review-sticky.fg-cta-visible{
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* левая колонка: логотип + название + рейтинг */
.fg-stick__col--brand{
display:flex;
align-items:center;
gap:16px; /* было 12px — чуть больше расстояние */
flex:1 1 260px;
min-width:0;
padding-left:4px; /* сдвигаем текст правее от края и логотипа */
}
.fg-stick__logo{
display:block;
flex:0 0 auto; /* логотип не сжимается и не залезает на текст */
max-width:88px;
max-height:32px;
width:auto;
height:auto;
object-fit:contain;
border-radius:999px;
}
.fg-stick__brand{
display:flex;
flex:1 1 auto;
min-width:0;
flex-direction:column;
gap:3px;
}
.fg-stick__title{
font-size:18px;
line-height:1.2;
font-weight:700;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.fg-stick__rating{
display:flex;
align-items:center;
gap:5px;
min-width:0;
font-size:12px;
color:#e5e7eb;
}
.fg-stick__stars{
color:#fbbf24;
letter-spacing:2px;
font-size:13px;
}
/* средняя колонка: Bonus: … */
.fg-stick__col--bonus{
display:flex;
align-items:center;
flex:0 1 360px;
min-width:0;
overflow:hidden;
gap:6px;
font-size:13px;
white-space:nowrap;
}
.fg-stick__bonus-label{
font-weight:600;
color:#e5e7eb;
}
.fg-stick__bonus-text{
color:#f9fafb;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
}
.fg-stick__score{
flex:0 0 auto;
white-space:nowrap;
}
.fg-stick__col--cta{
flex:0 0 auto;
}
/* правая колонка: кнопки */
.fg-stick__col--cta{
margin-left:auto;
display:flex;
align-items:center;
gap:8px;
}
.fg-review-sticky .cr-btn,
.fg-review-sticky a[href*="/go/"]{
margin:0;
min-width:120px;
}
/* Планшет */
@media (max-width: 900px){
.fg-review-sticky{
padding: 10px 14px;
gap: 12px;
}
.fg-stick__title{
font-size:16px;
}
.fg-stick__col--bonus{
font-size:12px;
}
.fg-review-sticky .cr-btn,
.fg-review-sticky a[href*="/go/"]{
min-width:110px;
}
}
/* Мобильный док-бар: название + бонус слева, кнопка справа */
@media (max-width: 768px){
.fg-review-sticky{
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
max-width: 100%;
margin: 0;
transform: none;
border-radius: 18px 18px 0 0;
padding: 10px 14px;
box-sizing: border-box;
background: rgba(8, 14, 35, 0.98);
box-shadow: 0 -10px 40px rgba(0,0,0,0.9);
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-row-gap: 2px;
column-gap: 12px;
align-items: center;
}
.fg-stick__logo,
.fg-stick__rating{
display: none;
}
.fg-stick__col--brand{
grid-column: 1;
grid-row: 1;
min-width: 0;
margin: 0;
padding-left:0; /* на мобилке не нужен дополнительный паддинг */
gap:4px;
}
.fg-stick__title{
font-size: 15px;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fg-stick__col--bonus{
grid-column: 1;
grid-row: 2;
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
line-height: 1.3;
opacity: .96;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fg-stick__bonus-label{
font-weight: 600;
color: #e5e7eb;
}
.fg-stick__bonus-text{
color: #f9fafb;
}
.fg-stick__col--cta{
grid-column: 2;
grid-row: 1 / span 2;
display: flex;
align-items: center;
justify-content: flex-end;
}
.fg-stick__col--cta a[href*="/go/"]:not(:first-of-type){
display: none !important;
}
.fg-review-sticky .cr-btn,
.fg-review-sticky a[href*="/go/"]{
width: auto;
min-width: auto;
padding: 10px 18px;
font-size: 0.95rem;
margin: 0;
white-space: nowrap;
justify-content: center;
}
}
/* ========================================================================== */
/* [23] Terms note под PROS/CONS/FAQ */
/* ========================================================================== */
.fg-terms-note{
max-width: 1440px;
margin: 10px auto 0;
padding: 10px 18px 12px;
border-radius: 18px;
background: rgba(8, 14, 35, 0.96);
box-shadow: 0 14px 32px rgba(0,0,0,0.7);
font-size: 0.9rem;
line-height: 1.55;
color: #9ca3c8;
}
@media (max-width: 768px){
.fg-terms-note{
border-radius: 16px;
padding-inline: 16px;
}
}
/* ========================================================================== */
/* [30] Таблицы — светлый стиль + карточки на мобиле */
/* ========================================================================== */
body.single-casino-reviews .entry-content .wp-block-table,
body.single-reviews .entry-content .wp-block-table{
margin: 10px 0 20px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
body.single-casino-reviews .entry-content .wp-block-table::after,
body.single-reviews .entry-content .wp-block-table::after{
content: none !important;
}
body.single-casino-reviews .entry-content table,
body.single-reviews .entry-content table{
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: #ffffff;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 18px 40px rgba(15,23,42,.22);
color: #111827;
margin: 22px 0;
}
body.single-casino-reviews .entry-content table thead th,
body.single-reviews .entry-content table thead th{
padding: 12px 16px;
font-size: 1.4rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: #111827;
background: #f3f4f6;
border-bottom: 1px solid #e5e7eb;
text-align: left;
}
body.single-casino-reviews .entry-content table th,
body.single-casino-reviews .entry-content table td,
body.single-reviews .entry-content table th,
body.single-reviews .entry-content table td{
padding: 11px 14px;
font-size: 22px;
border-bottom: 1px solid #e5e7eb;
}
body.single-casino-reviews .entry-content table tbody tr:last-child th,
body.single-casino-reviews .entry-content table tbody tr:last-child td,
body.single-reviews .entry-content table tbody tr:last-child th,
body.single-reviews .entry-content table tbody tr:last-child td{
border-bottom: none;
}
body.single-casino-reviews .entry-content table tbody tr:nth-child(even),
body.single-reviews .entry-content table tbody tr:nth-child(even){
background: #f9fafb;
}
body.single-casino-reviews .entry-content .table-note,
body.single-reviews .entry-content .table-note{
margin-top: 6px;
font-size: .9rem;
color: #9ca3af;
}
/* мобилка — общий table */
@media (max-width: 768px){
body.single-casino-reviews .entry-content .wp-block-table,
body.single-reviews .entry-content .wp-block-table{
margin: 10px -4px 18px;
padding-inline: 4px;
}
body.single-casino-reviews .entry-content table,
body.single-reviews .entry-content table{
font-size: .94rem;
}
body.single-casino-reviews .entry-content table thead th,
body.single-reviews .entry-content table thead th,
body.single-casino-reviews .entry-content table tbody td,
body.single-reviews .entry-content table tbody td{
padding: 10px 10px;
}
}
/* Таблицы как карточки на мобиле (.fg-table-mobile-cards) */
@media (max-width: 768px){
body.single-casino-reviews .entry-content table.fg-table-mobile-cards,
body.single-reviews .entry-content table.fg-table-mobile-cards{
display: block;
background: transparent;
border-radius: 0;
box-shadow: none;
margin: 18px 0;
padding-left: 4px;
padding-right: 4px;
}
body.single-casino-reviews .entry-content table.fg-table-mobile-cards thead,
body.single-reviews .entry-content table.fg-table-mobile-cards thead{
display: none;
}
body.single-casino-reviews .entry-content table.fg-table-mobile-cards tbody,
body.single-reviews .entry-content table.fg-table-mobile-cards tbody{
display: block;
}
body.single-casino-reviews .entry-content table.fg-table-mobile-cards tr,
body.single-reviews .entry-content table.fg-table-mobile-cards tr{
display: block;
background: #ffffff;
border-radius: 16px;
box-shadow: 0 10px 26px rgba(15, 23, 42, 0.55);
margin-bottom: 14px;
overflow: hidden;
}
/* Если "шапка" лежит в первой строке tbody (без thead),
мы её используем как подписи для карточек и прячем на mobile */
body.single-casino-reviews .entry-content table.fg-table-mobile-cards.fg-table-head-in-tbody tbody tr.fg-table-head-row,
body.single-reviews .entry-content table.fg-table-mobile-cards.fg-table-head-in-tbody tbody tr.fg-table-head-row{
display: none !important;
}
body.single-casino-reviews .entry-content table.fg-table-mobile-cards tr:nth-child(even),
body.single-reviews .entry-content table.fg-table-mobile-cards tr:nth-child(even){
background: #f9fafb;
}
body.single-casino-reviews .entry-content table.fg-table-mobile-cards td,
body.single-reviews .entry-content table.fg-table-mobile-cards td{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
padding: 9px 14px;
border-bottom: 1px solid #e5e7eb;
font-size: 13px;
}
body.single-casino-reviews .entry-content table.fg-table-mobile-cards td:last-child,
body.single-reviews .entry-content table.fg-table-mobile-cards td:last-child{
border-bottom: none;
}
body.single-casino-reviews .entry-content table.fg-table-mobile-cards td::before,
body.single-reviews .entry-content table.fg-table-mobile-cards td::before{
content: attr(data-label);
flex: 0 0 44%;
max-width: 52%;
font-weight: 600;
font-size: 12px;
color: #6b7280;
padding-right: 6px;
}
}
/* ========================================================================== */
/* [40] Provider icons (как платежные плашки) */
/* ========================================================================== */
.cr-prov{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
/* В таблетке под hero провайдеры идут ровной сеткой, по центру */
.fg-review-strip .cr-prov{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 8px 10px;
justify-items: center;
align-items: center;
max-width: 100%;
margin: 4px auto 0;
}
/* Базовый размер элемента */
.cr-prov__item{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 8px;
border-radius: 999px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.06);
}
.cr-prov__item img{
display: block;
max-height: 24px;
width: auto;
}
/* Модификаторы размера */
.cr-prov.cr-prov--sm .cr-prov__item img{ max-height: 18px; }
.cr-prov.cr-prov--md .cr-prov__item img{ max-height: 24px; }
.cr-prov.cr-prov--lg .cr-prov__item img{ max-height: 28px; }
/* Чипы-тексты (фолбэк) */
.cr-prov .cr-chip{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 10px;
border-radius: 999px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.06);
font-size: 12px;
line-height: 1.2;
}
/* Game Providers: таблетки в чёрной полоске */
.fg-review-strip .cr-prov__item,
.fg-review-strip .cr-prov .cr-chip{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 10px;
border-radius: 999px;
background: linear-gradient(90deg, #1f2c51,#1f2c51,#000000);
border: 1px solid #9ca3af;
color: #111827;
font-size: 12px;
line-height: 1.2;
}
.fg-review-strip .cr-prov__item img{
display: block;
max-height: 20px;
width: auto;
}
/* Мобилка: сетка сохраняется, но всё компактнее */
@media (max-width: 768px){
.fg-review-strip .cr-prov{
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
row-gap: 4px;
column-gap: 4px;
}
.fg-review-strip .cr-prov__item,
.fg-review-strip .cr-prov .cr-chip{
padding: 1px 5px !important;
font-size: 9px !important;
line-height: 1.1;
}
.fg-review-strip .cr-prov__item img{
max-height: 10px !important;
width: auto !important;
}
}
/* ========================================================================== */
/* [41] MOBILE: Payments icons — сетка + общий размер */
/* ========================================================================== */
/* до 768px: сетка и центрирование в таблетке и в тексте */
@media (max-width: 768px){
body.single-casino-reviews .fg-review-strip h2:first-of-type + p,
body.single-casino-reviews .fg-review-strip h2:first-of-type + .fg-payments-row,
body.single-reviews .fg-review-strip h2:first-of-type + p,
body.single-reviews .fg-review-strip h2:first-of-type + .fg-payments-row{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
row-gap: 6px;
column-gap: 6px;
justify-items: center;
justify-content: center;
}
}
/* общий стиль всех платёжных лого на мобиле — делаем их мелкими, как провайдеров */
@media (max-width: 768px){
body.single-casino-reviews .entry-content img[src*="/assets/payments/"],
body.single-reviews .entry-content img[src*="/assets/payments/"]{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1px 6px !important;
margin: 1px 2px 0 0 !important;
max-height: 12px !important; /* ← уменьшили высоту */
border-radius: 999px;
background: rgba(15,23,42,0.96);
box-shadow: 0 4px 10px rgba(0,0,0,.55);
}
}
/* =============================================================================
ForGamblers.io — Review Typography Overrides (RU/EN)
RU: Вставь этот блок В КОНЕЦ файла fg-single-casino.css (или Additional CSS).
Он переопределит размеры шрифта и уберёт жёлтый "лид" под H1.
EN: Paste this block AT THE END of fg-single-casino.css (or Additional CSS).
It overrides font sizes and removes the yellow H1 lead paragraph.
========================================================================== */
/* -----------------------------------------------------------------------------
[00] QUICK KNOBS / БЫСТРЫЕ РУЧКИ (правь только это)
-------------------------------------------------------------------------- */
body.single-casino-reviews,
body.single-reviews {
/* RU: Основной размер текста (десктоп). 22px ≈ 1.375rem, 23px ≈ 1.4375rem
EN: Base body text size (desktop). */
--fg-body: 1.375rem; /* 22px */
/* --fg-body: 1.4375rem; */ /* 23px (если нужно чуть крупнее) */
/* RU: Основной размер текста (мобилка)
EN: Base body text size (mobile) */
--fg-body-mobile: 1.125rem; /* ~18px */
/* RU: Заголовки (можно менять спокойно)
EN: Headings scale (safe to tweak) */
--fg-h1: clamp(2.1rem, 2.8vw, 3.1rem);
--fg-h2: 1.70rem;
--fg-h3: 1.28rem;
/* RU: Цвет обычного текста и "лида" под H1
EN: Normal text color + H1 lead color */
--fg-text: #e9eefc;
--fg-lead: #d7def2; /* вместо жёлтого */
--fg-muted: #b9c3e6;
/* RU: Акцент оставляем для кнопок/линий, но не для первого абзаца под H1
EN: Accent stays for UI, not for the H1 lead paragraph */
--fg-accent: #fbbf24;
}
/* -----------------------------------------------------------------------------
[01] BASE TEXT / БАЗОВЫЙ ТЕКСТ (абзацы, списки)
-------------------------------------------------------------------------- */
body.single-casino-reviews .entry-content,
body.single-reviews .entry-content {
color: var(--fg-text);
}
/* RU: Поднимаем общий текст до 22–23px
EN: Raise the global paragraph/list size to 22–23px */
body.single-casino-reviews .entry-content p,
body.single-casino-reviews .entry-content li,
body.single-reviews .entry-content p,
body.single-reviews .entry-content li {
font-size: var(--fg-body) !important;
line-height: 1.65 !important;
color: var(--fg-text);
}
/* -----------------------------------------------------------------------------
[02] HEADINGS / ЗАГОЛОВКИ (H1/H2/H3)
-------------------------------------------------------------------------- */
body.single-casino-reviews .entry-content h1,
body.single-reviews .entry-content h1 {
font-size: var(--fg-h1) !important;
line-height: 1.12;
color: #ffffff;
}
body.single-casino-reviews .entry-content h2,
body.single-reviews .entry-content h2 {
font-size: var(--fg-h2) !important;
line-height: 1.18;
}
body.single-casino-reviews .entry-content h3,
body.single-reviews .entry-content h3 {
font-size: var(--fg-h3) !important;
line-height: 1.22;
}
/* -----------------------------------------------------------------------------
[03] THE "YELLOW LINE" FIX / УБИРАЕМ ЖЁЛТЫЙ ТЕКСТ ПОД H1
-------------------------------------------------------------------------- */
/* RU: У тебя сейчас первый после H1 красится как "мета-строка".
Мы делаем его обычным лид-абзацем (НЕ жёлтым).
EN: Your current CSS styles the first
after H1 as a meta line (yellow).
We convert it into a normal lead paragraph (not yellow). */
body.single-casino-reviews .entry-content h1 + p,
body.single-reviews .entry-content h1 + p {
color: var(--fg-lead) !important;
font-weight: 500 !important;
font-size: var(--fg-body) !important;
margin-top: 0.55rem;
}
/* RU: Эти "позиционные" строки (h1 + p + p + p ...) часто ломают стили,
когда ты меняешь структуру текста. Сбрасываем их к нормальному виду.
EN: These position-based selectors are fragile. Reset them to normal text. */
body.single-casino-reviews .entry-content h1 + p + p,
body.single-casino-reviews .entry-content h1 + p + p + p,
body.single-casino-reviews .entry-content h1 + p + p + p + p,
body.single-reviews .entry-content h1 + p + p,
body.single-reviews .entry-content h1 + p + p + p,
body.single-reviews .entry-content h1 + p + p + p + p {
color: var(--fg-text) !important;
font-weight: 400 !important;
font-size: var(--fg-body) !important;
}
/* -----------------------------------------------------------------------------
[04] OPTIONAL: META LINES VIA GUTENBERG CLASSES / МЕТА-СТРОКИ ЧЕРЕЗ КЛАССЫ
-------------------------------------------------------------------------- */
/* RU: Если хочешь обратно "жёлтую мета-строку" (рейтинг/короткая инфа),
не полагайся на h1 + p. Просто дай абзацу класс в Gutenberg:
Block → Advanced → Additional CSS class(es):
- fg-h1-meta (рейтинг/короткая строка)
- fg-h1-bonus (бонус/второй акцент)
EN: If you want the yellow meta line back (rating/short info), don’t rely on
h1 + p. Add a class in Gutenberg:
- fg-h1-meta
- fg-h1-bonus
*/
body.single-casino-reviews .entry-content .fg-h1-meta,
body.single-reviews .entry-content .fg-h1-meta {
color: var(--fg-accent) !important;
font-weight: 700 !important;
letter-spacing: .01em;
}
body.single-casino-reviews .entry-content .fg-h1-bonus,
body.single-reviews .entry-content .fg-h1-bonus {
color: var(--fg-muted) !important;
font-weight: 600 !important;
}
/* -----------------------------------------------------------------------------
[05] H2 + FIRST PARAGRAPH / H2 + ПЕРВЫЙ АБЗАЦ (не уменьшаем!)
-------------------------------------------------------------------------- */
/* RU: У тебя было h2 + p = 0.94rem, из-за этого “мелко”.
Ставим базовый размер.
EN: You had h2 + p = 0.94rem (too small). Use the base size instead. */
body.single-casino-reviews .entry-content h2 + p,
body.single-reviews .entry-content h2 + p {
font-size: var(--fg-body) !important;
color: var(--fg-text) !important;
}
/* -----------------------------------------------------------------------------
[06] MOBILE / МОБИЛКА
-------------------------------------------------------------------------- */
@media (max-width: 640px) {
body.single-casino-reviews .entry-content p,
body.single-casino-reviews .entry-content li,
body.single-reviews .entry-content p,
body.single-reviews .entry-content li {
font-size: var(--fg-body-mobile) !important;
line-height: 1.65 !important;
}
body.single-casino-reviews .entry-content h2,
body.single-reviews .entry-content h2 {
font-size: clamp(1.35rem, 4.6vw, var(--fg-h2)) !important;
}
}
/* =========================================================
Winzter review: cleaner PAYMENT METHODS pills only
========================================================= */
body.single-casino-reviews .fg-review-strip h2,
body.single-reviews .fg-review-strip h2{
margin: 0 0 12px;
font-size: 1.18rem;
font-weight: 800;
letter-spacing: .11em;
text-transform: uppercase;
color: #ffffff;
}
body.single-casino-reviews .fg-review-strip h2::after,
body.single-reviews .fg-review-strip h2::after{
width: 72px;
height: 4px;
margin-top: 8px;
border-radius: 999px;
background: linear-gradient(90deg, #7c3aed, #f59e0b);
}
/* PAYMENTS row only */
body.single-casino-reviews .fg-review-strip h2:first-of-type + p,
body.single-casino-reviews .fg-review-strip h2:first-of-type + .fg-payments-row,
body.single-reviews .fg-review-strip h2:first-of-type + p,
body.single-reviews .fg-review-strip h2:first-of-type + .fg-payments-row{
justify-content: flex-start;
align-items: center;
gap: 12px 10px;
margin: 8px 0 10px;
}
/* PAYMENT METHOD pills */
body.single-casino-reviews .fg-review-strip h2:first-of-type + p img,
body.single-casino-reviews .fg-review-strip h2:first-of-type + .fg-payments-row img,
body.single-reviews .fg-review-strip h2:first-of-type + p img,
body.single-reviews .fg-review-strip h2:first-of-type + .fg-payments-row img{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 14px;
min-height: 42px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(22,30,58,.96), rgba(11,18,38,.96));
border: 1px solid rgba(148, 163, 184, .28);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.05),
0 8px 20px rgba(0,0,0,.35);
max-height: 28px;
width: auto;
}
@media (max-width: 768px){
body.single-casino-reviews .fg-review-strip h2,
body.single-reviews .fg-review-strip h2{
font-size: 1.02rem;
letter-spacing: .09em;
}
body.single-casino-reviews .fg-review-strip h2:first-of-type + p,
body.single-casino-reviews .fg-review-strip h2:first-of-type + .fg-payments-row,
body.single-reviews .fg-review-strip h2:first-of-type + p,
body.single-reviews .fg-review-strip h2:first-of-type + .fg-payments-row{
gap: 8px;
}
body.single-casino-reviews .fg-review-strip h2:first-of-type + p img,
body.single-casino-reviews .fg-review-strip h2:first-of-type + .fg-payments-row img,
body.single-reviews .fg-review-strip h2:first-of-type + p img,
body.single-reviews .fg-review-strip h2:first-of-type + .fg-payments-row img{
padding: 7px 10px;
min-height: 36px;
max-height: 22px;
border-radius: 12px;
}
}
/* ========================================================================== */
/* [91] SAFE FIX — review strip payments/providers use shortcode classes */
/* ========================================================================== */
/* Reset the generic h2 + p styling that was catching the wrong blocks */
.fg-review-strip h2:first-of-type + p,
.fg-review-strip h2:nth-of-type(2) + p{
display:block !important;
margin:10px 0 0 !important;
padding:0 !important;
background:none !important;
border:0 !important;
box-shadow:none !important;
}
/* ================= Payments ================= */
.fg-review-strip .cr-pay{
display:flex !important;
flex-wrap:wrap !important;
align-items:center;
gap:12px 12px;
margin-top:6px;
}
.fg-review-strip .cr-pay__item,
.fg-review-strip .cr-pay .cr-chip{
display:inline-flex !important;
align-items:center;
justify-content:center;
min-height:42px;
padding:8px 14px;
border-radius:14px;
background:linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
border:1px solid rgba(255,255,255,.14);
box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
color:#f8fafc;
font-size:18px;
font-weight:600;
line-height:1;
white-space:nowrap;
}
.fg-review-strip .cr-pay .cr-pay__item img{
display:block;
width:auto !important;
height:24px !important;
max-height:24px !important;
max-width:120px;
object-fit:contain;
vertical-align:middle;
}
/* ================= Providers ================= */
.fg-review-strip .cr-prov{
display:grid !important;
grid-template-columns:repeat(auto-fit, minmax(132px, 1fr));
gap:10px 10px;
justify-items:center;
align-items:center;
max-width:100%;
margin:6px auto 0;
}
.fg-review-strip .cr-prov__item,
.fg-review-strip .cr-prov .cr-chip{
display:inline-flex !important;
align-items:center;
justify-content:center;
min-height:40px;
width:100%;
padding:7px 12px;
border-radius:14px;
background:linear-gradient(180deg, rgba(38,54,96,.92), rgba(10,17,38,.96));
border:1px solid rgba(148,163,184,.34);
box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
color:#f8fafc;
font-size:14px;
font-weight:600;
line-height:1.15;
white-space:nowrap;
}
.fg-review-strip .cr-prov__item img{
display:block;
width:auto !important;
max-width:100%;
max-height:22px !important;
object-fit:contain;
}
@media (max-width: 768px){
.fg-review-strip .cr-pay{
gap:8px 8px;
}
.fg-review-strip .cr-pay__item,
.fg-review-strip .cr-pay .cr-chip{
min-height:36px;
padding:6px 10px;
border-radius:12px;
font-size:14px;
}
.fg-review-strip .cr-pay .cr-pay__item img{
height:20px !important;
max-height:20px !important;
max-width:100px;
}
.fg-review-strip .cr-prov{
grid-template-columns:repeat(auto-fit, minmax(110px, 1fr));
gap:8px;
}
.fg-review-strip .cr-prov__item,
.fg-review-strip .cr-prov .cr-chip{
min-height:36px;
padding:6px 10px;
border-radius:12px;
font-size:12px;
}
.fg-review-strip .cr-prov__item img{
max-height:18px !important;
}
}