/**
 * Бриф на перебудову мапи, Етап 2: off-canvas панель країни.
 *
 * Стилістика під наявну карту: темне тло, фіолетовий акцент.
 * Панель виїжджає справа поверх карти.
 */

/* Авторський display: flex нижче перекриває UA-правило [hidden] {display:none},
   тому атрибут hidden сам по собі панель не ховає — повертаємо це явно.
   Інакше блок висить над сторінкою зсунутим за правий край і може давати
   горизонтальне прокручування. */
.gcp[hidden],
.gcp-backdrop[hidden] {
  display: none;
}

.gcp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(10, 10, 20, 0.55);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gcp-backdrop.is-open {
  opacity: 1;
}

.gcp {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  width: 420px;
  max-width: 100vw;

  /* 100vh на мобільних браузерах — це висота вікна БЕЗ урахування
     адресного рядка, тому низ панелі (кнопки CTA) опинявся під ним.
     dvh рахує реально видиму область і змінюється разом зі згортанням
     адресного рядка. vh лишаємо першим як фолбек для старих браузерів:
     хто не знає dvh — просто проігнорує другий рядок. */
  height: 100vh;
  height: 100dvh;
  padding: 28px 26px 22px;

  /* Скролиться НЕ панель цілком, а тільки .gcp__body (див. нижче).
     Причини: 1) абсолютно спозиціонована .gcp__close при скролі
     самої панелі їхала вгору разом із вмістом; 2) .gcp__cta з
     margin-top: auto у скрол-контейнері виштовхувала себе за нижню
     межу і кнопки ставали недосяжними. */
  overflow: hidden;
  color: #e8e8f0;
  background: #16162a;
  border-left: 3px solid #7c3aed;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);

  /* Виїзд справа. transform, а не right — щоб анімація йшла
     на композиторі й не смикала розкладку карти під панеллю. */
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.gcp.is-open {
  transform: translateX(0);
}

.gcp__close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 26px;
  line-height: 1;
  color: #b9b9cc;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}

.gcp__close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* Шапка й підвал — фіксовані, стискатись не мають: тільки тіло скролиться. */
.gcp__head {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding-right: 40px;
  margin-bottom: 18px;
}

.gcp__flag {
  display: inline-flex;
  font-size: 28px;
  line-height: 1;
}

/* Локальні SVG-прапорці. border-radius і рамка — щоб білі прапори
   (Японія, Південна Корея) не зливалися з тлом картки. */
.gcp-flag-img {
  display: block;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* Контейнери прапорця не мають розтягуватись по висоті рядка.
   line-height: 0 прибирає простір під базову лінію, який inline-контекст
   резервує під літери — без цього блок вищий за саму картинку. */
/* Висота задана явно, а не через auto: контейнер прапорця — flex-елемент
   у рядку списку, і з auto він розтягувався до 71px при картинці 13px,
   через що рядок списку роздувався до 92px. Фіксована висота, що дорівнює
   висоті картинки, робить результат передбачуваним незалежно від того,
   що робить розкладка навколо.
   line-height: 0 прибирає простір під базову лінію, який inline-контекст
   резервує під літери. */
.gcp__flag,
.gambling-country-flag {
  display: inline-flex;
  flex: 0 0 auto;
  align-self: center;
  align-items: center;
  line-height: 0;
}

/* Розмір під 14px текст списку: висота прапорця ≈ висоті великої
   літери, а не всього рядка — інакше він візуально домінує над назвою. */
.gambling-country-flag {
  height: 13px;
}

.gambling-country-flag .gcp-flag-img {
  width: 17px;
  height: 13px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

/* У шапці панелі назва 24px — прапорець трохи більший, але нижчий
   за рядок заголовка. */
.gcp__flag {
  height: 18px;
}

.gcp__flag .gcp-flag-img {
  width: 24px;
  height: 18px;
}

.gcp__title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

.gcp__badge {
  flex-basis: 100%;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  width: fit-content;
  background: #3a3a52;
  color: #d5d5e4;
}

.gcp__badge.is-regulated {
  background: rgba(76, 175, 80, 0.18);
  color: #7ee08a;
}

.gcp__badge.is-gray {
  background: rgba(255, 193, 7, 0.18);
  color: #ffd257;
}

.gcp__badge.is-prohibited {
  background: rgba(244, 67, 54, 0.18);
  color: #ff8a80;
}

/* Тіло — копія вузлів прихованого <article>, тож стилізуємо
   звичайні ul/li/p, а не власні класи. */
.gcp__body {
  flex: 1 1 auto;
  font-size: 15px;
  line-height: 1.55;

  /* Скрол-область панелі.
     min-height: 0 обов'язковий: флекс-елемент за замовчуванням має
     min-height: auto і не стискається менше за свій вміст, через що
     довга картка країни просто вилазила за межі панелі й обрізалась
     замість того, щоб дати скрол.
     overscroll-behavior: contain не дає жесту, що доїхав до кінця
     списку, «перекинутись» на сторінку під панеллю. */
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.gcp__body ul {
  padding: 0;
  margin: 0 0 18px;
  list-style: none;
}

.gcp__body li {
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.gcp__body li strong {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9a9ab5;
}

/* Статуси по видах діяльності — компактна сітка замість стовпчика,
   інакше картка стає вдвічі довшою за рахунок шести однорядкових пунктів. */
.gcp__body .country-activities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  margin-bottom: 18px;
}

.gcp__body .country-activities li {
  padding: 7px 10px;
  font-size: 13px;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
}

.gcp__body .country-activities li strong {
  margin-bottom: 1px;
  font-size: 10px;
}

/* Колір мітки повторює логіку розфарбовування полігонів, щоб зв'язок
   між кольором країни на мапі й вмістом картки читався одразу. */
.gcp__body .country-activities li[data-status="regulated"] {
  box-shadow: inset 2px 0 0 #4caf50;
}

.gcp__body .country-activities li[data-status="partially_regulated"] {
  box-shadow: inset 2px 0 0 #9ccc65;
}

.gcp__body .country-activities li[data-status="unregulated"] {
  box-shadow: inset 2px 0 0 #ffc107;
}

.gcp__body .country-activities li[data-status="prohibited"] {
  box-shadow: inset 2px 0 0 #f44336;
}

.gcp__body p {
  margin: 0 0 14px;
  color: #cfcfe0;
}

.gcp__body p strong {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9a9ab5;
}

/* margin-top: auto прибрано свідомо. Раніше він притискав CTA до низу
   скрол-контейнера, але на довгому вмісті виштовхував себе за межу
   прокрутки. Тепер низ забезпечує .gcp__body з flex: 1 1 auto —
   на короткій картці тіло розтягується і CTA все одно внизу. */
.gcp__cta {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 18px;
  margin-top: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.gcp__btn {
  display: block;
  padding: 13px 18px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.gcp__btn--primary {
  color: #fff;
  background: #7c3aed;
}

.gcp__btn--primary:hover {
  color: #fff;
  background: #8b5cf6;
}

.gcp__btn--ghost {
  color: #d5d5e4;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.gcp__btn--ghost:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}

/* Блокування прокрутки сторінки, поки панель відкрита.
   position: fixed, а не overflow: hidden на body: iOS Safari ігнорує
   overflow: hidden на body і продовжує тягнути сторінку під панеллю.
   Позицію прокрутки JS запам'ятовує в body.style.top і повертає
   при закритті, тому «стрибка» вгору не буде.
   Компенсацію ширини скролбара (щоб десктопна верстка не смикнулась,
   коли смуга зникає) JS дописує інлайновим padding-right. */
body.gcp-scroll-lock {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

/* Видимий фокус для клавіатури. Панель модальна, фокус усередині неї
   циклить — без явного кільця незрозуміло, де ти зараз. */
.gcp__close:focus-visible,
.gcp__btn:focus-visible,
.gcp__body a:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .gcp {
    width: 100%;
    padding: 22px 18px 18px;
    border-left: 0;
    border-top: 3px solid #7c3aed;

    /* Домашній індикатор iPhone / нижня панель жестів перекривають
       останні ~34px. Без цього нижня CTA-кнопка частково під ними. */
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
}

/* Прибираємо анімацію тим, хто просив менше руху.
   ВАЖЛИВО: вимикається лише transition. Клас .is-open і далі ставить
   transform: translateX(0), тому панель миттєво стає видимою, а не
   лишається за правим краєм екрана. */
@media (prefers-reduced-motion: reduce) {
  .gcp,
  .gcp-backdrop {
    transition: none;
  }
}