/* Токены темы (раньше theme.light.json для new-template) */
:root {
  /* fonts */
  --font-base: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-heading: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-size-0: 0.875rem;
  --font-size-1: 1rem;
  --font-size-2: 1.125rem;
  --font-size-3: 1.25rem;
  --font-size-4: 1.5rem;
  --font-size-5: 1.875rem;
  --font-size-6: 2.25rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-tight: 1.2;
  --line-normal: 1.5;
  --line-relaxed: 1.7;

  /* space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-header: 2rem;

  /* padding */
  --padding-button: 0.5rem 1rem;

  /* shadow */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 6px 14px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.12);

  /* sizes */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --avatar-sm: 24px;
  --avatar-md: 32px;
  --avatar-lg: 48px;
  --control-height: 40px;
  --content-max: 70ch;

  /* layout */
  --container-max: 1000px;
  --content-pad-desktop: 20px 50px;
  --content-pad-mobile: 20px;
  --grid-gutter: 1rem;
  --section-pad-y: 1rem;

  /* transitions */
  --transition-fast: 0.15s ease;
  --transition: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* Нейтрали вне THEME-VARS — не трогает generate-theme.js */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-surface: #f7f8fa;
  --color-elevated: #ffffff;
  --color-border: #e5e7eb;

  /* THEME-VARS:START */
  /* 🎨 Auto-generated vars for rollino-casino-uk.com */
  --radius: 13px;
  --button-radius: 999px;
  --image-radius: 11px;
  --color-bg: #001826;
  --color-bg-header: #000d18;
  --color-bg-footer: #02161f;
  --color-text: #e8f2fe;
  --color-text-header: #ffffff;
  --color-text-footer: #ffffff;
  --color-text-button-primary: #ffffff;
  --color-text-button-secondary: #010005;
  --color-muted: #9db4c3;
  --color-primary: #021c26;
  --color-primary-light: #44575e;
  --color-secondary: #ffffff;
  --color-secondary-light: #ffffff;
  --color-on-accent: #0d1c2d;
  --color-success: #2ecf8c;
  --color-warning: #fcc22d;
  --color-danger: #ff5b62;
  /* THEME-VARS:END */

  --bg-image: none;
  --bg-position: top;
  --bg-size: contain;
  --bg-repeat: no-repeat;
}

/* ===================== Base ===================== */
html, body { height: max-content; }
body {
  margin: 0;
  font-family: var(--font-base);
  background: var(--color-bg);
  color: var(--color-text);
  background-image: var(--bg-image);
  background-position: var(--bg-position);
  background-size: var(--bg-size);
  background-repeat: var(--bg-repeat);
  min-height: 100vh;
}
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); line-height: var(--line-tight); color: var(--color-text)!important;}
.content h4 { font-size: 1.2em; }
.content h3 { font-size: 1.4em; }
.content h2 { font-size: 1.5em; }
.hero .hero-games-title {
    font-size: 1.2em;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 0 !important;
    margin-top: 1rem;
}
.content h1 { font-size: 1.7em; }
code, pre { font-family: var(--font-mono); }
a { color: var(--color-warning); text-decoration: underline}
a:hover { color: var(--color-warning); text-decoration: none}
.container { max-width: var(--container-max); }

strong {
  color: var(--color-text);
}

/* ========================================================================
   Bulma overrides (apply to both themes using data-theme attribute)
   ======================================================================== */

/* «Дыхание» только с .animated; 1 → меньше → больше → 1; linear без «залипания» на середине */
@keyframes cta-breathe {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(0.92); }
  75% { transform: scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
  .button.animated,
  .cta-button.animated {
    animation: none !important;
  }
  .button.button--shine::after,
  .cta-button.button--shine::after {
    animation: none !important;
  }
}

/* Блеск: туда (~1s) → обратно (~1s) → пауза 5s; цикл 7s, linear */
@keyframes button-gloss-cycle {
  0% {
    transform: translateX(-145%) skewX(-12deg);
  }
  /* 1/7 ≈ 1s при duration 7s */
  14.2857% {
    transform: translateX(145%) skewX(-12deg);
  }
  /* 2/7 ≈ 2s — вернулись в исход */
  28.5714% {
    transform: translateX(-145%) skewX(-12deg);
  }
  100% {
    transform: translateX(-145%) skewX(-12deg);
  }
}

