/* 12-faq — Buyer / Seller FAQ pages.
   Loaded on every page in file-name order (see inc/core/assets.php). */

/* =========================================================
   BUYER FAQ PAGE
   ========================================================= */

.sf-hero{
  background:linear-gradient(120deg,var(--ink),#16264f 60%,#1d2f5e);
  color:#fff;
  padding:56px 0 46px;
  position:relative;
  overflow:hidden;
  text-align:center;
}

.sf-hero .blob{
  position:absolute;
  border-radius:50%;
  filter:blur(8px);
  pointer-events:none;
}

.sf-hero .eyebrow{
  display:inline-flex;
  background:rgba(199,169,107,.16);
  color:#E7D6A8;
  border:1px solid rgba(199,169,107,.4);
}

.sf-hero h1{
  color:#fff;
  font-size:clamp(28px,4vw,42px);
  margin:14px 0 10px;
  letter-spacing:-.02em;
  line-height:1.15;
}

.sf-hero p{
  color:rgba(255,255,255,.82);
  font-size:16px;
  max-width:700px;
  margin:0 auto;
  line-height:1.6;
}

/* FAQ Search */

.sf-search{
  max-width:760px;
  margin:26px auto 0;
}

.sf-search .aisearch-bar{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:var(--r-pill);
  padding:8px 8px 8px 18px;
  box-shadow:var(--shadow-lg);
}

.sf-search .aisearch-bar input{
  flex:1;
  min-width:0;
  border:none;
  outline:none;
  background:transparent;
  font-family:inherit;
  font-size:14px;
  color:var(--text);
}

.sf-search .aisearch-bar input::placeholder{
  color:var(--muted-2);
}

/* FAQ Categories */

.sf-cats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  max-width:1000px;
  margin:-30px auto 0;
  position:relative;
  z-index:5;
  padding:0 var(--gutter);
}

.sf-cat{
  display:flex;
  align-items:center;
  gap:13px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-md);
  padding:16px 18px;
  transition:all var(--fast) var(--ease);
}

.sf-cat:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
  border-color:var(--blue-pale);
}

.sf-cat-ico{
  width:42px;
  height:42px;
  flex-shrink:0;
  border-radius:12px;
  background:var(--blue-pale);
  color:var(--blue-deep);
  display:flex;
  align-items:center;
  justify-content:center;
}

.sf-cat-ico svg{
  width:20px;
  height:20px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.9;
}

.sf-cat b{
  display:block;
  font-size:14px;
  color:var(--text);
}

.sf-cat span{
  display:block;
  margin-top:4px;
  font-size:12px;
  color:var(--text-mut);
}

/* FAQ Content */

.sf-body{
  max-width:1000px;
  margin:0 auto;
  padding:56px var(--gutter) 40px;
}

.sf-group{
  margin-bottom:34px;
}

.sf-group-h{
  font-size:19px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:14px;
  padding-left:14px;
  border-left:3px solid var(--gold);
}

/* FAQ Accordion */

.sf-group .accordion{
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
}

.sf-group .acc-item{
  border-bottom:1px solid var(--line);
}

.sf-group .acc-item:last-child{
  border-bottom:none;
}

.sf-group .acc-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px;
  cursor:pointer;
  font-size:15px;
  font-weight:600;
  color:var(--text);
  background:var(--surface);
  transition:background var(--fast);
}

.sf-group .acc-head:hover{
  background:var(--surface-2);
}

.sf-group .acc-head svg{
  width:18px;
  height:18px;
  flex-shrink:0;
  stroke:var(--blue);
  fill:none;
  stroke-width:2.2;
  transition:transform var(--med) var(--ease);
}

.sf-group .acc-item.open .acc-head svg{
  transform:rotate(45deg);
}

.sf-group .acc-body{
  max-height:0;
  overflow:hidden;
  transition:max-height var(--med) var(--ease);
}

.sf-group .acc-body-inner{
  padding:0 22px 20px;
  color:var(--text-soft);
  font-size:14px;
  line-height:1.7;
}

/* CTA */

.sf-cta{
  max-width:1000px;
  margin:0 auto 70px;
  padding:0 var(--gutter);
}

.sf-cta-inner{
  background:linear-gradient(135deg,var(--ink),var(--blue-deep));
  border-radius:var(--r-xl);
  padding:40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  color:#fff;
  box-shadow:var(--shadow-lg);
}

.sf-cta-inner h3{
  color:#fff;
  font-size:23px;
  margin:0 0 7px;
}

.sf-cta-inner p{
  color:rgba(255,255,255,.8);
  font-size:14px;
  line-height:1.6;
}

.sf-cta-btns{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* ================= MOBILE ================= */

@media(max-width:820px){

  .sf-hero{
    padding:44px 18px 40px;
  }

  .sf-hero h1{
    font-size:30px;
  }

  .sf-hero p{
    font-size:14px;
  }

  .sf-cats{
    grid-template-columns:1fr;
    margin:20px auto 0;
  }

  .sf-body{
    padding:40px var(--gutter) 30px;
  }

  .sf-group-h{
    font-size:18px;
  }

  .sf-group .acc-head{
    padding:16px;
    font-size:14px;
  }

  .sf-group .acc-body-inner{
    padding:0 16px 18px;
  }

  .sf-cta-inner{
    padding:28px 22px;
  }
}

@media(max-width:520px){

  .sf-search .aisearch-bar{
    border-radius:18px;
    padding:8px;
  }

  .sf-search .aisearch-bar input{
    font-size:13px;
  }

  .sf-search .btn{
    padding:10px 14px;
  }

  .sf-cta-btns{
    width:100%;
  }

  .sf-cta-btns .btn{
    width:100%;
  }
}