/* Layout general: stânga liber (poză/text), dreapta panel fix (~1/4) */
.auth-layout{
  min-height: 100vh;
  display: flex;
  align-items: stretch;
}

/* STÂNGA (zona ta de poză + text) */
.auth-left{
  flex: 1;
  position: relative;
  overflow: hidden;
  /* Când ai poza:
     background: url('/img/poza.jpg') center/cover no-repeat;
  */
}

.auth-left::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,0.35), rgba(0,0,0,0.10) 55%, rgba(0,0,0,0.00));
  pointer-events:none;
}

.auth-left-inner{
  position: relative;
  z-index: 1;
  padding: 48px;
  max-width: 700px;
}

.auth-left-title{ margin:0 0 10px 0; }
.auth-left-text{ margin:0; opacity:0.85; }

/* DREAPTA (zona “un sfert din ecran”) */
.auth-right{
  width: clamp(320px, 25vw, 460px);
  padding: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Panel login */
.auth-panel{
  width: 100%;
  border-radius: 18px;
  padding: 26px 26px 18px 26px;

  background: rgba(20, 28, 40, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 12px 35px rgba(0,0,0,0.35);
}

.auth-top{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  margin-bottom: 18px;
  opacity: 0.9;
}

.auth-top-link{ text-decoration:none; }
.auth-top-link.active{ font-weight: 700; }
.auth-sep{ opacity: 0.5; }

.auth-title{ margin: 0 0 8px 0; }

.auth-form{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top: 18px;
}

.auth-form input{
  width:100%;
  border-radius: 12px;
  padding: 12px 14px;
}

.auth-actions{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top: 6px;
  flex-wrap:wrap;
}

.auth-foot{
  margin-top: 22px;
  opacity: 0.7;
  font-size: 14px;
}

/* Mobile */
@media (max-width: 900px){
  .auth-layout{ flex-direction: column; }
  .auth-left{ min-height: 260px; }
  .auth-right{ width: 100%; }
}
.auth-grid2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 900px){
  .auth-grid2{ grid-template-columns: 1fr; }
}
/* REGISTER: panel mai lung (cuprinde ecranul) */
.auth-right.auth-right-full{
  align-items: stretch; /* nu mai centrează vertical, îl întinde */
}

.auth-panel.auth-panel-full{
  min-height: calc(100vh - 52px); /* aproape full-screen (ține cont de paddingul din dreapta) */
  display: flex;
  flex-direction: column;
  justify-content: center; /* centrează conținutul în interior */
}

/* Efect “glass” + culorile RO/GB/ALB în fundal */
/* Efect “glass” + culori RO/GB/ALB mai vizibile */
.auth-panel.flag-glass{
  position: relative;
  overflow: hidden;

  /* mai transparent, dar cu contrast mai mare */
  background: rgba(10, 14, 22, 0.18);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
}

/* strat 1: benzi verticale (steag) */
.auth-panel.flag-glass::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;

  /* benzi: albastru / galben / roșu */
  background: linear-gradient(90deg,
    rgba(0, 70, 170, 0.42) 0%,
    rgba(0, 70, 170, 0.42) 33.33%,
    rgba(255, 205, 0, 0.38) 33.33%,
    rgba(255, 205, 0, 0.38) 66.66%,
    rgba(206, 17, 38, 0.38) 66.66%,
    rgba(206, 17, 38, 0.38) 100%
  );
}

/* strat 2: glow diagonal ca să pară “modern” */
.auth-panel.flag-glass::after{
  content:"";
  position:absolute;
  inset:-30%;
  pointer-events:none;
  border-radius: 40px;

  background: linear-gradient(135deg,
    rgba(0, 70, 170, 0.30),
    rgba(255, 205, 0, 0.22),
    rgba(206, 17, 38, 0.22)
  );
  opacity: 0.95;
  transform: rotate(8deg);
  filter: blur(18px);
}

/* conținutul peste straturi */
.auth-panel.flag-glass > *{
  position: relative;
  z-index: 1;
}

/* dacă vrei text și mai clar pe culori */
.auth-panel.flag-glass{
  color: rgba(255,255,255,0.95);
}
/* === CLARITATE PESTE FUNDALUL CU STEAG === */

