/* ============================================================
   VIVO — strato componenti e movimento
   Caricato DOPO main.css e ads.css.

   Ogni animazione qui gira su transform/opacity: compositor GPU,
   zero ripaint, zero layout. Nessuna view e stata modificata.
   ============================================================ */

/* ---------- 1. AURORA DI FONDO ----------
   Tre aloni gia disegnati che derivano lentamente. Il browser non
   ridisegna nulla: sposta soltanto tre texture sulla GPU.          */

body::before,
body::after {
  display: block !important;
  filter: none !important;          /* main.css ci metteva url(#liquid-glass) */
  will-change: transform;
}

body::before {
  content: '';
  position: fixed;
  top: -30%; left: -30%;
  width: 160%; height: 160%;
  z-index: -2;
  border-radius: 0;
  background:
    radial-gradient(closest-side circle at 26% 18%, var(--aur-1), transparent 70%),
    radial-gradient(closest-side circle at 82% 34%, var(--aur-2), transparent 70%);
  animation: vvDrift1 24s ease-in-out infinite alternate;
}

/* main.css definiva qui un orb di 400x400 con border-radius:50%:
   larghezza e raggio vanno riscritti esplicitamente, non basta inset. */
body::after {
  content: '';
  position: fixed;
  top: auto; bottom: -30%; left: -30%;
  width: 160%; height: 90%;
  z-index: -2;
  border-radius: 0;
  background: radial-gradient(closest-side circle at 46% 78%, var(--aur-3), transparent 72%);
  animation: vvDrift2 31s ease-in-out infinite alternate;
}

@keyframes vvDrift1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6%, 5%, 0) scale(1.18); }
}
@keyframes vvDrift2 {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(-7%, -4%, 0) scale(0.94); }
}

/* velo che tiene leggibile il testo sopra l'aurora */
body {
  font-family: var(--f-ui);
  font-variant-numeric: tabular-nums;
  background-color: var(--tg-bg);
  background-image: linear-gradient(180deg,
    rgba(6, 7, 11, 0.20) 0%,
    rgba(6, 7, 11, 0.62) 48%,
    rgba(6, 7, 11, 0.86) 100%);
  background-attachment: scroll;
}
[data-theme="light"] body {
  background-image: linear-gradient(180deg,
    rgba(250, 247, 243, 0.30) 0%,
    rgba(250, 247, 243, 0.70) 48%,
    rgba(250, 247, 243, 0.90) 100%);
}

/* ---------- 2. SPEGNIMENTO DI CIO CHE COSTA ---------- */

/* il blur era la causa dello stuttering: cade ovunque, non solo su .glass */
.glass, .glass-card, .header, .bottom-nav, .chip, .btn, .btn-secondary,
.btn-danger, .btn-success, .form-input, .form-textarea, .product-card,
.custom-select-trigger, .custom-select-dropdown, .modal, .modal-overlay,
.search-bar, .tabs, .tab, .toast, .banner, .app-card, .nav-blob,
.header-back, .admin-role-select, .delete-confirm-overlay,
#bannerContainer > * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* shimmer sempre acceso su header e nav = lavoro del compositor ad app ferma */
.header::after,
.bottom-nav::after,
.glass-card::after,
.glass:not(.product-card)::after {
  content: none !important;
  animation: none !important;
}

/* riflessi speculari statici: non servono piu, la luce la fa l'aurora */
.glass::before,
.glass:not(.product-card)::before,
.glass-card::before,
.header::before,
.bottom-nav::before {
  content: none !important;
}

/* ---------- 3. SUPERFICI ---------- */

.glass,
.glass-card {
  background: var(--glass-bg);
  border: var(--hair) solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
}
.glass-card { padding: var(--pad); }

/* Modal, toast e banner: senza blur il velo al 5,5% non basta piu —
   il contenuto sotto trasparirebbe in doppia esposizione. Stessa base
   quasi opaca dell'header. */
.modal,
.toast,
.banner {
  background: var(--header-veil);
  border-color: var(--glass-border);
}
.modal-overlay { background: rgba(0, 0, 0, 0.55); }

/* .promote-card (ads.css) era rimasta fuori dal kill-list del blur */
.promote-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--glass-bg) !important;
  border-color: var(--glass-border) !important;
}

/* ---------- 4. TIPOGRAFIA ---------- */

.form-label {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tg-hint);
}