.button.button--shine,
.cta-button.button--shine {
  position: relative;
  overflow: hidden;
}

.button.button--shine::after,
.cta-button.button--shine::after {
  content: "";
  position: absolute;
  top: -28%;
  bottom: -28%;
  left: 0;
  width: 175%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 37.5%,
    rgba(255, 255, 255, 0.42) 38%,
    rgba(255, 255, 255, 0.42) 62%,
    transparent 62.5%,
    transparent 100%
  );
  transform: translateX(-145%) skewX(-12deg);
  animation: button-gloss-cycle 7s linear infinite;
  pointer-events: none;
  z-index: 0;
}

/* контент кнопки поверх блика (для разметки со span / иконками) */
.button.button--shine > *,
.cta-button.button--shine > * {
  position: relative;
  z-index: 1;
}

/* только текст внутри <a> — нет дочерних элементов: блик поверх с blend, иначе текст ушёл бы под слой */
.button.button--shine:not(:has(> *))::after,
.cta-button.button--shine:not(:has(> *))::after {
  z-index: 1;
  mix-blend-mode: soft-light;
}

/* Buttons */
.button {
  border: 1px solid;
  boder-color: var(--color-white)
  border-radius: var(--button-radius);
  font-weight: var(--font-weight-semibold);
  padding: var(--padding-button);
  transition: opacity var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  border: none;
  text-decoration: none;
}

.button:hover { opacity: .95}
.button:active { transform: translateY(1px); }
.button:focus-visible { outline: none; box-shadow: 0 0 0 .2rem var(--color-secondary); }

/* .is-* — два стопа; плавность — соседние оттенки в base-ranges (from / to близко по тону) */
.button.is-primary {
  background: linear-gradient(180deg, var(--color-primary-light) 0, var(--color-primary) 100%);
  color: var(--color-text-button-primary);
  border: 1px solid var(--color-primary-light);
}
.button.is-primary:hover {
  opacity: 1;
  filter: brightness(1.06);
  text-decoration: none;
}
.button.is-link { background-color: var(--color-warning); color: var(--color-on-accent); }
.button.is-secondary {
  background: linear-gradient(180deg, var(--color-secondary-light) 0, var(--color-secondary) 100%);
  color: var(--color-text-button-secondary);
  border: 1px solid var(--color-secondary-light);
}
.button.is-secondary:hover {
  opacity: 1;
  filter: brightness(1.06);
  text-decoration: none;
}

/* CTA в шапке / hero: две строки + иконка подарка */
.button.button--cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 3rem;
  padding: 0.55rem 1.35rem;
  border-radius: var(--button-radius);
  font-size: var(--font-size-0);
  line-height: 1.15;
  text-align: left;}

@media (max-width: 520px) {
  .navbar-butttons .button.is-primary {
    display: none;
  }
  color: var(--color-text);
}