/* Link-urile (sus și în pagină) să nu mai fie mov/implicit */
.auth-panel .auth-top-link,
.auth-panel .link{
  color: rgba(255,255,255,0.92);
  text-decoration: none;
}
.auth-panel .auth-top-link:hover,
.auth-panel .link:hover{
  text-decoration: underline;
}

/* Titluri și text mai clare peste culori */
.auth-panel .auth-title,
.auth-panel .muted,
.auth-panel{
  color: rgba(255,255,255,0.95);
}
.auth-panel .auth-title{
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}
.auth-panel .muted{
  opacity: 0.88;
  text-shadow: 0 1px 6px rgba(0,0,0,0.40);
}

/* Un “card” discret în spatele formularului, ca să se citească totul */
.auth-panel.flag-glass .auth-form{
  padding: 14px;
  border-radius: 14px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.10);
}

/* Inputuri clare (opace) */
.auth-panel .auth-form input{
  border-radius: 12px;
  padding: 12px 14px;

  background: rgba(10,14,22,0.82);         /* OPAC -> clar */
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.96);

  box-shadow: 0 6px 18px rgba(0,0,0,0.20) inset;
}

.auth-panel .auth-form input::placeholder{
  color: rgba(255,255,255,0.55);
}

.auth-panel .auth-form input:focus{
  outline: none;
  border-color: rgba(255,255,255,0.42);
  background: rgba(10,14,22,0.92);
}

/* Buton clar (nu transparent) */
.auth-panel .btn{
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(35, 90, 170, 0.88);
  color: rgba(255,255,255,0.98);
  padding: 10px 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}

.auth-panel .btn:hover{
  background: rgba(35, 90, 170, 0.98);
}

/* Flash mai lizibil */
.auth-panel .flash{
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(200, 60, 60, 0.28);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.98);
}

/* (opțional) dacă vrei culorile tot vizibile, dar mai “în spate” */
.auth-panel.flag-glass::before{ opacity: 0.85; }
.auth-panel.flag-glass::after{ opacity: 0.85; }
/* Mută mai jos meniul de sus (Login / Înregistrare) */
.auth-top{
  margin-top: 18px;      /* crește valoarea dacă le vrei și mai jos */
  margin-bottom: 18px;
}
/* Brand sus-stânga (permanent) */
.site-brand{
  position: fixed;
  top: 22px;
  left: 26px;
  z-index: 9999;

  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.2px;

  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}

/* Ca să nu se suprapună brandul peste conținutul din stânga */
.auth-left-inner{
  padding-top: 70px; /* reglezi dacă vrei mai jos/sus */
}

/* Imagine permanentă în zona mare din stânga */
.auth-hero-img{
  width: 100%;
  height: calc(100vh - 140px); /* ocupă aproape toată înălțimea */
  border-radius: 18px;

  /* aici pui imaginea */
  background-image: url("<?= /* dacă nu poți folosi PHP aici, vezi nota de mai jos */ "" ?>");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 45px rgba(0,0,0,0.35);
}

/* Dacă ai overlay (auth-left::after), îl facem mai discret ca să nu “omoare” imaginea */
.auth-left::after{
  background: linear-gradient(90deg, rgba(0,0,0,0.18), rgba(0,0,0,0.06) 55%, rgba(0,0,0,0.00));
}
/* ===== Friend Actions Popover (Prieteni) ===== */
.fa-overlay{
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 9998;
}