/* ogni cifra monospaziata e tabulare: le colonne non ballano */
.price, .amount, .balance, .num, .mono, code, kbd, samp {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ---------- 5. IL DENARO ----------
   Il colore del prezzo e SEMPRE impostato prima del ritaglio: se
   background-clip:text non si applica, il prezzo resta visibile
   invece di sparire (era un bug reale di main.css).                */

.price,
.product-card .price,
.product-detail .detail-price,
.detail-price,
.stat-value,
.admin-stat .value {
  color: var(--accent);
  background: var(--grad-money);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .price, .product-card .price, .product-detail .detail-price,
  .detail-price, .stat-value, .admin-stat .value {
    background: none;
    -webkit-text-fill-color: currentColor;
  }
}

/* ---------- 6. MOLLA AL TOCCO ----------
   E il dettaglio che fa sembrare l'app nativa: rientra e torna
   con rimbalzo. Solo transform.                                    */

.btn, .chip, .product-card, .app-card, .nav-item, .vendor-card, .order-card {
  transition: transform var(--dur-tap) var(--ease-bounce);
}
.btn:active, .chip:active, .product-card:active,
.app-card:active, .vendor-card:active, .order-card:active { transform: scale(0.962); }
.nav-item:active { transform: scale(0.9); }

/* ---------- 7. BOTTONI ---------- */

.btn {
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  border: var(--hair) solid transparent;
  box-shadow: none;
  overflow: hidden;
  position: relative;
}
.btn::after { content: none; }   /* la patina obliqua di main.css */

.btn-primary {
  background: var(--grad-cta);
  color: var(--grad-cta-ink);
  border-color: transparent;
  box-shadow: 0 8px 20px var(--glow-primary);
}
.btn-primary:active { box-shadow: 0 4px 12px var(--glow-primary); }

/* lampo lento sull'azione primaria: un gradiente che scorre, non una luce */
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 36%, rgba(255,255,255,0.30) 50%, transparent 64%);
  transform: translate3d(-130%, 0, 0);
  animation: vvSheen 6s ease-in-out 2s infinite;
  pointer-events: none;
}
@keyframes vvSheen {
  0%        { transform: translate3d(-130%, 0, 0); }
  38%, 100% { transform: translate3d(130%, 0, 0); }
}

.btn-secondary {
  background: var(--glass-bg);
  color: var(--tg-text);
  border-color: var(--glass-border);
}
.btn-success { background: rgba(0,214,143,0.12); color: var(--success); border-color: rgba(0,214,143,0.34); }
.btn-danger  { background: rgba(255,90,112,0.12); color: var(--danger);  border-color: rgba(255,90,112,0.34); }
.btn-bitcoin { background: var(--gradient-bitcoin); color: var(--grad-cta-ink); border-color: transparent; }
.btn-sm { padding: 9px 14px; font-size: 13px; border-radius: var(--radius-sm); }

/* ---------- 8. CHIP ---------- */

.chip {
  border-radius: 22px;
  border: var(--hair) solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--tg-hint);
  font-size: 12px;
  font-weight: 650;
  box-shadow: none;
}
.chip.active {
  background: var(--grad-cta);
  color: var(--grad-cta-ink);
  border-color: transparent;
  font-weight: 750;
}
.chip.chip-physical.active { background: var(--gradient-success); color: #04231A; box-shadow: none; }
.chip.chip-digital.active  { background: var(--gradient-info);    color: #041826; box-shadow: none; }
.chip.chip-service.active  { background: var(--gradient-warning); color: #2A1A02; box-shadow: none; }
.chip.chip-auction.active  { background: var(--gradient-danger);  color: #2A0A0E; box-shadow: none; }

/* Filtri categoria della home: 5 chip SEMPRE tutti visibili su una riga,
   con le parole INTERE. Ogni chip prende la larghezza naturale del suo
   testo (niente tagli, niente puntini); a stare stretti ci pensano il
   font piccolo e il padding ridotto. space-between distribuisce l'aria
   avanzata fra i chip.                                                   */
.filter-chips {
  gap: 4px;
  justify-content: space-between;
  overflow-x: visible;
  padding-bottom: 4px;
}
.filter-chips .chip {
  flex: 0 1 auto;
  padding: 6px 7px;
  font-size: 10px;
  letter-spacing: -0.01em;
  text-align: center;
  white-space: nowrap;
}

/* ---------- 9. INTESTAZIONE ----------
   Card fluttuante come in origine (sticky, arrotondata, bordata da
   main.css) ma con un velo QUASI opaco al posto del vetro: il testo
   che scorre sotto non traspare, la forma resta quella di prima.    */

.header {
  background: var(--header-veil);
  border: var(--hair) solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px var(--glass-shadow);
  overflow: visible;
}

/* ---------- 10. NAVIGAZIONE ----------
   Il blob ora si muove in transform (vedi app.js): niente layout
   a ogni cambio scheda.                                            */

.bottom-nav {
  background: var(--glass-solid-fallback);
  border: var(--hair) solid var(--glass-border);
  box-shadow: 0 -6px 24px var(--glass-shadow);
}
.nav-blob {
  background: var(--grad-cta) !important;
  box-shadow: 0 4px 14px var(--glow-primary) !important;
  filter: none !important;
  transition: transform 0.42s var(--ease-bounce), opacity 0.25s ease, width 0s !important;
}
.nav-blob.dragging { transition: none !important; }
.nav-item { color: var(--tg-hint); transition: color 0.2s ease, transform var(--dur-tap) var(--ease-bounce); }
.nav-item.active { color: var(--grad-cta-ink); }

/* ---------- 11. MODULI ---------- */

.form-input,
.form-textarea {
  border-radius: var(--radius-sm);
  border: var(--hair) solid var(--glass-border);
  background: var(--tg-secondary-bg);
  color: var(--tg-text);
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-input:focus,
.form-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--glow-primary);
}
.form-input[type="number"] { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* ---------- 12. SCHEDE PRODOTTO ----------
   L'entrata a cascata e gia cablata in main.css con i ritardi per
   nth-child: qui ne riscrivo solo la curva.                        */

.product-card {
  background: var(--glass-bg);
  border: var(--hair) solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: 0 5px 16px var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
}
.product-card .thumb { border-radius: var(--radius) var(--radius) 0 0; }

@keyframes cardEnter {
  from { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes pageEnter {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 13. LAMPO A RICHIESTA ----------
   Applicato da vivo.js alla carta del saldo.                       */

.vv-shine { position: relative; overflow: hidden; }
.vv-shine::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,0.20) 48%, transparent 62%);
  transform: translate3d(-120%, 0, 0);
  animation: vvSheen 5.5s ease-in-out 1.2s infinite;
  pointer-events: none;
  z-index: 2;
}

/* ---------- 14. DISTINTIVI ---------- */

.user-badge,
.type-badge {
  border-radius: 20px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  box-shadow: none;
}

/* ---------- 15. DENOMINAZIONI ---------- */

.den { font-family: var(--f-mono); font-weight: 700; color: var(--dc, var(--tg-text)); }
.den-btc{--dc:var(--d-btc)} .den-ltc{--dc:var(--d-ltc)} .den-xmr{--dc:var(--d-xmr)}
.den-doge{--dc:var(--d-doge)} .den-dash{--dc:var(--d-dash)} .den-grs{--dc:var(--d-grs)}
.den-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--dc, var(--tg-hint)); }

/* ---------- 16. DIVISORI ---------- */
.divider { background: var(--glass-border); height: var(--hair); opacity: 1; }

/* ---------- 17. CARICAMENTO ----------
   Barra di composizione al posto dello spinner: dice che sta
   succedendo qualcosa senza fingere un progresso che non conosciamo. */

.spinner {
  border: 0 !important;
  border-radius: 3px !important;
  width: 92px !important;
  height: 3px !important;
  background: var(--glass-border);
  position: relative;
  overflow: hidden;
  animation: none !important;
}
.spinner::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 36%;
  border-radius: 3px;
  background: var(--grad-cta);
  animation: vvSlide 1.1s var(--ease-smooth) infinite;
}
@keyframes vvSlide {
  0%   { transform: translate3d(-100%, 0, 0); }
  100% { transform: translate3d(300%, 0, 0); }
}

/* ---------- 18. CORIANDOLI ---------- */
#vvConfetti {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
}

