/* ========================================================================
KOZYR — enhancement layer (v1)
Дополняет существующую дизайн-систему: покерная айдентика,
анимация цифр рейкбека/Score, hover-полировка, мобильные улучшения.
Всё намеренно намного мягче существующих стилей и уважает
prefers-reduced-motion. Ничего не ломает — только накладывается сверху.
======================================================================== */
:root {
--kz-gold: #B8841C;
--kz-gold-deep: #8A6212;
--kz-lift: 0 16px 36px rgba(10, 17, 40, 0.10);
--kz-lift-dark: 0 18px 44px rgba(0, 0, 0, 0.28);
}
/* ---------- 1. Покерная айдентика: масть-водяной знак в секциях ------- */
.kz-suit {
position: absolute;
top: 26px;
right: 3%;
z-index: 0;
font-family: 'Space Grotesk', system-ui, sans-serif;
font-size: 200px;
line-height: 1;
color: currentColor;
opacity: 0.055;
pointer-events: none;
user-select: none;
transform: rotate(-8deg);
}
/* герой — чуть выразительнее, задаёт тон бренду */
.hero .kz-suit { opacity: 0.07; }
/* на тёмных секциях белым и заметнее */
.compare .kz-suit,
.match-sec .kz-suit,
.final .kz-suit {
opacity: 0.08;
}
/* контент секций держим над водяным знаком */
/* .kf-compare-bar исключён: это фиксированная плашка, position:fixed нельзя ломать */
section > .wrap,
section > .container,
section > *:not(.kz-suit):not(.kf-compare-bar) {
position: relative;
z-index: 1;
}
/* ---------- 2. Масть-акцент у ярлыков секций ------------------------- */
.section-tag { position: relative; }
.section-tag::after {
content: "\2660"; /* ♠ */
margin-left: 9px;
color: var(--kz-gold);
font-size: 0.85em;
opacity: 0.75;
vertical-align: baseline;
}
/* ---------- 3. Анимация цифр: подсветка во время счёта --------------- */
.kf-rake { transition: color 0.35s ease; }
.kf-rake.kz-counting > *,
.kf-rake.kz-counting { color: var(--kz-gold-deep); }
.kf-score-num { transition: color 0.35s ease; }
.kf-score-num.kz-counting { color: var(--kz-gold-deep); }
/* тонкая золотая черта под Kozyr Score — фирменный штрих */
.kf-score-num::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -3px;
height: 2px;
background: linear-gradient(90deg, var(--kz-gold), transparent);
border-radius: 2px;
opacity: 0;
transform: scaleX(0.3);
transform-origin: left;
transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.kf-score-num { position: relative; display: inline-block; }
.kf-score-num.kz-lined::after { opacity: 0.9; transform: scaleX(1); }
/* ---------- 4. Hover-полировка карточек и строк --------------------- */
.kf-card {
transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1),
box-shadow 0.22s ease, border-color 0.22s ease;
will-change: transform;
}
.kf-card:hover {
transform: translateY(-3px);
box-shadow: var(--kz-lift);
}
.kf-table tbody tr { transition: background 0.18s ease; }
.kf-table tbody tr:hover { background: rgba(46, 107, 255, 0.035); }
/* room / club карточки-обзоры и блоговые карточки */
.card {
transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1),
box-shadow 0.22s ease, border-color 0.22s ease;
}
a.card:hover,
.card.kz-hoverable:hover {
transform: translateY(-3px);
box-shadow: var(--kz-lift);
}
/* CTA-кнопки: лёгкий подъём */
.btn-dark, .btn-primary, .btn-xl {
transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-dark:hover, .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(10, 17, 40, 0.22);
}
/* ---------- 5. Мобильные улучшения ---------------------------------- */
@media (max-width: 640px) {
/* липкая панель переключения вида (Таблица/Карточки/Фильтры) */
.kf-bar {
position: sticky;
top: 0;
z-index: 45;
background: var(--bg, #F6F7FB);
padding-top: 10px;
padding-bottom: 10px;
margin-bottom: 4px;
}
/* крупнее тач-зоны */
.btn, .btn-xl, .limit-btn, .kf-seg > *, .kf-pill, .kf-chip, .chip {
min-height: 44px;
}
.kf-seg > * { display: flex; align-items: center; justify-content: center; }
/* горизонтальный скролл таблицы вместо ломки вёрстки */
.kf-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
/* масть меньше на телефоне */
.kz-suit { font-size: 108px; opacity: 0.032; top: 18px; }
/* --- читаемые размеры мелких меток (были 9.5–11.5px) --- */
.kf-rake-note, .kf-tag, .kf-qp-group-label, .kf-readout-label,
.kf-compare-hint, .trump-eyebrow, .trump-access, .trump-label,
.compare-sub, .accent-text, .result-room-label, .result-note,
.room-facts-sub, .room-score-of, .room-verdict-label,
.side-cta-label, .side-related-title, .article-toc-label,
.toc-label, .takeaways-label, .eyebrow, .geo-banner-btn,
.kf-slider-cap, .kf-opt-label, .kf-spec-key, .kf-th-plain,
.kf-tagline, .pending, .kf-table th {
font-size: 12px !important;
}
/* компактный межбуквенный интервал, чтобы увеличенные капсы не переносились */
.trump-eyebrow, .trump-access, .kf-qp-group-label, .kf-readout-label {
letter-spacing: 0.04em !important;
}
/* --- Таблицы в статьях: вписываем переносом, без прокрутки --- */
.post-body table, .blog-post table, .article-body table {
display: table !important;
width: 100% !important;
table-layout: fixed !important;
border-collapse: collapse !important;
}
.post-body table th, .post-body table td,
.blog-post table th, .blog-post table td,
.article-body table th, .article-body table td {
white-space: normal !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
font-size: 12.5px !important;
padding: 9px 8px !important;
vertical-align: top !important;
}
/* --- удобные пункты в выезжающем меню --- */
.nav-drawer a {
min-height: 48px;
display: flex;
align-items: center;
}
/* компенсируем «чёлку» на iPhone (safe-area) */
.nav, .footer { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
/* --- ФИКС: тёмная кнопка в выезжающем меню (был тёмный текст на тёмном) --- */
.nav-drawer a.btn-dark, .nav-drawer .btn-dark,
.nav-drawer a.btn-primary, .nav-drawer .btn-primary {
color: #fff !important;
justify-content: center !important;
}
/* --- ФИКС: плашка сравнения румов не влезала / вылезала за край --- */
#kf-compare-bar, .kf-compare-bar {
position: fixed !important;
left: 10px !important;
right: 10px !important;
bottom: 10px !important;
width: auto !important;
max-width: calc(100vw - 20px) !important;
min-width: 0 !important;
flex-wrap: wrap !important;
border-radius: 16px !important;
padding: 12px 14px !important;
gap: 10px 12px !important;
box-sizing: border-box !important;
}
.kf-compare-bar .kf-compare-hint {
width: 100%;
order: -1;
text-align: left;
}
.kf-compare-bar .kf-compare-list { flex-wrap: wrap; flex: 1 1 auto; }
.kf-compare-bar .btn { flex: 1 1 140px; }
}
/* совсем узкие экраны — режем гигантский hero-заголовок мягче */
@media (max-width: 380px) {
.kz-suit { font-size: 84px; }
}
/* ---------- 5b. Мобильная презентация данных ------------------------ */
@media (max-width: 640px) {
/* --- Блоки статистики: карточки в 2 колонки (число + подпись) --- */
.spec-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
.spec-box {
background: var(--surface-alt, #F5F7FB) !important;
border: 1px solid var(--border, #E6E8EF) !important;
border-radius: 12px !important;
padding: 13px 14px !important;
text-align: left !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
min-height: 74px !important;
}
.spec-box-num {
font-size: 18px !important;
font-weight: 700 !important;
line-height: 1.15 !important;
color: var(--ink, #0A1128) !important;
letter-spacing: -0.01em !important;
}
.spec-box-cap {
font-size: 11.5px !important;
color: var(--ink-2, #5C6580) !important;
margin-top: 4px !important;
line-height: 1.25 !important;
}
/* --- Таблица сравнения: складные строки «параметр → 2 значения» --- */
/* КЛЮЧЕВОЕ: сбрасываем min-width:680px и прокрутку обёртки из родного CSS */
.compare-wrap { overflow-x: visible !important; }
.compare-table { display: block !important; width: 100% !important; min-width: 0 !important; }
.compare-table thead { display: block !important; }
.compare-table thead tr {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
padding: 12px 14px !important;
}
.compare-table thead th.compare-param { display: none !important; }
.compare-table thead th { padding: 0 !important; text-align: left !important; }
.compare-table tbody { display: block !important; }
.compare-table tbody tr {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 3px 10px !important;
padding: 12px 14px !important;
border-bottom: 1px solid var(--border, #E6E8EF) !important;
}
.compare-table tbody th[scope="row"] {
grid-column: 1 / -1 !important;
text-align: left !important;
font-size: 11px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
color: var(--ink-3, #667085) !important;
padding: 0 0 2px !important;
border: none !important;
}
.compare-table tbody td {
font-size: 14px !important;
padding: 0 !important;
text-align: left !important;
border: none !important;
}
.compare-table .compare-logo { width: 30px !important; height: 30px !important; font-size: 11px !important; }
.compare-table .compare-name { font-size: 14px !important; }
.compare-table .compare-sub { font-size: 11px !important; }
/* --- Таблицы данных: вписываем переносом, без горизонтальной прокрутки --- */
.data-table {
display: table !important;
width: 100% !important;
table-layout: fixed !important;
border-collapse: collapse !important;
}
.data-table th,
.data-table td {
white-space: normal !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
font-size: 12.5px !important;
padding: 9px 8px !important;
vertical-align: top !important;
}
/* первый столбец (параметр/формат) чуть у́же, значение шире */
.data-table th:first-child,
.data-table td:first-child { width: 34% !important; }
/* #11: заголовки короче по интервалу, чтобы «Доступность» не переносилась */
.data-table thead th { font-size: 9px !important; letter-spacing: 0.01em !important; padding: 8px 5px !important; line-height: 1.25 !important; white-space: nowrap !important; overflow-wrap: normal !important; word-break: keep-all !important; }
}
/* ---------- 5c. Финдер на мобилке: карточки вписываются в экран ------ */
@media (max-width: 640px) {
/* minmax(0,1fr) не даёт колонке растянуться под контент шире экрана */
.kf-cards { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
.kf-card {
width: auto !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
padding: 16px !important;
}
/* даём всем детям сжиматься и переносить содержимое */
.kf-card *,
.kf-card-head, .kf-card-rake, .kf-card-spec, .kf-spec-row,
.kf-pay, .kf-tags, .kf-card-foot { min-width: 0 !important; }
.kf-spec-row, .kf-pay, .kf-tags, .kf-limits { flex-wrap: wrap !important; }
.kf-card-head { flex-wrap: nowrap !important; gap: 10px !important; }
.kf-check { flex: 0 0 auto !important; }
/* --- Корневая защита: ничто не выходит за край экрана --- */
html, body { overflow-x: clip !important; max-width: 100% !important; }
/* десктопное меню всегда скрыто на мобилке (страховка) */
.nav-links { display: none !important; }
}
/* ============================================================
ФИНДЕР — редизайн карточки рума (применяется на всех ширинах)
============================================================ */
/* --- Рейкбек: золотой блок-герой --- */
.kf-card-rake {
background: #FBF6EC !important;
border: 1px solid #F0E4C8 !important;
border-radius: 12px !important;
padding: 13px 15px !important;
margin-bottom: 6px !important;
align-items: center !important;
}
.kf-card-rake .kf-rake { color: var(--kz-gold-deep) !important; font-size: 30px !important; line-height: 1 !important; }
.kf-card-rake .kf-rake em { font-size: 19px !important; }
/* подпись «Возврат рейка» над числом (только для реального %) */
.kf-card-rake .kf-rake:not(.kf-rake--pending)::before {
content: "Возврат рейка";
display: block;
font-family: 'Inter', system-ui, sans-serif;
font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase;
color: var(--kz-gold-deep); font-weight: 600; margin-bottom: 3px;
}
.kf-card-rake .kf-rake-note { color: var(--kz-gold-deep) !important; opacity: 0.8; }
/* ФИКС: «Уточняется» больше не гигантское и не наезжает */
.kf-card-rake .kf-rake--pending {
font-size: 18px !important;
color: var(--ink-3, #667085) !important;
font-family: 'Inter', system-ui, sans-serif !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
}
/* --- Score: кольцо вместо числа с полоской --- */
.kf-card .kf-score { flex-direction: column !important; align-items: center !important; gap: 4px !important; }
.kf-card .kf-score-num {
width: 42px !important; height: 42px !important;
border: 2px solid var(--accent, #2668FF) !important;
border-radius: 50% !important;
display: flex !important; align-items: center !important; justify-content: center !important;
font-size: 15px !important;
box-sizing: border-box !important;
}
.kf-card .kf-score-num::after { display: none !important; }
.kf-card .kf-score-bar { display: none !important; }
.kf-card .kf-score::after {
content: "Score";
font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--ink-3, #667085);
}
/* --- Читаемые метки спеков (были 9.5px) --- */
.kf-card .kf-spec-key { font-size: 11px !important; letter-spacing: 0.04em !important; padding-top: 4px !important; }
/* --- Полировка футера: широкая CTA + крупная кнопка сравнения --- */
.kf-card .kf-card-foot { gap: 10px !important; align-items: stretch !important; }
.kf-card .kf-go {
flex: 1 !important;
justify-content: center !important;
padding: 12px 0 !important;
border-radius: 11px !important;
font-weight: 600 !important;
}
.kf-card .kf-check {
width: 44px !important; height: 44px !important;
border-radius: 11px !important;
flex: 0 0 44px !important;
}
/* ============================================================
ДЕСКТОП/ПЛАНШЕТ: сжатие таблицы финдера + карточки статистики
на всех ширинах (spec-grid не имел стилей выше 640px)
============================================================ */
/* --- Карточки статистики на ВСЕХ ширинах (auto-fit) --- */
.spec-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px;
}
.spec-box {
background: var(--surface-alt, #F5F7FB);
border: 1px solid var(--border, #E6E8EF);
border-radius: 12px;
padding: 14px 16px;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 78px;
text-align: left;
}
.spec-box .spec-box-num,
.spec-box-num {
font-family: var(--f-display, 'Space Grotesk', sans-serif);
font-size: 21px;
font-weight: 700;
line-height: 1.1;
color: var(--ink, #0A1128);
letter-spacing: -0.01em;
}
.spec-box .spec-box-cap,
.spec-box-cap {
font-size: 12px;
color: var(--ink-2, #5C6580);
margin-top: 4px;
line-height: 1.3;
}
/* --- Сжатие таблицы финдера, чтобы влезала на десктопе/планшете --- */
@media (min-width: 641px) {
.kf-table tbody td { padding: 10px 6px !important; font-size: 12.5px !important; }
.kf-col { padding: 12px 6px !important; font-size: 9px !important; letter-spacing: 0.06em !important; gap: 4px !important; }
.kf-th-plain { padding: 12px 6px !important; }
.kf-tags { max-width: 118px !important; gap: 4px !important; }
.kf-tag { font-size: 11px !important; padding: 3px 6px !important; }
.kf-pay { gap: 4px !important; }
.kf-pay-badge { font-size: 11px !important; padding: 3px 6px !important; }
.kf-logo { width: 32px !important; height: 32px !important; font-size: 11px !important; }
.kf-room { gap: 8px !important; }
.kf-room-name { font-size: 13.5px !important; }
.kf-room-meta { font-size: 10px !important; }
.kf-score-num { font-size: 14px !important; }
.kf-go { padding: 7px 10px !important; font-size: 12.5px !important; }
.kf-check { width: 30px !important; height: 30px !important; }
.kf-actions { gap: 6px !important; }
}
/* --- Планшет (≤900px): бургер вместо десктопного меню, чтобы не торчало --- */
@media (max-width: 900px) {
.nav-links { display: none !important; }
.nav-actions .btn-primary { display: none !important; }
.nav-burger { display: inline-flex !important; }
.kf-compare-bar { max-width: calc(100vw - 24px) !important; }
}
/* ============================================================
ВИЗУАЛЬНЫЕ ДОРАБОТКИ (пакет)
============================================================ */
/* --- #4 «Подбор за 15 секунд» — заметный блок-фича --- */
.kf-quickpick {
background: linear-gradient(135deg, #FBF6EC 0%, #FFFFFF 55%) !important;
border: 1px solid #EAD9B0 !important;
box-shadow: 0 10px 30px rgba(184, 132, 28, 0.10) !important;
position: relative !important;
overflow: hidden !important;
}
.kf-quickpick::before {
content: "";
position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
background: linear-gradient(180deg, var(--kz-gold), var(--kz-gold-deep));
}
.kf-qp-title {
font-family: var(--f-display, 'Space Grotesk', sans-serif) !important;
font-size: 19px !important;
letter-spacing: -0.01em !important;
text-transform: none !important;
color: var(--ink, #0A1128) !important;
max-width: none !important;
font-weight: 700 !important;
line-height: 1.15 !important;
}
.kf-qp-title::before {
content: "\26A1"; /* ⚡ */
display: inline-block;
margin-right: 7px;
color: var(--kz-gold);
font-size: 0.95em;
}
.kf-qp-title br { display: none; }
.kf-qp-group-label { color: var(--kz-gold-deep) !important; font-weight: 600 !important; }
.kf-qp-opt[aria-pressed="true"] {
background: var(--ink, #0A1128) !important;
border-color: var(--ink, #0A1128) !important;
color: #fff !important;
}
#kf-qp-apply {
background: linear-gradient(135deg, var(--kz-gold), var(--kz-gold-deep)) !important;
border: none !important;
color: #fff !important;
font-weight: 700 !important;
box-shadow: 0 6px 18px rgba(184, 132, 28, 0.30) !important;
}
#kf-qp-apply:hover { transform: translateY(-2px) !important; }
/* --- #10 Таблицы данных: чище, с чередованием строк --- */
.data-table tbody tr:nth-child(even) { background: rgba(46, 107, 255, 0.025); }
.data-table tbody tr:hover { background: rgba(46, 107, 255, 0.05); }
.data-table td:first-child { color: var(--ink, #0A1128) !important; font-weight: 600 !important; }
.data-table th { color: var(--ink-3, #667085) !important; }
/* --- #9 Липкая панель «Войти в клуб / Начать игру» (следует за пользователем) ---
Качество блоговой панели: стеклянный фон, логотип площадки, название,
инфо-подзаголовок (рейкбек/бонус) и яркая кнопка действия.
Разметка на странице:
KlubOk
рейкбек до 40%
Войти
Старый однострочный вид (Текст + svg) тоже поддержан ниже. */
.kozyr-sticky-cta {
position: fixed;
right: 20px; bottom: 20px;
z-index: 90;
display: inline-flex; align-items: center; gap: 14px;
padding: 10px 10px 10px 12px;
border-radius: 100px;
background: rgba(255, 255, 255, 0.96);
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border: 1px solid rgba(184, 132, 28, 0.28);
box-shadow: 0 12px 34px rgba(10, 17, 40, 0.16), 0 2px 8px rgba(184, 132, 28, 0.14);
text-decoration: none !important;
transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.3, 1),
box-shadow 0.24s, bottom 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
animation: kzCtaIn 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.kozyr-sticky-cta:hover {
transform: translateY(-3px);
box-shadow: 0 18px 44px rgba(10, 17, 40, 0.22), 0 4px 12px rgba(184, 132, 28, 0.2);
}
/* Синий вариант каймы (для рума без рейкбека) */
.kozyr-sticky-cta[data-cta-variant="blue"] {
border-color: rgba(38, 104, 255, 0.28);
box-shadow: 0 12px 34px rgba(10, 17, 40, 0.16), 0 2px 8px rgba(38, 104, 255, 0.14);
}
.kozyr-sticky-cta[data-cta-variant="blue"]:hover {
box-shadow: 0 18px 44px rgba(10, 17, 40, 0.22), 0 4px 12px rgba(38, 104, 255, 0.2);
}
/* Логотип площадки + точка «онлайн» */
.kozyr-sticky-cta .kzc__logo {
width: 42px; height: 42px; flex: 0 0 42px;
border-radius: 12px; overflow: hidden; position: relative;
border: 1px solid var(--border, #E5E7EE); background: #fff;
}
.kozyr-sticky-cta .kzc__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kozyr-sticky-cta .kzc__dot {
position: absolute; top: -1px; right: -1px;
width: 12px; height: 12px; border-radius: 50%;
background: #22C55E; border: 2.5px solid #fff;
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
animation: kzcPulse 2.2s infinite;
}
@keyframes kzcPulse {
0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
/* Тексты: название + подзаголовок */
.kozyr-sticky-cta .kzc__txt {
display: flex; flex-direction: column; line-height: 1.12; padding-right: 2px; min-width: 0;
}
.kozyr-sticky-cta .kzc__name {
font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700;
font-size: 15px; color: var(--ink, #0A1128); white-space: nowrap;
}
.kozyr-sticky-cta .kzc__sub {
font-size: 12px; font-weight: 600; color: var(--kz-gold-deep, #7E5512);
margin-top: 2px; white-space: nowrap;
}
.kozyr-sticky-cta[data-cta-variant="blue"] .kzc__sub { color: var(--accent-deep, #1E52D9); }
/* Кнопка действия справа */
.kozyr-sticky-cta .kzc__cta {
display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
background: linear-gradient(135deg, #E0A93B, var(--kz-gold-deep, #7E5512));
color: #fff;
font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 14px;
padding: 11px 20px; border-radius: 100px; white-space: nowrap;
box-shadow: 0 4px 14px rgba(184, 132, 28, 0.4);
transition: gap 0.2s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.kozyr-sticky-cta[data-cta-variant="blue"] .kzc__cta {
background: linear-gradient(135deg, #3B82FF, var(--accent-deep, #1E52D9));
box-shadow: 0 4px 14px rgba(38, 104, 255, 0.34);
}
.kozyr-sticky-cta:hover .kzc__cta { gap: 11px; }
.kozyr-sticky-cta .kzc__cta svg { width: 15px; height: 15px; }
/* Fallback: старый однострочный вид (Текст + svg напрямую) */
.kozyr-sticky-cta > span:not([class]),
.kozyr-sticky-cta > svg { color: var(--kz-gold-deep, #7E5512); }
.kozyr-sticky-cta:not(:has(.kzc__cta)) {
padding: 14px 24px;
background: linear-gradient(135deg, var(--kz-gold), var(--kz-gold-deep));
border-color: transparent;
color: #fff !important;
font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 15px;
}
.kozyr-sticky-cta:not(:has(.kzc__cta)) > span:not([class]),
.kozyr-sticky-cta:not(:has(.kzc__cta)) > svg { color: #fff; }
.kozyr-sticky-cta:not(:has(.kzc__cta)) > svg { width: 16px; height: 16px; }
@keyframes kzCtaIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
/* На мобильном — панель растягивается на всю ширину внизу */
@media (max-width: 640px) {
.kozyr-sticky-cta {
left: 12px; right: 12px; bottom: 12px;
justify-content: space-between;
padding: 8px 8px 8px 10px;
}
.kozyr-sticky-cta .kzc__name { font-size: 14.5px; }
.kozyr-sticky-cta .kzc__cta { padding: 11px 18px; }
}
/* Конфликт с cookie-баннером: пока баннер в DOM, поднимаем панель выше него.
Точное значение bottom вычисляет kozyr-enhance.js по реальной высоте
баннера (inline-стиль). Класс — только маркер состояния для читаемости. */
.kozyr-sticky-cta.kz-cta-above-consent { /* bottom задаётся из JS */ }
@media (prefers-reduced-motion: reduce) {
.kozyr-sticky-cta { animation: none; }
.kozyr-sticky-cta:hover { transform: none; }
.kozyr-sticky-cta .kzc__dot { animation: none; }
}
/* --- #6 Таблица сравнения PokerBet/KlubOk на телефоне: красивее --- */
@media (max-width: 640px) {
.compare-table {
border: 1px solid var(--border, #E6E8EF) !important;
border-radius: 14px !important;
overflow: hidden !important;
background: var(--surface, #fff) !important;
}
/* шапка с румами — тёмная, БЕЗ sticky:
на мобилке nav-бар имеет высоту ~77px и перекрывал шапку
(top: 56px оказывался под навигацией) — sticky здесь скорее
мешает. Плюс исходный стиль `.compare-table thead th`
ставил белый фон на сами , из-за чего белые названия
"PokerBet"/"KlubOk" были невидны на белом. Переопределяем. */
.compare-table thead tr {
background: var(--ink, #0A1128) !important;
padding: 16px 14px !important;
position: static !important;
}
.compare-table thead th {
background: transparent !important; /* убираем белый фон из строки 2494 */
color: #fff !important;
border-bottom: none !important; /* и рамку, чтобы не резала тёмный фон */
}
.compare-table .compare-name { color: #fff !important; font-weight: 700 !important; }
.compare-table .compare-sub { color: rgba(255,255,255,0.6) !important; }
/* строки: чередование + акцент параметра */
.compare-table tbody tr:nth-child(even) { background: var(--surface-alt, #F5F7FB) !important; }
.compare-table tbody th[scope="row"] {
color: var(--kz-gold-deep, #8A6212) !important;
font-weight: 700 !important;
padding-bottom: 4px !important;
}
.compare-table tbody td { font-weight: 500 !important; }
/* «лучшее» значение — зелёная плашка */
.compare-table .compare-best {
color: #1D9E75 !important;
font-weight: 700 !important;
}
.compare-table .compare-logo { border-radius: 9px !important; }
/* нижние кнопки обзоров — в столбик, полноширинные */
.compare-table tbody tr:last-child { display: block !important; padding: 12px 14px !important; }
.compare-table tbody tr:last-child td { display: block !important; margin-top: 8px; }
.compare-table .compare-cta { width: 100% !important; justify-content: center !important; display: flex !important; }
}
/* ============================================================
7. ФИКС: разъехавшиеся колонки таблицы финдера
------------------------------------------------------------
В `ua/index.html` было правило `.kf-table tbody tr::before`
с `content: ""; position: absolute; width: 3px;` —
отдельный псевдо-элемент внутри | , который во многих
браузерах трактуется как первый table-cell и создаёт
"фантомную" колонку в tbody. Из-за этого все | сдвигаются
на одну колонку вправо относительно | в заголовке.
Убираем псевдо-элемент, а mast-полоску слева при hover
рисуем через `box-shadow: inset ...` на первой ячейке —
визуально идентично, без вмешательства в table-layout.
============================================================ */
.kf-table tbody tr::before {
content: none !important;
display: none !important;
}
.kf-table tbody tr[data-access="direct"]:hover td:first-child {
box-shadow: inset 3px 0 0 var(--suit-direct);
}
.kf-table tbody tr[data-access="club"]:hover td:first-child {
box-shadow: inset 3px 0 0 var(--ink);
}
/* ============================================================
8. Мобильное оглавление (Содержание) — аккордеон
------------------------------------------------------------
На страницах обзоров (`ua/clubs/klubok`, `ua/rooms/pokerbet`)
есть `.article-toc` (левая колонка на десктопе).
Раньше на мобилке она была `display: none`. Возвращаем её
как раскладной аккордеон: свёрнутая шапка сверху статьи,
при тапе — тот же вертикальный список, что на десктопе,
с подсветкой активного пункта.
============================================================ */
/* превью активного пункта (добавляется JS-ом в шапку) —
на десктопе и планшете всегда скрыт, показывается только
на узких экранах внутри свёрнутой шапки аккордеона */
.article-toc .kz-toc-current { display: none; }
@media (max-width: 720px) {
.article-toc {
display: block !important; /* перебиваем display:none из page CSS */
position: static !important;
max-height: none !important;
margin: 0 0 24px !important;
padding: 0 !important;
background: var(--surface, #fff);
border: 1px solid var(--border, #E8ECF3);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(10, 17, 40, 0.03);
}
/* Подпись "Содержание" превращается в кликабельную шапку аккордеона */
.article-toc .article-toc-label {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 0 !important;
padding: 14px 16px !important;
font-family: var(--f-mono, ui-monospace, monospace);
font-size: 11px !important;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3, #8791A6);
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
min-height: 48px; /* тач-зона */
box-sizing: border-box;
}
/* Правая часть шапки: имя активного пункта + шеврон */
.article-toc .article-toc-label::after {
content: "";
flex-shrink: 0;
width: 12px; height: 12px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
transition: transform 0.22s ease;
opacity: 0.75;
}
.article-toc[data-open="true"] .article-toc-label::after {
transform: rotate(180deg);
}
/* активный пункт как «подзаголовок» в свёрнутой шапке */
.article-toc .kz-toc-current {
display: inline-flex;
align-items: center;
margin-left: auto;
padding: 0 0 0 12px;
color: var(--ink, #0A1128);
font-family: var(--f-body, Inter, sans-serif);
font-size: 13px;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
line-height: 1.2;
max-width: 55%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Список пунктов — свёрнут по умолчанию, разворачивается по клику */
.article-toc ul {
display: none !important; /* было: flex-direction: row из page CSS */
flex-direction: column !important;
overflow: visible !important;
gap: 2px !important;
margin: 0 !important;
padding: 4px 8px 12px !important;
border-top: 1px solid var(--border, #E8ECF3);
animation: kz-toc-open 0.22s ease both;
}
.article-toc[data-open="true"] ul {
display: flex !important;
}
@keyframes kz-toc-open {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
/* Пункты — как в десктопной sticky-колонке */
.article-toc a {
display: block !important;
padding: 11px 12px !important;
font-family: var(--f-body, Inter, sans-serif) !important;
font-size: 14px !important;
font-weight: 500 !important;
color: var(--ink-2, #5C6580) !important;
background: transparent !important;
border-radius: 10px !important;
border-left: 2px solid transparent !important;
margin-left: 0 !important;
line-height: 1.35 !important;
white-space: normal !important;
text-decoration: none !important;
transition: background 0.15s, color 0.15s !important;
min-height: 44px; /* тач-зона */
box-sizing: border-box;
}
.article-toc a:active {
background: var(--surface-alt, #F5F7FB) !important;
}
.article-toc a.active {
color: var(--accent, #2668FF) !important;
background: var(--accent-tint, #EEF2FF) !important;
border-left-color: var(--accent, #2668FF) !important;
font-weight: 600 !important;
}
}
/* ============================================================
10. Боковой блок «Рейкбек» на обзорах рума/клуба
------------------------------------------------------------
Раньше `.side-cta` на `ua/clubs/klubok/` и `ua/rooms/pokerbet/`
был тёмным (ink-фон, синяя кнопка). Тёмный блок конкурировал
за внимание с самим контентом статьи и не рифмовался
с золотой айдентикой рейкбека, которая уже везде используется
(финдер-карточка, выделенные плашки).
Переводим блок в золотой стиль-эталон карточки финдера:
светло-золотой фон `#FBF6EC`, тёмно-золотое число, синяя кнопка
меняется на золотую. Дизайн становится «одним голосом»
с рейкбек-акцентом по всему сайту.
============================================================ */
.side-cta {
background: linear-gradient(180deg, #FBF6EC 0%, #F7EFDA 100%) !important;
border: 1px solid #F0E4C8 !important;
color: var(--kz-gold-deep) !important;
box-shadow: 0 8px 24px rgba(184, 132, 28, 0.10) !important;
}
.side-cta-label {
color: var(--kz-gold-deep) !important;
opacity: 0.72;
}
.side-cta-value {
color: var(--kz-gold-deep) !important;
}
.side-cta-value em {
color: var(--kz-gold) !important;
opacity: 0.9;
}
.side-cta-desc {
color: var(--kz-gold-deep) !important;
opacity: 0.78;
}
/* Кнопка: золотая вместо синей, чтобы рифмовалась с фоном
и оставалась главным CTA блока */
.side-cta-btn {
background: linear-gradient(180deg, var(--kz-gold) 0%, var(--kz-gold-deep) 100%) !important;
color: #FFFFFF !important;
border: none !important;
box-shadow: 0 4px 12px rgba(138, 98, 18, 0.28) !important;
}
.side-cta-btn:hover {
background: linear-gradient(180deg, var(--kz-gold-deep) 0%, #6E4E0E 100%) !important;
box-shadow: 0 6px 18px rgba(138, 98, 18, 0.36) !important;
transform: translateY(-2px);
}
.side-cta-btn svg {
color: #FFFFFF !important;
stroke: #FFFFFF !important;
}
/* ---------- 11. Уважение к reduced motion --------------------------- */
@media (prefers-reduced-motion: reduce) {
.kf-card, .card, .kf-table tbody tr, .kf-rake, .kf-score-num,
.btn-dark, .btn-primary, .btn-xl, .side-cta-btn {
transition: none !important;
}
.kf-card:hover, a.card:hover, .btn-dark:hover, .btn-primary:hover,
.side-cta-btn:hover {
transform: none !important;
}
.kf-score-num::after { transition: none !important; }
.article-toc ul { animation: none !important; }
.article-toc .article-toc-label::after { transition: none !important; }
}
/* ---------- 12. Плашка «Доступен / Недоступен для страны» ---------- */
/* Универсальный чип, рендерится JS через [data-accept-countries="ua,pl,..."].
Два варианта: inline (в карточке finder — только main-текст) и .ka-block
(крупная плашка на страницах обзоров — main + подпись). */
.ka {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 12px 6px 6px;
border-radius: 999px;
font-family: var(--f-body, 'Inter', system-ui, sans-serif);
line-height: 1.1;
white-space: nowrap;
border: 1px solid transparent;
vertical-align: middle;
}
.ka .fi {
width: 18px; height: 13px; border-radius: 2px;
flex-shrink: 0;
box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
}
.ka__icon {
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; border-radius: 50%;
flex-shrink: 0;
}
.ka__icon svg { width: 12px; height: 12px; display: block; }
.ka__body {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
min-width: 0;
}
.ka__main {
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
line-height: 1.2;
}
.ka__sub {
display: none; /* в inline варианте прячем */
}
/* Зелёный: рум доступен */
.ka--yes {
background: rgba(38, 166, 91, 0.09);
color: #1B7A44;
border-color: rgba(38, 166, 91, 0.22);
}
.ka--yes .ka__icon { background: #26A65B; color: #fff; }
/* Оранжевый (не серый!): рум не доступен — это ВАЖНАЯ информация, не «выключено» */
.ka--no {
background: rgba(224, 141, 40, 0.10);
color: #8A5210;
border-color: rgba(224, 141, 40, 0.28);
}
.ka--no .ka__icon { background: #E08D28; color: #fff; }
/* Крупный вариант — для страниц обзоров */
.ka-block { display: block; margin: 14px 0 18px; }
.ka-block .ka {
width: 100%;
justify-content: flex-start;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: 12px;
}
.ka-block .ka .fi { width: 22px; height: 16px; margin-left: auto; }
.ka-block .ka__icon { width: 28px; height: 28px; }
.ka-block .ka__icon svg { width: 16px; height: 16px; }
.ka-block .ka__main { font-size: 14px; font-weight: 700; }
.ka-block .ka__sub {
display: block; /* показываем в block-варианте */
font-size: 12px;
font-weight: 400;
color: currentColor;
opacity: 0.72;
letter-spacing: 0;
margin-top: 2px;
white-space: normal;
line-height: 1.35;
}
@media (max-width: 640px) {
.ka { gap: 8px; padding: 5px 10px 5px 5px; }
.ka__main { font-size: 12px; }
.ka .fi { width: 16px; height: 12px; }
/* Крупная плашка на страницах обзоров — остаётся читаемой на телефоне */
.ka-block .ka {
padding: 12px 14px;
gap: 10px;
align-items: flex-start;
white-space: normal; /* разрешаем перенос (базовый .ka имеет nowrap) */
}
.ka-block .ka__icon {
width: 26px; height: 26px;
margin-top: 1px;
}
.ka-block .ka__main { font-size: 13.5px; line-height: 1.25; }
.ka-block .ka__sub { font-size: 11.5px; line-height: 1.3; }
.ka-block .ka .fi {
width: 20px; height: 14px;
margin-left: 8px;
align-self: center;
}
}
@media (max-width: 380px) {
/* Совсем узкие экраны — флаг под текст, чтобы ничего не обрезалось */
.ka-block .ka { flex-wrap: wrap; }
.ka-block .ka__body { flex: 1 1 auto; min-width: 0; }
.ka-block .ka .fi { order: 3; margin-left: 0; margin-top: 6px; flex-basis: 100%; }
}
/* ---------- 13. Плавающая Telegram-кнопка (kz-tg) ------------------- */
.kz-tg {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 85; /* ниже, чем kozyr-sticky-cta (z-index 90) */
display: flex;
align-items: center;
gap: 4px;
opacity: 0;
transform: translateY(12px);
transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
pointer-events: none; /* пока не visible — не ловим клики */
}
.kz-tg.is-visible {
opacity: 1;
transform: none;
pointer-events: auto;
}
/* На страницах с золотой sticky-cta смещаем telegram-виджет выше */
.kz-tg--shifted { bottom: 88px; }
/* Пока hero-карточка в зоне видимости — прячем виджет, чтобы не перекрывать её.
Появляется плавно, когда пользователь пролистал ниже. */
.kz-tg.kz-tg--hero-hidden {
opacity: 0;
transform: translateY(12px);
pointer-events: none;
}
/* Смещение над гео-баннером задаётся инлайном из JS (высота баннера динамическая);
здесь только гарантируем плавность перехода bottom. */
.kz-tg { transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1), bottom 0.24s ease; }
.kz-tg__btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 18px 12px 14px;
background: #229ED9; /* фирменный Telegram-blue */
color: #fff;
text-decoration: none;
border-radius: 999px;
font-family: 'Inter', system-ui, sans-serif;
font-weight: 600;
font-size: 14px;
line-height: 1;
box-shadow: 0 8px 24px rgba(34, 158, 217, 0.35);
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s;
}
.kz-tg__btn:hover {
background: #1F8FC7;
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(34, 158, 217, 0.45);
}
.kz-tg__icon { width: 20px; height: 20px; flex-shrink: 0; }
.kz-tg__close {
width: 24px;
height: 24px;
border-radius: 50%;
border: none;
background: rgba(10, 17, 40, 0.68);
color: #fff;
font-size: 15px;
font-weight: 400;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0 0 2px 0; /* небольшая коррекция под × */
margin-left: -4px;
align-self: flex-start;
transition: background 0.15s;
}
.kz-tg__close:hover { background: rgba(10, 17, 40, 0.9); }
/* На мобилке — только круглая иконка без текста, чтобы не мешать контенту */
@media (max-width: 640px) {
.kz-tg {
right: 12px;
bottom: 12px;
}
.kz-tg--shifted { bottom: 82px; }
.kz-tg__btn {
width: 52px;
height: 52px;
padding: 0;
justify-content: center;
border-radius: 50%;
}
.kz-tg__label { display: none; }
.kz-tg__close {
position: absolute;
top: -6px;
right: -6px;
width: 22px;
height: 22px;
font-size: 14px;
margin: 0;
background: rgba(10, 17, 40, 0.85);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
}
@media (prefers-reduced-motion: reduce) {
.kz-tg { transition: opacity 0.15s ease; transform: none; }
.kz-tg__btn { transition: background 0.15s; }
.kz-tg__btn:hover { transform: none; }
}
/* ---------- 14. Отзывы игроков (kz-rev*) ---------------------------- */
/* Звёзды: используем один компонент и в саммари, и в карточке */
.kz-stars { display: inline-flex; gap: 1px; line-height: 1; }
.kz-star {
font-size: 15px;
line-height: 1;
color: var(--ink-4, #C7CBD7);
transition: color 0.2s;
}
.kz-star--on { color: #F0B429; }
.kz-star--half {
background: linear-gradient(90deg, #F0B429 50%, var(--ink-4, #C7CBD7) 50%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.kz-stars--sm .kz-star { font-size: 13px; }
.kz-stars--md .kz-star { font-size: 18px; }
/* ---- Сводка «4.7 из 5 · 5 отзывов» ---- */
.kz-rev-sum {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--f-body, system-ui, sans-serif);
font-size: 13px;
color: var(--ink-2, #5C6580);
flex-wrap: wrap;
}
.kz-rev-sum__num strong { color: var(--ink, #0A1128); font-weight: 700; }
.kz-rev-sum__sep {
color: var(--ink-4, #C7CBD7);
font-weight: 700;
user-select: none;
}
.kz-rev-sum__cnt { color: var(--ink-3, #7A8299); }
.kz-rev-sum--empty {
font-family: var(--f-body, system-ui, sans-serif);
font-size: 13px;
color: var(--ink-3, #7A8299);
font-style: italic;
}
/* ---- Полный блок отзывов ---- */
.kz-rev-block {
background: var(--surface, #FFF);
border: 1px solid var(--border, #E2E7F0);
border-radius: 14px;
padding: 24px;
margin: 32px 0;
}
.kz-rev-topline {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px solid var(--border, #E2E7F0);
}
.kz-rev-avg { display: flex; align-items: center; gap: 14px; }
.kz-rev-avg__num {
font-family: var(--f-display, 'Space Grotesk', system-ui, sans-serif);
font-size: 40px;
font-weight: 700;
line-height: 1;
color: var(--ink, #0A1128);
letter-spacing: -0.02em;
}
.kz-rev-avg__num .kz-rev-avg__of {
font-size: 18px; color: var(--ink-3, #7A8299); font-weight: 500;
}
.kz-rev-avg__meta { display: flex; flex-direction: column; gap: 4px; }
.kz-rev-avg__cnt {
font-family: var(--f-mono, ui-monospace, monospace);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-3, #7A8299);
}
.kz-rev-add {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
background: var(--surface-alt, #F5F7FB);
color: var(--ink, #0A1128);
text-decoration: none;
border-radius: 999px;
font-family: var(--f-body, system-ui, sans-serif);
font-weight: 600;
font-size: 13px;
transition: background 0.15s, transform 0.15s;
white-space: nowrap;
}
.kz-rev-add:hover {
background: var(--accent-tint, #E8F0FF);
color: var(--accent-deep, #1E52D9);
transform: translateY(-1px);
}
.kz-rev-add svg { flex-shrink: 0; }
.kz-rev-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.kz-rev {
padding: 18px;
background: var(--surface-alt, #F8F9FC);
border-radius: 10px;
border: 1px solid transparent;
transition: border-color 0.15s;
}
.kz-rev:hover { border-color: var(--border, #E2E7F0); }
.kz-rev__head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 10px;
}
.kz-rev__who { display: flex; gap: 12px; align-items: center; }
.kz-rev__avatar {
width: 36px; height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent, #2668FF), var(--accent-deep, #1E52D9));
color: #fff;
font-family: var(--f-display, 'Space Grotesk', system-ui, sans-serif);
font-weight: 700;
font-size: 15px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.kz-rev__name {
font-family: var(--f-body, system-ui, sans-serif);
font-weight: 600;
font-size: 14px;
color: var(--ink, #0A1128);
display: inline-flex;
align-items: center;
gap: 8px;
}
.kz-rev-verify {
display: inline-flex; align-items: center; gap: 3px;
font-family: var(--f-mono, ui-monospace, monospace);
font-size: 9px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #1B7A44;
background: rgba(38, 166, 91, 0.10);
padding: 2px 6px 2px 4px;
border-radius: 4px;
font-weight: 700;
}
.kz-rev-verify svg { stroke: currentColor; }
.kz-rev__date {
font-family: var(--f-mono, ui-monospace, monospace);
font-size: 10px;
color: var(--ink-3, #7A8299);
letter-spacing: 0.04em;
}
.kz-rev__text {
font-family: var(--f-body, system-ui, sans-serif);
font-size: 14px;
line-height: 1.55;
color: var(--ink-2, #5C6580);
margin: 0;
}
.kz-rev-more {
display: block;
width: 100%;
margin-top: 20px;
padding: 12px;
background: var(--surface-alt, #F5F7FB);
border: 1px dashed var(--border, #E2E7F0);
border-radius: 8px;
color: var(--ink-2, #5C6580);
font-family: var(--f-body, system-ui, sans-serif);
font-weight: 500;
font-size: 13px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.kz-rev-more:hover {
background: var(--accent-tint, #E8F0FF);
border-color: var(--accent, #2668FF);
color: var(--accent-deep, #1E52D9);
}
.kz-rev-empty {
text-align: center;
padding: 32px 20px;
background: var(--surface-alt, #F8F9FC);
border-radius: 12px;
}
.kz-rev-empty p {
font-family: var(--f-body, system-ui, sans-serif);
color: var(--ink-3, #7A8299);
font-size: 14px;
margin: 0 0 12px;
}
.kz-rev-empty__cta {
display: inline-flex;
color: var(--accent, #2668FF);
text-decoration: none;
font-weight: 600;
font-size: 14px;
}
.kz-rev-empty__cta:hover { color: var(--accent-deep, #1E52D9); }
@media (max-width: 640px) {
.kz-rev-block { padding: 18px; margin: 24px 0; }
.kz-rev-topline {
flex-direction: column;
gap: 14px;
align-items: stretch;
}
.kz-rev-add { align-self: flex-start; }
.kz-rev-avg__num { font-size: 32px; }
.kz-rev { padding: 14px; }
.kz-rev__head { flex-wrap: wrap; }
}
/* ---------- 15. Сводка отзывов в room-facts ------------------------- */
.room-facts-reviews {
margin: 0 0 18px;
padding: 12px 14px;
background: var(--surface-alt, #F8F9FC);
border-radius: 10px;
border: 1px solid var(--border, #E2E7F0);
}
.room-facts-reviews .kz-rev-sum {
font-size: 12px;
gap: 6px;
flex-wrap: wrap;
}
.room-facts-reviews .kz-rev-sum__num strong { font-size: 14px; }
|