body.modal-open { overflow: hidden; }

.modal{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.55);
  z-index: 9999;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}

.modal.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 180ms ease, visibility 0s linear 0s;
}

.modal-content{
  width: min(920px, 100%);
  max-height: min(78vh, 720px);
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line, #e5e7eb);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);

  display: flex;
  flex-direction: column;

  transform: translateY(12px) scale(0.985);
  opacity: 0;
  transition: transform 220ms ease, opacity 220ms ease;
}

.modal.is-open .modal-content{
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px;
  background:#fff;
  border-bottom:1px solid var(--line, #e5e7eb);
  flex: 0 0 auto;
}

.modal-header h2{
  margin:0;
  font-size:18px;
  color:var(--navy, #0f172a);
}

.close-btn{
  width:38px;
  height:38px;
  border-radius:10px;
  border:1px solid var(--line, #e5e7eb);
  background:#fff;
  cursor:pointer;
  font-size:22px;
  line-height:1;
  color:var(--navy, #0f172a);
}

.close-btn:hover{ filter: brightness(0.98); }

.close-btn:focus-visible{
  outline:3px solid rgba(59,130,246,.35);
  outline-offset:2px;
}

.modal-body{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;

  padding: 0;
}

.faq-search{
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fff;

  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--line, #e5e7eb);
}

.faq-search input{
  width:100%;
  border:1px solid var(--line, #e5e7eb);
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
  outline:none;
}

.faq-search input:focus-visible{
  outline:3px solid rgba(59,130,246,.35);
  outline-offset:2px;
}

.faq-search-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
  font-size:12px;
  color:#64748b;
}

.faq-clear{
  border:1px solid var(--line, #e5e7eb);
  background:#fff;
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer;
  font-weight:700;
  color:var(--navy, #0f172a);
}

.faq-clear:hover{ filter: brightness(0.98); }

.faq-content{
  padding: 14px 18px 18px;
}

.faq-section{
  padding:10px 0 6px;
  border-bottom:1px dashed var(--line, #e5e7eb);
}

.faq-section:last-child{ border-bottom:0; }

.faq-h{
  margin:6px 0 10px;
  font-size:13px;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--navy, #0f172a);
  opacity:.85;
}

details{
  border:1px solid var(--line, #e5e7eb);
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
  margin:10px 0;
}

details[open]{ box-shadow:0 10px 30px rgba(15,23,42,0.08); }

summary{
  cursor:pointer;
  font-weight:800;
  color:var(--navy, #0f172a);
  list-style:none;
  outline:none;
}

summary:focus-visible{
  outline:3px solid rgba(59,130,246,.35);
  outline-offset:4px;
  border-radius:10px;
}

summary::-webkit-details-marker{ display:none; }

summary::after{
  content:"▾";
  float:right;
  font-weight:900;
  opacity:.8;
  transform: translateY(-1px);
}

details[open] summary::after{ content:"▴"; }

details p{
  margin:10px 0 0;
  color:#334155;
  line-height:1.45;
}

.faq-hidden{ display:none !important; }

@media (prefers-reduced-motion: reduce){
  .modal, .modal-content{ transition:none; }
  .modal-content{ transform:none; }
}