/* Additions to the approved design (not in the design export), in the design's own tokens.
   2026-10-08: yearly/monthly switch and the package finder under the plans on /priser;
   company details on /kontakt. Loaded after the design's stylesheets (Site.astro). */

/* Yearly / monthly switch in the plans heading */
.pricing-heading{align-items:flex-end}
.billing-switch{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex-shrink:0}
.billing-switch[hidden]{display:none}
.billing-switch fieldset{display:inline-flex;margin:0;padding:4px;border:1px solid var(--line);border-radius:100px;background:var(--white)}
.billing-switch label{position:relative;display:block;cursor:pointer}
.billing-switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.billing-switch span{display:block;min-width:116px;padding:10px 22px;border-radius:100px;font-size:15px;font-weight:750;line-height:1.4;text-align:center;color:var(--ink);transition:background-color .15s,color .15s}
.billing-switch input:checked+span{background:var(--blue-surface);color:var(--white)}
.billing-switch input:focus-visible+span{outline:3px solid var(--ink);outline-offset:2px}
.billing-switch label:hover input:not(:checked)+span{background:var(--blue-soft)}
.billing-switch-note{font-size:13px;font-weight:650;color:var(--blue-dark)}
/* Both billing lines fit in two rows, so the four cards keep their rows aligned in either view. */
.pricing-plans .plan-billing{min-height:3.2em}
@media(max-width:760px){.pricing-plans .plan-billing{min-height:0}}

/* The package finder sits under the plan cards, on the white of a card. It is compact (question,
   result and actions in one row above the fields) so the highlighted card stays in view. */
.plan-finder--below{margin-top:32px;background:var(--white)}
.finder-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) auto;gap:24px;align-items:center;padding:18px 24px}
.finder-intro .eyebrow{margin-bottom:6px}
.finder-intro h2{font-size:22px}
.plan-finder--below .finder-result{display:block;padding:12px 18px;border-radius:14px;background:var(--blue-soft)}
.plan-finder--below .finder-result .eyebrow{margin-bottom:4px;font-size:11px}
.plan-finder--below .finder-result h3{font-size:22px}
.plan-finder--below .finder-result p:not(.eyebrow){margin-top:4px;font-size:14px;line-height:1.5}
.finder-actions{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.finder-actions .button{margin:0;min-height:46px;font-size:14px}
.finder-actions .button[hidden]{display:none}
.finder-actions .reset-filter{min-height:36px;padding:6px 4px}
.plan-finder--below .sizing-field,.plan-finder--below .sizing-extension{padding:18px 24px}
.plan-finder--below .sizing-field>div:first-child{margin-bottom:12px}
.plan-finder--below .finder-footnote{padding:12px 24px}
.plan-finder--below .finder-footnote a{color:var(--blue-dark)}

/* Company details on /kontakt */
.company-card{max-width:760px}
.company-card h2{font-size:30px;margin-top:10px}
.company-card>p:not(.eyebrow){margin-top:14px;font-size:17px}
.company-card .facts-list a{color:inherit}

@media(max-width:1000px){
  .billing-switch{align-items:flex-start;margin-top:24px}
  .finder-top{grid-template-columns:minmax(0,1fr) auto}
  .finder-top .finder-result{grid-column:1/-1;grid-row:2}
}
@media(max-width:760px){
  .finder-top{grid-template-columns:1fr;gap:16px;padding:20px 22px}
  .finder-top .finder-result{grid-row:auto}
  .finder-actions{flex-direction:row;align-items:center;justify-content:space-between}
}
@media(max-width:540px){
  .billing-switch,.billing-switch fieldset{width:100%}
  .billing-switch label{flex:1}
  .billing-switch span{min-width:0;padding:10px 12px}
  .plan-finder--below{margin-top:36px}
  .company-card h2{font-size:26px}
}
@media(prefers-reduced-motion:reduce){.billing-switch span{transition:none}}
@media print{.billing-switch{display:none}}