/* ─────────────────────────────────────────────────────────────────────────────
   Telegram activation page — /{locale}/telegram

   Self-contained on purpose. The contact page's form primitives would have
   done, but this page is the one URL we read out over the phone to somebody
   who cannot receive their codes, and it must not break the day the contact
   form is restyled. Everything here is prefixed `tg-` and leans only on the
   theme variables from main.css.

   RTL: the layout is flow-relative throughout (margin-inline, padding-inline,
   flex), so Arabic and Kurdish mirror from the `dir` on <html> with no
   direction-specific rules.
   ───────────────────────────────────────────────────────────────────────── */

.tg-page {
    position: relative;
    background: var(--bg-color, #050505);
    color: var(--text-primary, #fff);
    min-height: 70vh;
    overflow: hidden;
}

/* The ambient wash behind the card. Purely decorative and pointer-transparent
   so it can never swallow a tap on the button underneath it. */
.tg-glow {
    position: absolute;
    inset-block-start: -240px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: min(900px, 120%);
    height: 620px;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(42, 171, 238, 0.16), transparent 72%);
}

.tg-hero {
    position: relative;
    padding-block: clamp(56px, 9vw, 108px) clamp(64px, 10vw, 120px);
}

.tg-shell {
    max-width: var(--maxw, 1240px);
    margin-inline: auto;
    padding-inline: 20px;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.tg-head {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
    margin-block-end: clamp(28px, 5vw, 48px);
}

.tg-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid rgba(42, 171, 238, 0.35);
    background: rgba(42, 171, 238, 0.08);
    color: #7fd0f5;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

.tg-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2aabee;
    box-shadow: 0 0 0 0 rgba(42, 171, 238, 0.7);
    animation: tg-pulse 2s infinite;
}

@keyframes tg-pulse {
    70%  { box-shadow: 0 0 0 9px rgba(42, 171, 238, 0); }
    100% { box-shadow: 0 0 0 0 rgba(42, 171, 238, 0); }
}

.tg-head h1 {
    margin: 18px 0 12px;
    font-size: clamp(1.7rem, 4.4vw, 2.7rem);
    line-height: 1.22;
}

.tg-lead {
    color: var(--text-secondary, #9a9a9f);
    font-size: clamp(0.95rem, 1.6vw, 1.06rem);
    line-height: 1.75;
    margin: 0;
}

/* ── Two-column: the explanation beside the form ─────────────────────────── */

.tg-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(20px, 3vw, 36px);
    align-items: start;
    max-width: 1020px;
    margin-inline: auto;
}

@media (min-width: 900px) {
    .tg-split { grid-template-columns: 1fr 1fr; }
}

.tg-why h2 {
    font-size: 1.22rem;
    margin: 0 0 12px;
}

.tg-why p {
    color: var(--text-secondary, #9a9a9f);
    line-height: 1.8;
    margin: 0 0 24px;
}

.tg-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.tg-steps li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--text-secondary, #9a9a9f);
    line-height: 1.65;
    font-size: 0.94rem;
}

.tg-steps li > span {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    margin-block-start: 1px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: #05121a;
    background: linear-gradient(135deg, #7fd0f5, #2aabee);
}

/* ── The card ────────────────────────────────────────────────────────────── */

.tg-card {
    max-width: 560px;
    margin-inline: auto;
    padding: clamp(22px, 3.4vw, 34px);
    border-radius: 20px;
    border: 1px solid var(--border-color, #1e1e1e);
    background: var(--card-bg, #101010);
    box-shadow: var(--shadow-card, 0 24px 60px -20px rgba(0, 0, 0, 0.9));
}

.tg-card h2 {
    margin: 0 0 10px;
    font-size: 1.3rem;
}

.tg-card > p {
    color: var(--text-secondary, #9a9a9f);
    line-height: 1.75;
    margin: 0 0 20px;
}

.tg-card-done { text-align: center; }

.tg-done-mark {
    width: 64px;
    height: 64px;
    margin-inline: auto;
    margin-block-end: 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #05121a;
    background: linear-gradient(135deg, #7fd0f5, #2aabee);
}

.tg-done-mark svg { width: 30px; height: 30px; }

.tg-handle {
    color: #7fd0f5;
    font-size: 0.9rem;
    margin: 0 0 18px;
}

/* ── Form ────────────────────────────────────────────────────────────────── */

.tg-form { display: grid; gap: 18px; }

.tg-field { display: grid; gap: 8px; }

.tg-field label {
    font-size: 0.86rem;
    color: var(--text-secondary, #9a9a9f);
}

.tg-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 15px;
    border-radius: 12px;
    border: 1px solid var(--border-color, #1e1e1e);
    background: var(--card-bg-2, #0c0c0c);
    color: var(--text-primary, #fff);
    font: inherit;
    font-size: 0.97rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.tg-field input::placeholder { color: var(--text-muted, #5a5a5e); }

.tg-field input:focus {
    outline: none;
    border-color: rgba(42, 171, 238, 0.55);
    box-shadow: 0 0 0 3px rgba(42, 171, 238, 0.14);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.tg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 24px;
    border: 1px solid transparent;
    border-radius: 12px;
    font: inherit;
    font-weight: 600;
    font-size: 0.97rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.16s ease, filter 0.16s ease, background 0.16s ease;
}

.tg-btn:active { transform: translateY(1px); }

.tg-btn-lg { width: 100%; padding-block: 15px; }

.tg-btn-primary {
    color: #05121a;
    background: linear-gradient(135deg, #7fd0f5, #2aabee);
}

.tg-btn-primary:hover { filter: brightness(1.07); }

.tg-btn-primary svg { width: 20px; height: 20px; }

.tg-btn-ghost {
    color: var(--text-secondary, #9a9a9f);
    background: transparent;
    border-color: var(--border-color, #1e1e1e);
}

.tg-btn-ghost:hover {
    color: var(--text-primary, #fff);
    border-color: var(--border-hover, #333);
}

.tg-restart {
    margin-block-start: 22px;
    padding-block-start: 20px;
    border-block-start: 1px solid var(--border-color, #1e1e1e);
    text-align: center;
}

/* ── Status, alerts, fine print ──────────────────────────────────────────── */

.tg-waiting {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 20px 0 0;
    color: #7fd0f5;
    font-size: 0.9rem;
}

.tg-spinner {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid rgba(42, 171, 238, 0.28);
    border-top-color: #2aabee;
    animation: tg-spin 0.85s linear infinite;
}

@keyframes tg-spin { to { transform: rotate(360deg); } }

/* Respect a stated preference for less motion: the spinner and the badge are
   decoration, and this page is most often opened by somebody already having a
   frustrating day. */
@media (prefers-reduced-motion: reduce) {
    .tg-spinner, .tg-pulse { animation: none; }
}

.tg-alert {
    display: block;
    margin: 0 0 18px;
    padding: 13px 16px;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.65;
}

.tg-alert-error {
    border: 1px solid rgba(250, 82, 82, 0.35);
    background: rgba(250, 82, 82, 0.08);
    color: #ff8f8f;
}

.tg-fine {
    margin: 16px 0 0;
    color: var(--text-muted, #5a5a5e);
    font-size: 0.83rem;
    line-height: 1.7;
}

/* ── Identity chooser: email or phone ────────────────────────────────────────
   Two radios, visually a segmented control. The radios themselves are clipped
   rather than `display:none` so they stay focusable and stay in the tab order;
   the panels below them are shown purely off `:checked`, which is why the page
   still works with scripting disabled. Both radios and both panels are siblings
   inside the form — that is what the `~` selectors need. */

.tg-mode-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.tg-modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 5px;
    border-radius: 14px;
    border: 1px solid var(--border-color, #1e1e1e);
    background: var(--card-bg-2, #0c0c0c);
}

.tg-modes label {
    padding: 10px 12px;
    border-radius: 10px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary, #9a9a9f);
    cursor: pointer;
    user-select: none;
    transition: background 0.18s ease, color 0.18s ease;
}

.tg-modes label:hover { color: var(--text-primary, #fff); }

#tg_mode_email:checked ~ .tg-modes label[for="tg_mode_email"],
#tg_mode_phone:checked ~ .tg-modes label[for="tg_mode_phone"] {
    color: #05121a;
    background: linear-gradient(135deg, #7fd0f5, #2aabee);
}

/* Keyboard focus lands on the invisible radio, so the ring has to be drawn on
   the label that stands in for it. */
#tg_mode_email:focus-visible ~ .tg-modes label[for="tg_mode_email"],
#tg_mode_phone:focus-visible ~ .tg-modes label[for="tg_mode_phone"] {
    box-shadow: 0 0 0 3px rgba(42, 171, 238, 0.35);
}

.tg-pane { display: none; }

#tg_mode_email:checked ~ .tg-pane-email,
#tg_mode_phone:checked ~ .tg-pane-phone { display: grid; }

/* ── Phone number: dial code beside the national number ──────────────────────
   The group carries `dir="ltr"` in the markup, in every language: a number is
   read left to right everywhere, and the dial code belongs immediately before
   the digits it prefixes. So these rules are written physically (left/right)
   rather than flow-relative — unlike the rest of this file — because the box
   they describe is LTR even on an RTL page. */

.tg-phone {
    display: flex;
    align-items: stretch;
    border-radius: 12px;
    border: 1px solid var(--border-color, #1e1e1e);
    background: var(--card-bg-2, #0c0c0c);
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.tg-phone:focus-within {
    border-color: rgba(42, 171, 238, 0.55);
    box-shadow: 0 0 0 3px rgba(42, 171, 238, 0.14);
}

.tg-phone-dial {
    flex: 0 0 auto;
    max-width: 48%;
    padding: 13px 10px 13px 14px;
    border: 0;
    border-right: 1px solid var(--border-color, #1e1e1e);
    background: transparent;
    color: var(--text-primary, #fff);
    font: inherit;
    font-size: 0.95rem;
    cursor: pointer;
}

.tg-phone-dial:focus { outline: none; }

/* The dropdown itself is painted by the OS and inherits nothing from the page,
   so the options need a colour pair of their own or they render black on black
   on a dark-themed desktop. */
.tg-phone-dial option {
    background: #101010;
    color: #fff;
}

/* The field is inside .tg-phone, so the generic `.tg-field input` border and
   radius would draw a second box within the group. */
.tg-field .tg-phone-num {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    letter-spacing: 0.04em;
}

.tg-field .tg-phone-num:focus {
    outline: none;
    box-shadow: none;
}