/* ===========================================================
   hub.brussels – Pretix widget overrides (FINAL v4)
   Auteur: Bodi Van de Voorde
   Kleur: #00B2A9
   Vorm: afgerond behalve rechteronderhoek
   Uitlijning: bovenste knop gecentreerd, onderste rechts
   =========================================================== */

/* ====== Globale variabelen (ook voor loader/gear) ====== */
:root {
  --pretix-brand-primary: #00B2A9;
  --pretix-brand-primary-contrast: #ffffff;
  --pretix-brand-primary-dark: #00968F;
  --pretix-brand-secondary: #00B2A9;
}

/* ====== Basis knoppen (primair – gevuld) ====== */
.pretix-widget .pretix-widget-button,
.pretix-widget .pretix-widget-action button,
.pretix-widget .pretix-widget-resume-button,
.pretix-widget .pretix-widget-alert-box input[type="button"] {
  background: var(--pretix-brand-primary) !important;
  color: var(--pretix-brand-primary-contrast) !important;
  border: 2px solid var(--pretix-brand-primary) !important;
  border-radius: 9999px 9999px 0 9999px !important; /* rechteronderhoek recht */
  padding: 12px 32px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  text-align: center !important;
  display: inline-block !important;
  margin: 8px 0 16px 0 !important;
  box-shadow: none !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  max-width: 260px !important;
  width: auto !important;
}

/* ====== Hover, focus, disabled ====== */
.pretix-widget .pretix-widget-button:hover,
.pretix-widget .pretix-widget-action button:hover,
.pretix-widget .pretix-widget-resume-button:hover,
.pretix-widget .pretix-widget-alert-box input[type="button"]:hover {
  background: var(--pretix-brand-primary-dark) !important;
  border-color: var(--pretix-brand-primary-dark) !important;
}

.pretix-widget .pretix-widget-button:focus,
.pretix-widget .pretix-widget-action button:focus,
.pretix-widget .pretix-widget-resume-button:focus,
.pretix-widget .pretix-widget-alert-box input[type="button"]:focus {
  outline: 3px solid color-mix(in srgb, var(--pretix-brand-primary) 35%, transparent) !important;
  outline-offset: 2px !important;
}

.pretix-widget .pretix-widget-button:disabled,
.pretix-widget .pretix-widget-action button:disabled,
.pretix-widget .pretix-widget-resume-button:disabled,
.pretix-widget .pretix-widget-alert-box input[type="button"]:disabled {
  opacity: .6 !important;
  cursor: not-allowed !important;
}

/* ====== Secundaire (outline) knoppen ====== */
.pretix-widget .pretix-widget-button--secondary,
.pretix-widget .pretix-widget-button-secondary,
.pretix-widget a.pretix-widget-button {
  background: transparent !important;
  color: var(--pretix-brand-primary) !important;
  border: 2px solid var(--pretix-brand-primary) !important;
  border-radius: 9999px 9999px 0 9999px !important;
  padding: 12px 32px !important;
  margin: 8px auto 16px auto !important;
  display: inline-block !important;
  width: auto !important;
  max-width: 260px !important;
}
.pretix-widget .pretix-widget-button--secondary:hover,
.pretix-widget .pretix-widget-button-secondary:hover,
.pretix-widget a.pretix-widget-button:hover {
  background: color-mix(in srgb, var(--pretix-brand-primary) 8%, transparent) !important;
}

/* ====== BOVENSTE knop (in info-message) – GECENTREERD ====== */
.pretix-widget .pretix-widget-info-message {
  text-align: center !important;
}
.pretix-widget .pretix-widget-info-message .pretix-widget-resume-button {
  margin: 10px auto 10px auto !important;
  display: inline-block !important;
}

/* ====== ONDERSTE knop (in actiecontainer) – RECHTS UITGELIJND ====== */
.pretix-widget .pretix-widget-action {
  text-align: right !important;
  padding-right: 20px !important; /* kleine buffer rechts */
  padding-bottom: 10px !important;
  margin-bottom: 10px !important;
  line-height: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}
.pretix-widget .pretix-widget-action form {
  margin: 0 !important;
  text-align: right !important;
}
.pretix-widget .pretix-widget-action .pretix-widget-resume-button {
  margin-right: 0 !important;
}

/* ====== Quantity controls consistent maken ====== */
.pretix-widget .pretix-widget-quantity input,
.pretix-widget .pretix-widget-quantity button {
  border-radius: 9999px 9999px 0 9999px !important;
}

/* ====== Loader / Gear / Overlay kleuring ====== */
.pretix-widget .pretix-widget-overlay svg,
.pretix-widget .pretix-widget-frame-loading svg,
.pretix-widget .pretix-widget-loading svg,
.pretix-widget .pretix-widget-spinner svg {
  fill: var(--pretix-brand-primary) !important;
  stroke: var(--pretix-brand-primary) !important;
  color: var(--pretix-brand-primary) !important;
}

/* ====== Attribution verwijderen ====== */
.pretix-widget .pretix-widget-attribution {
  display: none !important;
}

/* ====== Responsieve correctie voor small screens ====== */
@media (max-width: 480px) {
  .pretix-widget .pretix-widget-action,
  .pretix-widget .pretix-widget-info-message {
    text-align: center !important; /* mobiel alles gecentreerd */
    padding-right: 0 !important;
  }
  .pretix-widget .pretix-widget-button,
  .pretix-widget .pretix-widget-resume-button {
    width: 90% !important;
    max-width: none !important;
  }
}