/*
 * File: cmp-vote.css
 * Munich Musicians DB - Competition (CMP_) Publikums-Voting-Seite (Phase 7.4)
 * Typografie/Buttons kommen aus base.css/forms.css; hier nur Karten, Stepper, Budget.
 */

.cmp-vote-wrap { max-width: 860px; margin: 0 auto; }
.cmp-vote-title { margin-bottom: 4px; }
.cmp-vote-sub { color: var(--mmdb-ink-muted); margin-top: 0; }
.cmp-vote-identity {
  font-size: .9rem;
  color: var(--mmdb-ink-muted);
  background: var(--mmdb-card-sub);
  border: 1px solid var(--mmdb-neutral-line);
  border-radius: 6px;
  padding: 6px 12px;
  display: inline-block;
}
.cmp-vote-pick { list-style: none; padding: 0; }
.cmp-vote-pick li { margin: 8px 0; }

/* ---------- Gate (Login / Gast-Registrierung) ---------- */
.cmp-vote-gate-box {
  border: 1px solid var(--mmdb-line);
  border-radius: 8px;
  padding: 20px;
  background: var(--mmdb-card-sub);
}
.cmp-vote-gate-box h3 { margin-top: 0; }
/* Terminwahl beim Magic-Link ohne Termin: Knopf + Bezeichnung in einer Zeile */
.cmp-vote-target { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.cmp-vote-target:last-child { margin-bottom: 0; }
.cmp-vote-nopass { margin-top: 14px; }
/* :not(.checkbox-label): die Spalten-Regel darf die forms.css-Checkbox-Zeile
   (Kaestchen + Text nebeneinander) NICHT ueberschreiben - sonst steht das
   Kaestchen allein in der Zeile (Testrunde 2026-08-13). */
.cmp-vote-gate-box form label:not(.checkbox-label) { display: flex; flex-direction: column; margin-bottom: 12px; }
#cmp-vote-turnstile { margin: 10px 0; }

/* Kauf-Knoepfe der Voting-Box: Hauptaktion der Seite, also die NORMALE
   Knopfgroesse des Skins (15px/600, gemischt) - Versalien tragen nur Knoepfe in
   dichten Listenzeilen. Fuellung/Radius kommen aus theme.css 5.1. */
.cmp-vote-primary-btn,
.cmp-vote-secondary-btn {
  display: inline-block;
  padding: 11px 22px;
  border-radius: var(--mmdb-r-ctl);
  border: 1px solid var(--mmdb-accent-fill);
  background: var(--mmdb-accent-fill);
  color: #fff !important;
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
  letter-spacing:0;
  /* !important: ohne das gewinnt die Link-Regel des Themes und ein als <a> gerenderter
     Button bekaeme einen Unterstrich (User 2026-08-21). */
  text-decoration: none !important;
  cursor: pointer;
  transition: all .2s ease;
}
.cmp-vote-secondary-btn {
  background: var(--mmdb-neutral);
  border-color: var(--mmdb-neutral);
}
.cmp-vote-primary-btn:hover {
  background: var(--mmdb-accent-deep);
  transform: translateY(-2px);
}
.cmp-vote-secondary-btn:hover {
  background: var(--mmdb-neutral);
  transform: translateY(-2px);
}
.cmp-vote-primary-btn:disabled,
.cmp-vote-secondary-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ---------- Budget-Anzeige (sticky, damit sie beim Verteilen sichtbar bleibt) ---------- */
/* ---------- Countdown auf Fenster-Start/-Ende (User 2026-08-23) ---------- */
.cmp-vote-countdown {
  margin: 16px 0;
  padding: 18px 20px;
  border-radius: 12px;
  text-align: center;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}
/* Warten aufs Oeffnen: ruhiges Blau. Laufendes Fenster: waermer, weil hier die
   Zeit tatsaechlich davonlaeuft. */
.cmp-vote-countdown-open  { background: linear-gradient(135deg, var(--mmdb-accent), var(--mmdb-accent-deep)); }
.cmp-vote-countdown-close { background: linear-gradient(135deg, #d97706, var(--mmdb-warn)); }
.cmp-vote-countdown-label {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  opacity: .85;
  margin-bottom: 6px;
}
.cmp-vote-countdown-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.35;
  /* Ziffern gleich breit: sonst zappelt die Zeile bei jedem Sekundenwechsel */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
@media (max-width: 520px) {
  .cmp-vote-countdown { padding: 14px 12px; }
  .cmp-vote-countdown-value { font-size: 1.15rem; }
}

.cmp-vote-budget-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: var(--mmdb-accent-soft);
  border: 1px solid var(--mmdb-info-line);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.cmp-vote-budget-num {
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--mmdb-accent-deep);
}
.cmp-vote-budget-num.is-zero { color: var(--mmdb-ok); }
.cmp-vote-budget-hint { margin-left: auto; font-size: .85rem; color: var(--mmdb-ink-muted); }

/* ---------- Act-Karten ---------- */
.cmp-vote-acts { display: flex; flex-direction: column; gap: 12px; }
.cmp-vote-act {
  border: 1px solid var(--mmdb-line);
  border-radius: 8px;
  padding: 12px;
  background: var(--mmdb-card);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cmp-vote-act-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cmp-vote-act-media {
  background: none;
  border: none;
  padding: 0;
  color: var(--mmdb-accent-deep);
  font-size: .85rem;
  cursor: pointer;
  text-decoration: none;
}
.cmp-vote-act-media.is-open { color: var(--mmdb-accent-deep); }
.cmp-vote-act-embed { margin-top: 12px; }
.cmp-vote-act-embed iframe { max-width: 100%; }
.cmp-vote-act.has-points {
  border-color: var(--mmdb-accent);
  box-shadow: 0 0 0 1px var(--mmdb-accent) inset;
}
.cmp-vote-act-photo {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.cmp-vote-act-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mmdb-neutral-bg);
  font-size: 1.4rem;
}
.cmp-vote-act-info { flex: 1; min-width: 0; }
.cmp-vote-act-name { font-weight: bold; }
.cmp-vote-act-genres { font-size: .85rem; color: var(--mmdb-ink-muted); }
.cmp-vote-act-media { font-size: .85rem; }

/* Stepper */
.cmp-vote-stepper { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cmp-vote-step {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--mmdb-accent-deep);
  background: linear-gradient(135deg, var(--mmdb-accent), var(--mmdb-accent-deep));
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  transition: all .15s ease;
}
.cmp-vote-step:hover:not(:disabled) { transform: translateY(-1px); }
.cmp-vote-step:disabled { opacity: .35; cursor: not-allowed; }
.cmp-vote-val {
  min-width: 2ch;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
}

/* P7.6b: Paywall mit Kauf-Box (Stripe Payment Element + PayPal Buttons) */
.cmp-vote-paywall {
  border: 1px solid var(--mmdb-line);
  border-radius: 8px;
  padding: 20px;
  background: var(--mmdb-card-sub);
  text-align: center;
}
/* Owner-Rabattcode (P7.6b, User 2026-08-20): Eingabe + Anwenden ueber den Zahlwegen */
.cmp-vote-dc-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 8px auto 4px;
  max-width: 320px;
}
.cmp-vote-dc-row input {
  flex: 1 1 auto;
  min-width: 0;
  text-transform: uppercase;
}
/* Zahlweg-Rabatt-Hinweis (User 2026-08-28): gruen und klein wie in der
   Ticket-Kauf-Box und auf der Bezahlseite der Teilnahmegebuehr. */
.cmp-prov-hint {
  color: var(--mmdb-ok);
  font-size: 0.9rem;
  text-align: center;
  margin: 4px auto 8px;
  max-width: 320px;
}
#cmp-paypal-buttons { max-width: 320px; margin: 12px auto 0; }
/* Redirect-Fallback des Pakets (2026-09-22): Freigabe als ganze Seite bei PayPal */
.cmp-paypal-fallback { text-align: center; font-size: .9rem; margin: 8px 0 0; }
/* Karten-Button auf DIESELBE Breite wie die PayPal-Buttons (User 2026-08-21:
   "Der Stripe Button ist kleiner als der PayPal Button") - beide 320px, zentriert. */
#cmp-buy-card, #cmp-buy-confirm {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  text-align: center;
}
#cmp-payment-element { max-width: 420px; margin: 12px auto; text-align: left; }
#cmp-buy-payment { margin-top: 8px; }

