/* ══════════════════════════════════════════════════════════
   e-mail.dev — Main Stylesheet
   ══════════════════════════════════════════════════════════ */

/* ── Gradient border masks (Tailwind can't express mask-composite) ── */

.gradient-border-main::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 1.5rem;
  padding: 2.5px;
  background: linear-gradient(135deg, rgba(0,229,255,0.28) 0%, transparent 38%, transparent 62%, rgba(124,58,237,0.28) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.gradient-border-cyan::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 1.125rem;
  padding: 2.5px;
  background: linear-gradient(160deg, rgba(0,229,255,0.55) 0%, rgba(0,229,255,0.06) 50%, rgba(0,229,255,0.35) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.gradient-border-pink::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 1.125rem;
  padding: 2.5px;
  background: linear-gradient(160deg, rgba(255,45,138,0.55) 0%, rgba(255,45,138,0.06) 50%, rgba(255,45,138,0.35) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.gradient-border-green::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 1.125rem;
  padding: 2.5px;
  background: linear-gradient(160deg, rgba(45,212,168,0.55) 0%, rgba(45,212,168,0.06) 50%, rgba(45,212,168,0.35) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.gradient-border-red::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 1.125rem;
  padding: 2.5px;
  background: linear-gradient(160deg, rgba(255,45,138,0.55) 0%, rgba(255,45,138,0.06) 50%, rgba(255,45,138,0.35) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* ── Neon ring base ── */

.neon-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* ── Focus visible ── */

.focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,229,255,0.35);
}

/* ── Result animation ── */

.result-card {
  animation: resultIn 0.4s cubic-bezier(0.22,1,0.36,1) forwards;
}

@keyframes resultIn {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Scrollbar ── */

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0b1a; }
::-webkit-scrollbar-thumb { background: #2a2d52; border-radius: 999px; }

/* ── Mesh gradient background ── */

.mesh-bg {
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(0,229,255,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 80% 70%, rgba(124,58,237,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 60% 20%, rgba(217,70,239,0.04) 0%, transparent 70%),
    #060714;
}

/* ── Detail rows (result cards) ── */

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-label {
  color: #9ca3af;
  font-size: 13px;
  font-weight: 500;
}

.detail-value {
  color: #e5e7eb;
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  word-break: break-all;
}

/* ── Footer expandable sections ── */

.footer-section-content {
  display: none;
  margin-top: 16px;
  padding: 20px;
  background: rgba(14,16,40,0.6);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
}

.footer-section-content.active {
  display: block;
  animation: resultIn 0.35s ease forwards;
}

.footer-tab.tab-active {
  background: rgba(20,22,54,0.7) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

.footer-tab.tab-active span {
  color: #fff !important;
}

/* ── Language buttons ── */

.lang-btn {
  padding: 2px 8px;
  min-width: 36px;        /* ← aggiunta */
  text-align: center;     /* ← aggiunta */
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.2s;
}

.lang-btn:hover,
.lang-btn.active {
  color: #fff;
  border-color: rgba(0,229,255,0.5);
  background: rgba(0,229,255,0.1);
}
@media (max-width: 767px) {
  .neon-ring {
    animation: none !important;
    will-change: auto;
  }
}