/* ==========================================================================
   BISUN POWER — SHARED PAGE SYSTEM
   Single source of truth for spacing, buttons, cards, and common patterns
   used across Home/About/Solar Panels/Warranty/Module Authenticity/
   Become a Dealer/Contact. Pages should rely on these classes rather than
   redefining them — page-level <style> blocks should only contain truly
   page-unique selectors (hero variants, showcase grids, etc.).
   ========================================================================== */

.bp-wrap { font-family: Arial, sans-serif; color: #374151; line-height: 1.65; }
.bp-wrap h1, .bp-wrap h2, .bp-wrap h3 { font-weight: 700; color: #111827; margin: 0 0 14px; letter-spacing: -0.01em; }

/* ---------- Container & Section Spacing (the shared spacing token) ---------- */
.bp-container { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.bp-section { margin: 60px 0; }

/* ---------- Section Header ---------- */
.bp-head { max-width: 680px; margin: 0 auto 32px; text-align: center; }
.bp-eyebrow { color: #18A558; font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: 1.5px; margin: 0 0 14px; }

/* ---------- Buttons (one definition, every page) ---------- */
.bp-btn {
  display: inline-block; padding: 16px 28px; border-radius: 10px;
  font-weight: 600; font-size: 15px; text-decoration: none;
  transition: transform .25s cubic-bezier(.25,.1,.25,1), box-shadow .25s cubic-bezier(.25,.1,.25,1), background .25s cubic-bezier(.25,.1,.25,1), border-color .25s ease, color .25s ease;
}
.bp-btn-primary { background: #18A558; color: #fff; box-shadow: 0 8px 24px -6px rgba(24,165,88,0.5); }
.bp-btn-primary:hover { transform: translateY(-2px); }
.bp-btn-outline { background: transparent; color: #111827; border: 1px solid #E5E7EB; }
.bp-btn-outline:hover { border-color: #18A558; color: #18A558; }
.bp-btn-ghost { background: transparent; color: #18A558; padding-left: 0; padding-right: 0; box-shadow: none; }
.bp-btn-white { background: #fff; color: #0e6b38; box-shadow: none; }
.bp-btn:focus-visible { outline: 2px solid #3ee08a; outline-offset: 3px; }

/* ---------- Icon sizing (consistent inline SVG icons across cards/lists) ---------- */
.bp-icon-sm svg, .bp-why-icon svg, .bp-support-card svg, .bp-risk-card svg, .bp-dealer-icon svg, .bp-ct-icon svg { width: 18px; height: 18px; }

/* ---------- Cards & Grid ---------- */
.bp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.bp-card, .bp-product { background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; padding: 24px; }
.bp-card h3 { font-size: 17px; margin-bottom: 6px; }
.bp-card p { font-size: 14px; color: #4B5563; margin: 0; }

/* ---------- Dark panel ---------- */
.bp-dark { background: #111827; border-radius: 20px; padding: 50px 30px; color: #fff; }
.bp-dark h2 { color: #fff; }
.bp-dark .bp-card { background: #1a2333; border-color: #ffffff22; }
.bp-dark .bp-card p { color: #cbd5e1; }

/* ---------- Narrow highlight block ---------- */
.bp-highlight { max-width: 680px; margin: 0 auto; text-align: center; }

/* ---------- Gradient CTA band ---------- */
.bp-cta { background: linear-gradient(135deg, #18A558, #0e6b38); border-radius: 20px; padding: 50px 30px; text-align: center; color: #fff; }
.bp-cta h2 { color: #fff; }

/* ---------- FAQ accordion ---------- */
.bp-faq details, .wp-block-details { border: 1px solid #E5E7EB; border-radius: 12px; padding: 16px 20px; margin-bottom: 10px; background: #F8FAFC; }
.bp-faq summary, .wp-block-details summary { font-weight: 600; cursor: pointer; }

/* ---------- Legacy horizontal timeline (Warranty claim process) ---------- */
.bp-timeline { counter-reset: step; display: grid; gap: 14px; max-width: 720px; margin: 0 auto; }
.bp-tl-step { display: flex; gap: 16px; background: #F8FAFC; border: 1px solid #E5E7EB; border-radius: 14px; padding: 18px 20px; }
.bp-tl-dot { background: #18A558; color: #fff; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }

/* ---------- Cross-link row (About / Solar Panels / Become a Dealer "learn more" grids) ---------- */
.bp-links { border-top: 1px solid #E5E7EB; max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.bp-link-item { position: relative; padding: 26px 20px; text-align: center; border-right: 1px solid #E5E7EB; transition: background .2s ease; }
.bp-link-item:last-child { border-right: none; }
.bp-link-item:hover { background: #F8FAFC; }
.bp-link-icon { width: 40px; height: 40px; border-radius: 10px; background: #F0FBF4; color: #18A558; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.bp-link-item h3 { font-size: 14.5px; margin: 0 0 4px; color: #111827; }
.bp-link-item p { font-size: 12.5px; color: #6B7280; margin: 0; }
.bp-link-item a { position: absolute; inset: 0; text-indent: -9999px; }
@media (max-width: 900px) {
  .bp-links { grid-template-columns: 1fr 1fr; }
  .bp-link-item { border-bottom: 1px solid #E5E7EB; }
}
@media (max-width: 480px) {
  .bp-links { grid-template-columns: 1fr; }
}

/* ---------- Mobile spacing (shared, one breakpoint definition) ---------- */
@media (max-width: 640px) {
  .bp-section { margin: 40px 0; }
  .bp-container { padding: 0 18px; }
}