/* P7.7 (User 2026-08-21): "Voting Paket wird nirgendwo angeboten. Vorschlag: beim
   Checkout." - Einmalkauf und Pakete als EINE Auswahl in der Kauf-Box. Optik an den
   Verkaufs-Bloecken des Owner-Formulars orientiert: Kasten, aktiv = blauer Rahmen. */
.cmp-buy-options-list { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 16px; text-align: left; }
/* URSACHE des "Radiobutton in eigener Zeile" (User 2026-08-21): NICHT das Theme,
   sondern UNSER EIGENES forms.css:14 - `label{display:flex;flex-direction:column;gap:6px}`
   (die dokumentierte Feld-Konvention aus CLAUDE.md). cmp-vote.css haengt per
   wp_enqueue_style an mmdb-base-css + mmdb-forms-css, die Regel gilt hier also.
   display:flex allein aenderte nichts - die RICHTUNG blieb column, der Radiobutton
   stand ueber dem Text. Deshalb flex-direction explizit auf row.
   !important zusaetzlich gegen Theme-Regeln wie `.entry-content label{display:block}`. */
.cmp-buy-option {
  display: flex !important;
  flex-direction: row !important;
  /* Radiobutton VERTIKAL ZENTRIERT zur Karte (User 2026-08-21) - nicht oben
     ausgerichtet, sonst klebt er bei mehrzeiligen Angeboten an der Oberkante. */
  align-items: center;
  gap: 10px;
  /* width:auto !important + border-box: mit dem Theme-`label { width:100% }` und
   * content-box ragte die Karte um Rahmen+Innenabstand nach rechts heraus. */
  width: auto !important;
  box-sizing: border-box;
  border: 2px solid var(--mmdb-line);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--mmdb-card);
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cmp-buy-option:has(input:checked) { border-color: var(--mmdb-accent); box-shadow: 0 2px 8px rgba(61,146,209, .12); }
/* Im Rahmen des Ticketing-Widgets ist das Produkt schon auf der fremden Seite
   gewaehlt (User 2026-09-17): die Karte steht als FESTSTEHENDE Angabe da - kein
   Radiobutton, kein Klickziel, aber dieselbe Hervorhebung wie eine gewaehlte
   Option. Menge und Terminwahl darin bleiben bedienbar. */
