/* ==========================================================================
   Konto-Look: EINE Komponente fuer "Mein Konto" ([imm_my_packages]) und
   "Meine Kaeufe" ([imm_my_tickets]).

   User 2026-09-22: "Warum ist das Layout von Tickets und Packages fuer Gaeste
   und Audience nicht identisch mit der normalen Accounts Darstellung? Das
   sieht aktuell so unaufgeraeumt aus." Beide Seiten zeigen dieselben Dinge
   (Kaeufe, Belege, Vertraege) und bauen sie seitdem aus DENSELBEN Bausteinen:

     .pay-section        - weisse Abschnitts-Karte auf dem dunklen Grund,
                           Kopf im Haus-Muster (theme.css 4.4): Oswald-Versalien
                           in der Akzentfarbe, Unterzeile, Trennlinie.
     .pay-mypkg-list     - Liste der Karten eines Abschnitts
     .pay-mypkg-card     - EIN Vorgang/Vertrag als Karte (Kopf + Chip + Aktionen)
     .pay-mypkg-wrap     - Tabellen-Huelle (horizontal scrollbar)
     .pay-mypkg-table    - Tabelle im Haus-Mass
     .pay-badge-*        - Status-Chip

   Die Knopf-Regeln sind auf .pay-acct gescopt - diese Klasse traegt die HUELLE
   beider Seiten (.imm-wrap pay-mypkg pay-acct bzw. .imm-wrap tkt-my pay-acct).
   Sie stand bis 2026-09-22 als <style>-Block in my-packages.php; ohne den Umzug
   haette die zweite Seite eine Kopie gebraucht, und Kopien laufen auseinander.

   Farbwerte kommen AUSSCHLIESSLICH aus theme.css (var(--mmdb-*)).
   ========================================================================== */

/* ---- Abschnitts-Karte ---------------------------------------------------- */
.pay-section {
  margin: 0 0 2rem;
  padding: 26px 28px;
  background: var(--mmdb-card);
  color: var(--mmdb-ink-soft);
  border-radius: var(--mmdb-r-card);
  box-shadow: var(--mmdb-shadow-card);
}
/* KEINE :last-child-Ausnahme (User-Befund 2026-09-22: "Abstaende der Boxen, Du
   HONK!"): auf "Meine Kaeufe" stehen die Abschnitte IN einer Lasche (.imm-dtab-panel),
   und die letzte darin ist :last-child ihres Panels - danach folgen aber noch
   Newsletter und Loeschvormerkung. Die Karten klebten damit aneinander. Der Abstand
   gehoert JEDER Abschnitts-Karte, nicht nur denen mit einem Geschwister dahinter. */
.pay-section > h3 {
  margin: 0 0 4px;
  font-family: var(--mmdb-font-head);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mmdb-accent-deep);
  border: 0;
  padding: 0;
}
.pay-section-hint {
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--mmdb-line);
  color: var(--mmdb-ink-muted);
  font-size: 0.9rem;
}
/* Abschnitt ohne Unterzeile: dann traegt der Titel die Linie. */
.pay-section > h3.no-sub { margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--mmdb-line); }

/* Zwischenueberschrift INNERHALB einer Abschnitts-Karte (z.B. "Voting-Pakete" /
   "Voting-Paesse" in EINEM Abschnitt). Ruhiger als der Abschnitts-Titel - sie
   gliedert, sie konkurriert nicht mit ihm. */
.pay-section-sub {
  margin: 0 0 10px;
  font-family: var(--mmdb-font-head);
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mmdb-ink-muted);
}
.pay-mypkg-list + .pay-section-sub,
.pay-mypkg-wrap + .pay-section-sub { margin-top: 24px; }

/* ---- Karten eines Abschnitts -------------------------------------------- */
.pay-mypkg-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.pay-mypkg-list:last-child { margin-bottom: 0; }
.pay-mypkg-card { border: 1px solid var(--mmdb-line); border-radius: 8px; background: var(--mmdb-card); padding: 16px 18px; cursor: pointer; }
.pay-mypkg-card-static { cursor: default; }
/* Kopfzeile einer Karte: Titel links, Aktionen rechts.
   flex-basis 240px statt flex:1 (2026-08-29): mit "flex:1; min-width:0"
   schrumpfte die Titelspalte beliebig, statt die Zeile umbrechen zu lassen -
   auf dem Handy stand der vierzeilige Titel dann neben den mittig
   ausgerichteten Knoepfen und wirkte wie darunter gerutscht. */
.pay-mypkg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.pay-mypkg-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; flex: 1 1 240px; }
.pay-mypkg-title h4 { margin: 0; color: var(--mmdb-ink); }
.pay-mypkg-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Mobil: die Kopfzeile bricht durch die 240px-Basis von selbst um; die
   Aktionen nehmen dann die volle Breite. KEIN flex-direction:column hier -
   in Spaltenrichtung wirkt das flex-grow der Titelspalte auf die HOEHE und
   reisst die Karte auseinander. */