.button.animated {
  transform-origin: center center;
  animation: cta-breathe 2.2s linear infinite;
  will-change: transform;
}
.button.animated:hover,
.button.animated:active {
  animation: none;
}
.button--cta__lines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.button--cta__copy {
  display: block;
  text-align: left;
  line-height: 1.15;
}
.button--cta__copy > .button--cta__line {
  display: block;
}
.button--cta__line--subtitle {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-0);
  letter-spacing: 0.04em;
  margin-top: 0.05rem;
}
.button--cta__line--lead {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-1);
}
.button--cta__line:not(.button--cta__line--lead) {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-0);
  opacity: 1;
}
.button--cta__gift {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-accent);
}
.button--cta__svg {
  width: 1.65rem;
  height: 1.65rem;
  transform: rotate(12deg);
  fill: var(--color-text-button-secondary);
}
.button--cta--no-gift {
  justify-content: center;
}
.button.is-success { background-color: var(--color-warning); color: var(--color-black); }
.button.is-warning { background-color: var(--color-warning); color: #111; }
.button.is-danger { background-color: var(--color-danger); color: var(--color-on-accent); }

/* variants: outlined / light */
.button.is-primary.is-outlined { background: transparent; color: var(--color-primary); border-color: var(--color-primary); box-shadow: none; }
.button.is-light,
.button.is-light { background: transparent; color: var(--color-text); border-color: var(--color-border); box-shadow: none; }

/* button sizes */
.button.is-small { height: calc(var(--control-height) - 8px); padding-inline: var(--space-3); font-size: var(--font-size-0); }
.button.is-medium { height: calc(var(--control-height) + 4px); padding-inline: calc(var(--space-4) + .25rem); }
.button.is-large { height: calc(var(--control-height) + 10px); padding-inline: calc(var(--space-4) + .5rem); font-size: var(--font-size-3); }

.navbar-butttons .button--cta__line--subtitle, .navbar-butttons .button--cta__gift {display: none}

/* ------------- HEADER ----------------*/

/* Navbar */

.navbar { background-color: var(--color-bg-header); min-height: var(--control-height); padding: 1rem 1.5rem; text-decoration: none}
.navbar .container {gap: 20px; display: flex;align-items: center;justify-content: space-between;}
.navbar .navbar-logo {display: flex; align-items: center; width: 100%;}
.navbar .navbar-logo img {    max-width: 100%;
    width: 100%;}
.navbar .navbar-item,
.navbar .navbar-link { color: var(--color-text-header); border-radius: var(--radius)!important}
.navbar .navbar-item:hover,
.navbar .navbar-link:hover,
.navbar a.navbar-link:hover { background-color: transparent; text-decoration: underline}
.navbar .navbar-item.is-active,
.navbar .navbar-link.is-active { color: var(--color-primary); }
.navbar .navbar-butttons .buttons {flex-wrap: nowrap}
.navbar>.container .navbar-brand {margin-inline-start: 0; flex-shrink: 1; z-index: 1; max-width: 140px; min-width: 120px; width: 100%;}
@media (max-width: 768px) {
  header {
    position: sticky;
    top: 0;
    z-index: 1000;
  }
  .navbar {
    padding: 1rem 1.5rem;

  }
}

/* Navbar burger & dropdown in navbar */

.navbar-burger { color: var(--color-text-header); background-color: rgb(255,255,255, 0.2); margin-inline-start: unset; border-radius: var(--radius)}
.navbar-burger:hover { color: var(--color-text-header); }
.navbar-dropdown { background-color: var(--color-elevated); border-top: 1px solid var(--color-border); box-shadow: var(--shadow-lg); }
.navbar-dropdown .navbar-item { color: var(--color-text-header); }
.navbar-divider { background-color: var(--color-border); }
.navbar>.container .navbar-menu { width: min-content; background-color: var(--color-bg-header); font-weight: var(--font-weight-bold); border-radius: var(--radius); flex-wrap: wrap; margin-inline-end: unset; justify-content: center;}
.navbar>.container .navbar-menu.is-active {position: fixed;width: 100vw;left: 0;top: 0;border-radius: 0; padding: 6rem 2rem 2rem; text-align: center}
.navbar>.container .navbar-menu.is-active .navbar-item {border-radius: 0!important; font-size: 1.3rem}
.navbar>.container .navbar-menu .navbar-item {font-weight: bold; text-decoration: none}

/* Header/Footer buttons: цвет текста из темы (primary / secondary отдельно) */
.navbar .button.is-primary,
.navbar .button.is-primary .button--cta__line--lead,
.navbar .button.is-primary .button--cta__line--subtitle,
.navbar .button.is-primary .button--cta__gift,
.footer .button.is-primary,
.footer .button.is-primary .button--cta__line--lead,
.footer .button.is-primary .button--cta__line--subtitle,
.footer .button.is-primary .button--cta__gift {
  color: var(--color-text-button-primary) !important;
}
.navbar .button.is-secondary,
.navbar .button.is-secondary .button--cta__line--lead,
.navbar .button.is-secondary .button--cta__line--subtitle,
.navbar .button.is-secondary .button--cta__gift,
.footer .button.is-secondary,
.footer .button.is-secondary .button--cta__line--lead,
.footer .button.is-secondary .button--cta__line--subtitle,
.footer .button.is-secondary .button--cta__gift {
  color: var(--color-text-button-secondary) !important;
}


.navbar>.container .navbar-menu.is-active + .navbar-butttons {display: block}

/* Hero */
.hero .title { color: var(--color-text); }
.hero .columns { flex-direction: column; }
.hero .columns .column { width: 100%; }
.hero .subtitle { color: var(--color-muted); }
.hero-inner {
  background: none;
  border-radius: var(--radius);
}
.hero-image-wrapper { position: relative; height: 20rem; overflow: hidden;}
.hero-image-wrapper img { border-radius: var(--image-radius); width: 100%;}
.hero-image-wrapper a { position: relative;}

@media (max-width: 1024px) {
  .hero-image-wrapper {
    margin: -1.5rem -1.5rem 0;
  }
}

@media (max-width: 520px) {
  .hero-image-wrapper {
    height: auto;
  }
}

.hero .button.is-secondary {
  margin: 0 auto;
    min-width: 250px;
    min-height: 70px;
    max-width: 450px;
    width: 100%;
  color: var(--color-text-button-secondary);
}

.hero .button.is-secondary .button--cta__line--lead {
  font-size: 1.5rem;
  text-transform: uppercase;
}

.hero .button.is-secondary .button--cta__line--subtitle {
text-transform: uppercase;
}

.hero-inner .buttons {
  position: absolute;
    bottom: 2rem;
    margin: 0 auto;
    width: 100%;
    padding: 0 2rem;
        display: flex;
    flex-direction: column;
}

.hero .hero-inner .cover {
    width: 100%;
    height: -webkit-fill-available;
    position: absolute;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8) 70%);
  border-radius: var(--image-radius);
}