.cmp-buy-option-fixed { cursor: default; border-color: var(--mmdb-accent); }
/* Der Radiobutton bleibt ein Inline-Kaestchen neben dem Text - Themes machen
   input[type=radio] gern zum Block bzw. geben ihm volle Breite. */
.cmp-buy-option > input[type="radio"] {
  display: inline-block !important;
  width: auto !important;
  min-width: 0 !important;
  /* kein margin-top - die Zentrierung macht align-items */
  margin: 0 !important;
  flex: 0 0 auto;
  float: none !important;
}
.cmp-buy-option-body { display: block; flex: 1 1 auto; min-width: 0; }
/* Beschriftung und Terminwahl in EINER Zeile (User 2026-08-21) */
.cmp-buy-option-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cmp-buy-option-title { font-weight: 700; }
.cmp-buy-option-price { display: block; font-weight: 600; color: var(--mmdb-accent-deep); }
.cmp-buy-option-desc { display: block; margin-top: 4px; font-size: .9rem; }
/* Laufendes Paket (User 2026-08-27): erklaert, warum hier keine Pakete stehen. */
.cmp-buy-hassub { margin: 4px 0 12px; text-align: left; }
/* Terminwahl des Einmalkaufs (User 2026-08-21: "Dropbox mit vorselektiertem Termin") */
.cmp-buy-option-date { font-weight: 600; }
/* width:auto !important — Themes setzen `.entry-content select { width:100% }`,
   dann sprengt die Klappliste die Kopfzeile und der Titel steht wieder allein
   (im Harness mit Theme-Simulation nachgewiesen, User 2026-08-21). */
.cmp-buy-occ {
  margin: 0 !important;
  width: auto !important;
  max-width: 100%;
  flex: 0 1 auto;
}
.cmp-buy-occ:disabled { opacity: .5; }
/* Betragsfeld der Ticket-Karte (User 2026-09-18): Pay what you want und Spende
   verkauft die Bezahlschranke jetzt selbst - ihr fehlte nur dieses Feld. Es steht
   UNTER der Beschreibung, nicht in der Kopfzeile: dort teilt es sich den Platz mit
   Titel und Menge und rutschte auf schmalen Geraeten unter die Wahrnehmungsschwelle. */
