/* ════════════════════════════════════════════════════════════
   NYXIDIE · UI compartida
   - Nav con iconos cart/fav + badges
   - Modal de descuento
   - Toast flotante
   - Botón corazón favorito (cards + producto)
   Depende de las :root vars definidas en cada pagina.
   ════════════════════════════════════════════════════════════ */

/* ─── NAV con iconos cart/fav ─── */
.nav-actions{
  display:flex;
  align-items:center;
  gap:6px;
}
.nav-icon{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  border-radius:50%;
  color:var(--text);
  transition:background .25s var(--ease), color .25s var(--ease);
  text-decoration:none;
}
.nav-icon:hover{
  background:rgba(232,199,136,.08);
  color:var(--gold-bright);
}
.nav-icon svg{
  width:20px; height:20px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.nav-icon.is-active svg{
  fill:var(--gold);
  stroke:var(--gold);
}
.nav-badge{
  position:absolute;
  top:5px; right:3px;
  min-width:16px; height:16px;
  padding:0 4px;
  border-radius:8px;
  background:var(--gold);
  color:#0A0908;
  font-family:'Inter', system-ui, sans-serif;
  font-size:9px;
  font-weight:600;
  letter-spacing:.04em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  box-shadow:0 0 0 2px var(--bg);
}

/* ─── Corazón favorito en cards (categoria.html) ─── */
.prod-fav{
  position:absolute;
  top:10px; right:10px;
  width:34px; height:34px;
  border-radius:50%;
  background:rgba(10,9,8,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(232,199,136,.25);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:3;
  transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.prod-fav:hover{
  background:rgba(10,9,8,.78);
  border-color:rgba(232,199,136,.6);
  transform:scale(1.06);
}
.prod-fav svg{
  width:16px; height:16px;
  stroke:#F5F0E6;
  fill:none;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:fill .35s var(--ease), stroke .35s var(--ease), transform .35s var(--ease);
}
.prod-fav.is-active svg{
  fill:#E8C788;
  stroke:#E8C788;
  transform:scale(1.08);
  animation:nxHeartPop .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes nxHeartPop{
  0%{transform:scale(.6)}
  50%{transform:scale(1.25)}
  100%{transform:scale(1.08)}
}

/* ─── MODAL DE DESCUENTO ─── */
.nx-modal{
  position:fixed; inset:0;
  z-index:300;
  display:grid; place-items:center;
  padding:20px;
  pointer-events:none;
}
.nx-modal.show{pointer-events:auto}
.nx-modal-bg{
  position:absolute; inset:0;
  background:rgba(10,9,8,.78);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  opacity:0;
  transition:opacity .35s cubic-bezier(.4,0,.2,1);
}
.nx-modal.show .nx-modal-bg{opacity:1}
.nx-modal-card{
  position:relative;
  background:#141210;
  border:1px solid rgba(201,168,106,.25);
  padding:44px 36px 36px;
  max-width:440px;
  width:100%;
  text-align:center;
  transform:translateY(20px) scale(.97);
  opacity:0;
  transition:transform .45s cubic-bezier(.34,1.4,.6,1), opacity .35s ease-out;
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(201,168,106,.04);
}
.nx-modal.show .nx-modal-card{
  transform:translateY(0) scale(1);
  opacity:1;
}
.nx-modal-x{
  position:absolute;
  top:12px; right:12px;
  width:34px; height:34px;
  display:grid; place-items:center;
  font-family:'Bodoni Moda', serif;
  font-size:22px;
  color:#BDB4A2;
  background:transparent;
  border:none;
  cursor:pointer;
  border-radius:50%;
  transition:color .25s ease, background .25s ease;
  line-height:1;
}
.nx-modal-x:hover{color:#F5F0E6; background:rgba(255,255,255,.05)}
.nx-modal-mark{
  font-family:'Bodoni Moda', serif;
  font-size:48px;
  color:#C9A86A;
  line-height:1;
  margin-bottom:20px;
  opacity:.85;
}
.nx-modal-card h2{
  font-family:'Bodoni Moda', serif;
  font-weight:400;
  font-size:26px;
  line-height:1.15;
  color:#F5F0E6;
  margin-bottom:14px;
  letter-spacing:.005em;
}
.nx-modal-card h2 em{
  font-style:italic;
  color:#E8C788;
  font-weight:500;
}
.nx-modal-card p{
  font-family:'Bodoni Moda', serif;
  font-size:15px;
  line-height:1.55;
  color:#BDB4A2;
  margin-bottom:24px;
}
.nx-modal-card .nx-disc-small{
  font-size:12px;
  letter-spacing:.04em;
  color:#7D7568;
  font-family:'Inter', system-ui, sans-serif;
  margin-top:16px;
  margin-bottom:24px;
}
.nx-modal-card form{margin-bottom:14px}
.nx-modal-card input[type=email]{
  width:100%;
  background:#0A0908;
  border:1px solid rgba(201,168,106,.18);
  color:#EDE6D6;
  font-family:'Inter', system-ui, sans-serif;
  font-size:14px;
  padding:14px 16px;
  letter-spacing:.04em;
  outline:none;
  margin-bottom:12px;
  transition:border-color .25s ease;
  border-radius:0;
}
.nx-modal-card input[type=email]:focus{border-color:#C9A86A}
.nx-modal-btn{
  display:inline-block;
  font-family:'Bodoni Moda', serif;
  font-size:11px;
  letter-spacing:.42em;
  text-transform:uppercase;
  font-weight:500;
  padding:13px 28px;
  border:1px solid #C9A86A;
  background:transparent;
  color:#F5F0E6;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.nx-modal-btn:hover:not(:disabled){background:#C9A86A; color:#0A0908}
.nx-modal-btn:disabled{opacity:.5; cursor:not-allowed}
.nx-modal-btn-primary{background:#C9A86A; color:#0A0908; width:100%}
.nx-modal-btn-primary:hover:not(:disabled){background:#E8C788; border-color:#E8C788}
.nx-disc-err{
  color:#d2616a;
  font-family:'Inter', system-ui, sans-serif;
  font-size:12px;
  letter-spacing:.04em;
  min-height:16px;
  margin-bottom:8px;
}
.nx-modal-skip{
  display:inline-block;
  font-family:'Inter', system-ui, sans-serif;
  font-size:11px;
  color:#7D7568;
  letter-spacing:.1em;
  margin-top:8px;
  text-decoration:none;
  transition:color .25s ease;
}
.nx-modal-skip:hover{color:#BDB4A2; text-decoration:underline}
.nx-disc-code{
  display:inline-block;
  font-family:'Bodoni Moda', serif;
  font-weight:500;
  font-size:32px;
  letter-spacing:.4em;
  padding:16px 28px;
  color:#0A0908;
  background:#E8C788;
  margin:8px 0 18px;
  border-radius:2px;
  box-shadow:0 0 0 1px #C9A86A, 0 8px 24px rgba(201,168,106,.18);
}

/* ─── TOAST flotante ─── */
.nx-toast{
  position:fixed;
  bottom:24px; left:50%;
  transform:translateX(-50%) translateY(140%);
  z-index:250;
  background:#141210;
  border:1px solid rgba(201,168,106,.4);
  color:#F5F0E6;
  font-family:'Bodoni Moda', serif;
  font-size:13px;
  letter-spacing:.06em;
  padding:14px 24px;
  border-radius:1px;
  box-shadow:0 16px 40px rgba(0,0,0,.6);
  transition:transform .45s cubic-bezier(.34,1.4,.6,1), opacity .3s ease;
  opacity:0;
  pointer-events:none;
}
.nx-toast.show{
  transform:translateX(-50%) translateY(0);
  opacity:1;
}

/* ─── Boton corazon en producto.html (botonera principal) ─── */
.btn-fav{
  width:54px;
  min-width:54px;
  flex:0 0 auto !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center; justify-content:center;
}
.btn-fav svg{
  width:18px; height:18px;
  stroke:currentColor; fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  transition:fill .35s var(--ease), transform .35s var(--ease);
}
.btn-fav.is-active{background:transparent !important; color:#E8C788 !important}
.btn-fav.is-active svg{fill:currentColor; transform:scale(1.05); animation:nxHeartPop .45s cubic-bezier(.34,1.56,.64,1)}

@media (max-width:480px){
  .nx-modal-card{padding:36px 24px 28px}
  .nx-modal-card h2{font-size:22px}
  .nx-disc-code{font-size:24px; letter-spacing:.3em; padding:14px 22px}
}