/* ===== Neon Night London theme (unique) ===== */
/* Palette: midnight plum + indigo + neon cyan + hot pink + amber spark */
:root{
  --bg:#0b0416;
  --bg2:#0f0a20;
  --panel:rgba(18,9,40,.6);
  --glass:rgba(255,255,255,.07);
  --card:#140a2d;
  --text:#eef0ff;
  --muted:#b9b4d6;
  --cyan:#5af2ff;
  --pink:#ff4fd8;
  --amber:#ffd166;
  --border:rgba(255,255,255,.12);
  --ring:rgba(90,242,255,.33);
  --shadow:0 25px 70px rgba(0,0,0,.55);
}

html{font-size:17px}
*{box-sizing:border-box}
body.uknx-body{
  margin:0; color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(60% 60% at 8% -10%, rgba(255,79,216,.2), transparent 60%),
    radial-gradient(50% 50% at 95% -5%, rgba(90,242,255,.2), transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  line-height:1.6;
}
a{color:var(--cyan); text-decoration:none} a:hover{opacity:.92}
img{display:block; max-width:100%; height:auto}

.uknx-wrap{max-width:1160px; margin-inline:auto; padding:0 1rem}
.uknx-section{padding:4rem 0}
.h2{font-size:1.95rem; margin:0 0 1rem}
.h3{font-size:1.2rem; margin:0 0 .75rem}

/* Buttons: cyan→pink gradient */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.9rem 1.15rem; border-radius:14px; font-weight:800; color:#0c0720;
  background:linear-gradient(135deg,var(--cyan),var(--pink));
  border:1px solid rgba(255,79,216,.35);
  box-shadow:var(--shadow);
}
.btn--ghost{background:transparent; color:var(--text); border:1px solid var(--border)}
.btn:focus{outline:none; box-shadow:0 0 0 6px var(--ring)}

