/* =====================================================================
   telegram.css — ОКНО ПРИВЯЗКИ TELEGRAM И СТРОКА ПОДПИСКИ В ПРОФИЛЕ
   ---------------------------------------------------------------------
   Оформление взято у окна входа (css/auth.css), а не придумано заново:
   это такое же короткое дело поверх страницы, и второй его язык на сайте
   был бы третьим синим и четвёртой формой кнопки. Отсюда и совпадения —
   тот же затемнённый фон с двумя цветными пятнами, та же панель с
   жёсткой нижней тенью, тот же заголовок шрифтом сцены с обводкой.

   ЧТО ЗДЕСЬ СВОЕГО: лесенка шагов (открыть бота → нажать Start → готово)
   и живая строка ожидания. Оба нужны потому, что действие происходит НЕ
   на сайте: человек уходит в Telegram и возвращается, и всё это время
   окно обязано показывать, что оно ещё чего-то ждёт, а не зависло.

   Разметку строит js/telegram.link.js — переименование класса сломает
   привязку, как и в auth.css.
   ===================================================================== */

.tg-backdrop{
  --tg-ink:#150a22;
  --tg-dim:#BBD6F5;
  --tg-blue:#2AABEE;      /* фирменный голубой Telegram */

  position:fixed;inset:0;z-index:160;display:flex;align-items:center;justify-content:center;
  padding:20px;overflow-y:auto;
  background:
    radial-gradient(900px 600px at 50% -10%, rgba(42,171,238,.28), transparent 60%),
    radial-gradient(800px 600px at 12% 100%, rgba(31,170,244,.18), transparent 60%),
    rgba(3,12,40,.86);
  backdrop-filter:blur(10px);
  font-family:'Manrope',sans-serif;color:#fff;
  opacity:0;transition:opacity .28s ease;
}
.tg-backdrop.show{opacity:1}

