/*
 * Why Buy from BuyBookMart — page styles
 * Enqueued only on the "Why Buy From BuyBookMart" page template.
 * Upload to: /wp-content/themes/<your-theme>/css/why-buy-from-buybookmart.css
 */

:root{
  --orange:#F26B1D;
  --orange-dark:#D9560E;
  --orange-light:#FFF1E6;
  --navy:#182A4E;
  --navy-soft:#5B6B8C;
  --bg-soft:#F7F8FB;
  --border:#EBEDF2;
  --text:#33384A;
}

.bbm-hero,
.bbm-hero *,
#why-us, #why-us *,
#faqs, #faqs *,
.promise, .promise *,
.cta-final, .cta-final *,
.band-navy, .band-navy * {
  box-sizing:border-box;
}

.bbm-hero h1, .bbm-hero h2, .bbm-hero h3,
#why-us h1, #why-us h2, #why-us h3,
#faqs h1, #faqs h2, #faqs h3,
.promise h1, .promise h2, .promise h3,
.cta-final h1, .cta-final h2, .cta-final h3,
.band-navy h1, .band-navy h2, .band-navy h3{
  font-family:'Poppins', sans-serif;
  color:var(--navy);
}

.bbm-hero p, .bbm-hero span, .bbm-hero li,
#why-us p, #why-us span, #why-us li,
#faqs p, #faqs span, #faqs li,
.promise p,
.cta-final p,
.band-navy p, .band-navy li{
  font-family:'Inter', sans-serif;
  color:var(--text);
}

.btn-orange{background:var(--orange); border:none; color:#fff; border-radius:50px; font-weight:600; padding:.75rem 1.9rem;}
.btn-orange:hover{background:var(--orange-dark); color:#fff; transform:translateY(-1px);}
.btn-outline-navy{border:1.5px solid #D7DBE6; color:var(--navy); background:#fff; border-radius:50px; font-weight:600; padding:.75rem 1.9rem;}
.btn-outline-navy:hover{border-color:var(--navy); color:var(--navy);}

.badge-pill-soft{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background:var(--orange-light);
  color:var(--orange-dark);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:.4rem 1rem;
  border-radius:50px;
  margin-bottom:1.25rem;
}

/* ---------- Hero ---------- */
.bbm-hero{
  background:linear-gradient(180deg,#FFF8F2 0%, #FFFFFF 65%);
  padding:5rem 0 4rem;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--border);
}
.bbm-hero-blob{
  position:absolute;
  top:-120px; right:-120px;
  width:420px; height:420px;
  background:radial-gradient(circle at 30% 30%, rgba(242,107,29,.16), rgba(242,107,29,0) 70%);
  border-radius:50%;
}
.bbm-hero h1{
  font-size:2.6rem;
  font-weight:800;
  max-width:640px;
}
.bbm-hero .lede{
  max-width:560px;
  font-size:1.06rem;
  color:var(--navy-soft);
}
.bbm-hero .hero-subhead{
  font-size:1.15rem;
  font-weight:700;
  color:var(--orange-dark);
  margin-bottom:1rem;
}
.bbm-hero-actions{position:relative; z-index:1;}

/* ---------- In-card bullet lists (categories, support items) ---------- */
.card-list{
  list-style:none;
  padding-left:0;
  margin:.75rem 0 1rem;
}
.card-list li{
  position:relative;
  padding-left:1.1rem;
  font-size:.93rem;
  color:var(--navy-soft);
  margin-bottom:.35rem;
}
.card-list li::before{
  content:"";
  position:absolute;
  left:0; top:.55em;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--orange);
}

.check-list-footnote{
  margin-top:1.25rem;
  color:#B9C2D6;
  font-size:.92rem;
}

/* ---------- Section rhythm ---------- */
#why-us, #faqs, .promise-section{padding:4.25rem 0;}
.eyebrow{
  font-family:'Poppins', sans-serif;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange);
}
.section-title{
  font-size:1.9rem;
  font-weight:800;
  margin-bottom:.65rem;
}
.section-lead{color:var(--navy-soft); max-width:620px; margin-bottom:2.25rem;}

/* ---------- Trust cards ---------- */
.trust-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:1.9rem 1.6rem;
  height:100%;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.trust-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 32px rgba(24,42,78,.08);
  border-color:transparent;
}
.trust-icon{
  width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
  background:var(--orange-light);
  color:var(--orange);
  border-radius:14px;
  font-size:1.25rem;
  margin-bottom:1.1rem;
}
.trust-card h3{font-size:1.1rem; font-weight:700; margin-bottom:.5rem;}
.trust-card p{font-size:.93rem; margin-bottom:0; color:var(--navy-soft);}

/* ---------- Category pills ---------- */
.cat-pill{
  display:inline-block;
  background:var(--bg-soft);
  color:var(--navy);
  border:1px solid var(--border);
  padding:.45rem 1.1rem;
  margin:0 .5rem .6rem 0;
  border-radius:50px;
  font-size:.88rem;
  font-weight:600;
}

/* ---------- Shop Securely band ---------- */
.band-navy{
  background:var(--navy);
  color:#fff;
  border-radius:24px;
}
.band-navy .section-title{color:#fff;}
.band-navy .eyebrow{color:#FFB27A;}
.band-navy .section-lead{color:#B9C2D6;}
.check-list{list-style:none; padding-left:0;}
.check-list li{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  padding:.55rem 0;
  border-bottom:1px solid rgba(255,255,255,.12);
  color:#fff;
}
.check-list li:last-child{border-bottom:none;}
.check-list i{color:var(--orange); margin-top:.25rem;}

/* ---------- FAQ accordion ---------- */
.faq-item{
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  margin-bottom:.85rem;
  overflow:hidden;
}
.faq-item .faq-q{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1.1rem 1.4rem;
  cursor:pointer;
  font-family:'Poppins', sans-serif;
  font-weight:600;
  color:var(--navy);
  font-size:1rem;
}
.faq-item .faq-q .icon-circle{
  width:30px; height:30px;
  min-width:30px;
  display:flex; align-items:center; justify-content:center;
  background:var(--orange-light);
  color:var(--orange);
  border-radius:50%;
  margin-right:.9rem;
  font-size:.78rem;
  transition:transform .25s ease, background .2s ease, color .2s ease;
}
.faq-item .faq-q[aria-expanded="true"] .icon-circle{
  background:var(--orange);
  color:#fff;
  transform:rotate(45deg);
}
.faq-item .faq-a{
  padding:0 1.4rem 1.25rem 3.7rem;
  color:var(--navy-soft);
  font-size:.94rem;
}

/* ---------- Promise ---------- */
.promise{
  background:var(--bg-soft);
  border-radius:20px;
  padding:2.25rem 2.5rem;
  border-left:4px solid var(--orange);
}
.promise p{margin-bottom:1rem;}
.promise p:last-child{margin-bottom:0;}

/* ---------- Final CTA ---------- */
.cta-final{
  background:linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
  color:#fff;
  text-align:center;
  padding:4rem 0;
  border-radius:24px;
}
.cta-final h2{color:#fff;}
.cta-final p{color:#FFE3D0; max-width:520px; margin:0 auto 1.75rem;}
.cta-final .btn-orange{background:#fff; color:var(--orange-dark);}
.cta-final .btn-orange:hover{background:#FFF1E6;}

@media (max-width:767px){
  .bbm-hero h1{font-size:2.1rem;}
  .band-navy, .cta-final{border-radius:16px;}
}