.fa-box{
  position: fixed;
  width: 280px;
  max-width: calc(100vw - 20px);
  background: rgba(10, 14, 22, 0.96);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
  z-index: 9999;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.fa-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px 12px 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.fa-title{
  font-weight: 800;
  font-size: 15px;
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fa-close{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
  cursor: pointer;
}

.fa-actions{
  padding: 10px;
  display: grid;
  gap: 8px;
}

.fa-btn{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.fa-btn:hover{
  background: rgba(255,255,255,0.10);
}

.fa-link{
  text-decoration: none;
}

.fa-sep{
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 4px 2px;
}

.fa-danger{
  background: rgba(255, 65, 65, 0.10);
  border-color: rgba(255, 65, 65, 0.22);
}

.fa-warn{
  background: rgba(255, 180, 0, 0.10);
  border-color: rgba(255, 180, 0, 0.22);
}
.grid{
  --left-col: 220px;
  --right-col: clamp(400px, 25vw, 460px);
  grid-template-columns: var(--left-col) minmax(0,1fr) var(--right-col);
}

.col-resizer{
  position:absolute;
  top:0; bottom:0;
  width:10px;
  cursor:col-resize;
  z-index:50;
  background:transparent;
}
.col-resizer:hover{ background: rgba(0,0,0,0.06); }
.col-resizer.is-left{ right:-5px; }
.col-resizer.is-right{ left:-5px; }
.fmodal-backdrop{display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9999; align-items:center; justify-content:center; padding:16px;}
.fmodal-backdrop.open{display:flex;}
/* ============================
   CHAT – DOAR CASETA DE MESAJE
   ============================ */

#rightDock .wa-chat-body{
  --chat-bg: #0f1720;
  --chat-text: #e6eef8;
  --chat-muted: #9aa7b4;
  --chat-me: #0d3b2d;
  --chat-other: #1f2937;
  --chat-font-size: 14px;
  --chat-bg-image: none;
  --chat-bg-opacity: .25;

  background: var(--chat-bg);
  color: var(--chat-text);
  font-size: var(--chat-font-size);
  position: relative;
}

/* imagine fundal */
#rightDock .wa-chat-body::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--chat-bg-image);
  background-size: cover;
  background-position:center;
  opacity: var(--chat-bg-opacity);
  pointer-events:none;
  z-index:0;
}

/* mesajele peste imagine */
#rightDock .wa-chat-body > *{
  position: relative;
  z-index:1;
}

/* bule mesaje */
#rightDock .wa-bubble.me{
  background: var(--chat-me);
  color: var(--chat-text);
}

#rightDock .wa-bubble.other{
  background: var(--chat-other);
  color: var(--chat-text);
}

/* ora / data */
#rightDock .wa-time,
#rightDock .wa-date{
  color: var(--chat-muted);
}
/* Fix pentru clasele reale din chat-ul tău (in/out) */
#rightDock .wa-bubble.out{
  background: var(--chat-me) !important;
  color: var(--chat-text) !important;
}

#rightDock .wa-bubble.in{
  background: var(--chat-other) !important;
  color: var(--chat-text) !important;
}

/* Ora / data (în fișierul tău e .wa-bubble .t și separator .wa-date-sep) */
#rightDock .wa-bubble .t,
#rightDock .wa-date-sep{
  color: var(--chat-muted) !important;
}
/* ============================
   CHAT – vizibil pe orice fundal
   ============================ */

/* Text general + linkuri în chat */
#rightDock .wa-chat-body,
#rightDock .wa-chat-body *{
  color: var(--chat-text) !important;
}

/* Separatorul de dată */
#rightDock .wa-date-sep{
  color: var(--chat-muted) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Ora din bulă */
#rightDock .wa-bubble .t{
  color: var(--chat-muted) !important;
}

/* Bule: contur + umbră pentru contrast */
#rightDock .wa-bubble{
  border: 1px solid var(--chat-border, rgba(255,255,255,.10)) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

/* ✓✓ / iconițe din mesaje (dacă există SVG sau font icons) */
#rightDock .wa-bubble svg,
#rightDock .wa-bubble i{
  color: var(--chat-text) !important;
  fill: currentColor !important;
}

/* Dacă ai emoji, să nu fie afectate */
#rightDock .wa-bubble img,
#rightDock .wa-bubble .emoji{
  color: initial !important;
}
/* ============================
   CHAT – look profesionist (anti-neon)
   ============================ */

/* 1) Fundalul chatului: folosim o culoare "mixată" + un overlay discret */
#rightDock .wa-chat-body{
  background: linear-gradient(
    0deg,
    rgba(0,0,0,var(--chat-tone, .55)),
    rgba(0,0,0,var(--chat-tone, .55))
  ), var(--chat-bg) !important;

  color: var(--chat-text) !important;
}