@media (max-width: 520px) {
  .hero .hero-inner .cover {
  border-radius: 0;
}
}

.hero .hero-inner .promo {
      font-weight: bold;
    text-align: center;
    font-size: 1.5rem;
    line-height: normal;
    color: #fff !important;
    font-weight: 800;
    text-shadow: 0 0 5px #000000;
}

.hero .hero-inner .promo * {
    color: #fff !important;
}

.hero-text {
  position: relative;
}

/* Cards */
.card { background-color: var(--color-elevated); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card .card-content { padding: var(--space-4); }

/* Tables */
.table { color: var(--color-text); border-color: var(--color-border); }
table th, table td {padding: var(--space-2) var(--space-3); }
table td { border: none !important;}
.table thead th { color: var(--color-muted); }
.table.is-striped tbody tr:not(.is-selected):nth-child(even) { background-color: rgba(255,255,255,0.02); }
.content table thead th {color: var(--color-text)}

.table-wrap {overflow-x: auto}

table {
  --tbl-head-bg: color-mix(in srgb, var(--color-white) 30%, var(--color-bg));
  --tbl-even-bg: color-mix(in srgb, var(--color-white) 30%, var(--color-bg));
  --tbl-hover-bg: color-mix(in srgb, var(--color-secondary) 12%, transparent);
}

/* Forms */
.input,
.textarea,
.select select {
  background-color: var(--color-elevated);
  color: var(--color-text);
  border-color: var(--color-border);
  border-radius: var(--radius);
  height: var(--control-height);
}
.input::placeholder,
.textarea::placeholder { color: var(--color-muted); }
.input:focus,
.textarea:focus,
.select select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 .2rem rgba(23,176,29,.35);
  outline: none;
}

/* Tabs (underline) */
.tabs a { border-color: var(--color-border); color: var(--color-text); }
.tabs li.is-active a { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* Tabs (boxed) */
.tabs.is-boxed a { border: 1px solid var(--color-border); background-color: var(--color-elevated); color: var(--color-text); border-bottom-color: transparent; }
.tabs.is-boxed li.is-active a { background-color: var(--color-primary); color: var(--color-on-accent); border-color: var(--color-primary); }

/* Footer */
.footer { background-color: var(--color-bg-footer); color: var(--color-text-footer); border-top: 1px solid var(--color-border); }
.footer .menu-list a { background-color: transparent; color: var(--color-text-footer); padding: 0.5em 0.75em;}
.footer .menu-list a:hover { background-color: transparent; color: white; text-decoration: underline; }
.footer .menu-list { display: flex; justify-content: center; flex-wrap: wrap;}
.footer .column.menu {margin: 0 auto;}
.footer .column {width: 100%}

#footer-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-lang-switcher,
.footer-lang-switcher a { color: var(--color-text-footer); text-decoration: none;
    font-weight: bold;
    font-size: 1.2rem;}

.footer .footer-main {
  flex-direction: column-reverse;
  display: flex;
  text-align: center;
}

.social-links svg {fill: var(--color-text-footer)}

.footer .age-limit {
  border: 4px solid #777;
    border-radius: 50px;
    width: 4rem;
    padding: 0.5rem;
    font-size: 1.2rem;
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0;
    top: 0rem;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color .2s, color .2s;
}

/* Tag / Badge */
.tag { background-color: var(--color-primary); color: var(--color-on-accent); border-radius: 9999px; }

/* Notification (alerts) */
.notification { background-color: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius); }
.notification.is-success { background-color: rgba(34,197,94,.15); color: var(--color-success); border-color: var(--color-success); }
.notification.is-warning { background-color: rgba(245,158,11,.15); color: var(--color-warning); border-color: var(--color-warning); }
.notification.is-danger { background-color: rgba(239,68,68,.15); color: var(--color-danger); border-color: var(--color-danger); }
.notification.is-info { background-color: rgba(6,182,212,.15); color: var(--color-primary-light); border-color: var(--color-primary-light); }

