/* est-seg.css - "Popular packages" as ONE segmented control + the Signature saving (home pages).
   Loads after book-bar.css. Overrides the older presets rules (theme-silas3, glass-a, chrome-a, book-bar). */

/* ---- track: fully rounded, even inner padding ---- */
#estimator .estimator__presets{
  display:inline-flex;align-items:stretch;gap:4px;padding:4px;
  border-radius:999px;background:#f1f2f3;border:1px solid #e1e3e5;box-shadow:none;
}
/* ---- segments: same height, same pill radius, centred ---- */
#estimator .est-preset{
  position:relative;box-sizing:border-box;
  display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;height:auto;margin:0;padding:0 1.5rem;
  border:0;border-radius:999px;background:transparent;color:#1a1a1a;
  font-size:.9375rem;font-weight:600;line-height:1.2;text-align:center;white-space:nowrap;
  box-shadow:none;transform:none;
}
#estimator .est-preset:hover{background:rgba(255,255,255,.75);color:#1a1a1a}
#estimator .est-preset.is-active,#estimator .est-preset.is-active:hover{
  background:#1a1a1a;color:#fff;box-shadow:0 1px 3px rgba(23,23,23,.28);
}
#estimator .est-preset:active{transform:scale(.97)}
#estimator .est-preset:focus-visible{outline:2px solid #1a1a1a;outline-offset:2px}
/* no check marks on any segment: the dark pill is the active state (aria-pressed carries it for AT) */
#estimator .est-preset .est-preset__check{display:none}

/* ---- Signature saving tag (text from data-save-tag, set by sig-save.js) ---- */
#estimator .est-preset[data-save-tag]::after{
  content:attr(data-save-tag);
  flex:none;display:inline-block;
  padding:.18rem .55rem;border-radius:999px;
  background:#d8f0ef;color:#245250;
  font-size:.6875rem;font-weight:700;line-height:1.2;letter-spacing:.01em;white-space:nowrap;
}
#estimator .est-preset.is-active[data-save-tag]::after{background:rgba(255,255,255,.2);color:#fff}

/* ---- "You save $X with Signature" line, next to the total (text from data-save-line) ---- */
#estimator .est-summary__total-block[data-save-line]::after{
  content:attr(data-save-line);
  justify-self:start;display:inline-block;margin:2px 0 4px;
  padding:.3rem .7rem;border-radius:999px;
  background:rgba(184,219,217,.22);box-shadow:inset 0 0 0 1px rgba(184,219,217,.55);
  color:#d8f0ef;font-size:.8125rem;font-weight:600;line-height:1.3;
}

/* ---- phones: 3 equal columns, roomy pills (labels carry no price; the price lives in the summary) ---- */
@media (max-width:640px){
  #estimator .estimator__presets-bar{display:block}
  #estimator .estimator__presets-label{display:block;margin-bottom:.6rem}
  #estimator .estimator__presets{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:6px;width:100%;
    border-radius:26px;box-sizing:border-box;
  }
  #estimator .est-preset,#estimator .est-preset:has(.est-preset__check){
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.3rem;
    min-width:0;min-height:64px;padding:.6rem .5rem;border-radius:20px;
    font-size:.9375rem;line-height:1.2;white-space:nowrap;
  }
  #estimator .est-preset[data-save-tag]::after{font-size:.625rem;padding:.12rem .45rem;max-width:100%;white-space:nowrap}
  /* copyfix: all three labels are one size and centred alike; the Save tag is pinned under the Signature label */
  #estimator .est-preset,#estimator .est-preset:has(.est-preset__check){min-height:72px}
  #estimator .est-preset[data-save-tag]::after{position:absolute;left:50%;bottom:7px;transform:translateX(-50%)}
}
@media (max-width:370px){
  #estimator .est-preset,#estimator .est-preset:has(.est-preset__check){font-size:.875rem;padding:.55rem .35rem}
  #estimator .est-preset[data-save-tag]::after{font-size:.625rem;padding:.12rem .3rem;letter-spacing:0}
}
@media (max-width:340px){#estimator .est-preset[data-save-tag]::after{font-size:.5625rem;padding:.1rem .25rem}}
@media (prefers-reduced-motion:reduce){#estimator .est-preset{transition:none}}