/* 2) Bule – opace + contur + umbră (ca să arate clean) */
#rightDock .wa-bubble{
  border-radius: 16px !important;
  border: 1px solid var(--chat-border, rgba(255,255,255,.10)) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.18) !important;
  backdrop-filter: none !important;
}

/* Mesajele tale (dreapta) */
#rightDock .wa-bubble.out{
  background: var(--chat-me) !important;
  color: var(--chat-text) !important;
}

/* Mesajele primite (stânga) */
#rightDock .wa-bubble.in{
  background: var(--chat-other) !important;
  color: var(--chat-text) !important;
}

/* 3) Textul din mesaje – să nu mai fie roșu/moștenit */
#rightDock .wa-bubble *{
  color: inherit !important;
}

/* 4) Ora (în bulă) – mai mică + contrast + chip discret */
#rightDock .wa-bubble .t{
  font-size: 12px !important;
  opacity: .88 !important;
  color: var(--chat-muted) !important;
}

/* 5) Separatorul de dată – chip vizibil */
#rightDock .wa-date-sep{
  display: inline-block !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  margin: 10px auto !important;
  background: rgba(0,0,0,.28) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: var(--chat-muted) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
}

/* 6) ✓✓ / iconițe (dacă sunt svg) */
#rightDock .wa-bubble svg{
  color: var(--chat-muted) !important;
  fill: currentColor !important;
}
/* ===== Data separator (25.01.2026) mai vizibil ===== */
#rightDock .wa-date-sep{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 8px 14px !important;
  border-radius: 999px !important;

  background: rgba(0,0,0,.55) !important;          /* mai opac */
  border: 1px solid rgba(255,255,255,.22) !important; /* contur mai vizibil */
  color: rgba(255,255,255,.92) !important;         /* text mai alb */
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: .2px !important;

  box-shadow: 0 10px 24px rgba(0,0,0,.35) !important; /* “iese” în față */
  text-shadow: 0 1px 2px rgba(0,0,0,.55) !important;
}

/* Dacă separatorul stă într-un container, îl centrăm */
#rightDock .wa-chat-body .wa-date-sep{
  margin: 12px auto !important;
}
/* ===== Fundal imagine/pattern DOAR pentru chat ===== */
#rightDock .wa-chat-body{
  position: relative;
  overflow: hidden;
}

/* Overlay pentru imaginea de fundal */
#rightDock .wa-chat-body::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--chat-bg-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--chat-bg-opacity, .18);
  pointer-events:none;
  z-index:0;
}

/* Conținutul chat-ului peste imagine */
#rightDock .wa-chat-body > *{
  position: relative;
  z-index:1;
}
/* ===== Wallpaper chat: acoperă TOT, inclusiv la scroll ===== */
#rightDock .wa-chat-body{
  position: relative;
  overflow: auto; /* important: fundalul se aplică pe zona scrollabilă */
  background-color: transparent !important; /* ca să nu “bată” culoarea peste poză */
  background-image: var(--chat-bg-image, none) !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-attachment: local !important; /* cheia: se mișcă cu scroll-ul containerului */
}

/* dacă vrei să nu fie “goală” zona, repetă (opțional) */
#rightDock .wa-chat-body.is-tile{
  background-size: 360px auto !important;
  background-repeat: repeat !important;
}
/* oprește overlay-ul vechi dacă există */
#rightDock .wa-chat-body::before{ display:none !important; }
/* Strat de întunecare peste wallpaper (ca să fie lizibil) */
#rightDock .wa-chat-body::after{
  content:"";
  position: sticky;
  top:0;
  display:block;
  height: 100%;
  width: 100%;
  pointer-events:none;

  /* folosește opacitatea ta */
  background: rgba(0,0,0, var(--chat-wallpaper-tone, .25));
  z-index: 0;
}

/* păstrează conținutul peste strat */
#rightDock .wa-chat-body > *{
  position: relative;
  z-index: 1;
}