/* Modal */
.modal-background { background-color: rgba(0,0,0,.6); }
.modal-card,
.modal-content { background-color: var(--color-elevated); color: var(--color-text); border-radius: var(--radius); box-shadow: var(--shadow-lg); }

/* Pagination */
.pagination-link,
.pagination-previous,
.pagination-next { color: var(--color-text); border-color: var(--color-border); border-radius: var(--radius); }
.pagination-link.is-current { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-accent); }

/* Breadcrumb */
.breadcrumbs {
  padding: 0;
  font-size: 14px;
}

.breadcrumbs ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  color: var(--color-text);
}

.breadcrumbs li a {
  color: var(--color-text);
  text-decoration: none;
  transition: opacity 0.15s;
}

.breadcrumbs li a:hover {
  opacity: 0.7;
  text-decoration: underline;
}

.breadcrumbs li::after {
  content: "›";
  margin-left: 6px;
  margin-right: 6px;
  color: var(--color-text);
}

.breadcrumbs li.current {
  font-weight: 600;
  color: var(--color-text);
}

.breadcrumbs li.current::after {
  content: "";
}

/* Dropdown */
.dropdown-content { background-color: var(--color-elevated); color: var(--color-text); border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); }
.dropdown-item { color: var(--color-text); }
.dropdown-item:hover { background-color: var(--color-surface); color: var(--color-text); }
.dropdown-item.is-active { background-color: var(--color-primary); color: var(--color-on-accent); }
.dropdown-divider { background-color: var(--color-border); }

/* Menu (sidebar) */
.menu { color: var(--color-text); }
.menu-label { color: var(--color-muted); }
.menu-list a { color: var(--color-text); border-radius: var(--radius); padding-left: 0; }
.menu-list a.is-active { background-color: var(--color-primary); color: var(--color-on-accent); }

/* Panel */
.panel { background-color: transparent; border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-text); }
.panel-heading { background-color: var(--color-elevated); color: var(--color-text); border-bottom: 1px solid var(--color-border); border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.panel-block { color: var(--color-text); border-top: 1px solid var(--color-border); }
.panel-tabs a { border-bottom-color: var(--color-border); color: var(--color-text); }
.panel-tabs a.is-active { border-bottom-color: var(--color-primary); color: var(--color-primary); }

/* Sections */
.section { padding-block: var(--section-pad-y); }

/* gallery.css */
.gallery-grid {
  display: grid;
  gap: var(--gap, .75rem);
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
}
@media (min-width: 769px) {
  .gallery-grid {
    grid-template-columns: repeat(var(--cols-tablet, var(--cols)), minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(var(--cols-desktop, var(--cols-tablet, var(--cols))), minmax(0, 1fr));
  }
}

.gallery-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: var(--corner-radius, var(--image-radius));
  aspect-ratio: var(--ratio, auto);
}
.gallery-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Логотипы fl_* в gallery-сетке: компактная полоса без растягивания */
.gallery-grid .gallery-card:has(img[src*="/assets/img/fl_"]) {
  aspect-ratio: auto;
}
.gallery-grid .gallery-card img[src*="/assets/img/fl_"] {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 52px;
  margin-inline: auto;
  object-fit: contain;
  aspect-ratio: auto;
}
.gallery-caption {
  left: 0; right: 0; bottom: 0;
  padding: 12px 14px;
  color: var(--color-black);
  background-color: rgba(255,255,255, 0.7);
  display: none;
}
.gallery-caption::before {
  content: "";
  position: absolute;
  inset: -40px 0 0 0;      /* мягкий градиент сверху подписи */
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
  z-index: -1;
}
.gallery-title { margin: 0 0 4px; font-weight: 700; line-height: 1.1; }
.gallery-desc  { margin: 0; opacity: .85; display: none}

/* Кнопка по центру */
.gallery-hover-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0;

  padding: 0.75rem 1.5rem;
  color: #fff;
  background: linear-gradient(135deg, #ff4d4d, #ff1f75);
  border-radius: var(--button-radius);
  font-weight: 600;
  text-decoration: none;
  font-size: 1.1rem;

  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none; /* не кликается пока скрыто */
}

/* Всплытие при наведении */
.gallery-card:hover .gallery-hover-btn {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
  z-index: 1;
}

/* Дополнительный эффект затемнения */
.gallery-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  transition: opacity .3s ease;
}