.cmp-buy-option-amount { display: block; margin-top: 8px; }
/* Produktzeilen der Ticket-Karte (Stufe 4b): Name/Preis links, Menge rechts, Betragsfeld darunter */
.cmp-buy-tkt-rows { display: block; margin-top: 8px; }
.cmp-buy-tkt-row { display: block; border: 1px solid var(--mmdb-line); border-radius: 9px; padding: 8px 10px; margin-bottom: 6px; }
.cmp-buy-tkt-row.is-off { opacity: 0.6; }
.cmp-buy-tkt-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cmp-buy-tkt-row-main { display: flex; flex-direction: column; min-width: 0; }
.cmp-buy-tkt-row-name { font-weight: 600; }
.cmp-buy-tkt-row-price, .cmp-buy-tkt-row-left { font-size: 0.9rem; color: var(--mmdb-ink-soft); }
.cmp-buy-tkt-row-left { font-weight: 600; }
.cmp-buy-tkt-row select.cmp-buy-tkt-row-qty { flex: 0 0 auto; width: auto; min-width: 64px; }
.cmp-buy-amount-purpose { display: block; font-size: .9rem; margin-bottom: 4px; }
.cmp-buy-amount-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.cmp-buy-amount-row > span { font-size: .9rem; }
/* width:auto !important aus demselben Grund wie bei .cmp-buy-occ: ein Theme mit
   `.entry-content input { width:100% }` sprengt sonst die Zeile. */
.cmp-buy-amount-row input {
  margin: 0 !important;
  width: 7em !important;
  max-width: 100%;
  flex: 0 1 auto;
}
.cmp-buy-amount-row input:disabled { opacity: .5; cursor: not-allowed; }
/* Spenden-Block - dieselbe Bauform wie in der Kauf-Box der Event-Seite
   (User 2026-09-18): Ueberschrift, Zweck, Opt-in-Haken, darunter das Betragsfeld,
   das bis zum Haken ausgegraut bleibt. */
.cmp-buy-donation-box { display: block; margin-bottom: 8px; }
.cmp-buy-donation-title { display: block; font-weight: 600; margin-bottom: 4px; }
.cmp-buy-donation-optin { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; }
.cmp-buy-donation-optin input { margin: 0 !important; width: auto !important; flex: 0 0 auto; }
.cmp-buy-donation-optin > span { font-size: .9rem; }

}

@media (max-width: 600px) {
  .cmp-vote-act-row { flex-wrap: wrap; }
  .cmp-vote-act-info { flex-basis: calc(100% - 78px); }
  .cmp-vote-stepper { margin-left: auto; }
}

/* Sandbox-Debug (User 2026-08-13): Occurrence-ID-Badge - erscheint NUR auf Sandbox */
.occ-id-badge {
  font-family: monospace;
  font-size: 0.75rem;
  background: var(--mmdb-warn-bg);
  border: 1px solid #e4c96a;
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--mmdb-warn);
  vertical-align: middle;
}

/* "Per E-Mail informieren" beim kostenlosen Voting (User 2026-08-22): Knopf und
   Bestaetigung in einer Zeile unter der Terminangabe. */
.cmp-vote-notify-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.cmp-vote-notify-row .help { margin: 0; }

/* ---- M20 (User 2026-08-24): Ticket-Sitze ---- */
/* Begleitcode-Kasten in der Zugangs-Weiche: volle Breite ueber dem Zwei-Spalten-
   Raster - wer im Saal steht, soll ihn zuerst sehen. */
.cmp-seat-gate { margin-bottom: 16px; }
.cmp-seat-gate .imm-grid { margin-bottom: 8px; }
.cmp-seat-gate input[name="code"] { text-transform: uppercase; letter-spacing: 2px; }

/* Sitz-Block ueber dem Ballot */
.cmp-seat-block {
    background: var(--mmdb-card-sub);
    border: 1px solid var(--mmdb-line);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 16px;
}
.cmp-seat-lead { margin: 0 0 8px; font-weight: 600; }
.cmp-seat-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
/* Pill-Leiste wie die pub-toggle-Filter des Event Managers: weisse Pills mit
   2px-Rahmen, aktiv blau gefuellt. */
