/* ================================================================
   PRICING SECTION — COMPLETE STYLESHEET
   Assumes theme tokens (surface, text, border, brand, btn-*)
   ================================================================*/

/* ───────── GLOBAL CONSTANT (shared height) ───────── */
:root{
  --plan-card-h: 460px;   /* height of each plan card                */
  --tab-btn-h : 50px;     /* ⬅ mobile service button size            */
}

/* ───────── LAYOUT WRAPPERS ───────── */
.pricing-row{
  padding:4rem 2rem;
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
  color: var(--text);
}
.title-row{
  text-align:center;
  padding:2rem 0 0;
}
.title-row .pricing-title{
  margin:0;
  font-size:1.8rem;
  color:var(--text);
  font-weight:600;
}

/* ───────── LEFT COLUMN — SERVICE PICKER ───────── */
.pricing-title-col{
  flex:1 1 320px;
  display:flex;
  align-items:flex-start;
  padding-top: 0;
}
.service-selection{ width:100%; }

/* hide native radio inputs */
.pricing-row   input[type="radio"],
.pricing-tabs-col input[type="radio"]{ display:none; }

/* 2 × 2 grid of service buttons */
.service-header{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(2,1fr);
  gap:1rem;
  height:var(--plan-card-h);
  margin-top: 4.1rem;
}

/* square, icon‑centric service button */
.service-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:1rem;
  background:var(--border);   /* inactive tile */
  border-radius:6px;
  cursor:pointer;
  text-align:center;
  color: var(--text);
}
.service-btn:hover{ background: color-mix(in srgb, var(--border) 70%, var(--text) 30%); }

/* icon inside service button */
.service-icon{
  width:48px;
  height:48px;
  margin-bottom:.5rem;
}

/* highlight currently‑selected service */
#service-web:checked       ~ .pricing-title-col .service-header label[for="service-web"],
#service-marketing:checked ~ .pricing-title-col .service-header label[for="service-marketing"],
#service-branding:checked  ~ .pricing-title-col .service-header label[for="service-branding"],
#service-graphics:checked  ~ .pricing-title-col .service-header label[for="service-graphics"]{
  background:var(--brand);
  color:var(--btn-text);
}

/* ───────── RIGHT COLUMN — TABS & CARDS ───────── */
.pricing-tabs-col{ flex:1 1 320px; }

.service-content{ position:relative; min-height:var(--plan-card-h); }
.service-panel  {
  position:absolute; inset:0;
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}

/* show selected service panel */
#service-web:checked       ~ .pricing-tabs-col .service-content .web-design,
#service-marketing:checked ~ .pricing-tabs-col .service-content .marketing,
#service-branding:checked  ~ .pricing-tabs-col .service-content .branding,
#service-graphics:checked  ~ .pricing-tabs-col .service-content .graphics{
  opacity:1; pointer-events:auto;
}

/* ───── Plan‑level tab strip ───── */
.plan-tabs-header{
  display:flex;
  gap:1rem;
  margin-bottom:1.5rem;
}
.plan-tabs-header label{
  flex:1;
  text-align:center;
  padding:.6rem 1rem;
  cursor:pointer;
  background:var(--border);
  border-radius:6px 6px 0 0;
  font-weight:500;
  transition:all .3s ease;
  color: var(--text);
}

/* highlight active plan label */
#web-basic:checked            ~ .plan-tabs-header label[for="web-basic"],
#web-standard:checked         ~ .plan-tabs-header label[for="web-standard"],
#web-premium:checked          ~ .plan-tabs-header label[for="web-premium"],
#marketing-basic:checked      ~ .plan-tabs-header label[for="marketing-basic"],
#marketing-standard:checked   ~ .plan-tabs-header label[for="marketing-standard"],
#marketing-premium:checked    ~ .plan-tabs-header label[for="marketing-premium"],
#branding-basic:checked       ~ .plan-tabs-header label[for="branding-basic"],
#branding-standard:checked    ~ .plan-tabs-header label[for="branding-standard"],
#branding-premium:checked     ~ .plan-tabs-header label[for="branding-premium"],
#graphics-basic:checked       ~ .plan-tabs-header label[for="graphics-basic"],
#graphics-standard:checked    ~ .plan-tabs-header label[for="graphics-standard"],
#graphics-premium:checked     ~ .plan-tabs-header label[for="graphics-premium"]{
  background:var(--brand);
  color:var(--btn-text);
}

