/* ═══════════════════════════════════════════════════════════════
   Add-on card — an optional, priced service the user switches on

   One card per service: name with who-pays / availability tags,
   price on the right, a one-line pitch, then the switch, its state
   ("Nej tack" / "Tillagt i avtalet") and a "Läs mer" that opens the
   details in a modal. The whole card is outlined while the service
   is on (:has(:checked)), so no JS keeps a class in step.

   Markup:
     <article class="addon-card">
       <div class="addon-card__top">
         <div class="addon-card__heading">
           <h3 class="addon-card__name" id="addonXName">Flyttstädning</h3>
           <span class="addon-card__tag">Du betalar</span>
         </div>
         <div class="addon-card__price">
           <span class="addon-card__amount">2 950 kr</span>
           <span class="addon-card__price-sub">efter RUT-avdrag</span>
         </div>
       </div>
       <p class="addon-card__desc">…</p>
       <div class="addon-card__cta">
         <label class="toggle">
           <input type="checkbox" aria-labelledby="addonXName" />
           <span class="toggle__track"><span class="toggle__thumb"></span></span>
           <span class="toggle__text addon-card__state" aria-hidden="true">
             <span class="addon-card__state-off">Nej tack</span>
             <span class="addon-card__state-on">Tillagt i avtalet</span>
           </span>
         </label>
         <button type="button" class="addon-card__more" data-modal-open="addonXDetails">Läs mer</button>
       </div>
     </article>

   Tag modifiers:
     .addon-card__tag--tenant   — someone else pays (green)
     .addon-card__tag--accent   — availability note (dark)

   Details modal body: .addon-detail__list (✓ list), .addon-detail__payout
   (label/value rows, last one .addon-detail__payout-total), .addon-detail__note.

   Link variant (.addon-card--link) — a partner offer that leaves the site
   instead of a switch (Tilläggstjänster page). Fills its grid cell and pins
   the CTA to the bottom so buttons line up across a row. Optional parts:
     .addon-card__offer  — the deal, green pill that wraps ("20 % rabatt …")
     .addon-card__area   — where it's available, small muted line
     .addon-card__code   — discount code + copy button

     <article class="addon-card addon-card--link">
       <div class="addon-card__top">
         <div class="addon-card__heading">
           <h3 class="addon-card__name">Vinden</h3>
         </div>
       </div>
       <p class="addon-card__offer">20 % rabatt i 3 månader</p>
       <p class="addon-card__desc">…</p>
       <p class="addon-card__area">Stockholm, Göteborg</p>
       <div class="addon-card__code">
         <span class="addon-card__code-label">Rabattkod</span>
         <code class="addon-card__code-value">SAMTRYGG</code>
         <button type="button" class="addon-card__more" data-addon-copy="SAMTRYGG">Kopiera kod</button>
       </div>
       <div class="addon-card__cta">
         <a class="btn btn--secondary btn--sm link-external" href="…" target="_blank" rel="sponsored noopener">Till Vinden<span class="sr-only">Öppnas i en ny flik</span></a>
       </div>
     </article>
   ═══════════════════════════════════════════════════════════════ */

