/* ══ Spar-Seiten: Deals und Gutscheine (deals/index.php, gutscheine/index.php, gutscheine/shop.php), 11.11.2026 ══
   Gleiche Bausteine wie der Mobilfunkbereich: Angebotszeile der Tarifliste (.mf-so-card), Logo-Kacheln „Nach Anbieter“,
   Kennzahlen im Kopf. Nur Tokens aus styles.css, Fraunces nur in Titeln. Eingebunden über $page['css'] (blockierend,
   damit nichts nachspringt). Markup der Zeilen: _ssc_offer_row() in includes/components/cards.php (Option 'liste'). */

/* ── Seitenkopf ─────────────────────────────────────────────────────────── */
/* Kennzahlen im Drei-Spalten-Raster wie /mobilfunk/, auch wenn es nur zwei sind (sonst halbe Breite je Zahl) */
@media (min-width: 769px) {
  .sp-hero .ssc-hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Shop-Logo einmal im Kopf, auf weißer Fläche wie das Gerätebild der Geräteseite */
.sp-hero .ssc-page-hero__row { align-items: center; flex-wrap: nowrap; }
.sp-hero__logo {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 184px;
  height: 80px;
  padding: var(--space-3) var(--space-5);
  background: var(--white);
  border-radius: var(--r-lg);
}
.sp-hero__logo img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 600px) {
  .sp-hero .ssc-page-hero__row { gap: var(--space-4); }
  .sp-hero__logo { width: 104px; height: 48px; padding: var(--space-2) var(--space-3); border-radius: var(--r-md); }
}

/* Letzter Block vor dem Seitenfuß (Shop-Seite endet mit den Kacheln) */
.sp-end { padding-bottom: var(--space-16); }

/* ── Logo-Kacheln: „Prämie je Bank“, „Gutscheine nach Shop“, „Weitere Shops“ ─ */
/* Wie „Nach Anbieter“ der Handytarife: kleine gleich hohe Kacheln, Betrag als Text statt Pille */
.sp-tiles .ssc-provider-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--space-3); }
/* Desktop: 7 Spalten (7 Banken = eine Reihe, 28 Shops = vier volle Reihen) */
@media (min-width: 1024px) {
  .sp-tiles .ssc-provider-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
.sp-tiles .ssc-provider-tile {
  justify-content: flex-start;
  min-height: 0;
  gap: 2px;
  padding: var(--space-4) var(--space-2) var(--space-3);
  border-radius: var(--r-md);
  font-size: var(--text-xs);
  line-height: 1.3;
}
.sp-tiles .ssc-provider-tile img { width: 96px; max-width: 100%; height: 32px; margin: 0 0 var(--space-2); object-fit: contain; }
.sp-tiles .ssc-provider-tile__initials {
  display: grid; place-items: center; width: 40px; height: 32px; margin: 0 0 var(--space-2);
  border-radius: var(--r-sm); background: var(--navy-50); color: var(--navy-600); font-weight: 800;
}
.sp-tiles .ssc-provider-tile > span:not([class]) { color: var(--navy-900); font-weight: 600; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; max-width: 100%; }
.sp-tiles .fin-bonus__amt {
  margin-top: var(--space-1);
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--navy-900);
  font-size: var(--text-sm);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.sp-tiles .mf-provider-tile__from { font-size: var(--text-2xs); }
.sp-tiles__more[hidden] { display: none; }
.sp-tiles__more { margin-top: var(--space-4); }
@media (min-width: 601px) {
  .sp-tiles__more { display: none; }
}
@media (max-width: 600px) {
  .sp-tiles .ssc-provider-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .sp-tiles .ssc-provider-tile { padding: var(--space-3) var(--space-1); }
  .sp-tiles .ssc-provider-tile img { width: 80px; height: 28px; }
  .sp-tiles .ssc-provider-tile > span:not([class]) { font-size: var(--text-2xs); }
  /* Mehr als 9 Shops: erst drei Reihen, Rest per „Alle … Shops zeigen“ (Klasse setzt das Skript in ssc_gs_tiles_html) */
  .sp-tiles.is-collapsed .ssc-provider-tile:nth-child(n+10) { display: none; }
}

/* ── Filter und Sortierung in einer Zeile (deals/index.php) ─────────────── */
.sp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); margin-bottom: var(--space-4); }
.sp-toolbar .ssc-filters { flex: 1 1 auto; min-width: 0; margin-bottom: 0; padding-bottom: 0; }
.sp-toolbar .ssc-sort-bar { flex: 0 0 auto; margin-bottom: 0; }
@media (max-width: 768px) {
  .sp-toolbar { flex-direction: column; align-items: stretch; }
  .sp-toolbar .ssc-filters { padding-bottom: var(--space-1); }
}