/* ====================== PROMOTED POSTS (Variant 1) ====================== */
.post.is-promoted{
  position: relative;
  border: 1px solid rgba(255, 215, 0, .26) !important;
  background: linear-gradient(135deg, rgba(145, 90, 255, .18), rgba(0, 160, 255, .10)) !important;
  box-shadow: 0 14px 44px rgba(0,0,0,.36), 0 0 0 1px rgba(255,215,0,.08) inset;
}
.post.is-promoted::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  background: radial-gradient(800px 220px at 12% 0%, rgba(255,215,0,.18), transparent 55%),
              radial-gradient(700px 260px at 88% 8%, rgba(140, 110, 255, .20), transparent 60%);
  mix-blend-mode: screen;
  opacity:.75;
}
.promoted-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.2px;
  color:#fff;
  background: rgba(255,215,0,.14);
  border: 1px solid rgba(255,215,0,.28);
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
}
.promoted-badge .dot{
  width:6px;
  height:6px;
  border-radius:99px;
  background: rgba(255,215,0,.92);
  box-shadow: 0 0 14px rgba(255,215,0,.55);
}

/* modal */
.promo-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 2147483000;
}
.promo-modal-backdrop.is-open{display:flex;}
.promo-modal{
  width: min(520px, calc(100vw - 26px));
  background: rgba(11,20,26,.88);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  overflow:hidden;
}
.promo-modal-h{
  padding: 14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.promo-modal-h strong{color:#e9edef;}
.promo-modal-x{
  width:36px;height:36px;border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(24,34,41,.65);
  color:#e9edef;
  cursor:pointer;
}
.promo-modal-b{padding: 14px 16px; display:grid; gap:12px;}
.promo-plans{display:grid; gap:10px;}
.promo-plan{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(24,34,41,.45);
}
.promo-plan strong{color:#e9edef;}
.promo-plan span{opacity:.82; font-size:12px;}
.promo-plan button{
  border:none;
  border-radius: 12px;
  padding: 10px 12px;
  cursor:pointer;
  background: rgba(255,215,0,.16);
  border: 1px solid rgba(255,215,0,.28);
  color:#fff;
  font-weight:800;
}
.promo-plan button:hover{background: rgba(255,215,0,.22);}
.promo-muted{opacity:.78; font-size:12px;}

/* ====================== PROMOTED POSTS (Variant 1) ====================== */
.post.is-promoted{
  position: relative;
  border: 1px solid rgba(255, 215, 0, .26) !important;
  background: linear-gradient(135deg, rgba(145, 90, 255, .18), rgba(0, 160, 255, .10)) !important;
  box-shadow: 0 14px 44px rgba(0,0,0,.36), 0 0 0 1px rgba(255,215,0,.08) inset;
}
.post.is-promoted::before{
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 18px;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 215, 0, .22), transparent 65%);
  opacity: .55;
}
.post .promo-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 215, 0, .26);
  background: rgba(0,0,0,.22);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
}
.post .promo-badge .dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 215, 0, .95);
  box-shadow: 0 0 16px rgba(255,215,0,.35);
}

/* modal (simplu) */
.promo-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 2147482000;
  background: rgba(0,0,0,.55);
}
.promo-modal.is-open{ display:flex; }
.promo-card{
  width: min(520px, 100%);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(11,20,26,.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  overflow:hidden;
}
.promo-card-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.promo-card-head strong{ color:#e9edef; }
.promo-close{
  width: 34px; height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(24,34,41,.60);
  color:#e9edef;
  cursor:pointer;
}
.promo-card-body{ padding: 14px; display:grid; gap: 10px; }
.promo-row{ display:flex; gap: 10px; align-items:center; justify-content: space-between; padding: 10px 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; }
.promo-row .meta{ display:grid; gap: 2px; }
.promo-row .meta .t{ color:#e9edef; font-weight: 800; }
.promo-row .meta .s{ color: rgba(233,237,239,.70); font-size: 12px; }
.promo-row button{ border-radius: 12px; padding: 8px 12px; border: none; cursor:pointer; font-weight: 900; }
.promo-row button.is-buy{ background: rgba(255, 215, 0, .92); color:#111; }
.promo-row button.is-buy:disabled{ opacity: .55; cursor:not-allowed; }
.promo-note{ color: rgba(233,237,239,.72); font-size: 12px; line-height:1.25; }