/* ==========================================================================
   Mediator Town — pricing.css
   Styles for the interactive "Find Your Solution" pricing configurator.
   Reuses existing tokens from style.css (colors, radii, shadows, spacing);
   this file only adds the components unique to the pricing page.
   ========================================================================== */

/* ---------- Step labels ---------- */
.config-step{
  display:flex; align-items:center; gap:.6rem;
  font-size:var(--text-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--color-primary); margin-bottom:var(--space-3);
}
.config-step .step-num{
  width:24px; height:24px; border-radius:50%;
  background:var(--color-primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem;
}

/* ---------- Business selector ---------- */
.biz-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--space-4);
}
.biz-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-3);
  text-align:left;
  background:var(--color-surface);
  border:1.5px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  cursor:pointer;
  font-family:inherit;
  transition:transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
.biz-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--color-primary); }
.biz-card:focus-visible{ outline:3px solid var(--color-primary); outline-offset:2px; }
.biz-card[aria-pressed="true"]{
  border-color:var(--color-primary);
  background:var(--color-bg-blue);
  box-shadow:var(--shadow-glow-blue);
}
.biz-card .card-icon{ margin-bottom:0; background:var(--color-bg-blue); color:var(--color-primary); }
.biz-card[aria-pressed="true"] .card-icon{ background:var(--color-primary); color:#fff; }
.biz-card .card-icon svg{ width:24px; height:24px; }
.biz-card h3{ font-size:var(--text-base); margin:0; }
.biz-card .biz-check{
  margin-left:auto; width:20px; height:20px; border-radius:50%;
  border:1.5px solid var(--color-border); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  position:absolute; top:var(--space-4); right:var(--space-4);
}
.biz-card{ position:relative; }
.biz-card[aria-pressed="true"] .biz-check{ background:var(--color-primary); border-color:var(--color-primary); }
.biz-card[aria-pressed="true"] .biz-check svg{ width:12px; height:12px; color:#fff; }
.biz-card .biz-check svg{ display:none; }
.biz-card[aria-pressed="true"] .biz-check svg{ display:block; }

/* ---------- Needs multi-select ---------- */
.needs-panel{
  margin-top:var(--space-8);
  padding-top:var(--space-8);
  border-top:1px solid var(--color-border);
}
.needs-grid{ display:flex; flex-wrap:wrap; gap:.7rem; }
.need-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:inherit; font-size:var(--text-sm); font-weight:600;
  color:var(--color-text); background:var(--color-surface);
  border:1.5px solid var(--color-border); border-radius:var(--radius-pill);
  padding:.65rem 1.1rem; cursor:pointer;
  transition:border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.need-chip:hover{ border-color:var(--color-primary); transform:translateY(-2px); }
.need-chip:focus-visible{ outline:3px solid var(--color-primary); outline-offset:2px; }
.need-chip[aria-pressed="true"]{ background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.need-chip .need-dot{ width:8px; height:8px; border-radius:50%; border:1.5px solid currentColor; flex-shrink:0; }
.need-chip[aria-pressed="true"] .need-dot{ background:#fff; }

/* ---------- Pricing reveal ---------- */
.pricing-reveal{ margin-top:var(--space-9); }
.pricing-reveal-head{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-4);
  margin-bottom:var(--space-6);
}
.change-business-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:var(--text-sm); font-weight:700; color:var(--color-primary);
  background:none; border:0; cursor:pointer; font-family:inherit;
}
.change-business-btn svg{ width:16px; height:16px; }

.recommendation-banner{
  display:flex; align-items:center; gap:.7rem;
  background:var(--color-bg-blue); border:1px solid var(--color-primary);
  color:var(--color-text); border-radius:var(--radius-md);
  padding:var(--space-4) var(--space-5);
  font-size:var(--text-sm); margin-bottom:var(--space-6);
}
.recommendation-banner svg{ width:20px; height:20px; color:var(--color-primary); flex-shrink:0; }
.recommendation-banner strong{ color:var(--color-primary); }
.recommendation-banner[hidden]{ display:none; }

/* ---------- Pricing cards ---------- */
.pricing-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-5); align-items:stretch; }
.pricing-card{
  display:flex; flex-direction:column;
  background:var(--color-surface); border:1.5px solid var(--color-border);
  border-radius:var(--radius-lg); padding:var(--space-6);
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base);
  position:relative;
}
.pricing-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.pricing-card.is-recommended{ border-color:var(--color-primary); box-shadow:var(--shadow-glow-blue); }
.pricing-card-badge{
  position:absolute; top:-13px; left:var(--space-6);
  background:var(--color-primary); color:#fff;
  font-size:var(--text-xs); font-weight:700; letter-spacing:.02em;
  padding:.3rem .8rem; border-radius:var(--radius-pill);
}
.pricing-card-tier{
  font-size:var(--text-xs); font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--color-text-secondary); margin-bottom:.3rem;
}
.pricing-card-title-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3);
  margin-bottom:var(--space-3);
}
.pricing-card h3{ font-size:var(--text-xl); margin-bottom:0; }
.pricing-card-price{
  font-family:var(--font-display); font-size:var(--text-lg); font-weight:800;
  color:var(--color-primary); white-space:nowrap; flex-shrink:0;
}
.pricing-card-desc{ color:var(--color-text-secondary); font-size:var(--text-sm); line-height:1.65; margin-bottom:var(--space-4); }
.pricing-card-inherits{ font-size:var(--text-xs); font-weight:700; color:var(--color-green-dark); margin-bottom:var(--space-3); }
.pricing-card-features{ flex:1; margin-bottom:var(--space-5); }
.pricing-card-features li{
  display:flex; gap:.6rem; align-items:flex-start;
  padding-block:.5rem; font-size:var(--text-sm); color:var(--color-text-secondary);
}
.pricing-card-features svg{ width:16px; height:16px; color:var(--color-green-dark); flex-shrink:0; margin-top:.2rem; }
.pricing-card-actions{ display:flex; flex-direction:column; gap:.6rem; margin-top:auto; }

