/* ============================================================================
   PostPort — общая тёмная неон-тема («Ночной Батуми»)
   Палитра и типографика взяты из index.html (боевой лендинг).

   КАК ПОДКЛЮЧАТЬ: <link rel="stylesheet" href="css/postport-theme.css"/>
   строго ПОСЛЕ inline-<style> страницы — тема переопределяет светлые токены
   каскадом (та же специфичность, но позже по порядку).

   ВАЖНО: тема НЕ меняет геометрию компонентов и НЕ трогает классы-хуки JS
   (.screen, .lang-btn, .locker-card, .selected, .active, .show и т.д.) —
   только цвета, тени и шрифты.
   ========================================================================== */

/* ───────────────────────── 1. Токены: светлые → тёмные ─────────────────── */
:root{
  /* бренд-акценты (как на лендинге) */
  --teal:      #14d9c4;
  --teal-dark: #0fb8a6;
  --teal-deep: #14d9c4;                    /* на тёмном «глубокая» бирюза = яркая */
  --teal-soft: rgba(20,217,196,.10);       /* мягкая бирюзовая подложка */
  --lime:      #9be15d;
  --grad:      linear-gradient(90deg, #14d9c4 0%, #9be15d 100%);

  /* текст */
  --text:  #eaf4f1;
  --ink:   #eaf4f1;
  --muted: #8da39d;
  --hint:  #5c6f6a;

  /* поверхности */
  --bg:    #07090b;
  --card:  #10151a;
  --line:  #1f2a28;

  /* статусные */
  --red:        #ff7a6e;
  --red-bg:     rgba(255,99,88,.12);
  --red-line:   rgba(255,99,88,.35);
  --green:      #9be15d;
  --green-bg:   rgba(155,225,93,.12);
  --amber:      #ffb86b;
  --amber-bg:   rgba(255,184,107,.10);
  --amber-line: rgba(255,184,107,.30);
  --sky:        #6fc7ff;
  --sky-bg:     rgba(111,199,255,.12);
  --blue:       #8ab0ff;
  --blue-bg:    rgba(138,176,255,.12);

  /* тени на тёмном — глубже и мягче */
  --shadow:    0 14px 34px rgba(0,0,0,.45);
  --shadow-sm: 0 6px 18px rgba(0,0,0,.35);
}
html{color-scheme:dark}

/* фон страницы: лёгкое бирюзовое свечение сверху, как на лендинге */
body{
  background:
    radial-gradient(900px 500px at 50% -150px, rgba(20,217,196,.07), transparent 60%),
    var(--bg);
  color:var(--text);
}
::selection{background:var(--teal); color:#06231f}

/* ───────────────────────── 2. Грейн (чистый CSS, без three.js) ─────────── */
.pp-grain{
  position:fixed; inset:-25%; z-index:0; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='300' height='300' filter='url(%23n)' opacity='0.7'/></svg>");
  animation:ppGrain 8s steps(10) infinite;
}
@keyframes ppGrain{
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-10%,4%)}
  40%{transform:translate(-4%,12%)} 60%{transform:translate(12%,0)} 80%{transform:translate(3%,12%)}
}
/* контент страниц поверх грейна.
   ВАЖНО: nav сюда не включаем — у страниц он position:sticky,
   и его собственный z-index (100/200) уже выше грейна. */
.hero, .hero-wrap, .container, .page, .search-wrap, .results,
.spinner, .empty-state, footer{position:relative; z-index:1}

/* ───────────────────────── 3. Шрифты заголовков (Unbounded) ────────────── */
.screen-title, .success-title, .hero-card h1, .main-title,
.err-title, .done-title, .state-title, .expired-title{
  font-family:'Unbounded','Manrope','Noto Sans Georgian',system-ui,sans-serif;
  font-weight:700; letter-spacing:-.01em;
}

/* ───────────────────── 3a. Анимированный логотип (как на лендинге) ────── */
.logo svg, .nav-logo svg{height:44px; width:auto; display:block}
.logo .c, .nav-logo .c{
  animation:ppCellWave 2.8s linear infinite;
  transform-origin:center; transform-box:fill-box;
}
@keyframes ppCellWave{
  0%, 28%, 100%{opacity:.5}
  8%{opacity:1}
}
.logo .c1, .nav-logo .c1{animation-delay:0s}
.logo .c2, .nav-logo .c2{animation-delay:.18s}
.logo .c3, .nav-logo .c3{animation-delay:.36s}
.logo .c6, .nav-logo .c6{animation-delay:.54s}
.logo .c9, .nav-logo .c9{animation-delay:.72s}
.logo .c8, .nav-logo .c8{animation-delay:.9s}
.logo .c7, .nav-logo .c7{animation-delay:1.08s}
.logo .c4, .nav-logo .c4{animation-delay:1.26s}
.logo .c5, .nav-logo .c5{
  animation:ppCellCenter 2.8s cubic-bezier(.16,1,.3,1) infinite;
  animation-delay:1.5s;
}
@keyframes ppCellCenter{
  0%, 40%, 100%{opacity:.75; transform:scale(1)}
  12%{opacity:1; transform:scale(1.22)}
  24%{opacity:1; transform:scale(1)}
}
@media (prefers-reduced-motion: reduce){
  .logo .c, .nav-logo .c{animation:none}
}