/* Ribbon */
.uknx-ribbon{
  display:flex; justify-content:center; gap:.75rem; padding:.55rem 1rem; font-size:.9rem;
  color:#f1eaff; background:linear-gradient(90deg,#241046,#1b0c39); border-bottom:1px solid var(--border)
}
.uknx-ribbon .uknx-link{color:#fff; text-decoration:underline}

/* Header */
.uknx-header{position:sticky; top:0; z-index:40; backdrop-filter:blur(10px);
  background:linear-gradient(180deg,rgba(10,5,25,.85),rgba(10,5,25,.55)); border-bottom:1px solid var(--border)}
.uknx-header .uknx-wrap{display:flex; align-items:center; justify-content:space-between; height:68px}
.uknx-brand{display:inline-flex; align-items:center; gap:.6rem; font-weight:800; color:#fff}
.uknx-brand i{color:var(--amber)} .dot{color:var(--muted)}
.uknx-nav{display:flex; gap:1.25rem} .uknx-nav a{color:#efeaff}
.uknx-burger{display:none; background:transparent; border:0; color:#fff; font-size:1.15rem}

/* HERO */
.uknx-hero{position:relative; padding:5rem 0 3.6rem; overflow:hidden}
.uknx-hero__img{
  position:absolute; inset:0; background:url("../images/hero-london.jpg") center/cover no-repeat;
  filter:brightness(.55) saturate(1.1);
}
.uknx-hero__fx{position:absolute; inset:0; pointer-events:none}
.uknx-fx--blobs::before,
.uknx-fx--blobs::after{
  content:""; position:absolute; width:42vw; height:42vw; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,79,216,.45), transparent 60%),
             radial-gradient(circle at 70% 70%, rgba(90,242,255,.35), transparent 60%);
  filter:blur(40px); opacity:.35; animation:floaty 16s ease-in-out infinite alternate;
}
.uknx-fx--blobs::before{top:-10%; left:-10%}
.uknx-fx--blobs::after{bottom:-20%; right:-15%; animation-duration:18s}
@keyframes floaty{to{transform:translate3d(3%, -2%, 0) scale(1.05)}}

.uknx-fx--ring::before{
  content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px; border-radius:50%;
  background:conic-gradient(from 90deg, rgba(255,79,216,.9), rgba(90,242,255,.9), rgba(255,79,216,.9));
  -webkit-mask:radial-gradient(circle, transparent 64%, #000 65%);
  mask:radial-gradient(circle, transparent 64%, #000 65%); filter:blur(10px); opacity:.35; animation:spin 22s linear infinite;
}
@keyframes spin{to{transform:rotate(1turn)}}

.uknx-hero__grid{position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:2.2rem}
.eyebrow{letter-spacing:.08em; color:#dccccf; text-transform:uppercase; font-size:.8rem; opacity:.9}
.lead{color:#fff; text-shadow:0 2px 16px rgba(0,0,0,.3)}
.chips{list-style:none; padding:0; margin:0; display:flex; gap:.7rem; flex-wrap:wrap}
.chips li{border:1px solid var(--border); padding:.35rem .6rem; border-radius:999px; color:#f7eaff; background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03))}

.uknx-cardglass{
  position:relative; align-self:center; width:100%; max-width:450px; aspect-ratio:1.35/1;
  background:linear-gradient(180deg,var(--glass),rgba(255,255,255,.02)); border:1px solid var(--border);
  border-radius:18px; box-shadow:var(--shadow); overflow:hidden; backdrop-filter:blur(8px)
}
.uknx-cardglass .badge{position:absolute; top:12px; left:12px; background:rgba(255,209,102,.12); color:#ffeab9; padding:.35rem .6rem; border-radius:10px; font-size:.75rem; border:1px solid rgba(255,209,102,.35)}
.uknx-cardglass .lines{position:absolute; inset:auto 0 0; height:42%; background:linear-gradient(0deg,rgba(255,255,255,.08),transparent)}
.uknx-cardglass .dice{position:absolute; inset:0; display:grid; place-items:center; gap:1rem; grid-template-columns:repeat(2,1fr); opacity:.32; font-size:3.2rem}

/* OFFERS */
.uknx-section--striped{
  position:relative;
  background:
    radial-gradient(60% 60% at 8% -10%, rgba(255,79,216,.12), transparent 60%),
    linear-gradient(180deg,#0e0825,#0b071e);
  border-block:1px solid var(--border);
}
.grid-cards{display:grid; grid-template-columns:1fr 1fr; gap:1rem}

/* Offer Card with animated neon border */
.oc{
  position:relative; background:linear-gradient(180deg,rgba(22,8,52,.85),rgba(22,8,52,.65));
  border:1px solid var(--border); border-radius:18px; padding:1rem; box-shadow:var(--shadow); overflow:hidden;
}
.oc::before{
  content:""; position:absolute; border-radius:20px; padding:1px;
  background:linear-gradient(135deg, rgba(90,242,255,.9), rgba(255,79,216,.9), rgba(90,242,255,.9));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; animation:borderflow 6s linear infinite;
}
@keyframes borderflow{to{filter:hue-rotate(360deg)}}

.oc__head{display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:center}
.logo{height:56px; width:auto; border-radius:10px; background:#0c0720; padding:.4rem}
.title{display:inline-flex; align-items:center; gap:.5rem; font-weight:800; color:#fff}
.stars{display:flex; align-items:center; gap:.35rem; color:#ffd85e}
.stars .n{color:#fff; font-weight:800; margin-right:.25rem}
.pill{border:1px solid var(--border); padding:.25rem .6rem; border-radius:999px; color:#fbeaff; font-size:.8rem}
.desc{color:#e9e3ff}
.pay{display:flex; flex-wrap:wrap; gap:.6rem 1rem; list-style:none; padding:0; margin:.6rem 0 0}
.pay li{display:inline-flex; align-items:center; gap:.4rem; color:#f6ecff}
.rowcta{display:flex; gap:.6rem; margin:.95rem 0 .4rem}
.tnc{display:block; color:#cfc7ea}

/* SAFER PLAY */
.uknx-safe{
  padding:3.2rem 0;
  background:
    radial-gradient(60% 60% at 96% 0%, rgba(90,242,255,.12), transparent 60%),
    linear-gradient(180deg,#0b071e,#0c0720);
}
.safegrid{display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center}
.checks{list-style:none; padding:0; margin:0}
.checks li{display:flex; gap:.6rem; align-items:center; border-bottom:1px dashed var(--border); padding:.6rem 0}
.help p{margin:.2rem 0 1rem}
.help .logos{display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;}
.help .logos img{height:45px; width:auto; opacity:.85;}
.help .logos a:hover img{opacity:1; filter:none}

/* ABOUT + image column */
.aboutgrid{display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center}
.faq{border:1px solid var(--border); border-radius:12px; padding:.75rem; background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03)); margin:.6rem 0}
.faq summary{cursor:pointer; font-weight:800}
.faq p{color:#efeaff; margin:.4rem 0 0}
.sideimg{margin:0; border-radius:18px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); background:#0c0720}

/* FOOTER */
.uknx-footer{border-top:1px solid var(--border); background:#0a0618}
.uknx-footer .top{display:grid; gap:1rem; padding-top:2rem}
.brandline{display:flex; align-items:center; gap:.75rem}
.age{display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%; background:rgba(255,209,102,.12); color:#ffe7b0; border:1px solid rgba(255,209,102,.35); font-weight:800}
.legal{display:flex; flex-wrap:wrap; gap:1rem}
.uknx-footer .bottom{border-top:1px solid var(--border); color:#dcd6f3; padding:1rem 0 2rem}
.copy{opacity:.88}

/* AGE GATE (glass) */
.agegate{position:fixed; inset:0; background:rgba(6,3,16,.85); display:none; align-items:center; justify-content:center; z-index:100}
.agegate[aria-hidden="false"]{display:flex}
.agegate__dialog{
  width:min(560px,92vw);
  background:linear-gradient(180deg,var(--glass),rgba(255,255,255,.03));
  border:1px solid var(--border); border-radius:18px; padding:1.25rem; text-align:center; box-shadow:var(--shadow); backdrop-filter:blur(8px)
}
.agegate__icon{font-size:2rem; color:var(--amber); margin-bottom:.5rem}
.agegate__actions{display:flex; gap:.6rem; justify-content:center; margin:1rem 0}

/* Responsive */
@media (max-width:980px){
  .uknx-hero__grid{grid-template-columns:1fr}
  .grid-cards{grid-template-columns:1fr}
  .safegrid,.aboutgrid{grid-template-columns:1fr}
  .uknx-burger{display:inline-grid}
  .uknx-header .uknx-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
}
/* --- Spacing inside HERO left column --- */
.uknx-hero__copy{
  display:flex;            /* вертикальный стек */
  flex-direction:column;
  align-items:flex-start;
  gap: .9rem;              /* базовый отступ между всеми элементами */
}

/* Чуть больше воздуха на десктопе */
@media (min-width: 980px){
  .uknx-hero__copy{ gap: 1.1rem; }
}

/* Нормализуем индивидуальные поля, чтобы не «сложились» с gap */
.uknx-hero__copy .eyebrow{ margin: 0; }
.uknx-hero__copy h1{ margin: 0; line-height: 1.15; }
.uknx-hero__copy .lead{ margin: 0; }
.uknx-hero__copy .cta{ margin: 0; }
.uknx-hero__copy .chips{ margin: 0; }
/* === Yellow accent pack (buttons + lines) === */
:root{
  --y1:#FFE27A;           /* light yellow */
  --y2:#FFB800;           /* warm amber */
  --yGlow:rgba(255,184,0,.45);
}

/* primary button: yellow gradient */
.btn{
  color:#0c0720;
  background:linear-gradient(135deg,var(--y1),var(--y2));
  border:1px solid rgba(255,184,0,.45);
  box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(255,184,0,.18) inset;
}
.btn:hover{ filter:saturate(1.05) brightness(1.02); }
.btn:focus{ outline:none; box-shadow:0 0 0 6px var(--yGlow), 0 10px 30px rgba(0,0,0,.45); }

/* ghost-button: yellow border/text with subtle fill */
.btn--ghost{
  color:var(--y2);
  border-color:rgba(255,184,0,.55);
  background:linear-gradient(180deg,rgba(255,184,0,.10),rgba(255,184,0,.06));
}
.btn--ghost:hover{ background:linear-gradient(180deg,rgba(255,184,0,.16),rgba(255,184,0,.10)); }

/* hero chips: yellow outline */
.chips li{
  border-color:rgba(255,184,0,.35);
  color:#fff7d0;
}

/* decorative "glass" card line in hero: make it yellowish */
.uknx-cardglass .lines{
  background:linear-gradient(0deg,rgba(255,184,0,.16),transparent);
}
.uknx-cardglass .badge{
  background:rgba(255,184,0,.12);
  color:#ffeab9;
  border-color:rgba(255,184,0,.35);
}

/* section separators: soft yellow tint */
.uknx-section--striped{ border-block:1px solid rgba(255,184,0,.14); }
.uknx-footer{ border-top:1px solid rgba(255,184,0,.14); }

/* headings: yellow underline accent */
.h2{
  position:relative;
  padding-bottom:.35rem;
}
.h2::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:78px; height:3px; border-radius:999px;
  background:linear-gradient(90deg,var(--y2),transparent);
  box-shadow:0 0 16px rgba(255,184,0,.35);
}

/* star ratings: slightly warmer yellow */
.stars{ color:#ffd24d; }

/* optional: thin yellow glow for focusable nav links */
.uknx-nav a:focus{ outline:none; box-shadow:0 0 0 4px var(--yGlow); border-radius:10px }
/* Image inside the glass card (replaces dice icons) */
.uknx-cardglass .cardphoto{
  position:absolute; inset:0; margin:0; overflow:hidden;
}
.uknx-cardglass .cardphoto img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(1.05) contrast(1.05) brightness(.98);
  display:block;
}

/* лёгкая тёплая вуаль, чтобы текстовые бейджи читались */
.uknx-cardglass .cardphoto::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.18));
}

/* если хочешь жёлтый «низ» как линия света — оставить существующий .lines */
.uknx-cardglass .lines{
  background:linear-gradient(0deg, rgba(255,184,0,.16), transparent);
}
/* === Bigger brand logos in offer cards === */
.oc .logo{
  height: 80px;           /* было ~56px */
  padding: .5rem;         /* чуть больше «воздуха» */
  border-radius: 12px;    /* визуально массивнее */
}

@media (max-width: 1140px){
  .oc .logo{ height: 72px; }
}
@media (max-width: 980px){
  .oc .logo{ height: 64px; }
}
@media (max-width: 600px){
  .oc .logo{ height: 60px; }
}

/* Подправим выравнивание головы карточки под более крупный логотип */
.oc__head{
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 1.1rem;
}

/* Заголовок пусть переносится на 2 строки без налезания на логотип */
.titlebox .title{
  line-height: 1.15;
  word-break: break-word;
}

/* === Bigger trust/help logos in footer (eCOGRA, GAMSTOP, etc.) === */
.uknx-footer .help .logos img,
.uknx-logos img{
  height: 34px;           /* было ~28px */
}

@media (max-width: 980px){
  .uknx-footer .help .logos img,
  .uknx-logos img{ height: 30px; }
}
/* Full-width trust bar inside footer */
.trustbar{
  width:100%;
  padding: 1.25rem 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  /* если у тебя тёмная тема — можно слегка затемнить фон строки: */
  /* background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); */
}

.trustbar__title{
  margin:0 0 .75rem;
  text-align:center;
  opacity:.9;
}

/* responsive grid of logos */
.trustbar__logos{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap:.9rem 1rem;
  align-items:center;
  justify-items:center;
  padding: 0 1rem;
}

.trustbar__logos .org-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.35rem .5rem;
  border-radius:12px;
  /* optional subtle hover */
  transition: transform .2s ease, opacity .2s ease;
}
.trustbar__logos .org-badge:hover{ transform: translateY(-1px); opacity:.95; }

.trustbar__logos img{
  height:34px;            /* размер логотипов */
  width:auto;
  display:block;
  filter:grayscale(1);
  opacity:.9;
}

@media (max-width: 980px){
  .trustbar__logos img{ height:30px; }
}

/* если используешь мою жёлтую палитру-акцент — немного теплее границы */
.trustbar{ border-top-color: rgba(255,184,0,.14); border-bottom-color: rgba(255,184,0,.14); }
/* === Footer spacing & polish (override) === */

/* общий фон/рамка футера */
.uknx-footer{
  border-top: 1px solid var(--ft-border, rgba(255,255,255,.12));
  background: var(--ft-bg, #0a0618);
  color: var(--ft-ink, #eef0ff);
}

/* ВНУТРЕННИЕ ОТСТУПЫ: верхняя сетка */
.footer-grid{
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 2rem;
  padding: 2rem 1.25rem;      /* добавили паддинги */
}

/* левый блок: бренд */
.footer-brand{
  display: grid;
  align-content: start;
  gap: .75rem;                 /* чуть больше воздуха между элементами */
}
.footer-note{ margin: .25rem 0 0; opacity:.9 }

/* правый блок: колонки ссылок */
.footer-cols{
  display: grid;
  grid-template-columns: repeat(2, minmax(180px,1fr));
  gap: 1.25rem 2rem;
  padding: .25rem 0;           /* лёгкий внутренний отступ */
}
.footer-cols .col-title{
  margin: 0 0 .65rem;
  font-size: 1rem; font-weight: 800;
}
.footer-cols .col-list{
  list-style: none; margin: 0; padding: 0;
}
.footer-cols .col-list li{ margin: .5rem 0 }   /* ровные интервалы по пунктам */
.footer-cols a{
  color: inherit; text-decoration: none; border-bottom: 1px solid transparent;
}
.footer-cols a:hover{ border-bottom-color: currentColor; opacity:.95 }

/* ПОЛНОШИРИННАЯ ПОЛОСА ЛОГОТИПОВ */
.trustbar{
  padding: 1.25rem 1.25rem;    /* добавили внутренние отступы по краям и сверху/снизу */
  border-top: 1px solid var(--ft-border, rgba(255,255,255,.12));
  border-bottom: 1px solid var(--ft-border, rgba(255,255,255,.12));
  background:
    radial-gradient(60% 50% at 10% 0%, rgba(255,184,0,.06), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
}
.trustbar__title{
  margin: 0 0 1rem;            /* больше отступ под заголовком */
  text-align: center; opacity:.9
}
.trustbar__logos{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px,1fr));
  gap: 1rem 1.25rem;           /* ровные отступы между логотипами */
  align-items: center;
  justify-items: center;
  max-width: 1200px;           /* чтобы сетка не «растекалась» слишком широко */
  margin: 0 auto;              /* центрируем в полосе */
}
.trustbar__logos img{
  height: 36px; width:auto; display:block; filter:grayscale(1); opacity:.9
}

/* НИЖНЯЯ СТРОКА */
.uknx-footer .bottom{
  padding: 1.25rem 1.25rem 2rem;  /* добавили внутренние отступы */
  color: var(--ft-muted, #d2cdef);
  border-top: 1px solid var(--ft-border, rgba(255,255,255,.12));
}
.uknx-footer .copy{ margin-top:.35rem; opacity:.9 }

/* Адаптивные правки отступов */
@media (max-width: 980px){
  .footer-grid{ grid-template-columns: 1fr; padding: 1.5rem 1rem }
  .footer-cols{ grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem }
  .trustbar{ padding: 1rem } 
  .trustbar__logos img{ height: 32px }
  .uknx-footer .bottom{ padding: 1rem 1rem 1.5rem }
}
@media (max-width: 640px){
  .footer-cols{ grid-template-columns: 1fr }
  .trustbar__logos img{ height: 30px }
}
/* === Footer: third column with regional notice === */

/* делаем 3 колонки на десктопе */
.footer-cols{
  display:grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 1.25rem 2rem;
}

/* стиль для мелкого текста-предупреждения */
.footer-cols .fineprint{
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--ft-muted, #d2cdef);
}
.footer-cols .fineprint a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* аккуратные отступы у новой колонки */
.col-safety-note{ padding-right: .25rem; }

/* адаптив: на планшете две колонки, на мобиле одна */
@media (max-width: 980px){
  .footer-cols{ grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}
@media (max-width: 640px){
  .footer-cols{ grid-template-columns: 1fr; }
}
/* ===== Cookie Consent (ccuk-*) ===== */
.ccuk-banner{
  position: fixed; inset: auto 0 0 0; z-index: 60;
  background: #0a0618; color: #eef0ff; border-top:1px solid rgba(255,255,255,.12);
  box-shadow: 0 -16px 40px rgba(0,0,0,.35);
  padding:.9rem 1rem;
}
.ccuk-banner[hidden]{ display:none }
.ccuk-inner{ max-width:1160px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.ccuk-text p{ margin:.35rem 0 .5rem; color:#d2cdef }
.ccuk-link{
  background:none; border:0; padding:0; color:#FFB800; text-decoration:underline; text-underline-offset:2px; cursor:pointer;
}
.ccuk-actions{ display:flex; gap:.5rem; flex-wrap:wrap }
.ccuk-btn{
  appearance:none; border:1px solid rgba(255,184,0,.45);
  background:linear-gradient(135deg,#FFE27A,#FFB800); color:#0c0720; font-weight:800;
  padding:.7rem 1rem; border-radius:12px; cursor:pointer;
}
.ccuk-btn--ghost{
  background:transparent; color:#FFE27A; border-color:rgba(255,255,255,.25)
}

/* Modal */
.ccuk-modal[hidden]{ display:none }
.ccuk-modal{ position:fixed; inset:0; z-index:70; display:grid; place-items:center;
  background:rgba(10,6,24,.55); backdrop-filter: blur(4px);
}
.ccuk-modal__dialog{
  width:min(640px,94vw);
  background: #0e0a22; color:#eef0ff; border:1px solid rgba(255,255,255,.12); border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.6); padding:1rem 1rem 1.1rem; position:relative;
}
.ccuk-muted{ color:#c7c3de; margin:.4rem 0 1rem }
.ccuk-form{ display:grid; gap:.6rem }
.ccuk-row{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:.7rem .9rem; background:rgba(255,255,255,.03)
}
.ccuk-modal__actions{ display:flex; gap:.6rem; justify-content:flex-end; margin-top:.8rem }
.ccuk-x{
  position:absolute; top:.35rem; right:.6rem; font-size:1.8rem; line-height:1; background:none; border:0; color:#fff; opacity:.8; cursor:pointer;
}
@media (max-width:720px){
  .ccuk-inner{ flex-direction:column; align-items:flex-start }
  .ccuk-actions{ align-self:stretch; width:100% }
  .ccuk-actions .ccuk-btn{ flex:1 }
}
/* === 18+ popup — raspberry theme + visibility by class === */
:root{
  --raspberry: #ff2e86;
  --raspberry-2: #ff5aa3;
  --ink-dark: #0c0720;
  --modal-bg: #120b2a;
}

/* убираем управление через [hidden] — больше не используем */
.ageuk-mask{ 
  position:fixed; inset:0; background:rgba(255,46,134,.22);
  backdrop-filter: blur(5px); z-index:98;
  opacity:1; visibility:visible; transition:opacity .2s ease, visibility .2s ease;
}
.ageuk-modal{
  position:fixed; inset:0; display:grid; place-items:center; padding:1rem; z-index:99;
  opacity:1; visibility:visible; transition:opacity .2s ease, visibility .2s ease, transform .2s ease;
}
.ageuk-card{
  width:min(620px,94vw);
  background: radial-gradient(120% 100% at 0% 0%, rgba(255,46,134,.18), transparent 65%),
              var(--modal-bg);
  color:#eef0ff;
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  box-shadow: 0 28px 80px rgba(255,46,134,.28), 0 28px 80px rgba(0,0,0,.55);
  padding:1.15rem;
  text-align:center;
}
.ageuk-card h2{
  margin:.1rem 0 .45rem; font-size:1.38rem; line-height:1.2;
  text-shadow: 0 0 12px rgba(255,46,134,.35);
}
.ageuk-card p{ margin:0 0 .95rem; color:#d9d6ef }

.ageuk-actions{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-bottom:.6rem }
.ageuk-btn{
  border:1px solid rgba(255,255,255,.25);
  background: linear-gradient(135deg, #fff0a6, #ffd24d);
  color: var(--ink-dark); font-weight:800;
  padding:.78rem 1.05rem; border-radius:14px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; min-width:150px;
  box-shadow: 0 6px 18px rgba(255,210,77,.25);
}
.ageuk-btn--ghost{
  background: linear-gradient(135deg, var(--raspberry), var(--raspberry-2));
  color:#fff; border-color: transparent;
  box-shadow: 0 6px 18px rgba(255,46,134,.35);
}

.ageuk-help{ color:#c7c3de }
.ageuk-help a{
  color:#ffd24d; text-decoration:underline; text-underline-offset:2px;
}

/* состояние: скрыто (через класс) */
.ageuk-is-hidden .ageuk-mask,
.ageuk-is-hidden .ageuk-modal{
  opacity:0; visibility:hidden; pointer-events:none;
}
.ageuk-noscroll{ overflow:hidden; }

@media (max-width:560px){
  .ageuk-btn{ flex:1; }
}