/* =========================================
   AyushRudhra Popup Engine CSS (Mobile CENTER + Smaller)
   - Mobile: center modal (NOT bottom-sheet)
   - Smaller size + internal scroll
   - WhatsApp mini removed
========================================= */

:root{
  --arx-font: inherit;

  --arx-bg: var(--popupBg, rgba(8, 12, 20, .90));
  --arx-surface: var(--cardBg, rgba(255,255,255,.06));
  --arx-border: var(--borderColor, rgba(255,255,255,.12));

  --arx-text: var(--textColor, #ffffff);
  --arx-muted: var(--mutedText, rgba(255,255,255,.86));
  --arx-dim: var(--dimText, rgba(255,255,255,.72));

  --arx-accent1: var(--brand1, #4f46e5);
  --arx-accent2: var(--brand2, #06b6d4);

  --arx-shadow: 0 18px 70px rgba(0,0,0,.45);
  --arx-radius: 18px;
}

@media (prefers-color-scheme: light){
  :root{
    --arx-bg: var(--popupBg, rgba(255,255,255,.94));
    --arx-surface: var(--cardBg, rgba(2,6,23,.05));
    --arx-border: var(--borderColor, rgba(2,6,23,.10));
    --arx-text: var(--textColor, #0b1220);
    --arx-muted: var(--mutedText, rgba(11,18,32,.88));
    --arx-dim: var(--dimText, rgba(11,18,32,.66));
  }
}

/* Overlay */
.arx-pop-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  z-index:99999;

  /* ✅ center everywhere */
  align-items:center;
  justify-content:center;

  padding:18px;
}
.arx-pop-overlay[aria-hidden="false"]{ display:flex; }

/* ✅ Mobile also center + safe area */
@media (max-width: 640px){
  .arx-pop-overlay{
    padding:14px;
    padding-top: calc(14px + env(safe-area-inset-top));
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
}

/* Popup card */
.arx-pop{
  font-family: var(--arx-font);
  width:min(620px, 100%);
  border-radius:var(--arx-radius);
  background:var(--arx-bg);
  color:var(--arx-text);
  box-shadow:var(--arx-shadow);
  border:1px solid var(--arx-border);
  overflow:hidden;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transform:translateY(10px);
  opacity:0;
  transition:transform .18s ease, opacity .18s ease;

  /* internal layout */
  display:flex;
  flex-direction:column;

  /* desktop height safety */
  max-height: calc(100vh - 60px);
}
.arx-pop-overlay[aria-hidden="false"] .arx-pop{
  transform:translateY(0);
  opacity:1;
}

/* ✅ Mobile: smaller modal width + smaller height */
@media (max-width: 640px){
  .arx-pop{
    width: min(420px, 100%);        /* smaller */
    border-radius:16px;
    max-height: min(72vh, 520px);   /* smaller */
  }
}

/* Header */
.arx-pop-top{
  padding:14px 14px 10px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  background:
    radial-gradient(1200px 220px at 20% -30%, rgba(6,182,212,.34), transparent 60%),
    radial-gradient(900px 200px at 80% -20%, rgba(79,70,229,.32), transparent 62%),
    linear-gradient(135deg, rgba(59,130,246,.18), rgba(6,182,212,.14));
  border-bottom:1px solid var(--arx-border);
}

.arx-badge{
  width:42px; height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.08);
  border:1px solid var(--arx-border);
  flex:0 0 auto;
  font-size:18px;
}

.arx-pop-head h3{
  margin:0;
  font-size:16.5px;
  line-height:1.22;
  letter-spacing:.2px;
  font-weight:900;
}
.arx-pop-head p{
  margin:6px 0 0;
  font-size:12.5px;
  color:var(--arx-muted);
  line-height:1.35;
}

.arx-close{
  margin-left:auto;
  width:38px; height:38px;
  border-radius:12px;
  border:1px solid var(--arx-border);
  background:rgba(0,0,0,.14);
  color:var(--arx-text);
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:20px;
  flex:0 0 auto;
}
@media (prefers-color-scheme: light){
  .arx-close{ background:rgba(2,6,23,.06); }
}
.arx-close:active{ transform:scale(.98); }

/* Body scroll inside */
.arx-pop-body{
  padding:12px 14px 12px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}

.arx-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 10px;
}
.arx-chip{
  font-size:11.5px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid var(--arx-border);
  color:var(--arx-muted);
}
@media (prefers-color-scheme: light){
  .arx-chip{ background:rgba(2,6,23,.04); }
}

.arx-list{
  margin:0;
  padding-left:18px;
  font-size:12.75px;
  line-height:1.5;
  color:var(--arx-muted);
}
.arx-list li{ margin:6px 0; }

.arx-trust{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  background:var(--arx-surface);
  border:1px solid var(--arx-border);
  font-size:12.25px;
  line-height:1.35;
  color:var(--arx-muted);
}

/* CTA */
.arx-cta{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  padding:12px 14px 14px;
  border-top:1px solid var(--arx-border);
}

@media (max-width: 640px){
  .arx-cta{ grid-template-columns:1fr; }
}

.arx-btn{
  font-family: var(--arx-font);
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-radius:14px;
  padding:12px 12px;
  font-weight:900;
  font-size:14px;
  border:1px solid var(--arx-border);
  cursor:pointer;
  user-select:none;
}

.arx-btn-primary{
  color:#fff;
  border-color: rgba(255,255,255,.16);
  background: linear-gradient(135deg, var(--arx-accent1), var(--arx-accent2));
  box-shadow: 0 10px 26px rgba(79,70,229,.20);
}
.arx-btn-secondary{
  background:rgba(255,255,255,.08);
  color:var(--arx-text);
}
@media (prefers-color-scheme: light){
  .arx-btn-secondary{ background:rgba(2,6,23,.05); }
}

.arx-footnote{
  padding:0 14px 12px;
  font-size:11.5px;
  color:var(--arx-dim);
}

@media (prefers-reduced-motion: reduce){
  .arx-pop{ transition:none; }
}