/* eventlook-theme.css — VIZE 33
 * Place in the site's /public folder so it is served at:
 *   https://vize33.cz/eventlook-theme.css
 * The ticket iframe must include  &cssFileUrl=https://vize33.cz/eventlook-theme.css
 * Matches the live site: near-black surfaces, pure-red accent, Helvetica.
 * Tweak colors below in :root. */

:root {
  --vize-red: #ff0000;
  --vize-red-dark: #d10000;
  --vize-bg: #0a0a0a;
  --vize-surface: #141414;
  --vize-text: #ffffff;
  --vize-text-dim: #cfcac3;
  --vize-border: rgba(255, 255, 255, 0.10);
}

/* Base */
* {
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif !important;
}
body {
  background: var(--vize-bg) !important;
  color: var(--vize-text) !important;
}

/* Primary buttons: Zakoupit, Přidat, Použít, Otevřít mapu */
.MuiButton-contained {
  background-color: var(--vize-red) !important;
  color: #fff !important;
}
.MuiButton-contained:hover {
  background-color: var(--vize-red-dark) !important;
}

/* Outlined buttons */
.MuiButton-outlined {
  border-color: var(--vize-red) !important;
  color: var(--vize-red) !important;
}

/* Stepper number badges (every step is active in this form) */
svg.MuiStepIcon-root.Mui-active,
svg.MuiStepIcon-root.Mui-completed {
  color: var(--vize-red) !important;
}
.MuiStepLabel-label {
  color: var(--vize-text) !important;
}

/* Selected checkboxes / radios */
.MuiCheckbox-root.Mui-checked,
.MuiRadio-root.Mui-checked {
  color: var(--vize-red) !important;
}

/* Links + input focus accent */
a,
.MuiLink-root {
  color: var(--vize-red) !important;
}
label.MuiFormLabel-root.Mui-focused {
  color: var(--vize-red) !important;
}
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--vize-red) !important;
}

/* Cards: summary box + service rows (bez šedého MUI elevation stínu) */
.MuiCard-root,
#overview-card {
  background-color: var(--vize-surface) !important;
  border: 1px solid var(--vize-border) !important;
  box-shadow: none !important;
}

/* Secondary text tone to match the site */
.MuiTypography-body2,
.MuiTypography-caption {
  color: var(--vize-text-dim) !important;
}

/* Box se vstupenkou / řádky kroků — jemná tmavá výplň jako vstupní pole
 * (Jméno, Příjmení…), ať se box odliší od pozadí. */
.MuiStepContent-root .MuiStack-root > .MuiBox-root {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-radius: 10px !important;
}
/* Vnořené plochy uvnitř boxu (světlý header "Normal" = EventLook #f9fafb)
 * + box datum/pořadatel — bez vlastního pozadí, ať splynou (žádné jasně
 * šedé patche). */
.MuiStepContent-root .MuiStack-root > .MuiBox-root .MuiBox-root,
#overview-card .MuiStack-root {
  background-color: transparent !important;
}
/* Výjimky z výplně výše: poznámka (caption) a box s odkazem
 * "Více informací ke službám" — bez šedé. Cílíme přímo na ně přes obsah
 * (caption / odkaz jako přímý potomek), takže box s výběrem lístků
 * (který je nemá jako přímé dítě) zůstane s výplní nedotčený. */
.MuiTypography-caption {
  background-color: transparent !important;
}
.MuiStepContent-root .MuiStack-root > .MuiBox-root:has(> .MuiTypography-caption),
.MuiStepContent-root .MuiStack-root > .MuiBox-root:has(> a.MuiLink-root) {
  background-color: transparent !important;
}

/* Loga platebních metod (karta / Google Pay / Apple Pay) — světlé pozadí
 * pryč, ať jsou tmavá jako zbytek sekce. Cílíme přes stabilní src obrázku
 * a jeho span wrapper. */
img[src*="payment-method"],
.MuiBox-root:has(> img[src*="payment-method"]) {
  background-color: transparent !important;
}

/* Eventlook brand-orange (#fa541c) borders → red */
.MuiFormControlLabel-root {
  border-color: var(--vize-red) !important;
}
.MuiRadioGroup-root .MuiBox-root:has(.MuiRadio-root.Mui-checked) {
  border-color: var(--vize-red) !important;
}

/* Hlavní text světlý (název akce v souhrnu, "Celkem", částka) —
 * nadpisy mají z MUI vlastní tmavou barvu, vynutíme světlou. */
.MuiTypography-h4,
.MuiTypography-h5,
.MuiTypography-h6,
.MuiTypography-subtitle1,
.MuiTypography-subtitle2,
.MuiTypography-body1 {
  color: var(--vize-text) !important;
}

/* Text, který uživatel vyplňuje (jméno, e-mail, telefon, výběr) —
 * světlý, ať je na tmavém poli vidět (placeholder zůstává tlumený). */
.MuiInputBase-input,
.MuiSelect-select {
  color: var(--vize-text) !important;
}

/* Tlačítko "+" u množství vstupenek — červené POZADÍ, bílá ikona.
 * Je to .MuiIconButton-root bez colorPrimary (oranžovou řídí hashovaná
 * emotion třída), stabilní záchyt = aria-label. SVG "+" dědí barvu přes
 * fill: currentColor, takže color: #fff = bílé "+". */
button[aria-label="Zvýšit počet vstupenek"] {
  background-color: var(--vize-red) !important;
  color: #fff !important;
}
button[aria-label="Zvýšit počet vstupenek"]:hover {
  background-color: var(--vize-red-dark) !important;
}
.MuiIconButton-colorPrimary,
.MuiButton-textPrimary {
  color: var(--vize-red) !important;
}
.MuiButton-containedPrimary,
.MuiFab-primary,
.MuiFab-root {
  background-color: var(--vize-red) !important;
  color: #fff !important;
}
.MuiButton-outlinedPrimary {
  border-color: var(--vize-red) !important;
  color: var(--vize-red) !important;
}