.tg-card{
  position:relative;z-index:2;width:min(460px,100%);
  padding:32px 30px 28px;border-radius:20px;
  background:linear-gradient(180deg,#2555bb 0%,#12327f 60%,#0c2360 100%);
  border:3px solid rgba(0,30,170,.55);
  box-shadow:0 10px 0 #07184a, 0 40px 90px -30px rgba(0,0,0,.9);
  transform:translateY(16px) scale(.98);
  transition:transform .35s cubic-bezier(.2,.9,.25,1.05);
}
.tg-backdrop.show .tg-card{transform:none}

.tg-close{
  position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:12px;cursor:pointer;
  background:linear-gradient(180deg,#0f3f9e,#0a2c72);
  border:2px solid rgba(255,255,255,.18);color:#fff;
  box-shadow:0 3px 0 rgba(2,12,45,.6);font-size:.85rem;
  transition:filter .2s ease, transform .09s ease, box-shadow .09s ease;
}
.tg-close:hover{filter:brightness(1.15)}
.tg-close:active{transform:translateY(3px);box-shadow:0 0 0 rgba(2,12,45,.6)}

/* Голубой кружок с самолётом логотипа — единственное место, где на сайте
   появляется фирменный цвет Telegram. Он тут по делу: окно обещает увести
   в другое приложение, и узнаваемость важнее единства палитры.

   Внутри лежит настоящий самолёт логотипа (js/telegram.icon.js), а не
   почтовый «✈» из шрифта, который в каждой системе свой. Круг рисует
   сам кружок — с обводкой и жёсткой тенью в языке сайта. */
.tg-mark{
  width:64px;height:64px;margin:0 auto 16px;border-radius:50%;
  display:grid;place-items:center;line-height:1;color:#fff;
  background:linear-gradient(160deg,#41C5F5,var(--tg-blue) 60%,#1E96D3);
  border:3px solid var(--ink,#051D48);
  box-shadow:0 5px 0 var(--ink,#051D48), 0 16px 30px -12px rgba(2,10,45,.9);
}
/* Самолёт держится на кружке своей мягкой тенью: без неё белый по
   голубому на 64 пикселях выглядит наклейкой. */
.tg-mark .tg-svg{filter:drop-shadow(0 2px 2px rgba(2,10,45,.35))}

.tg-title{
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900;font-size:1.55rem;line-height:1.1;text-align:center;margin-bottom:8px;
  letter-spacing:.04em;word-spacing:-.09em;color:#fff;
  -webkit-text-stroke:0.1em var(--tg-ink);paint-order:stroke fill;
}
.tg-sub{color:var(--tg-dim);font-size:.88rem;text-align:center;line-height:1.5;margin-bottom:20px}

/* ---------- лесенка шагов ----------
   Три строки, у каждой номер в кружке. Пройденный шаг гаснет и меняет
   номер на галочку: человек возвращается из Telegram и должен с одного
   взгляда понять, на чём остановился. */
.tg-steps{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.tg-step{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:14px;
  background:rgba(3,16,54,.42);border:2px solid rgba(255,255,255,.12);
  font-size:.88rem;font-weight:600;color:var(--tg-dim);
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.tg-step b{display:block;color:#fff;font-weight:800;margin-bottom:2px;font-size:.92rem}
.tg-step-n{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;font-size:.8rem;font-weight:900;
  background:rgba(255,255,255,.12);color:#fff;
}
.tg-step.is-now{
  background:rgba(42,171,238,.16);border-color:rgba(85,184,255,.55);color:#EAF4FF;
}
.tg-step.is-now .tg-step-n{background:linear-gradient(180deg,#55B8FF,#2278DE)}
.tg-step.is-done{opacity:.62}
.tg-step.is-done .tg-step-n{
  background:linear-gradient(180deg,var(--green-1,#63E06E),var(--green-2,#34B747));
  color:#0A2A10;
}

/* ---------- кнопки ---------- */
.tg-actions{display:flex;flex-direction:column;gap:10px}
.tg-btn{
  display:block;width:100%;cursor:pointer;text-align:center;text-decoration:none;
  border-radius:16px;padding:15px 20px 18px;
  font-family:'Manrope',sans-serif;font-weight:800;font-size:1rem;line-height:1;color:#fff;
  border:3px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg,#2a72e6,#123a92);
  box-shadow:0 5px 0 #07204f;
  transition:filter .14s ease, transform .09s ease, box-shadow .09s ease;
}
.tg-btn:hover{filter:brightness(1.1)}
.tg-btn:active{transform:translateY(5px);box-shadow:0 0 0 #07204f}
.tg-btn.primary{
  background:linear-gradient(160deg,#41C5F5,var(--tg-blue) 60%,#1E96D3);
  box-shadow:0 5px 0 #14688F;border-color:rgba(0,0,0,.18);
}
.tg-btn.primary:active{box-shadow:0 0 0 #14688F}
.tg-btn.ghost{
  background:rgba(3,16,54,.5);box-shadow:0 4px 0 rgba(2,12,45,.6);
  font-size:.88rem;padding:12px 18px 15px;color:var(--tg-dim);
}
.tg-btn.ghost:active{box-shadow:0 0 0 rgba(2,12,45,.6)}
.tg-btn[disabled]{opacity:.55;cursor:default;filter:none;transform:none}

/* ---------- строка ожидания ----------
   Пока человек в Telegram, окно опрашивает сервер. Точка слева пульсирует
   — это единственное, что здесь движется, и по ней видно, что опрос идёт,
   а не оборвался вместе с вкладкой. */
.tg-wait{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:16px;min-height:22px;
  font-size:.84rem;font-weight:700;color:var(--tg-dim);text-align:center;
}
.tg-dot{
  flex:0 0 auto;width:10px;height:10px;border-radius:50%;
  background:#55B8FF;box-shadow:0 0 0 0 rgba(85,184,255,.55);
  animation:tg-pulse 1.4s ease-out infinite;
}
@keyframes tg-pulse{
  0%  {box-shadow:0 0 0 0 rgba(85,184,255,.55)}
  70% {box-shadow:0 0 0 10px rgba(85,184,255,0)}
  100%{box-shadow:0 0 0 0 rgba(85,184,255,0)}
}
.tg-wait.is-ok{color:#B9F79A}
.tg-wait.is-ok .tg-dot{background:#63E06E;animation:none}
.tg-wait.is-error{color:#FDA4AF}
.tg-wait.is-error .tg-dot{background:#FF6B6B;animation:none}

/* ---------- строка Telegram в профиле ----------
   Живёт внутри .sec-row из profile.css и берёт у неё всё оформление.
   Своего здесь только подпись о подписке: у остальных способов входа
   рассказывать после «Подключен» нечего, а у этого — есть.

   СТРОКА ОБЫЧНАЯ, БЛОЧНАЯ, А НЕ FLEX. Соседние строки статуса набраны
   flex'ом, и первым делом эта была такой же — но здесь внутри цельная
   фраза со ссылкой и значком посреди неё, и flex растаскивал её на
   отдельные ячейки: «Подписка на» · «@megadropbest» · «: есть». В
   обычной строке текст течёт как текст, а значок стоит в ней
   inline-block'ом. */
.tg-sub-line{
  margin-top:8px;line-height:1.7;
  font-size:.82rem;font-weight:600;color:var(--text-dim,#BBD6F5);
}
.tg-sub-line a{color:#8CD2FF;text-decoration:none;font-weight:800}
.tg-sub-line a:hover{text-decoration:underline}

@media (max-width:520px){
  .tg-card{padding:26px 20px 22px}
  .tg-title{font-size:1.3rem}
}

@media (prefers-reduced-motion: reduce){
  .tg-backdrop,.tg-card{transition:none}
  .tg-dot{animation:none}
}