@media (max-width: 600px) {
  .pay-mypkg-actions { width: 100%; }
  .pay-mypkg-actions .button { flex: 1 1 auto; text-align: center; }
}
.pay-mypkg-detail { color: var(--mmdb-ink-muted); font-size: 14px; margin: 6px 0 0; }
/* Veranstaltung/Paketname hinter dem Titel (User 2026-08-27): ruhiger als der
   Titel selbst - unterscheidet gleichnamige Pakete verschiedener Events. */
.pay-mypkg-event { color: var(--mmdb-ink-muted); font-size: 14px; }
.pay-mypkg-event::before { content: "· "; color: var(--mmdb-ink-faint); }
.pay-mypkg-reason { margin: 6px 0 0; color: var(--mmdb-warm-deep); font-size: 13px; }
.pay-mypkg-reason-inline { color: var(--mmdb-warm-deep); font-size: 12px; }

/* ---- Aufklappbarer Teil einer Karte -------------------------------------- */
/* Stand 2026-09-22 aus dem <style>-Block von my-packages.php hierher: seitdem
   klappen die Voting-Pakete auf "Meine Kaeufe" genauso auf wie die Plattform-Pakete
   (User: "WARUM SIND DIE NICHT AUFKLAPPBAR UND ZEIGEN DANN DIE BUCHUNGEN, WIE BEI
   PLATTFORM PACKAGES?"). Eine Kopie haette die beiden auseinanderlaufen lassen. */
.pay-mypkg-chevron { color: var(--mmdb-ink-faint); transition: transform .15s ease; }
.pay-mypkg-card.open .pay-mypkg-chevron { transform: rotate(180deg); }
.pay-mypkg-history { margin-top: 14px; border-top: 1px solid var(--mmdb-line-soft); padding-top: 4px; cursor: default; }
.pay-mypkg-period { padding: 10px 0; border-bottom: 1px solid var(--mmdb-line-soft); }
.pay-mypkg-period:last-child { border-bottom: none; }
.pay-mypkg-period-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.pay-mypkg-period-head strong { white-space: nowrap; }
.pay-mypkg-nopay { margin: 0; color: var(--mmdb-ink-faint); font-size: 13px; }

/* ---- Status-Chip -------------------------------------------------------- */
.pay-badge { display: inline-block; padding: 3px 9px; border-radius: var(--mmdb-r-chip); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.pay-badge-green { background: var(--mmdb-ok-bg); color: var(--mmdb-ok); }
.pay-badge-amber { background: var(--mmdb-warn-bg); color: var(--mmdb-warm-deep); }
.pay-badge-red   { background: var(--mmdb-danger-bg); color: var(--mmdb-danger); }
.pay-badge-gray  { background: var(--mmdb-card-sub); color: var(--mmdb-ink-muted); }

/* ---- Tabellen ----------------------------------------------------------- */
.pay-mypkg-wrap { overflow-x: auto; }
table.pay-mypkg-table { width: 100%; border-collapse: collapse; background: var(--mmdb-card); }
.pay-mypkg-table th, .pay-mypkg-table td { padding: 6px 10px; border-bottom: 1px solid var(--mmdb-line-soft); text-align: left; font-size: 14px; }
.pay-mypkg-table th:last-child, .pay-mypkg-table td:last-child { width: 1%; white-space: nowrap; }
.pay-mypkg-table th.num, .pay-mypkg-table td.num { text-align: right; white-space: nowrap; }

/* ---- Knoepfe ------------------------------------------------------------ */
/* Ein Knopf-Stil fuer die ganze Seite - auch fuer <a class="button">, das sonst
   als unterstrichener Theme-Link erschien (User 2026-08-28). */
.pay-acct .button {
  display: inline-block;
  text-decoration: none !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-radius: var(--mmdb-r-ctl) !important;
  transition: all 0.3s ease !important;
  padding: 11px 22px !important;
  font-size: 15px !important;
  cursor: pointer;
  background: var(--mmdb-card-sub);
  color: var(--mmdb-ink);
  border: 1px solid var(--mmdb-line);
}
.pay-acct .button:hover {
  text-decoration: none !important;
  transform: translateY(-1px) !important;
  background: var(--mmdb-neutral-bg);
  border-color: var(--mmdb-line-input);
}
.pay-acct .button.button-primary {
  background: var(--mmdb-accent-fill);
  color: #fff;
  border-color: var(--mmdb-accent-fill);
}
.pay-acct .button.button-primary:hover {
  background: var(--mmdb-accent-deep);
  border-color: var(--mmdb-accent-deep);
}
.pay-acct .button[disabled] { opacity: .6; cursor: wait; transform: none !important; }
/* Aktionsspalte der Tabellen: kompakte Knoepfe, sonst wird die Tabelle zu breit */
.pay-acct .pay-mypkg-table td:last-child .button {
  padding: 8px 14px !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  margin: 1px 2px;
  font-weight: 600 !important;
  text-transform: none !important;
}
/* Knoepfe in einer Karten-Aktionsreihe (Kopfzeile ODER Fuss) tragen dasselbe
   Zeilen-Mass wie die Aktionsspalte - sonst stehen in derselben Karte zwei
   Knopfgroessen nebeneinander. */
.pay-acct .pay-mypkg-actions .button,
.pay-acct .pay-mypkg-cardact .button {
  padding: 8px 14px !important;
  font-size: 13px !important;
}
.pay-mypkg-cardact { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; }