.cmp-seat-tab {
    background: var(--mmdb-card);
    border: 2px solid var(--mmdb-accent);
    color: var(--mmdb-accent-deep);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
.cmp-seat-tab:hover { background: var(--mmdb-accent-soft); }
.cmp-seat-tab.is-active { background: var(--mmdb-accent-fill); color: #fff; }
.cmp-seat-tab.is-done:not(.is-active) { border-color: var(--mmdb-ok); color: var(--mmdb-ok); }
.cmp-seat-name { display: flex; flex-direction: column; margin-bottom: 4px; }
/* Personalisierter Sitz (User 2026-08-27): statt Eingabefeld nur, WER hier abstimmt. */
.cmp-seat-holder { margin: 0; font-weight: 600; }
.cmp-seat-block .help { margin: 0; }

/* P7.8: Slip-Registrierung - der Mitglieds-Kasten hilft hier nicht weiter (der Slip
   gehoert keinem Konto), das Gast-Formular bekommt die volle Breite. */
.cmp-gate-seat-only .cmp-vote-gate-box:first-child { display: none; }
.cmp-gate-seat-only { grid-template-columns: 1fr; }

/* ============================================================================
   RE-SKIN 2026-08-28: Die Seite ist eine weisse Inhalts-Karte auf dem dunklen
   Seitengrund. Der Container war bisher nur eine Breitenbegrenzung - ohne
   Karte stuende der (dunkle) Text jetzt auf dunklem Grund.
   ========================================================================= */
body.mmdb-skin .cmp-vote-wrap {
  background: var(--mmdb-card);
  color: var(--mmdb-ink-soft);
  border-radius: var(--mmdb-r-card);
  box-shadow: var(--mmdb-shadow-card);
  padding: 28px 30px;
  margin: 22px auto 32px;
}
body.mmdb-skin .cmp-vote-wrap > :first-child { margin-top: 0; }
body.mmdb-skin .cmp-vote-wrap > h2:first-child,
body.mmdb-skin .cmp-vote-wrap > h1:first-child {
  font-family: var(--mmdb-font-head) !important;
  font-weight: 500;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mmdb-accent-deep);
}
@media (max-width: 600px) {
  body.mmdb-skin .cmp-vote-wrap { padding: 20px 16px; }
}

/* ------------------------------------------------------------------
   "Ticket+Voting" als VERWEIS (User 2026-09-03): nur fuer externes Ticketing
   und fuer die Betragsformen mit eigener Maske. Der EIGENE Verkauf mit festem
   Preis steht als gleichwertige Auswahl-Option in der Liste darueber und
   braucht hier nichts. Optisch abgesetzt (Trennlinie mit "oder"), aber in
   DERSELBEN Kauf-Box - es ist eine Alternative, kein neuer Abschnitt.
   ------------------------------------------------------------------ */
.cmp-vote-ticket-alt {
  margin-top: 20px;
  text-align: center;
}
/* Trennlinie mit eingelassenem Wort: zwei Linien links/rechts vom "oder" */
.cmp-vote-alt-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  color: var(--mmdb-ink-muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.cmp-vote-alt-sep::before,
.cmp-vote-alt-sep::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--mmdb-line);
}
.cmp-vote-ticket-alt h4 {
  font-family: var(--mmdb-font-head);
  font-weight: 500;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mmdb-accent-deep);
  margin: 0 0 6px;
}
.cmp-vote-ticket-alt p {
  margin: 0 auto 8px;
  /* Fliesstext braucht eine Zeilenlaenge, keine Kartenbreite - die Kauf-Box ist
     zentriert, ein Satz ueber die volle Breite liest sich schlecht. */
  max-width: 460px;
}
/* Auf DIESELBE Breite wie Karten-/PayPal-Knopf: die Box liest sich als EINE Spalte */
.cmp-vote-ticket-alt .cmp-vote-secondary-btn {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ------------------------------------------------------------------
   Kauf OHNE Identitaet (User-Entscheid 2026-09-03): Die Kauf-Box steht VOR der
   Identitaets-Weiche und traegt selbst die Mindestangabe - Name und E-Mail, wie
   der Ticketkauf. Darunter der Umschalter zur Weiche fuer alle, die schon
   bezahlt haben.
   ------------------------------------------------------------------ */
.cmp-buy-identity {
  max-width: 320px;
  margin: 14px auto 4px;
  text-align: left;
}
.cmp-buy-identity label { display: block; margin-bottom: 8px; }
.cmp-buy-identity input { width: 100%; box-sizing: border-box; }
.cmp-buy-identity .help { margin: 0 0 10px; }
/* Einwilligung und Werbe-Haken stehen zwischen dem Hinweis und den Zahlwegen
   (User 2026-09-03). Die beiden Regeln darueber gelten den TEXTFELDERN - ohne diese
   Ausnahme waere das Kaestchen 100% breit und sein Label ein eigener Block. */
.cmp-buy-identity .checkbox-label { display: flex; margin-bottom: 8px; }
.cmp-buy-identity .checkbox-label input[type="checkbox"] { width: auto; margin-top: 2px; }
.cmp-buy-identity .checkbox-text { font-size: 0.9rem; line-height: 1.35; }
.cmp-buy-identity .cmp-vote-primary-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.cmp-vote-paid-toggle {
  text-align: center;
  margin: 14px 0 4px;
}