/* ============================================================
   1805 App Download — Popup Styles v1.0.2
   Author: 1805loaded | t.me/i1805loaded
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ── Page Lock ─────────────────────────────────────────── */
body.adl-locked { overflow: hidden !important; }

/* ─────────────────────────────────────────────────────────
   TRIGGER BUTTON — Animated Red · Gold · Black
   ───────────────────────────────────────────────────────── */

.adl-shortcode-trigger-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 0;
}

/* Single clean definition — no duplicates */
.adl-open-btn {
  position: relative;
  display: inline-flex;          /* shrink-wraps to content — NOT full width */
  width: auto;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;

  /* Colors come 100% from CSS variables set inline by PHP */
  color: var(--btn-txt, #ffffff);
  background: linear-gradient(
    135deg,
    var(--btn-c3, #1a0a00) 0%,
    var(--btn-c1, #D90000) 42%,
    var(--btn-c2, #FFB800) 100%
  );
  background-size: 200% 200%;

  overflow: hidden;
  outline: none;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;

  box-shadow:
    0 0 0 1.5px rgba(255,184,0,0.3),
    0 4px 20px rgba(217,0,0,0.45),
    0 8px 36px rgba(217,0,0,0.22),
    0 2px 6px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.18);

  animation:
    adlBtnSweep 3s ease-in-out infinite,
    adlBtnGlow  2.5s ease-in-out infinite alternate;

  transition: transform 0.2s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.2s ease;
}

@keyframes adlBtnSweep {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes adlBtnGlow {
  0% {
    box-shadow:
      0 0 0 1.5px rgba(255,184,0,0.2),
      0 4px 18px rgba(217,0,0,0.4),
      0 8px 32px rgba(217,0,0,0.15),
      0 2px 4px rgba(0,0,0,0.55),
      inset 0 1px 0 rgba(255,255,255,0.15);
  }
  100% {
    box-shadow:
      0 0 0 3px rgba(255,184,0,0.45),
      0 6px 32px rgba(217,0,0,0.7),
      0 14px 52px rgba(255,184,0,0.28),
      0 2px 6px rgba(0,0,0,0.55),
      inset 0 1px 0 rgba(255,255,255,0.2);
  }
}

.adl-open-btn:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow:
    0 0 0 3px rgba(255,184,0,0.55),
    0 10px 42px rgba(217,0,0,0.75),
    0 18px 60px rgba(255,184,0,0.35),
    0 4px 8px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.22);
}
.adl-open-btn:active {
  transform: translateY(-1px) scale(0.97);
}

/* Shine sweep */
.adl-open-btn__shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    108deg,
    transparent 20%,
    rgba(255,255,255,0.22) 42%,
    rgba(255,255,255,0.07) 56%,
    transparent 72%
  );
  transform: translateX(-100%) skewX(-14deg);
  animation: adlShine 3.2s ease-in-out infinite;
}
@keyframes adlShine {
  0%   { transform: translateX(-100%) skewX(-14deg); }
  28%  { transform: translateX(220%) skewX(-14deg); }
  100% { transform: translateX(220%) skewX(-14deg); }
}

/* Spark particles */
.adl-open-btn__spark {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  animation: adlSpark 2.4s ease-in-out infinite;
}
.adl-open-btn__spark--1 {
  top: 14%; left: 16%;
  background: #FFD700;
  box-shadow: 0 0 6px 2px rgba(255,215,0,0.85);
  animation-delay: 0s;
}
.adl-open-btn__spark--2 {
  top: 68%; left: 78%;
  background: #FF5555;
  box-shadow: 0 0 6px 2px rgba(255,85,85,0.85);
  animation-delay: 0.9s;
}
.adl-open-btn__spark--3 {
  top: 38%; left: 90%;
  background: #FFD700;
  box-shadow: 0 0 6px 2px rgba(255,215,0,0.85);
  animation-delay: 1.7s;
}
@keyframes adlSpark {
  0%   { opacity: 0; transform: scale(0) translate(0,0); }
  18%  { opacity: 1; transform: scale(1.5) translate(-3px,-6px); }
  58%  { opacity: 0.5; transform: scale(0.8) translate(-9px,-14px); }
  100% { opacity: 0; transform: scale(0) translate(-15px,-22px); }
}

