/* ============================================================
   genting-dream-faqs.php — clean, dense FAQ accordion design.
   Goal: many questions visible without overwhelming the reader.
============================================================ */

/* HERO */
.phero{position:relative;color:#fff;overflow:hidden;padding:60px 0 68px}
.phero-bg{position:absolute;inset:0;z-index:0}
.phero-bg img{width:100%;height:100%;object-fit:cover}
.phero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,rgba(8,29,54,.95) 0%,rgba(8,29,54,.82) 45%,rgba(8,29,54,.5) 100%)}
.phero .wrap{position:relative;z-index:5}
.crumbs{font-size:.86rem;color:#a9bccf;margin-bottom:18px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:#cdd9e5}.crumbs a:hover{color:#fff}
.crumbs span{color:#ff9684}
.phero h1{font-size:clamp(2rem,4vw,3rem);color:#fff;max-width:780px;margin-bottom:14px;line-height:1.15}
.phero h1 em{font-style:italic;color:#ffb3a3}
.phero p{font-size:clamp(.98rem,1.5vw,1.1rem);color:#d3deea;max-width:660px;margin-bottom:26px;line-height:1.6}
.phero-actions{display:flex;gap:12px;flex-wrap:wrap}
.phero-meta{display:flex;gap:28px;margin-top:32px;flex-wrap:wrap;padding-top:24px;border-top:1px solid rgba(255,255,255,.15)}
.phero-meta div b{font-family:'Playfair Display';font-size:1.4rem;color:#fff;display:block;line-height:1}
.phero-meta div small{font-size:.78rem;color:#9fb1c4}

/* STICKY CONTROLS — search + category pills */
.faq-controls{position:sticky;top:73px;z-index:40;background:rgba(255,255,255,.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:18px 0}
.faq-controls .wrap{display:flex;flex-direction:column;gap:14px}

.faq-search{position:relative;display:flex;align-items:center;background:var(--bg-soft);border:1px solid var(--line);border-radius:50px;padding:0 18px;max-width:560px;transition:.2s}
.faq-search:focus-within{border-color:var(--coral);box-shadow:0 0 0 4px rgba(232,80,58,.12);background:#fff}
.fs-ico{font-size:1rem;color:var(--slate);flex:none;margin-right:10px}
.faq-search input{flex:1;border:none;background:transparent;outline:none;padding:11px 0;font-size:.94rem;color:var(--ink);font-family:inherit}
.faq-search input::placeholder{color:var(--slate-light)}
.fs-count{display:none;font-size:.78rem;font-weight:700;color:var(--coral);background:var(--coral-soft);padding:4px 10px;border-radius:50px;white-space:nowrap;margin-left:8px}

.faq-cats{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0;-webkit-overflow-scrolling:touch}
.faq-cats::-webkit-scrollbar{display:none}
.faq-cat-pill{flex:none;font-size:.84rem;font-weight:700;color:var(--slate);background:#fff;border:1px solid var(--line);padding:7px 14px;border-radius:50px;cursor:pointer;transition:.2s;white-space:nowrap;font-family:inherit}
.faq-cat-pill:hover{color:var(--coral);border-color:var(--coral)}
.faq-cat-pill.active{background:var(--coral);color:#fff;border-color:var(--coral);box-shadow:0 4px 12px rgba(232,80,58,.25)}

/* MAIN FAQ AREA */
.faq-main{padding-top:50px;padding-bottom:30px}
.faq-cat-block{margin-bottom:50px;scroll-margin-top:200px}
.faq-cat-block:last-child{margin-bottom:20px}

/* Category header — compact */
.faq-cat-head{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;margin-bottom:18px;padding-bottom:14px;border-bottom:2px solid var(--line)}
.fch-ico{font-size:1.8rem;width:50px;height:50px;background:var(--coral-soft);border-radius:12px;display:grid;place-items:center;flex:none}
.faq-cat-head h2{font-size:clamp(1.25rem,2vw,1.5rem);margin-bottom:3px;color:var(--ink);line-height:1.2}
.faq-cat-head p{font-size:.88rem;color:var(--slate);margin:0;line-height:1.4}
.fch-count{font-family:'Plus Jakarta Sans';font-size:.74rem;font-weight:800;color:var(--coral);background:var(--coral-soft);padding:5px 11px;border-radius:50px;letter-spacing:.04em;white-space:nowrap;flex:none}

/* CLEAN FAQ ACCORDION — minimal, dense, scannable */
.faq-list-clean{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.faq-clean{border-bottom:1px solid var(--line-soft)}
.faq-clean:last-child{border-bottom:none}
.faq-clean summary{
  padding:16px 22px;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  font-size:.96rem;
  font-weight:600;
  color:var(--ink);
  line-height:1.45;
  list-style:none;
  transition:background .15s;
  user-select:none;
}
.faq-clean summary::-webkit-details-marker{display:none}
.faq-clean summary:hover{background:var(--bg-soft)}
.faq-clean[open] summary{background:var(--bg-soft);color:var(--coral-deep);padding-bottom:10px}
.fq{flex:1}
.fpm{
  width:22px;
  height:22px;
  flex:none;
  position:relative;
  margin-top:2px;
  transition:transform .2s var(--ease);
}
.fpm::before,
.fpm::after{
  content:'';
  position:absolute;
  background:var(--coral);
  border-radius:2px;
  transition:.2s;
}
.fpm::before{
  top:50%;
  left:0;
  width:100%;
  height:2px;
  transform:translateY(-50%);
}
.fpm::after{
  top:0;
  left:50%;
  width:2px;
  height:100%;
  transform:translateX(-50%);
}
.faq-clean[open] .fpm::after{transform:translateX(-50%) rotate(90deg);opacity:0}

.fa{
  padding:0 22px 18px 22px;
  font-size:.92rem;
  color:var(--slate);
  line-height:1.65;
}
.fa strong{color:var(--ink);font-weight:700}
.fa a{color:var(--coral);font-weight:700}
.fa a:hover{text-decoration:underline}

/* NO RESULTS STATE */
.faq-no-results{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:60px 30px;
  text-align:center;
  margin-top:30px;
}
.fnr-ico{font-size:3rem;margin-bottom:14px;opacity:.5}
.faq-no-results h3{font-size:1.25rem;margin-bottom:8px;color:var(--ink)}
.faq-no-results p{font-size:.95rem;color:var(--slate);margin-bottom:22px;max-width:420px;margin-left:auto;margin-right:auto}

/* RESPONSIVE */
@media(max-width:768px){
  .faq-controls{top:69px;padding:14px 0}
  .faq-cat-head{grid-template-columns:auto 1fr;gap:12px;align-items:center}
  .faq-cat-head .fch-count{grid-column:1/-1;justify-self:start;margin-top:6px}
  .fch-ico{width:42px;height:42px;font-size:1.4rem}
  .faq-cat-head h2{font-size:1.15rem}
  .faq-cat-head p{font-size:.82rem}
  .faq-clean summary{padding:14px 18px;font-size:.92rem}
  .fa{padding:0 18px 16px 18px;font-size:.88rem}
  .phero-meta{gap:18px}
}

@media(max-width:520px){
  .faq-search{padding:0 14px}
  .faq-search input{font-size:.9rem}
}


.faq-cats-wrap{
  padding:0 36px;
  width:100%;
}

.faq-cats-wrap .qnav-arrow{
  width:30px;
  height:30px;
  font-size:.95rem;
}
.faq-cats-wrap .qnav-arrow.qnav-prev{left:0}
.faq-cats-wrap .qnav-arrow.qnav-next{right:0}

.faq-cats.qnav-track{
  padding:2px 0;
  gap:8px;
  scroll-padding:8px;
}

@media(max-width:768px){
  .faq-cats-wrap{padding:0}
}