/* ================================================================
   PCIN FAQ PAGE v2 — Complete Redesigned Stylesheet
   Upload to: /wp-content/themes/[your-child-theme]/faq-styles.css
   ================================================================ */

.pcin-faq-v2 *, .pcin-faq-v2 *::before, .pcin-faq-v2 *::after { box-sizing: border-box; }
.pcin-faq-v2 { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #1A1A2E; line-height: 1.65; }

/* ── HERO ── */
.fv2-hero { background: #1F3864; padding: 56px 24px 52px; text-align: center; position: relative; overflow: hidden; }
.fv2-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1.5px, transparent 1.5px); background-size: 28px 28px; pointer-events: none; }
.fv2-hero-content { max-width: 660px; margin: 0 auto; position: relative; z-index: 1; }
.fv2-help-badge { display: inline-block; background: #2E75B6; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 4px 16px; border-radius: 20px; margin-bottom: 18px; }
.fv2-hero-h1 { font-size: clamp(26px, 4vw, 44px); font-weight: 800; color: #fff; margin: 0 0 12px; line-height: 1.2; }
.fv2-hero-sub { font-size: 15px; color: #C2D8EF; margin: 0 0 28px; }
.fv2-search-wrap { position: relative; max-width: 520px; margin: 0 auto; }
.fv2-search-ico { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: #999; font-size: 15px; pointer-events: none; }
.fv2-search-input { width: 100%; padding: 14px 20px 14px 48px; font-size: 14px; border: none; border-radius: 50px; outline: none; color: #1A1A2E; box-shadow: 0 4px 24px rgba(0,0,0,0.18); }
.fv2-search-input::placeholder { color: #AAA; }
.fv2-search-input:focus { box-shadow: 0 4px 24px rgba(46,117,182,0.35); }

/* ── TABS ── */
.fv2-tabs-bar { background: #fff; padding: 18px 24px; border-bottom: 1px solid #EAEEF5; display: flex; justify-content: center; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.fv2-tabs { display: flex; gap: 10px; }
.fv2-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px; border-radius: 8px; border: 1.5px solid #DDE2EF; background: #fff; font-size: 14px; font-weight: 500; color: #555; cursor: pointer; transition: all 0.18s; white-space: nowrap; }
.fv2-tab:hover { border-color: #2E75B6; color: #2E75B6; }
.fv2-tab--active { background: #1F3864; border-color: #1F3864; color: #fff; }
.fv2-tab-circle { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; }
.fv2-tab-circle--cat { background: #6B3FA0; }
.fv2-tab-circle--dog { background: #C0392B; }

/* ── PAGE BODY ── */
.fv2-body { max-width: 900px; margin: 0 auto; padding: 40px 24px 60px; }

/* ── SECTION HEADS ── */
.fv2-sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; }
.fv2-sec-head-left { display: flex; align-items: center; gap: 10px; }
.fv2-sec-title { font-size: 20px; font-weight: 700; color: #1A1A2E; margin: 0; }
.fv2-star-ico { width: 36px; height: 36px; border-radius: 50%; background: #1F3864; display: flex; align-items: center; justify-content: center; color: #FFD700; font-size: 14px; flex-shrink: 0; }
.fv2-cat-ico { width: 36px; height: 36px; border-radius: 50%; background: #6B3FA0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; flex-shrink: 0; }
.fv2-dog-ico { width: 36px; height: 36px; border-radius: 50%; background: #C0392B; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; flex-shrink: 0; }
.fv2-see-all, .fv2-view-all { background: none; border: none; font-size: 13px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 5px; text-decoration: none; padding: 0; white-space: nowrap; }
.fv2-see-all { color: #2E75B6; }
.fv2-view-all--cat { color: #6B3FA0; }
.fv2-view-all--dog { color: #C0392B; }

/* ── POPULAR CARDS ── */
.fv2-popular { margin-bottom: 48px; }
.fv2-pop-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.fv2-pop-card { background: #fff; border: 1px solid #E5E9F2; border-radius: 12px; padding: 18px 16px; text-align: left; cursor: pointer; transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s; display: flex; flex-direction: column; gap: 10px; width: 100%; }
.fv2-pop-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.08); border-color: #C0C8DC; transform: translateY(-2px); }
.fv2-pop-ico { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; flex-shrink: 0; }
.fv2-pop-ico--cat { background: #6B3FA0; }
.fv2-pop-ico--dog { background: #C0392B; }
.fv2-pop-q { font-size: 13px; font-weight: 600; color: #1A1A2E; margin: 0; line-height: 1.45; flex: 1; }
.fv2-pop-foot { display: flex; align-items: center; justify-content: space-between; }
.fv2-tag { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; }
.fv2-tag--cat { background: #F0EBFF; color: #6B3FA0; }
.fv2-tag--dog { background: #FFF0EE; color: #C0392B; }
.fv2-pop-plus { width: 28px; height: 28px; border-radius: 50%; background: #EEF2FF; display: flex; align-items: center; justify-content: center; color: #1F3864; font-size: 12px; }

/* ── FAQ SECTIONS ── */
.fv2-cat-sec, .fv2-dog-sec { margin-bottom: 44px; }

/* ── FAQ ITEMS ── */
.fv2-item { border: 1px solid #E5E9F2; border-radius: 10px; margin-bottom: 10px; overflow: hidden; background: #fff; }
.fv2-cat-sec .fv2-item[open] { border-color: #6B3FA0; box-shadow: 0 3px 18px rgba(107,63,160,0.10); }
.fv2-dog-sec .fv2-item[open] { border-color: #C0392B; box-shadow: 0 3px 18px rgba(192,57,43,0.10); }
summary.fv2-q { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; cursor: pointer; user-select: none; background: #fff; }
summary.fv2-q::-webkit-details-marker, summary.fv2-q::marker { display: none; }
.fv2-cat-sec .fv2-item[open] > summary.fv2-q { background: #FAF5FF; }
.fv2-dog-sec .fv2-item[open] > summary.fv2-q { background: #FFF5F5; }
.fv2-q-text { font-size: 15px; font-weight: 600; color: #1A1A2E; flex: 1; line-height: 1.45; }
.fv2-tog { width: 24px; height: 24px; border-radius: 50%; background: #EEF2FF; flex-shrink: 0; position: relative; transition: transform 0.22s, background 0.2s; }
.fv2-tog::before, .fv2-tog::after { content: ''; position: absolute; border-radius: 1px; background: #1F3864; top: 50%; left: 50%; }
.fv2-tog::before { width: 10px; height: 2px; transform: translate(-50%,-50%); }
.fv2-tog::after  { width: 2px; height: 10px; transform: translate(-50%,-50%); }
.fv2-cat-sec .fv2-item[open] .fv2-tog { background: #6B3FA0; transform: rotate(45deg); }
.fv2-cat-sec .fv2-item[open] .fv2-tog::before,
.fv2-cat-sec .fv2-item[open] .fv2-tog::after { background: #fff; }
.fv2-dog-sec .fv2-item[open] .fv2-tog { background: #C0392B; transform: rotate(45deg); }
.fv2-dog-sec .fv2-item[open] .fv2-tog::before,
.fv2-dog-sec .fv2-item[open] .fv2-tog::after { background: #fff; }

.fv2-a { padding: 18px 20px 20px; border-top: 1px solid #EEF0F8; }
.fv2-a p { font-size: 14px; color: #333; line-height: 1.7; margin: 0 0 12px; }
.fv2-list { padding-left: 20px; margin: 8px 0 14px; }
.fv2-list li { font-size: 14px; color: #444; margin-bottom: 6px; line-height: 1.55; }
.fv2-tip { background: #EBF3FA; padding: 10px 14px; border-left: 3px solid #2E75B6; border-radius: 0; font-size: 13px; color: #1F3864; margin: 10px 0; }
.fv2-note { font-size: 12px; color: #999; font-style: italic; margin: 6px 0 4px; }
.fv2-conclusion { background: #F5F0FF; padding: 12px 16px; border-left: 3px solid #6B3FA0; border-radius: 0 6px 6px 0; font-size: 13px; color: #3D1A6B; margin-top: 14px; }

/* ── BRAND CARDS ── */
.fv2-brand-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin: 16px 0 18px; }
.fv2-brand-card { background: #F8F9FC; border: 1px solid #E5E9F2; border-radius: 10px; padding: 14px; }
.fv2-brand-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.fv2-brand-logo { font-size: 15px; font-weight: 900; flex-shrink: 0; }
.fv2-brand-logo--meo   { color: #E63946; font-style: italic; }
.fv2-brand-logo--gold  { color: #B8860B; font-style: italic; }
.fv2-brand-logo--cuties { font-size: 11px; font-weight: 700; background: #F0EBFF; color: #6B3FA0; padding: 3px 8px; border-radius: 4px; }
.fv2-brand-logo--quality { font-size: 22px; color: #2E75B6; }
.fv2-brand-name { font-size: 12px; font-weight: 700; color: #1A1A2E; line-height: 1.3; }
.fv2-brand-desc { font-size: 12px; color: #666; line-height: 1.5; margin: 0; }
.fv2-brand-img  { width: 40px; height: 40px; object-fit: contain; }

/* ── HELPFUL ── */
.fv2-helpful { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid #EEF0F8; }
.fv2-helpful-lbl { font-size: 13px; color: #777; }
.fv2-helpful-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 14px; border-radius: 20px; border: 1.5px solid #DDE2EF; background: #fff; font-size: 13px; color: #555; cursor: pointer; transition: all 0.18s; }
.fv2-helpful-btn:hover:not(:disabled) { border-color: #2E75B6; color: #2E75B6; }
.fv2-helpful-btn:disabled { opacity: 0.55; cursor: default; }
.fv2-helpful-msg { font-size: 13px; color: #2E75B6; font-weight: 500; }

/* ── TABLES ── */
.fv2-table-wrap { overflow-x: auto; border-radius: 8px; border: 1px solid #E5E9F2; margin: 14px 0; -webkit-overflow-scrolling: touch; }
.fv2-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 400px; }
.fv2-table thead tr { background: #1F3864; }
.fv2-table th { color: #fff; font-weight: 600; padding: 10px 12px; text-align: left; font-size: 12px; white-space: nowrap; }
.fv2-table td { padding: 9px 12px; border-bottom: 1px solid #EEF0F8; color: #333; vertical-align: middle; }
.fv2-table th:not(:first-child), .fv2-table td:not(:first-child) { text-align: center; }
.fv2-table--comp th, .fv2-table--comp td { text-align: left !important; }
.fv2-table tbody tr:nth-child(odd)  { background: #F8F9FC; }
.fv2-table tbody tr:nth-child(even) { background: #fff; }
.fv2-table tbody tr:last-child td   { border-bottom: none; }
.fv2-pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 14px; }
.fv2-pill { background: #F0F4F8; border: 1px solid #DDE4EF; border-radius: 20px; padding: 5px 13px; font-size: 13px; color: #555; }
.fv2-pill strong { color: #1F3864; }

/* ── CTA FOOTER ── */
.fv2-cta { background: #1F3864; border-radius: 14px; padding: 36px 40px; display: flex; align-items: center; gap: 40px; margin-top: 16px; flex-wrap: wrap; }
.fv2-cta-left { flex: 0 0 auto; }
.fv2-cta-title { font-size: 20px; font-weight: 700; color: #fff; margin: 0 0 5px; }
.fv2-cta-sub { font-size: 13px; color: #C2D8EF; margin: 0 0 20px; }
.fv2-cta-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.fv2-btn-solid { padding: 10px 24px; border-radius: 6px; border: 2px solid #fff; background: #fff; color: #1F3864; font-size: 14px; font-weight: 600; text-decoration: none; display: inline-block; transition: background 0.18s; }
.fv2-btn-solid:hover { background: #EBF3FA; color: #1F3864; text-decoration: none; }
.fv2-btn-outline { padding: 10px 24px; border-radius: 6px; border: 2px solid rgba(255,255,255,0.5); background: transparent; color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; display: inline-block; transition: background 0.18s; }
.fv2-btn-outline:hover { background: rgba(255,255,255,0.1); color: #fff; text-decoration: none; }
.fv2-cta-right { flex: 1; display: flex; align-items: center; justify-content: flex-end; }
.fv2-cta-div { width: 1px; height: 48px; background: rgba(255,255,255,0.18); margin: 0 24px; }
.fv2-cta-link { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.fv2-cta-link:hover { text-decoration: none; opacity: 0.88; }
.fv2-cta-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; flex-shrink: 0; }
.fv2-cta-icon--wa { background: #25D366; }
.fv2-cta-icon--ph { background: #2E75B6; }
.fv2-cta-icon--em { background: #E8921A; }
.fv2-cta-text { font-size: 13px; color: #fff; line-height: 1.4; }
.fv2-cta-text strong { display: block; font-weight: 600; }
.fv2-cta-text small { color: #C2D8EF; font-size: 12px; }

/* ── FLOAT BUTTON ── */
.fv2-float { position: fixed; bottom: 28px; right: 28px; background: #1F3864; color: #fff; border-radius: 50px; padding: 12px 20px; font-size: 14px; font-weight: 600; text-decoration: none; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 20px rgba(31,56,100,0.40); z-index: 9999; transition: background 0.18s, transform 0.18s; }
.fv2-float:hover { background: #2E75B6; color: #fff; transform: translateY(-2px); text-decoration: none; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .fv2-pop-grid   { grid-template-columns: repeat(2,1fr); }
  .fv2-brand-grid { grid-template-columns: repeat(2,1fr); }
  .fv2-cta        { flex-direction: column; gap: 28px; padding: 28px 24px; }
  .fv2-cta-right  { flex-direction: column; align-items: flex-start; gap: 18px; width: 100%; }
  .fv2-cta-div    { display: none; }
  .fv2-tabs       { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 520px) {
  .fv2-hero     { padding: 40px 16px 36px; }
  .fv2-body     { padding: 24px 16px 48px; }
  .fv2-cta      { padding: 24px 16px; }
  .fv2-cta-btns { flex-direction: column; }
  .fv2-sec-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .fv2-float    { bottom: 16px; right: 16px; padding: 10px 16px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .fv2-float, .fv2-tog, .fv2-pop-card { transition: none; }
}