.gallery-card:hover::after {
  opacity: 1;
}

/* --- Game gallery slider (hero): column strips + horizontal scroll --- */
.gallery-slider-scope {
  width: 100%;
}

.hero-gallery-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.hero-gallery-toolbar .hero-games-title {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.section-gallery-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.gallery-slider-nav.is-hidden {
  display: none;
}

.gallery-slider-nav {
  display: inline-flex;
  gap: 0.45rem;
  flex-shrink: 0;
}

.gallery-slider-btn.gallery-slider-btn,
.button.gallery-slider-btn {
  box-sizing: border-box;
  width: 2.25rem;
  height: 2.25rem;
  min-height: unset;
  padding: 0;
  padding-bottom: 3px;
  border: 2px solid var(--color-text, currentColor);
  background: transparent;
  color: var(--color-text, currentColor);
  border-radius: 4px;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0.95;
  text-decoration: none;
}

.gallery-slider-btn:disabled {
  opacity: 0.32;
  cursor: default;
  pointer-events: none;
}

.gallery-slider__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.gallery-slider__viewport::-webkit-scrollbar {
  display: none;
}

.gallery-slider__track {
  display: inline-flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--gap, 0.75rem);
}

.gallery-slider__col {
  display: flex;
  flex-direction: column;
  gap: var(--gap, 0.75rem);
}

/* базовый слой — использует переменные, чтобы легко менять тему */
.md-tables table{border-collapse:collapse;width:100%; border-radius: var(--radius); margin-bottom: 20px;}
.md-tables th,.md-tables td{
  border:var(--tbl-border-width,1px) solid var(--tbl-border-color,#ddd);
  padding:var(--tbl-cell-py,.75rem) var(--tbl-cell-px,.75rem);
  vertical-align:top
}
.md-tables thead th{background:var(--tbl-head-bg,transparent)}
.md-tables tbody tr:nth-child(odd){background:var(--tbl-odd-bg,transparent)}
.md-tables tbody tr:nth-child(even){background:var(--tbl-even-bg,transparent)}
.md-tables tbody tr:hover{background:var(--tbl-hover-bg,inherit)}
.md-tables table{overflow:hidden}
.md-tables table img {
  max-height: 40px;
}

/* ----------- BLOCKQUOTE --------------- */

/* ========================================================================
   💬 BLOCKQUOTE STYLES
   ======================================================================== */

/* Base */
blockquote {
  margin: 2rem 0;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  font-style: italic;
  background: var(--color-surface);
  color: var(--color-text);
  border-left: 4px solid var(--color-primary);
  box-shadow: var(--shadow-sm);
}
blockquote p {
  margin: 0;
}



.rich-text img {border-radius: var(--image-radius);}

/* ========================================================================
   📋 LIST STYLES (Scoped: .list-* wraps .rich-text)
   ======================================================================== */

/* ───────────────────────────────
   BASE STYLES FOR .rich-text LISTS
   ─────────────────────────────── */
.rich-text ul,
.rich-text ol {
  padding-left: 1.5rem;
  margin-left: 0;
  margin-block: var(--space-4);
}

.rich-text li {
  margin-block: 0.5rem;
  line-height: var(--line-normal);
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/*───────────────────────────────*/
/*───────────────────────────────*/

/*───────────────────────────────*/
/*───────────────────────────────*/

/*───────────────────────────────*/
/*───────────────────────────────*/

/*───────────────────────────────*/
/*───────────────────────────────*/

/*───────────────────────────────*/
/*───────────────────────────────*/

/*───────────────────────────────*/
/*───────────────────────────────*/

/*───────────────────────────────*/
/*───────────────────────────────*/

/*───────────────────────────────*/
/*───────────────────────────────*/

/* добавляем reset только для нумерованных списков */

/* здесь добавляем counter-increment — вот его и не хватало */

/* Sticky нижняя панель (promo + CTA), как backToTop — после scrollThreshold */
#stickyCtaBar.sticky-cta-bar {
  position: fixed;
  z-index: 19;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem 2rem;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  background-color: #000;
  box-sizing: border-box;
  display: none;
  align-items: center;
  justify-content: center;
}
#stickyCtaBar.sticky-cta-bar.is-visible {
  display: flex;
  z-index: 100;
}
#stickyCtaBar .sticky-cta-bar__buttons {
  position: static;
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
#stickyCtaBar .promo {
  font-weight: bold;
  text-align: left;
  font-size: 1rem;
  line-height: 1.3;
  flex: 1 1 1rem;
  color: #fff !important;
  max-width: fit-content;
}