/* ───── Plan cards ───── */
.tabs-body{ position:relative; min-height:var(--plan-card-h); }

.plan-card{
  position:absolute; inset:0;
  display:grid;
  grid-template-rows:15% 10% 55% 12% 8%;
  padding:2rem 1.5rem;
  background:var(--surface);
  border-radius:12px;
  box-shadow:var(--shadow-soft);
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
  color: var(--text);
}
.plan-card .plan-title{
  display:flex; justify-content:space-between; align-items:center; margin:0;
}
.plan-card .plan-price{ font-size:1.5rem; font-weight:600; color:var(--brand); }
.plan-desc{ margin:0; font-size:.9rem; color:var(--text); opacity:.8; }

.plan-features{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:.25rem 1rem; list-style:none; margin:0; padding:0;
}
.plan-features li{ font-size:.9rem; }

/* ===== Ticks & Crosses (class-driven) ===== */
/* neutral default */
.plan-features li::before{
  content:"";
  margin-right:.4rem;
  font-weight:700;
}

/* tick only when .on */
.plan-features li.on::before{
  content:"✓";
  color:#2e7d32; /* success green */
  font-weight:bold;
}

/* cross only when .off */
.plan-features li.off{
  opacity:.78;
}
.plan-features li.off::before{
  content:"✕";
  color:#b00020; /* error red */
  font-weight:700;
}

/* order button — extend global .btn with sizing only */
.btn.order{
  align-self:center; justify-self:center;
  padding:.8rem 2rem;
}

/* subtle time note */
.plan-time{
  text-align:center; font-size:.8rem; margin:0;
  opacity:.8; color:var(--text);
}

/* show active plan card */
#web-basic:checked            ~ .tabs-body .basic,
#web-standard:checked         ~ .tabs-body .standard,
#web-premium:checked          ~ .tabs-body .premium,
#marketing-basic:checked      ~ .tabs-body .basic,
#marketing-standard:checked   ~ .tabs-body .standard,
#marketing-premium:checked    ~ .tabs-body .premium,
#branding-basic:checked       ~ .tabs-body .basic,
#branding-standard:checked    ~ .tabs-body .standard,
#branding-premium:checked     ~ .tabs-body .premium,
#graphics-basic:checked       ~ .tabs-body .basic,
#graphics-standard:checked    ~ .tabs-body .standard,
#graphics-premium:checked     ~ .tabs-body .premium{
  opacity:1; pointer-events:auto;
}

/* ───────── RESPONSIVE TWEAKS ───────── */
@media (max-width:768px){
  .pricing-row      { flex-direction:column; }
  .plan-tabs-header { gap:.5rem; }
  .plan-features    { grid-template-columns:1fr; }
  .pricing-title    { font-size:1.5rem; }
}
/* ─────────  PHONE LAYOUT (≤ 480 px)  ───────── */
@media (max-width:480px){
  .pricing-title-col{ flex:0 0 auto; }

  .service-header{
    grid-template-columns:repeat(4, var(--tab-btn-h));
    grid-template-rows:var(--tab-btn-h);
    justify-content:center;
    gap:.8rem;
    margin-top:0;
    height:auto;
  }

  .service-btn{
    width:var(--tab-btn-h);
    height:var(--tab-btn-h);
    padding:0;
  }
  .service-btn img  { display:block;  width:24px; height:24px; }
  .service-btn span { display:none; }

  .service-mobile-label{
    display:none;
    text-align:center;
    margin:.8rem 0 0 0;
    font-weight:500;
  }

  .plan-card{ padding:1.5rem 1rem; }
  .plan-card .plan-title{
    flex-direction:column; gap:.5rem; text-align:center;
  }
  .plan-card .plan-price{ font-size:1.3rem; }
}

/* Fallback for color-mix in older browsers */
@supports not (background: color-mix(in srgb, white, black)){
  .service-btn:hover{ filter: brightness(0.97); }
}