/* ---------- Compare ---------- */
.compare-toggle-row{ display:flex; justify-content:center; margin-top:var(--space-6); }
.compare-wrap{ margin-top:var(--space-7); overflow-x:auto; }
.compare-table{ width:100%; border-collapse:collapse; min-width:640px; }
.compare-table th, .compare-table td{
  padding:.85rem 1rem; text-align:left; border-bottom:1px solid var(--color-border);
  font-size:var(--text-sm);
}
.compare-table thead th{ font-family:var(--font-display); font-size:var(--text-base); color:var(--color-text); }
.compare-table tbody th{ color:var(--color-text-secondary); font-weight:600; white-space:nowrap; }
.compare-table td{ text-align:center; }
.compare-table .cmp-yes{ color:var(--color-green-dark); }
.compare-table .cmp-yes svg{ width:18px; height:18px; }
.compare-table .cmp-no{ color:var(--color-text-secondary); opacity:.4; }
.compare-table .cmp-no svg{ width:16px; height:16px; }

/* ---------- Modal / drawer (shared: package details + guided quiz) ---------- */
.mt-modal-overlay{
  /* Must beat .site-header's z-index:500 (position:sticky) — otherwise the
     sticky header paints over the top of the modal on scroll instead of the
     modal sitting above everything, the way a modal should. */
  position:fixed; inset:0; z-index:600;
  background:rgba(11,10,30,.55);
  backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:var(--space-5);
  opacity:0; pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-out);
}
.mt-modal-overlay.is-open{ opacity:1; pointer-events:auto; }
.mt-modal-overlay[hidden]{ display:none; }
.mt-modal{
  background:var(--color-surface); border-radius:var(--radius-lg);
  max-width:640px; width:100%; max-height:88vh; overflow-y:auto;
  padding:var(--space-7);
  box-shadow:var(--shadow-lg);
  transform:translateY(24px) scale(.98); opacity:0;
  transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.mt-modal-overlay.is-open .mt-modal{ transform:translateY(0) scale(1); opacity:1; }
.mt-modal-close{
  position:absolute; top:var(--space-5); right:var(--space-5);
  width:36px; height:36px; border-radius:50%;
  background:var(--color-bg-warm); border:1px solid var(--color-border);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.mt-modal-close svg{ width:18px; height:18px; }
.mt-modal{ position:relative; }
.mt-modal-eyebrow{ font-size:var(--text-xs); font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--color-text-secondary); }
.mt-modal h2{ font-size:var(--text-2xl); margin-block:.3rem var(--space-2); }
.mt-modal-price{ font-family:var(--font-display); font-size:var(--text-3xl); font-weight:800; color:var(--color-primary); margin-bottom:var(--space-4); }
.mt-modal-desc{ color:var(--color-text-secondary); margin-bottom:var(--space-5); }
.mt-modal-features-title{ font-family:var(--font-display); font-weight:700; margin-bottom:var(--space-3); }
.mt-modal-features{ margin-bottom:var(--space-6); }
.mt-modal-features li{ display:flex; gap:.6rem; align-items:flex-start; padding-block:.5rem; border-bottom:1px dashed var(--color-border); font-size:var(--text-sm); }
.mt-modal-features li:last-child{ border-bottom:0; }
.mt-modal-features svg{ width:16px; height:16px; color:var(--color-green-dark); flex-shrink:0; margin-top:.2rem; }

/* ---------- Enquiry form (inside modal) ---------- */
.enquiry-prefill{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:var(--space-5); }
.enquiry-prefill .tag{ background:var(--color-bg-blue); color:var(--color-primary); }

/* ---------- Guided quiz ---------- */
.quiz-question{ margin-bottom:var(--space-6); }
.quiz-question h3{ font-size:var(--text-base); margin-bottom:var(--space-3); }
.quiz-options{ display:flex; flex-wrap:wrap; gap:.6rem; }
.quiz-option{
  font-family:inherit; font-size:var(--text-sm); font-weight:600;
  background:var(--color-bg-warm); border:1.5px solid var(--color-border); border-radius:var(--radius-pill);
  padding:.6rem 1rem; cursor:pointer; transition:border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.quiz-option[aria-pressed="true"]{ background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.quiz-result{
  background:var(--color-bg-blue); border:1px solid var(--color-primary); border-radius:var(--radius-md);
  padding:var(--space-5); margin-top:var(--space-6); display:none;
}
.quiz-result.is-visible{ display:block; }
.quiz-result h3{ font-size:var(--text-lg); margin-bottom:var(--space-2); }
.quiz-result p{ font-size:var(--text-sm); color:var(--color-text-secondary); margin-bottom:var(--space-4); }

/* ---------- General services (whatever your business) ---------- */
.gen-services-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:var(--space-5); }
.gen-services-grid .card{ text-align:left; }

/* ---------- Entrance animation for JS-rendered elements ----------
   These cards are built and inserted by pricing.js, after main.js's
   scroll-reveal IntersectionObserver has already done its one-time scan
   of the DOM — so the site's usual .reveal-up/.reveal-scale classes
   never get observed and stay stuck at opacity:0. These elements get
   their own self-contained CSS animation instead, which runs the moment
   they're inserted, independent of that observer. */
@keyframes pricing-card-in{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: no-preference){
  .biz-card, .pricing-card, .gen-services-grid .card{ animation:pricing-card-in .45s var(--ease-out) both; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .mt-modal-overlay, .mt-modal, .biz-card, .need-chip, .quiz-option, .pricing-card{ transition:none !important; }
}