/* faq.css — Aim Master FAQ (matches status.css theme) */
:root{
  --green:#00ff10;
  --orange:#ffa600;
  --blue:#2986cc;
  --red:#ff0000;

  --bg-dark:#0e0f14;
  --panel:#14151a;
  --panel-2:#1a1b20;

  --text-light:#ffffff;
  --text-gray:#a8a8a8;

  --border:#222;
  --border-2:#2a2b30;

  --radius:6px;
  --transition:0.3s ease;

  /* Purchase button colors */
  --purchase-a:#f09821;
  --purchase-b:#ff4b5c;
}

/* Resets */
#faqPage__root ul{ list-style:none; margin:0; padding:0; }
#faqPage__root *{ box-sizing:border-box; }

/* Root */
#faqPage__root{
  background:var(--bg-dark);
  color:var(--text-light);
  padding:30px;
  border-radius:var(--radius);

  /* SAME AS status.css */
  font-family: Inter, Roboto, sans-serif;
}
#faqPage__root.ipsBox{ border:0; box-shadow:none; }

/* Header */
#faqPage__root .statusPageHeader__title{
  /* SAME AS status.css */
  font-size:2rem;
  font-weight:600;
  margin-bottom:20px;
  text-transform:uppercase;
}

/* =========================
   Pill style (legend-like tabs)
   ========================= */
#faqPage__root .statusTypes{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* in FAQ tabs, statusType__row is a <button> */
#faqPage__root .faqTab{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  cursor:pointer;
  font:inherit; /* inherits Inter/Roboto */
}

/* Shared pill look */
#faqPage__root .statusType__row{
  position:relative;
  padding:8px 14px;
  border-radius:999px;

  /* SAME AS status.css */
  font-size:0.9rem;

  display:inline-flex;
  align-items:center;
  gap:8px;

  border-top:1px solid currentColor;
  border-bottom:1px solid currentColor;

  overflow:hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 10px 24px rgba(0,0,0,0.20);
}

#faqPage__root .statusType__row::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.20));
  opacity:0.85;
}

#faqPage__root .statusType__row > *{
  position:relative;
  z-index:1;
}

/* active tab slight lift (keeps your inline colors) */
#faqPage__root .faqTab.is-active{
  transform:translateY(-1px);
}
#faqPage__root .faqTab:focus-visible{
  outline:2px solid rgba(240,152,33,0.45);
  outline-offset:3px;
  border-radius:999px;
}

/* Icons (same as status) */
#faqPage__root .status--icon{
  position:relative;
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
#faqPage__root .status--icon i{ font-size:1rem; line-height:1; }

#faqPage__root .status--icon .icon-effect{
  position:absolute;
  inset:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:0.30;
  filter:blur(0.7px);
  transform:scale(1.12);
  pointer-events:none;
  animation:amIconPulse 1.35s ease-in-out infinite;
}

@keyframes amIconPulse{
  0%{ opacity:0.30; transform:scale(1.05); }
  60%{ opacity:0.00; transform:scale(1.45); }
  100%{ opacity:0.30; transform:scale(1.05); }
}

/* Main */
#faqPage__root .statusPageMain.ipsBox{
  border:0;
  box-shadow:none;
}

/* Groups */
#faqPage__root .statusGroup{
  margin-top:35px;
  background:var(--panel);
  border-radius:var(--radius);
  padding:20px;
}

#faqPage__root .statusGroup__title{
  /* SAME AS status.css */
  font-size:1.4rem;
  font-weight:600;
  margin-bottom:16px;
  text-transform:uppercase;
  letter-spacing:0.02em;
}

/* =========================
   FAQ accordion (details/summary)
   ========================= */
#faqPage__root .faqList{
  display:grid;
  gap:0;
}

/* each FAQ item looks like a row inside panel */
#faqPage__root .faqItem{
  background:transparent;
  border:0;
  padding:0;
  margin:0;
}

#faqPage__root .faqItem + .faqItem{
  border-top:1px dashed rgba(255,255,255,0.10);
}

#faqPage__root .faqItem__q{
  list-style:none;
  cursor:pointer;
  user-select:none;

  padding:18px 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  font-weight:800;
  color:var(--text-light);
}

/* remove default triangle */
#faqPage__root .faqItem__q::-webkit-details-marker{ display:none; }
#faqPage__root .faqItem__q::marker{ content:""; }

/* plus button on the right */
#faqPage__root .faqItem__toggle{
  width:38px;
  height:38px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
}

#faqPage__root .faqItem__toggle i{
  font-size:1.05rem;
  transition:transform 0.18s ease;
}

/* open state: rotate plus -> x */
#faqPage__root details[open] .faqItem__toggle i{
  transform:rotate(45deg);
}

#faqPage__root .faqItem__a{
  padding:0 8px 18px 8px;
  color:rgba(255,255,255,0.75);
}
#faqPage__root .faqItem__a p{
  margin:0;
  line-height:1.55;
}

/* =========================
   CTA (Open Support) — uses same gradient button
   ========================= */
#faqPage__root .statusButton{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;
  font-weight:800;
  letter-spacing:0.02em;
  text-decoration:none;
  color:#fff;

  padding:12px 18px;
  background:linear-gradient(90deg, var(--purchase-a) 0%, var(--purchase-b) 100%);
  box-shadow:
    0 14px 30px rgba(0,0,0,0.35),
    0 10px 24px rgba(240,152,33,0.22);
  border:0;

  transition:transform 0.2s ease, filter 0.2s ease;
  position:relative;
  overflow:hidden;
}

#faqPage__root .statusButton::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0.18), rgba(0,0,0,0.18));
  opacity:.75;
}

#faqPage__root .statusButton:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
  color:#fff;
}
#faqPage__root .statusButton:active{
  transform:translateY(0);
  filter:brightness(0.98);
}

/* help row */
#faqPage__root .faqHelp{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-top:14px;
  border-top:1px dashed rgba(255,255,255,0.10);
}
#faqPage__root .faqHelp__left{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,0.75);
}

/* tab panels */
#faqPage__root .faqTabContent{ display:none; }
#faqPage__root .faqTabContent.is-active{ display:block; }

/* Responsive */
@media (max-width: 768px){
  #faqPage__root{ padding:15px; }

  /* SAME AS status.css mobile title */
  #faqPage__root .statusPageHeader__title{ font-size:1.5rem; }

  #faqPage__root .faqHelp{ flex-direction:column; align-items:stretch; }
  #faqPage__root .faqHelp__btn{ width:100%; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  #faqPage__root .status--icon .icon-effect{ animation:none; }
}