/* Icon */
.adl-open-btn__icon {
  width: 19px; height: 19px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
  animation: adlIconBounce 1.9s ease-in-out infinite;
}
@keyframes adlIconBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(3px); }
}

/* Label */
.adl-open-btn__label {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Glass variant */
.adl-open-btn--glass {
  background: linear-gradient(
    135deg,
    rgba(var(--btn-c3-rgb,26,10,0), 0.4) 0%,
    rgba(var(--btn-c1-rgb,217,0,0), 0.35) 42%,
    rgba(var(--btn-c2-rgb,255,184,0), 0.3) 100%
  );
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(255,184,0,0.3);
}

/* ─────────────────────────────────────────────────────────
   BACKGROUND LAYER
   ───────────────────────────────────────────────────────── */

.adl-bg-layer {
  position: fixed;
  inset: 0;
  z-index: 999990;
  overflow: hidden;
}

.adl-bg-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  transform: scale(1.04);
  filter: blur(2px);
}

.adl-bg-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(6,0,32,0.75) 0%,
    rgba(15,5,60,0.68) 35%,
    rgba(0,18,48,0.78) 100%
  );
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
}

/* ─────────────────────────────────────────────────────────
   OVERLAY
   ───────────────────────────────────────────────────────── */

.adl-overlay {
  position: fixed;
  inset: 0;
  z-index: 999995;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: 'Outfit', system-ui, sans-serif;
}

.adl-overlay--hidden {
  display: none !important;
  visibility: hidden !important;
}

/* Fade in when shown */
.adl-overlay:not(.adl-overlay--hidden) {
  animation: adlFadeIn 0.35s cubic-bezier(0.22,1,0.36,1) both;
}

@keyframes adlFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─────────────────────────────────────────────────────────
   POPUP CARD
   ───────────────────────────────────────────────────────── */

.adl-popup {
  position: relative;
  z-index: 999999;
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.13);
  background: rgba(255,255,255, var(--glass-opacity,0.12));
  backdrop-filter: blur(40px) saturate(1.8) brightness(1.08);
  -webkit-backdrop-filter: blur(40px) saturate(1.8) brightness(1.08);
  box-shadow:
    0 8px 64px rgba(0,0,0,0.5),
    0 2px 0 rgba(255,255,255,0.08) inset,
    0 -1px 0 rgba(255,255,255,0.04) inset;
  padding: 44px 32px 28px;
  text-align: center;
  color: #fff;
  animation: adlPopupIn 0.5s cubic-bezier(0.22,1,0.36,1) 0.06s both;
}