.addon-card {
  position:      relative;
  background:    var(--sam-white);
  border:        1.5px solid var(--sam-light);
  border-radius: var(--radius-xl);
  padding:       20px;
  margin-bottom: var(--s-3);
  transition:    border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.addon-card:has(.addon-card__cta input[type="checkbox"]:checked) {
  border-color: var(--sam-dark);
  box-shadow:   0 0 0 2px var(--sam-dark);
}

.addon-card__top {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  gap:             var(--s-3);
}

.addon-card__heading {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         6px var(--s-2);
  min-width:   0;
}

.addon-card__name {
  margin:      0;
  font-size:   16px;
  font-weight: 800;
  color:       var(--text-primary);
}

.addon-card__tag {
  display:        inline-block;
  padding:        3px 10px;
  border:         1px solid var(--sam-light);
  border-radius:  var(--radius-pill);
  font-family:    var(--font-mono);
  font-size:      10.5px;
  font-weight:    700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color:          var(--sam-brown-dark);
  white-space:    nowrap;
}

.addon-card__tag--tenant {
  background:   var(--color-success-bg);
  border-color: var(--color-success-border);
  color:        var(--color-success);
}

.addon-card__tag--accent {
  background:   var(--sam-dark);
  border-color: var(--sam-dark);
  color:        var(--sam-white);
}

.addon-card__price {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  flex-shrink:    0;
  text-align:     right;
}

.addon-card__amount {
  font-size:   16px;
  font-weight: 800;
  white-space: nowrap;
  color:       var(--text-primary);
}

.addon-card__price-sub {
  font-size:   11.5px;
  font-weight: 600;
  color:       var(--sam-medium);
}

.addon-card__desc {
  margin:      var(--s-2) 0 12px;
  font-size:   13.5px;
  line-height: 1.5;
  color:       var(--sam-brown-dark);
}

.addon-card__cta {
  display:     flex;
  align-items: center;
  gap:         12px;
}

.addon-card__state {
  font-size:   13.5px;
  font-weight: 700;
}

.addon-card__state-on,
.addon-card:has(.addon-card__cta input[type="checkbox"]:checked) .addon-card__state-off {
  display: none;
}

.addon-card:has(.addon-card__cta input[type="checkbox"]:checked) .addon-card__state-on {
  display: inline;
}

.addon-card__more {
  margin-left:           auto;
  padding:               6px 0;
  border:                0;
  background:            none;
  font:                  inherit;
  font-size:             13px;
  font-weight:           600;
  color:                 var(--text-link);
  text-decoration:       underline;
  text-underline-offset: 2px;
  cursor:                pointer;
}

.addon-card__more:focus-visible {
  outline:        2px solid var(--border-focus);
  outline-offset: 2px;
}

/* Narrow: the price drops under the name instead of squeezing it. */
@media (max-width: 480px) {
  .addon-card__top   { flex-direction: column; gap: var(--s-1); }
  .addon-card__price { align-items: flex-start; text-align: left; }
}

/* ── Details (modal body) ─────────────────────────────────────── */

.addon-detail__list {
  margin:     0 0 14px;
  padding:    0;
  list-style: none;
}

.addon-detail__list li {
  position:    relative;
  padding:     4px 0 4px 22px;
  font-size:   13.5px;
  line-height: 1.5;
  color:       var(--sam-brown-dark);
}

.addon-detail__list li::before {
  content:     "\2713";
  position:    absolute;
  left:        0;
  font-weight: 800;
  color:       var(--color-action);
}

.addon-detail__payout {
  margin:        0 0 14px;
  padding:       12px var(--s-3);
  border-radius: var(--radius-md);
  background:    var(--sam-brown-light);
  font-size:     13.5px;
}

.addon-detail__payout-row {
  display:         flex;
  justify-content: space-between;
  gap:             var(--s-3);
  padding:         3px 0;
}

.addon-detail__payout-row dt { color: var(--sam-brown-dark); }
.addon-detail__payout-row dd { margin: 0; font-weight: 700; text-align: right; }

.addon-detail__payout-total {
  margin-top:  6px;
  padding-top: var(--s-2);
  border-top:  1px solid var(--sam-light);
}

.addon-detail__payout-total dd {
  font-size:   15px;
  font-weight: 800;
}

.addon-detail__section + .addon-detail__section {
  margin-top: 12px;
}

.addon-detail__section h4 {
  margin:      0 0 2px;
  font-size:   13.5px;
  font-weight: 700;
  color:       var(--text-primary);
}

.addon-detail__section p,
.addon-detail__note {
  margin:      0;
  font-size:   13px;
  line-height: 1.5;
  color:       var(--sam-brown-dark);
}

/* ── Link variant: partner offer (Tilläggstjänster) ───────────── */

.addon-card--link {
  display:        flex;
  flex-direction: column;
  margin-bottom:  0;
}

.addon-card--link .addon-card__cta {
  margin-top:  auto;
  padding-top: var(--s-2);
}

.addon-card__offer {
  align-self:    flex-start;
  margin:        var(--s-2) 0 0;
  padding:       4px 10px;
  border:        1px solid var(--color-success-border);
  border-radius: var(--radius-pill);
  background:    var(--color-success-bg);
  color:         var(--color-success);
  font-size:     12.5px;
  font-weight:   700;
  line-height:   1.35;
}

.addon-card__area {
  margin:      0 0 12px;
  font-size:   12.5px;
  font-weight: 600;
  color:       var(--sam-medium);
}

.addon-card__code {
  display:       flex;
  flex-wrap:     wrap;
  align-items:   center;
  gap:           var(--s-1) var(--s-2);
  margin:        0 0 12px;
  padding:       var(--s-2) 12px;
  border:        1px dashed var(--sam-light);
  border-radius: var(--radius-md);
  background:    var(--sam-brown-light);
}

.addon-card__code-label {
  font-size:   12px;
  font-weight: 600;
  color:       var(--sam-brown-dark);
}

.addon-card__code-value {
  font-family:    var(--font-mono);
  font-size:      13.5px;
  font-weight:    700;
  letter-spacing: .04em;
  color:          var(--text-primary);
  overflow-wrap:  anywhere;
  user-select:    all;
}