#stickyCtaBar .promo * {
  color: #fff !important;
}
body.has-sticky-cta main {
  padding-bottom: max(6rem, calc(5rem + env(safe-area-inset-bottom)));
}
#stickyCtaBar.is-visible ~ #backToTop {
  bottom: calc(9rem + env(safe-area-inset-bottom, 0px));
}

#backToTop {    border: none;
    position: fixed;
    z-index: 20;
    bottom: 20px;
    right: 20px;
    border-radius: var(--radius);
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 0;
    background: rgb(130, 130, 130, 0.8); border-radius: var(--radius)}
.box {background-color: unset;}
/* ---------------  FAQ LIST  --------------- */
.faq .faq-list .box {border-radius: var(--radius); background-color: rgb(150, 150, 150, 0.5); color: var(--color-text);
  cursor: pointer;}
.faq .faq-list .box summary {font-weight: bold; font-size: 1.1rem}
.faq .faq-list .box .content {padding-top: 1rem};
.faq-list summary::after {
  content:"+";
  font-size:1.25rem;
  font-weight:bold;
  transition:transform .2s;
}
details[open] summary::after { content:"−"; }
details summary::after { content:"+"; }
/* ------------- STEPS LIST ------------------ */

ol.steps-list {
  margin-inline-start: unset;
}
.steps-list {
  counter-reset: step-counter;
  list-style: none;
  padding-left: 0;
}
.step-item {
  position: relative;
  padding-left: 3rem;
  margin-bottom: 2rem;
  border-radius: var(--radius);
}
.step-item::before {
  content: counter(step-counter);
  counter-increment: step-counter;
  position: absolute;
  left: 0.5rem;
  top: 1rem;
  background: var(--color-secondary);
  color: var(--color-text-button-secondary);
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.step-item img{
  border-radius: var(--image-radius);
  max-height: 500px;
      width: auto;
    margin: 0 auto;
}

.step-item .step-text {
  color: var(--color-text);
}

section.section.steps .content {
  padding: 1rem;
}

/* ------------- CTA BANNER ------------------ */

.cta-banner .cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: rgb(130,130,130, 0.5);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  font-family: var(--font-base);
  transition: background var(--transition);
}

.cta-banner .cta-text {
  font-size: var(--font-size-1);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-normal);
  flex: 1;
}

.cta-banner .cta-buttons {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}

/* ------------- INFO BANNER ------------------ */

/* Базовый контейнер */
.info-box .info-inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius);
  background-color: rgb(150,150,150, 0.4);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.2);
  font-family: var(--font-base);
  font-size: var(--font-size-2);
  color: var(--color-text);
  line-height: var(--line-normal);
}

/* Текст */
.info-box .info-text {
  flex: 1;
}

.info-box .info-text p {
  margin: 0;
}

/* Иконки */
.info-box .info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  border-radius: 50%;
}