/* ── Angebotszeilen (Deals und Gutscheine) ──────────────────────────────── */
.sp-list { margin-top: var(--space-6); }
.sp-toolbar + .sp-list { margin-top: 0; }
.gd-rechnen + .sp-list { margin-top: 0; }
.sp-row .mf-so-card__main { min-width: 0; }
.sp-row__shop {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}
.sp-row__shop img { width: auto; height: 24px; max-width: 96px; object-fit: contain; object-position: left center; }
.sp-row .mf-so-card__name { overflow-wrap: anywhere; }
.sp-row .mf-so-card__chips { margin-top: var(--space-2); }
.sp-row .mf-so-card__hl { line-height: 1.5; }
.sp-row .mf-so-card__eff { font-variant-numeric: tabular-nums; }
.sp-row__end { margin-top: 2px; font-weight: 600; }
.sp-row__end--soon { color: var(--red-600); font-weight: 700; }

/* Bedingungen: aufklappbar wie „Tarifdetails“, liegt über dem gestreckten Zeilenlink */
.sp-row__terms { position: relative; z-index: 2; max-width: 100%; }
.sp-row__terms:not([open]) { width: fit-content; } /* zu: nur das Wort liegt über dem Zeilenlink */
.sp-row__terms > summary { list-style: none; padding: 6px 0; }
.sp-row__terms > summary::-webkit-details-marker { display: none; }
.sp-row__terms > summary::before { content: '\25B8'; display: inline-block; margin-right: var(--space-1); transition: transform var(--ease); }
.sp-row__terms[open] > summary::before { transform: rotate(90deg); }
.sp-row__terms > summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); }
.sp-row__terms > p,
.sp-row__terms .voucher-card__terms-body {
  margin: var(--space-1) 0 0;
  padding: var(--space-3);
  background: var(--navy-50);
  border-radius: var(--r-md);
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--color-text-soft);
}
.sp-row__terms .voucher-card__terms-list:last-child { margin-bottom: 0; }

/* „Code anzeigen“ als Angebotsknopf der Tarifliste; nach dem Klick steht der Code im Knopf */
.sp-row .voucher-card__reveal {
  width: 100%;
  min-height: 40px;
  justify-content: center;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--mint-400);
  color: var(--navy-900);
  font-size: var(--text-xs);
  font-weight: 700;
}
.sp-row .voucher-card__reveal:hover { background: var(--mint-500); }
.sp-row .voucher-card__reveal.is-open {
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  border: 1.5px dashed var(--navy-300);
  border-radius: var(--r-md);
  background: var(--white);
  color: var(--navy-900);
  font-family: monospace;
  font-size: var(--text-sm);
  letter-spacing: .06em;
  white-space: normal;
  overflow-wrap: anywhere;
}
.sp-row a.voucher-card__reveal[data-copied]::after {
  content: "kopiert";
  flex-basis: 100%;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-3xs);
  font-weight: 600;
  letter-spacing: 0;
  text-align: center;
  color: var(--color-text-muted);
}

@media (max-width: 768px) {
  .sp-row .mf-so-card__cta { min-width: 152px; }
  /* Betrag und Einheit in einer Zeile („250 € Bonus“), Frist darunter */
  .sp-row .mf-so-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-1); }
  .sp-row .mf-so-card__price .sp-row__end { flex-basis: 100%; }
}