/* ═══════════════════════════════════════════
   Pet Care Community Pet Food Finder — Styles
   ═══════════════════════════════════════════ */

/* ── Hero ── */
.pk-ff-hero { background:linear-gradient(135deg,#1a365d 0%,#2b6cb0 100%); padding:60px 20px; text-align:center; }
.pk-ff-hero__title { color:#fff; font-size:2.4rem; margin:0 0 12px; font-weight:800; }
.pk-ff-hero__sub { color:rgba(255,255,255,.85); font-size:1.1rem; max-width:600px; margin:0 auto; }

/* ── Wizard Container ── */
.pk-ff { max-width:720px; margin:-40px auto 60px; background:#fff; border-radius:16px; box-shadow:0 8px 32px rgba(0,0,0,.12); padding:40px 32px; position:relative; z-index:2; }
@media(max-width:600px){ .pk-ff { margin:-20px 12px 40px; padding:24px 16px; border-radius:12px; } }

/* ── Progress Bar ── */
.pk-ff-progress { display:flex; gap:4px; margin-bottom:32px; counter-reset:step; }
.pk-ff-progress__step { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; }
.pk-ff-progress__step::before { content:''; display:block; width:100%; height:4px; border-radius:2px; background:#e2e8f0; transition:background .3s; }
.pk-ff-progress__step.active::before { background:#2b6cb0; }
.pk-ff-progress__step.done::before { background:#38a169; }
.pk-ff-progress__num { width:28px; height:28px; border-radius:50%; background:#e2e8f0; color:#718096; font-size:.75rem; font-weight:700; display:flex; align-items:center; justify-content:center; transition:all .3s; }
.pk-ff-progress__step.active .pk-ff-progress__num { background:#2b6cb0; color:#fff; }
.pk-ff-progress__step.done .pk-ff-progress__num { background:#38a169; color:#fff; }
.pk-ff-progress__label { font-size:.7rem; font-weight:600; color:#a0aec0; text-align:center; transition:color .3s; }
.pk-ff-progress__step.active .pk-ff-progress__label { color:#2b6cb0; }
.pk-ff-progress__step.done .pk-ff-progress__label { color:#38a169; }
@media(max-width:480px){ .pk-ff-progress__label { font-size:.6rem; } }

/* ── Step Header ── */
.pk-ff-step__title { font-size:1.4rem; font-weight:700; color:#1a365d; margin:0 0 6px; }
.pk-ff-step__sub { color:#718096; font-size:.95rem; margin:0 0 24px; }

/* ── Species Toggle ── */
.pk-ff-species { display:flex; gap:16px; justify-content:center; margin:20px 0 28px; }
.pk-ff-species__btn { flex:1; max-width:220px; padding:28px 20px; border:3px solid #e2e8f0; border-radius:14px; background:#fff; cursor:pointer; text-align:center; transition:all .25s; }
.pk-ff-species__btn:hover { border-color:#90cdf4; background:#ebf8ff; }
.pk-ff-species__btn.active { border-color:#2b6cb0; background:#ebf8ff; box-shadow:0 0 0 3px rgba(43,108,176,.2); }
.pk-ff-species__icon { font-size:3rem; display:block; margin-bottom:8px; }
.pk-ff-species__label { font-size:1.1rem; font-weight:700; color:#1a365d; }

/* ── Form Elements ── */
.pk-ff-field { margin-bottom:20px; }
.pk-ff-field label { display:block; font-weight:600; color:#2d3748; margin-bottom:6px; font-size:.9rem; }
.pk-ff-field input[type="text"],
.pk-ff-field input[type="number"],
.pk-ff-field input[type="email"],
.pk-ff-field select { width:100%; padding:12px 14px; border:2px solid #e2e8f0; border-radius:8px; font-size:1rem; background:#fff; transition:border-color .2s; box-sizing:border-box; }
.pk-ff-field input:focus, .pk-ff-field select:focus { border-color:#2b6cb0; outline:none; box-shadow:0 0 0 3px rgba(43,108,176,.15); }

/* ── Toggle Buttons (Yes/No, Metro/Regional) ── */
.pk-ff-toggle { display:inline-flex; border:2px solid #e2e8f0; border-radius:10px; overflow:hidden; }
.pk-ff-toggle__btn { padding:10px 24px; font-size:.9rem; font-weight:600; color:#4a5568; background:#fff; border:none; cursor:pointer; transition:all .2s; position:relative; }
.pk-ff-toggle__btn + .pk-ff-toggle__btn { border-left:2px solid #e2e8f0; }
.pk-ff-toggle__btn:hover { background:#ebf8ff; color:#2b6cb0; }
.pk-ff-toggle__btn.active { background:#2b6cb0; color:#fff; }
.pk-ff-toggle__btn.active + .pk-ff-toggle__btn { border-left-color:#2b6cb0; }
.pk-ff-toggle__btn:first-child.active { border-right-color:#2b6cb0; }

/* ── Checkbox Grid ── */
.pk-ff-checks { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:480px){ .pk-ff-checks { grid-template-columns:1fr; } }
.pk-ff-check { display:flex; align-items:center; gap:8px; padding:10px 14px; border:2px solid #e2e8f0; border-radius:8px; cursor:pointer; transition:all .2s; }
.pk-ff-check:hover { border-color:#90cdf4; background:#ebf8ff; }
.pk-ff-check.checked { border-color:#2b6cb0; background:#ebf8ff; }
.pk-ff-check input { display:none; }
.pk-ff-check__box { width:20px; height:20px; border:2px solid #cbd5e0; border-radius:4px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .2s; }
.pk-ff-check.checked .pk-ff-check__box { background:#2b6cb0; border-color:#2b6cb0; }
.pk-ff-check.checked .pk-ff-check__box::after { content:'✓'; color:#fff; font-size:14px; font-weight:700; }
.pk-ff-check__label { font-size:.9rem; color:#2d3748; }

/* ── Budget Slider ── */
.pk-ff-slider { width:100%; -webkit-appearance:none; height:8px; border-radius:4px; background:linear-gradient(90deg,#38a169,#ecc94b,#e53e3e); outline:none; margin:10px 0; }
.pk-ff-slider::-webkit-slider-thumb { -webkit-appearance:none; width:24px; height:24px; border-radius:50%; background:#fff; border:3px solid #2b6cb0; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.pk-ff-budget-display { text-align:center; font-size:1.6rem; font-weight:800; color:#1a365d; margin:8px 0 4px; }
.pk-ff-budget-daily { text-align:center; color:#718096; font-size:.85rem; }

/* ── Wet/Dry Ratio Slider (Cat) ── */
.pk-ff-ratio { display:flex; align-items:center; gap:12px; margin:12px 0; }
.pk-ff-ratio__label { font-size:.8rem; color:#718096; white-space:nowrap; }
.pk-ff-ratio input[type="range"] { flex:1; }

/* ── Navigation Buttons ── */
.pk-ff-nav { display:flex; justify-content:space-between; margin-top:32px; padding-top:20px; border-top:1px solid #e2e8f0; }
.pk-ff-btn { padding:14px 32px; border-radius:8px; font-size:1rem; font-weight:700; cursor:pointer; border:none; transition:all .2s; }
.pk-ff-btn--back { background:#e2e8f0; color:#4a5568; }
.pk-ff-btn--back:hover { background:#cbd5e0; }
.pk-ff-btn--next { background:#2b6cb0; color:#fff; }
.pk-ff-btn--next:hover { background:#2c5282; }
.pk-ff-btn--results { background:linear-gradient(135deg,#38a169,#2f855a); color:#fff; font-size:1.05rem; padding:16px 40px; }
.pk-ff-btn--results:hover { filter:brightness(1.1); }
.pk-ff-btn:disabled { opacity:.5; cursor:not-allowed; }

/* ── Body Condition Selector ── */
.pk-ff-bcs { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:10px 0; }
.pk-ff-bcs__btn { min-width:80px; padding:12px 10px 10px; border:2px solid #e2e8f0; border-radius:10px; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; transition:all .2s; background:#fff; }
.pk-ff-bcs__btn:hover { border-color:#90cdf4; background:#ebf8ff; }
.pk-ff-bcs__btn.active { border-color:#2b6cb0; background:#ebf8ff; box-shadow:0 0 0 3px rgba(43,108,176,.15); }
.pk-ff-bcs__icon { font-size:1.5rem; line-height:1; }
.pk-ff-bcs__text { font-size:.7rem; font-weight:600; color:#4a5568; line-height:1.2; }
.pk-ff-bcs__btn.active .pk-ff-bcs__text { color:#2b6cb0; }

/* ═══════════════════════════════════════════
   RESULTS PAGE
   ═══════════════════════════════════════════ */

.pk-ff-results { max-width:900px; margin:0 auto 60px; padding:0 16px; }
.pk-ff-results__heading { text-align:center; margin-bottom:32px; }
.pk-ff-results__title { font-size:1.8rem; font-weight:800; color:#1a365d; margin:0 0 8px; }
.pk-ff-results__sub { color:#718096; font-size:1rem; }

/* ── Vet Referral Banner ── */
.pk-ff-vet-banner { background:#fff5f5; border:2px solid #fc8181; border-radius:12px; padding:16px 20px; margin-bottom:24px; display:flex; gap:12px; align-items:flex-start; }
.pk-ff-vet-banner__icon { font-size:1.5rem; flex-shrink:0; }
.pk-ff-vet-banner__text { color:#c53030; font-size:.9rem; line-height:1.5; }

/* ── Product Cards ── */
.pk-ff-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:32px; }
@media(max-width:800px){ .pk-ff-cards { grid-template-columns:1fr; } }

.pk-ff-card { background:#fff; border:2px solid #e2e8f0; border-radius:14px; padding:24px 20px; position:relative; transition:box-shadow .2s; }
.pk-ff-card:hover { box-shadow:0 8px 24px rgba(0,0,0,.08); }
.pk-ff-card--best { border-color:#38a169; }
.pk-ff-card--premium { border-color:#d69e2e; }
.pk-ff-card--budget { border-color:#3182ce; }

.pk-ff-card__badge { position:absolute; top:-12px; left:20px; padding:4px 14px; border-radius:20px; font-size:.75rem; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:.5px; }
.pk-ff-card--best .pk-ff-card__badge { background:#38a169; }
.pk-ff-card--premium .pk-ff-card__badge { background:#d69e2e; }
.pk-ff-card--budget .pk-ff-card__badge { background:#3182ce; }

.pk-ff-card__brand { font-size:.85rem; color:#718096; margin:8px 0 2px; }
.pk-ff-card__name { font-size:1.15rem; font-weight:700; color:#1a365d; margin:0 0 12px; line-height:1.3; }

/* Score */
.pk-ff-card__score { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.pk-ff-card__score-num { font-size:1.6rem; font-weight:800; color:#2b6cb0; }
.pk-ff-card__score-bar { flex:1; height:8px; background:#e2e8f0; border-radius:4px; overflow:hidden; }
.pk-ff-card__score-fill { height:100%; border-radius:4px; background:linear-gradient(90deg,#38a169,#2b6cb0); }

/* Cost */
.pk-ff-card__cost { background:#f7fafc; border-radius:8px; padding:12px; text-align:center; margin:12px 0; }
.pk-ff-card__cost-day { font-size:1.4rem; font-weight:800; color:#1a365d; }
.pk-ff-card__cost-month { font-size:.85rem; color:#718096; }

/* Why it suits */
.pk-ff-card__why { font-size:.85rem; color:#4a5568; line-height:1.5; margin:12px 0; padding:10px; background:#f0fff4; border-radius:8px; border-left:3px solid #38a169; }

/* Feeding guide */
.pk-ff-card__feeding { font-size:.85rem; color:#4a5568; margin:8px 0; }
.pk-ff-card__feeding strong { color:#1a365d; }

/* Hydration Score (Cat) */
.pk-ff-card__hydration { display:flex; gap:2px; margin:8px 0; }
.pk-ff-card__hydration-drop { font-size:1rem; }
.pk-ff-card__hydration-drop.filled { opacity:1; }
.pk-ff-card__hydration-drop.empty { opacity:.2; }

/* Taurine badge (Cat) */
.pk-ff-card__taurine { display:inline-flex; align-items:center; gap:4px; background:#f0fff4; color:#276749; font-size:.75rem; font-weight:700; padding:4px 10px; border-radius:20px; margin:6px 0; }

/* Affiliate CTAs */
.pk-ff-card__ctas { display:flex; gap:8px; margin-top:16px; }
.pk-ff-card__cta { flex:1; padding:10px; border-radius:6px; text-align:center; text-decoration:none; font-weight:700; font-size:.85rem; transition:all .2s; }
.pk-ff-card__cta--primary { background:#2b6cb0; color:#fff; }
.pk-ff-card__cta--primary:hover { background:#2c5282; }
.pk-ff-card__cta--secondary { background:#e2e8f0; color:#2d3748; }
.pk-ff-card__cta--secondary:hover { background:#cbd5e0; }

/* ── Comparison Table ── */
.pk-ff-compare { width:100%; border-collapse:collapse; margin:32px 0; background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.pk-ff-compare th { background:#1a365d; color:#fff; padding:12px 16px; font-size:.8rem; text-align:left; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.pk-ff-compare td { padding:10px 16px; border-bottom:1px solid #e2e8f0; font-size:.9rem; color:#2d3748; }
.pk-ff-compare tr:last-child td { border-bottom:none; }
.pk-ff-compare tr:nth-child(even) td { background:#f7fafc; }

/* ── Transition Plan ── */
.pk-ff-transition { background:#f7fafc; border-radius:12px; padding:20px; margin:24px 0; }
.pk-ff-transition__title { font-weight:700; color:#1a365d; margin:0 0 12px; font-size:1rem; }
.pk-ff-transition__days { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
@media(max-width:600px){ .pk-ff-transition__days { grid-template-columns:repeat(4,1fr); } }
.pk-ff-transition__day { text-align:center; padding:10px 6px; background:#fff; border-radius:8px; border:1px solid #e2e8f0; }
.pk-ff-transition__day-num { font-size:.75rem; color:#718096; }
.pk-ff-transition__day-split { font-size:.7rem; font-weight:700; color:#2b6cb0; margin-top:4px; }

/* ── Email Capture ── */
.pk-ff-email { background:linear-gradient(135deg,#ebf8ff,#f0fff4); border-radius:14px; padding:28px; text-align:center; margin:32px 0; border:2px solid #bee3f8; }
.pk-ff-email__title { font-size:1.2rem; font-weight:700; color:#1a365d; margin:0 0 8px; }
.pk-ff-email__sub { color:#718096; font-size:.9rem; margin:0 0 16px; }
.pk-ff-email__form { display:flex; gap:10px; max-width:420px; margin:0 auto; }
@media(max-width:480px){ .pk-ff-email__form { flex-direction:column; } }
.pk-ff-email__input { flex:1; padding:12px 14px; border:2px solid #e2e8f0; border-radius:8px; font-size:1rem; }
.pk-ff-email__btn { padding:12px 24px; background:#2b6cb0; color:#fff; border:none; border-radius:8px; font-weight:700; cursor:pointer; font-size:.95rem; white-space:nowrap; }
.pk-ff-email__btn:hover { background:#2c5282; }
.pk-ff-email__success { color:#38a169; font-weight:600; margin-top:10px; }

/* ── FAQ ── */
.pk-ff-faq { max-width:800px; margin:40px auto; padding:0 16px; }
.pk-ff-faq .section__title { font-size:1.6rem; font-weight:800; color:#1a365d; margin:0 0 24px; text-align:center; }
.pk-ff-faq__list { display:flex; flex-direction:column; gap:0; border:2px solid #e2e8f0; border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.05); }
.pk-ff-faq__item { border-bottom:1px solid #e2e8f0; }
.pk-ff-faq__item:last-child { border-bottom:none; }
.pk-ff-faq__q { width:100%; padding:18px 22px; font-weight:600; font-size:.95rem; color:#1a365d; cursor:pointer; display:flex; justify-content:space-between; align-items:center; background:#fff; border:none; text-align:left; transition:background .2s; gap:12px; }
.pk-ff-faq__q:hover { background:#f7fafc; }
.pk-ff-faq__icon { width:28px; height:28px; border-radius:50%; background:#e2e8f0; display:flex; align-items:center; justify-content:center; font-size:1rem; color:#718096; flex-shrink:0; transition:all .25s; font-weight:700; }
.pk-ff-faq__q[aria-expanded="true"] .pk-ff-faq__icon { background:#2b6cb0; color:#fff; transform:rotate(45deg); }
.pk-ff-faq__a { color:#4a5568; font-size:.9rem; line-height:1.7; }
.pk-ff-faq__a[hidden] { display:none; }
.pk-ff-faq__a:not([hidden]) { padding:0 22px 18px; }
.pk-ff-faq__a p { margin:0; }
.pk-ff-faq__q::after { display:none; }

/* ── Restart ── */
.pk-ff-restart { text-align:center; margin:32px 0; }
.pk-ff-restart__btn { background:#e2e8f0; color:#4a5568; padding:12px 28px; border:none; border-radius:8px; font-weight:600; cursor:pointer; font-size:.9rem; }
.pk-ff-restart__btn:hover { background:#cbd5e0; }

/* ── Loading Spinner ── */
.pk-ff-loading { text-align:center; padding:60px 20px; }
.pk-ff-spinner { width:48px; height:48px; border:4px solid #e2e8f0; border-top-color:#2b6cb0; border-radius:50%; animation:pk-spin .8s linear infinite; margin:0 auto 16px; }
@keyframes pk-spin { to { transform:rotate(360deg); } }
.pk-ff-loading__text { color:#718096; font-size:1rem; }

/* ── Hidden Steps ── */
.pk-ff-step { display:none; }
.pk-ff-step.active { display:block; }