/* ---------- 19. ACCESSO ----------
   La schermata di login era rimasta col vecchio tema hardcoded
   (gradiente indaco + badge ambra): ora parla la lingua di tutto
   il resto fin dal primo secondo.                                   */

#tgLoginOverlay {
  background: var(--tg-bg) !important;
  animation: none !important;
}
.tg-login-badge {
  background: var(--grad-cta) !important;
  color: var(--grad-cta-ink) !important;
  box-shadow: 0 8px 24px var(--glow-primary) !important;
}
.tg-login-title {
  color: var(--tg-text) !important;
  text-shadow: none !important;
}
.tg-login-subtitle {
  color: var(--accent) !important;
  font-family: var(--f-mono);
}
.tg-login-divider {
  background: linear-gradient(90deg, transparent, var(--accent), transparent) !important;
}
.tg-login-desc { color: var(--tg-hint) !important; }
.tg-login-btn {
  background: var(--grad-cta) !important;
  color: var(--grad-cta-ink) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 8px 20px var(--glow-primary) !important;
}

/* ---------- 20. SELECT ----------
   Gli stati hover/selected erano rimasti indaco del vecchio tema.   */

[data-theme="dark"] .custom-select-option:hover,
.custom-select-option:hover {
  background: rgba(var(--accent-rgb), 0.14);
}
[data-theme="dark"] .custom-select-option.selected,
[data-theme="light"] .custom-select-option.selected {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}
[data-theme="light"] .custom-select-option.selected::after,
[data-theme="light"] .custom-select-wrap.open .custom-select-trigger,
[data-theme="light"] .custom-select-wrap.open .custom-select-trigger::after {
  border-color: var(--accent);
}

/* ---------- 21. CHIP CATEGORIA SU TEMA CHIARO ----------
   In light i gradienti semantici scuriscono: l'inchiostro scuro
   pensato per il dark non regge piu — serve bianco.                 */

[data-theme="light"] .chip.chip-physical.active,
[data-theme="light"] .chip.chip-digital.active,
[data-theme="light"] .chip.chip-service.active,
[data-theme="light"] .chip.chip-auction.active {
  color: #FFFFFF;
}

/* ---------- 22. RISPETTO DELLE PREFERENZE ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  body::before, body::after { animation: none !important; }
}