/* SpinMafia FAQ – Dark/Neon Style (scoped mit .sm-faq) */
:root{
  --sm-red: #e60000;           /* aus deiner style.css (primary) */
  --sm-bg: #0b1018;            /* dunkles Panel */
  --sm-card: #0f1420;          /* Card-Hintergrund */
  --sm-border: rgba(255,255,255,.08);
  --sm-text: #e9eef7;
  --sm-muted: #aab6c3;
}

.sm-faq.container{
  width: 90%;
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 0 4rem;
}

.sm-faq__head{
  text-align: center;
  margin-bottom: 1.25rem;
}
.sm-faq__title{
  font-size: clamp(1.6rem, 2.8vw, 2.25rem);
  margin: 0 0 .4rem;
  color: var(--sm-text);
  letter-spacing: .3px;
}
.sm-faq__sub{
  margin: 0 auto .8rem;
  max-width: 760px;
  color: var(--sm-muted);
}

.sm-faq__actions{
  display: flex; gap: .5rem; justify-content: center; margin-top: .75rem;
}
.sm-faq__btn{
  appearance: none; border: 1px solid var(--sm-border);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color: var(--sm-text); font-weight: 700;
  border-radius: 12px; padding: .6rem .9rem; cursor: pointer;
}
.sm-faq__btn:hover{ border-color: rgba(230,0,0,.35); }
.sm-faq__btn--ghost{
  background: transparent;
  border-color: var(--sm-border);
  color: var(--sm-muted);
}

.sm-faq__list{
  display: grid; gap: 10px; margin-top: 1rem;
}

.sm-faq__item{
  background: var(--sm-card);
  border: 1px solid var(--sm-border);
  border-radius: 14px;
  overflow: hidden;
}

.sm-faq__q{
  list-style: none;
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 10px; padding: 14px 16px;
  cursor: pointer; user-select: none;
  position: relative;
}
.sm-faq__q::-webkit-details-marker{ display:none; }

.sm-faq__qtext{ color: var(--sm-text); font-weight: 800; letter-spacing: .25px; }
.sm-faq__chev{
  width: 18px; height: 18px; opacity: .9;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") no-repeat center / contain;
  color: #cbd5e1;
  transition: transform .18s ease;
}

.sm-faq__item[open] .sm-faq__chev{ transform: rotate(180deg); }

.sm-faq__a{
  padding: 0 16px 16px 16px;
  color: var(--sm-text);
}
.sm-faq__a p{ margin: .4rem 0 0; color: var(--sm-text); }

/* Accent-Bar (links) bei Hover/Open */
.sm-faq__item .sm-faq__q::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px;
  border-radius: 3px; background: linear-gradient(180deg, rgba(230,0,0,0), rgba(230,0,0,.9), rgba(230,0,0,0));
  transform: scaleY(0); transition: transform .22s ease;
}
.sm-faq__item:hover .sm-faq__q::before,
.sm-faq__item[open] .sm-faq__q::before{ transform: scaleY(1); }

/* Responsive */
@media (max-width: 600px){
  .sm-faq.container{ padding-top: 1rem; }
  .sm-faq__btn{ padding: .55rem .8rem; }
}