/* =========================================
   WHAPAXX CUSTOMER UI — COMPONENTS LAYER
   Depends on variables from whapaxx-ui.css
   ========================================= */

:root{
  --ring: rgba(97,144,255,.25);
  --border: rgba(255,255,255,.10);
  --border-2: rgba(255,255,255,.16);
  --elev: 9999;
}

/* ---------- Containers ---------- */
.container {
  width: min(100%, 1100px);
  margin: 0 auto;
  padding: 1rem;
}
.section {
  margin: 1.2rem 0;
}
.stack { display: grid; gap: 1rem; }
.stack-lg { display: grid; gap: 1.4rem; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:.5rem; }
.btn svg{ width:1.1em; height:1.1em; }

.btn-accent{
  background: var(--accent);
}
.btn-accent:hover{ background: var(--accent-hover); }

.btn-ghost{
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-ghost:hover{ border-color: var(--border-2); background: rgba(255,255,255,.04); }

.btn-outline{
  background: transparent;
  border: 2px solid var(--accent);
  color:#fff;
}
.btn-outline:hover{ background: rgba(229,43,57,.12); }

.btn-teal{
  background: var(--teal);
  color:#0b1247;
}
.btn-teal:hover{ filter: brightness(.95); }

.btn-danger{
  background: var(--danger);
}
.btn-danger:hover{ filter: brightness(.95); }

.btn-pill{ border-radius: 999px; padding: .6rem 1rem; }
.btn-sm { padding: .5rem .9rem; font-size: .92rem; }
.btn-lg { padding: .9rem 1.2rem; font-size: 1.05rem; }

/* Focus ring */
button:focus-visible, .btn:focus-visible, a.btn:focus-visible, .chip:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 4px var(--ring);
}

/* ---------- Badges / Chips ---------- */
.badge{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .6rem; border-radius:999px;
  font-size:.85rem; font-weight:600; letter-spacing:.2px;
  background: rgba(255,255,255,.08); border: 1px solid var(--border);
}
.badge-teal{ background: rgba(18,208,255,.15); color:#c7f1ff; border-color: rgba(18,208,255,.35)}
.badge-accent{ background: rgba(229,43,57,.15); color:#ffd7db; border-color: rgba(229,43,57,.4)}
.badge-ok{ background: rgba(34,197,94,.18); color:#d4ffe3; border-color: rgba(34,197,94,.4)}
.badge-warn{ background: rgba(245,158,11,.18); color:#ffe9c7; border-color: rgba(245,158,11,.4)}
.badge-muted{ color: var(--muted); }

.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  background: var(--card-2);
  border:1px solid var(--border);
  color: var(--text);
  padding:.5rem .8rem;
  border-radius: 999px;
  cursor:pointer; user-select:none;
  transition: transform .1s ease, background .2s ease, border .2s ease;
}
.chip:hover{ background: rgba(255,255,255,.05); }
.chip.active{ background: rgba(18,208,255,.18); border-color: rgba(18,208,255,.45); }

/* ---------- Banners / Alerts ---------- */
.banner{
  display:flex; gap: .8rem; align-items:flex-start;
  padding: .85rem 1rem; border-radius: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.banner .title{ font-weight:700; color: var(--text); margin-bottom:.2rem; }
.banner .desc{ color: var(--muted); font-size:.95rem; }
.banner svg{ flex: 0 0 auto; margin-top: .2rem; }
.banner-accent{ border-color: rgba(229,43,57,.4); background: rgba(229,43,57,.12); }
.banner-ok{ border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.12); }
.banner-warn{ border-color: rgba(245,158,11,.45); background: rgba(245,158,11,.12); }
.banner-info{ border-color: rgba(18,208,255,.45); background: rgba(18,208,255,.12); }

/* ---------- Modal / Drawer (Sheet) ---------- */
.wpxx-overlay{
  position: fixed; inset:0; background: rgba(0,0,0,.55);
  opacity:0; pointer-events:none; transition: opacity .25s ease;
  z-index: calc(var(--elev) - 1);
}
.wpxx-overlay.show{ opacity:1; pointer-events:auto; }

.wpxx-modal{
  position: fixed; inset: 0; display:flex; align-items:center; justify-content:center;
  padding: 1rem; z-index: var(--elev);
  opacity:0; transform: translateY(10px) scale(.98);
  transition: opacity .2s ease, transform .2s ease;
}
.wpxx-modal.show{ opacity:1; transform: translateY(0) scale(1); }
.wpxx-modal .box{
  width: min(92vw, 640px);
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.wpxx-modal .head{
  padding: 1rem 1.1rem; border-bottom: 1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.wpxx-modal .title{ font-weight:700; }
.wpxx-modal .body{ padding: 1rem 1.1rem; color: var(--text); }
.wpxx-modal .foot{
  padding: .9rem 1.1rem; border-top: 1px solid var(--border);
  display:flex; justify-content:flex-end; gap:.6rem;
}

/* Drawer (bottom sheet) */
.wpxx-drawer{
  position: fixed; left:0; right:0; bottom:0;
  border-top-left-radius: 18px; border-top-right-radius:18px;
  background: var(--card);
  border-top: 1px solid var(--border-2);
  box-shadow: 0 -20px 40px rgba(0,0,0,.35);
  transform: translateY(100%); transition: transform .25s ease;
  z-index: var(--elev);
  max-height: 86vh; overflow:auto; padding: 1rem;
}
.wpxx-drawer.show{ transform: translateY(0); }

/* ---------- Tabs ---------- */
.tabs{ display:flex; gap:.4rem; border-bottom:1px solid var(--border); }
.tab{
  padding:.7rem 1rem; cursor:pointer; font-weight:600;
  border-bottom:2px solid transparent; color: var(--muted);
}
.tab.active{
  color: var(--text);
  border-color: var(--teal);
}
.tabpanes{ padding: 1rem 0; }
.tabpane{ display:none; }
.tabpane.active{ display:block; }

/* ---------- Grid & Cards ---------- */
.grid{ display:grid; gap:1rem; }
.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px){ .grid-4{ grid-template-columns: repeat(3,1fr);} }
@media (max-width: 700px){ .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 480px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr;} }

.card-hover:hover{ transform: translateY(-3px); }

/* ---------- Price / Time accents (for games list) ---------- */
.meta-row{
  display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin:.35rem 0 .2rem;
}
.price-bubble, .time-bubble{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .6rem; border-radius:999px; font-weight:700;
  background: rgba(18,208,255,.15); color:#c7f1ff; border:1px solid rgba(18,208,255,.35);
}
.price-bubble.accent{
  background: rgba(229,43,57,.15); color:#ffd7db; border-color: rgba(229,43,57,.45);
}

/* ---------- Forms ---------- */
.form-row{ display:grid; gap:.8rem; }
.form-inline{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.label{ font-size:.9rem; color: var(--muted); }
.help{ font-size:.85rem; color: var(--muted); }

/* ---------- Skeletons ---------- */
.skel{
  position: relative; overflow:hidden; border-radius:10px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.1), rgba(255,255,255,.06));
  background-size: 200% 100%;
  animation: skel 1.2s linear infinite;
}
@keyframes skel{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.skel-line{ height: 12px; }
.skel-rect{ height: 120px; }