/* TradyGo — Sticky Telegram CTA styling.
 * Mobile-first: full-width pill anchored to the bottom of the viewport
 * with safe-area respect.
 * Desktop (≥ 920px): floating compact pill anchored bottom-center, narrower.
 */

.tg-sticky-cta{
  position:fixed;
  left:12px;right:12px;
  bottom:max(12px, env(safe-area-inset-bottom));
  z-index:9000;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px 12px 12px;
  border-radius:14px;
  background:linear-gradient(135deg, #0a3d2a 0%, #062e1f 100%);
  border:1px solid rgba(62,207,142,0.45);
  box-shadow:
    0 -2px 0 rgba(62,207,142,0.55) inset,
    0 18px 50px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.04);
  color:#fff;
  text-decoration:none;
  font-family:inherit;
  opacity:0;
  transform:translateY(140%);
  transition:transform .42s cubic-bezier(.2,.85,.3,1.1), opacity .35s ease, visibility 0s linear .42s;
  visibility:hidden;
  pointer-events:none;
  -webkit-tap-highlight-color:transparent;
}
.tg-sticky-cta.is-visible{
  opacity:1;
  transform:translateY(0);
  visibility:visible;
  pointer-events:auto;
  transition:transform .42s cubic-bezier(.2,.85,.3,1.1), opacity .35s ease, visibility 0s linear 0s;
}
.tg-sticky-cta.is-near-footer{
  transform:translateY(140%);
  opacity:0;
  pointer-events:none;
}

.tg-sticky-cta:hover,
.tg-sticky-cta:focus-visible{
  border-color:rgba(62,207,142,0.7);
  background:linear-gradient(135deg, #0b4630 0%, #073424 100%);
  outline:none;
}

/* Telegram icon — soft blue glow */
.tg-sticky-cta-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;
  border-radius:11px;
  background:linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
  color:#fff;
  flex-shrink:0;
  box-shadow:
    0 8px 18px rgba(42,171,238,0.35),
    inset 0 -2px 0 rgba(0,0,0,0.15);
}
.tg-sticky-cta-icon svg{display:block;margin-right:1px}

/* Stacked copy */
.tg-sticky-cta-text{
  display:flex;flex-direction:column;line-height:1.18;
  flex:1;min-width:0;
}
.tg-sticky-cta-main{
  font-weight:700;
  font-size:14.5px;
  letter-spacing:-0.005em;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tg-sticky-cta-sub{
  font-weight:500;
  font-size:12px;
  color:#3ECF8E;
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.tg-sticky-cta-arrow{
  display:inline-flex;align-items:center;
  color:rgba(255,255,255,0.6);
  flex-shrink:0;
  transition:color .15s ease, transform .15s ease;
}
.tg-sticky-cta:hover .tg-sticky-cta-arrow,
.tg-sticky-cta:focus-visible .tg-sticky-cta-arrow{
  color:#3ECF8E;
  transform:translateX(3px);
}

.tg-sticky-cta-close{
  position:absolute;
  top:-10px;right:-6px;
  width:26px;height:26px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(10,15,22,0.95);
  color:rgba(255,255,255,0.7);
  cursor:pointer;
  display:inline-flex;
  align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.45);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.tg-sticky-cta-close:hover{
  background:rgba(255,255,255,0.10);
  color:#fff;
  border-color:rgba(255,255,255,0.30);
}

/* RTL languages — flip arrow direction */
[dir="rtl"] .tg-sticky-cta-arrow svg{ transform:scaleX(-1); }
[dir="rtl"] .tg-sticky-cta:hover .tg-sticky-cta-arrow{ transform:translateX(-3px); }
[dir="rtl"] .tg-sticky-cta-close{ left:-6px; right:auto; }

/* ── Desktop refinement (≥ 920px) ──────────────────────────────────── */
@media (min-width: 920px){
  .tg-sticky-cta{
    left:auto;right:24px;
    bottom:24px;
    max-width:380px;
    padding:13px 22px 13px 14px;
    border-radius:16px;
  }
  .tg-sticky-cta-main{ font-size:15px; }
  .tg-sticky-cta-sub{ font-size:12.5px; }
}

/* ── Tiny screens (iPhone SE etc.) ─────────────────────────────────── */
@media (max-width: 360px){
  .tg-sticky-cta{ padding:10px 12px 10px 10px; gap:10px; }
  .tg-sticky-cta-icon{ width:38px;height:38px; }
  .tg-sticky-cta-main{ font-size:13.5px; }
  .tg-sticky-cta-sub{ font-size:11.5px; }
}

/* When the lang bottom-sheet is open we hide the sticky CTA to keep the
   focus on the language picker. */
.lang-sheet-backdrop.is-open ~ .tg-sticky-cta,
body:has(.lang-mobile-sheet.is-open) .tg-sticky-cta{
  opacity:0;
  pointer-events:none;
  transform:translateY(140%);
}

/* When the mobile menu is open we also hide it for clarity. */
body.tg-mobile-menu-open .tg-sticky-cta{
  opacity:0;
  pointer-events:none;
  transform:translateY(140%);
}