/* ───────────────────────── 4. Шапка ────────────────────────────────────── */
nav, .nav{
  background:rgba(7,9,11,.65) !important;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06) !important;
}
.logo, .nav-logo{color:var(--text)}
.logo-box{
  background:linear-gradient(135deg,#14d9c4 0%,#0a8d7e 100%);
  color:#04201c;
  box-shadow:0 0 18px rgba(20,217,196,.35);
}
/* переключатель языков — флажки, как на лендинге.
   Внутри кнопки остаётся скрытый текст (KA/RU/EN): JS страниц подсвечивает
   активную кнопку по textContent — НЕ удалять .lang-txt из разметки! */
.lang-btns{background:rgba(16,21,26,.9); border-color:var(--line); border-radius:10px}
.lang-btn{
  color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  padding:4px 6px; min-height:0; line-height:0; border-radius:6px;
}
.lang-btn svg{
  width:22px; height:15px; border-radius:3px; display:block;
  box-shadow:0 0 0 1px rgba(255,255,255,.12);
  opacity:.5; transition:opacity .2s, transform .2s;
}
.lang-btn:hover svg{opacity:.9; transform:translateY(-1px)}
.lang-btn.active{background:transparent; box-shadow:none}
.lang-btn.active svg{opacity:1; box-shadow:0 0 0 2px var(--teal)}
.lang-txt{display:none}

/* ───────────────────────── 5. Кнопки ───────────────────────────────────── */
/* геометрию каждой страницы не трогаем — только неоновая заливка/контраст */
.btn-primary, .btn-search, .btn-copy{
  background:linear-gradient(135deg,#14d9c4 0%,#0a8d7e 100%) !important;
  color:#04201c !important;
  box-shadow:0 0 24px rgba(20,217,196,.30), 0 10px 26px -6px rgba(0,0,0,.6);
}
.btn-primary:hover:not(:disabled), .btn-search:hover:not(:disabled), .btn-copy:hover{
  background:linear-gradient(135deg,#2ae6d2 0%,#0fa392 100%) !important;
  box-shadow:0 0 36px rgba(20,217,196,.5), 0 14px 32px -6px rgba(0,0,0,.7);
}
.btn-primary .spin, .btn-search .spin{
  border-color:rgba(4,32,28,.3); border-top-color:#04201c;
}
.btn-outline{
  background:rgba(255,255,255,.04); color:var(--teal);
  border-color:var(--line);
}
.btn-outline:hover{border-color:var(--teal); color:var(--teal)}
.btn-back{background:var(--card); color:var(--muted); border-color:var(--line); box-shadow:none}
.btn-back:hover{color:var(--text); border-color:var(--teal)}
.btn-dev{background:var(--card); color:var(--amber); border-color:var(--amber-line)}
*:focus-visible{outline-color:rgba(20,217,196,.6)}

/* ───────────────────────── 6. Карточки и поля ──────────────────────────── */
.skeleton{
  background:linear-gradient(90deg,#10151a 25%,#1a2227 50%,#10151a 75%);
  background-size:200% 100%;
}
.size-card.selected .size-icon{background:rgba(20,217,196,.16)}
.card-header{background:#0d1217 !important}
.code-box{border-color:var(--line)}
.code-box .code-value{color:var(--text)}
.progress-step.done{border-color:rgba(20,217,196,.35)}
.progress-step.active{background:var(--teal-dark); color:#04201c; border-color:var(--teal-dark)}
#toast{background:var(--card); color:var(--text); border:1px solid var(--line)}

/* QR остаётся на белой подложке — сканеру нужен контраст */
.qr-block{background:#fff; border-color:rgba(255,255,255,.18)}

/* статусные иконки (inline-SVG в разметке) — перекрашиваем через CSS */
.done-icon svg path, #screen-done svg path{stroke:var(--green)}
.done-icon svg circle, #screen-done svg circle{fill:rgba(155,225,93,.12)}
#screen-expired svg circle:first-child{fill:rgba(255,184,107,.10)}
#screen-expired svg circle + path, #screen-expired svg circle:nth-of-type(2){stroke:var(--amber)}
#screen-expired svg path{stroke:var(--amber)}
#screen-notready svg rect, #screen-notready svg line{stroke:var(--amber)}
#screen-notready svg circle{fill:rgba(255,184,107,.08)}
#screen-notready svg rect[fill]{fill:var(--amber); stroke:none}

/* герой-карточки (booking steps / status hero) — бирюзовый градиент бренда */
.hero, .hero-card{
  box-shadow:0 0 34px rgba(20,217,196,.22), 0 14px 34px rgba(0,0,0,.5);
}

/* подписи цен внутри брони оставляем моноширинными и яркими */
.size-price, .crow.price .val, .cell-row .val{color:var(--teal)}

/* футер */
footer{color:var(--muted)}
footer a{color:var(--teal)}

@media (prefers-reduced-motion: reduce){
  .pp-grain{animation:none}
}