@keyframes adlPopupIn {
  from { opacity: 0; transform: scale(0.88) translateY(24px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Glow Orbs ─────────────────────────────────────────── */
.adl-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(40px);
  opacity: 0.35;
  animation: adlOrb 8s ease-in-out infinite alternate;
}
.adl-orb--1 { width:200px;height:200px;background:radial-gradient(circle,#6C63FF,transparent 70%);top:-60px;left:-60px;animation-delay:0s; }
.adl-orb--2 { width:150px;height:150px;background:radial-gradient(circle,#3ECFCF,transparent 70%);bottom:30px;right:-40px;animation-delay:-3s; }
.adl-orb--3 { width:120px;height:120px;background:radial-gradient(circle,#FF6B9D,transparent 70%);top:50%;left:70%;animation-delay:-5s; }
@keyframes adlOrb {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(20px,15px) scale(1.15); }
}

/* ── Close Button ──────────────────────────────────────── */
.adl-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
  z-index: 10;
  padding: 0;
}
.adl-close svg { width: 16px; height: 16px; }
.adl-close:hover {
  background: rgba(255,255,255,0.2);
  color: #fff;
  transform: scale(1.1) rotate(90deg);
}

/* ── App Icon ──────────────────────────────────────────── */
.adl-icon-wrap {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.adl-app-icon {
  width: 86px; height: 86px;
  border-radius: 22px;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.15);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.adl-icon-placeholder {
  width: 86px; height: 86px;
  border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.14);
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
.adl-icon-placeholder svg { width: 54px; height: 54px; }

/* ── Title & Tagline ───────────────────────────────────── */
.adl-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.55rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #fff 20%, rgba(200,200,255,0.85) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.adl-tagline {
  font-size: 0.875rem;
  font-weight: 400;
  color: rgba(220,220,255,0.72);
  line-height: 1.5;
  margin-bottom: 4px;
}

/* ── Divider ───────────────────────────────────────────── */
.adl-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  margin: 20px 0;
}

/* ── Download Buttons ──────────────────────────────────── */
.adl-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.adl-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-radius: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.22,1,0.36,1);
  border: 1px solid rgba(255,255,255,0.14);
  position: relative;
  overflow: hidden;
  text-align: left;
}
.adl-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.12) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}
.adl-btn:hover::before { transform: translateX(100%); }

.adl-btn--android {
  background: linear-gradient(135deg, rgba(61,220,151,0.22), rgba(25,190,100,0.18));
  border-color: rgba(61,220,151,0.3);
  color: #fff;
}
.adl-btn--android:hover {
  background: linear-gradient(135deg, rgba(61,220,151,0.38), rgba(25,190,100,0.32));
  border-color: rgba(61,220,151,0.55);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(61,220,151,0.22);
}
.adl-btn--iphone {
  background: linear-gradient(135deg, rgba(110,110,255,0.22), rgba(70,130,255,0.18));
  border-color: rgba(110,110,255,0.3);
  color: #fff;
}
.adl-btn--iphone:hover {
  background: linear-gradient(135deg, rgba(110,110,255,0.38), rgba(70,130,255,0.32));
  border-color: rgba(110,110,255,0.55);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(110,110,255,0.24);
}
.adl-btn--coming-soon {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
  filter: grayscale(0.4);
}
.adl-btn--coming-soon::before { display: none; }

.adl-btn__icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.adl-btn__icon svg { width: 20px; height: 20px; }
.adl-btn__text { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.adl-btn__sub { font-size: 0.68rem; font-weight: 400; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.06em; }
.adl-btn__main { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.adl-btn__arrow { font-size: 1.1rem; opacity: 0.7; transition: transform 0.2s ease; }
.adl-btn:hover .adl-btn__arrow { transform: translateY(3px); }
.adl-btn__badge { font-size: 1.1rem; }

/* ── Meta chips ────────────────────────────────────────── */
.adl-meta {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-bottom: 20px; flex-wrap: wrap;
}
.adl-meta__chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 100px;
  font-size: 0.72rem; font-weight: 500;
  color: rgba(200,200,255,0.75);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  letter-spacing: 0.02em;
}

/* ── Credit footer ─────────────────────────────────────── */
.adl-credit {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 16px;
  margin-top: 4px;
}
.adl-credit__link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.78rem; font-weight: 500;
  color: rgba(180,180,255,0.65);
  text-decoration: none;
  transition: color 0.2s ease;
}
.adl-credit__link:hover { color: rgba(200,200,255,0.95); }
.adl-credit__tg { width: 16px; height: 16px; fill: #29A8E2; flex-shrink: 0; }
.adl-credit__link strong { color: rgba(200,200,255,0.85); }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 480px) {
  .adl-popup { padding: 40px 20px 22px; border-radius: 22px; }
  .adl-title { font-size: 1.3rem; }
  .adl-btn { padding: 12px 14px; gap: 10px; }
  .adl-btn__main { font-size: 0.95rem; }
  .adl-open-btn { padding: 14px 26px; font-size: 0.92rem; }
}