/* 🟢 YES */
.info-yes .info-icon {
  background: #28a745;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}

/* 🔴 NO */
.info-no .info-icon {
  background:  #d93025;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}
.two-columns .info-card {
  height: 100%;
  border-radius: var(--radius);
  padding: var(--space-5);
  transition: all 0.25s ease;
  font-family: var(--font-base);
  color: var(--color-text);
}

.two-columns .info-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.info-card-image img {
  height: auto;
}

.info-card-title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-3);
}

.info-card-text ul {
  list-style-type: disc;
  padding-left: 1.25em;
}

.info-card-text li {
  margin: 0.3em 0;
}

.info-card-button {
  text-align: left;
}
/* ------------- BANNER ------------------ */

.banner-wrapper {
  overflow: hidden;
  border-radius: var(--image-radius);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition), box-shadow var(--transition);
  max-width: 450px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  max-width: 100%
  margin: 0;
}

.banner-wrapper:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.banner-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: inherit;
}

.banner-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* ------------- IMAGE-BLOCK ----------------- */
.image-block .image-block-wrapper {
  width: max-content;
  margin: 0 auto;
  max-width: 450px;
  border-radius: var(--image-radius);
  overflow: hidden;
}

@media (max-width: 768px) {
 .image-block .image-block-wrapper {
    max-width: 100%;
 } 
}

.image-block img.image-block-img {
  width: 100%;
  display: block;
}

.image-block .image-block-desc {
  background-color: rgb(130,130,130,0.5);
  color: var(--color-text);
  padding: 1rem;
}

/* ------------- CTA BUTTON ------------------ */

.cta-button-wrapper {
  text-align: center;
  margin: var(--space-5) 0;
}

.cta-button {
  display: inline-block;
  padding: calc(var(--space-3) * 1.2) calc(var(--space-5) * 1.5);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-3);
  border-radius: var(--button-radius);
  background-color: var(--color-primary);
  color: var(--color-on-accent);
  text-transform: uppercase;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: var(--shadow-md);
  text-wrap: auto;
}

.cta-button.animated {
  transform-origin: center center;
  animation: cta-breathe 2.2s linear infinite;
  will-change: transform;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.cta-button.animated:hover {
  animation: none;
}

#site-contact-faux-form{
background-color: rgb(120, 120, 120, 0.4);
}

#site-contact-faux-form button{
margin-top: 1rem;
}

#site-contact-faux-form .input, #site-contact-faux-form .textarea {
    color: black !important;
}

#site-contact-faux-form .label, #site-contact-faux-form .textarea, #site-contact-faux-form .notification.is-success {
    color: var(--color-text);
}

/* ------------- AUTHOR CARD (синхрон с templates/uk-atlantic) ------------------ */
.author-card-section__title {
  margin-bottom: var(--space-5);
  color: var(--color-text);
}

.author-card {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 1.75rem);
  align-items: flex-start;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--color-muted) 35%, transparent);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
}

.author-card__media {
  flex: 0 0 auto;
}

.author-card__photo {
  display: block;
  width: clamp(112px, 28vw, 150px);
  height: clamp(112px, 28vw, 150px);
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--color-muted) 40%, transparent);
}

.author-card__body {
  flex: 1 1 1rem;
  min-width: 0;
}

.author-card__name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
}

.author-card__name {
  margin: 0;
  font-size: var(--font-size-4);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-tight);
  color: var(--color-text);
}

.author-card__verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #1d9bf0;
}

.author-card__verified-icon {
  width: 1.125rem;
  height: 1.125rem;
  display: block;
}

@media (min-width: 769px) {
  .author-card__verified-icon {
    width: 1.25rem;
    height: 1.25rem;
  }
}

.author-card__role {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-2);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-normal);
  color: var(--color-text);
}

.author-card__experience {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-1);
  line-height: var(--line-normal);
  color: var(--color-muted);
}

.author-card__bio {
  margin: 0;
  font-size: var(--font-size-1);
  line-height: var(--line-relaxed);
  color: var(--color-text);
}

.author-card__bio p:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
 .author-card {
  flex-direction: column;
  text-align: center;
  align-items: center;
 }

 .author-card__name-row {
  justify-content: center;
 }
}

/* Force-remove info box shadow across UK themes */
.info-box .info-inner {
  box-shadow: none !important;
}