/* =========================================================
   GymCrit – Unified Dark Theme (single source of truth)
   Goals:
   - readable tables (dark, high contrast)
   - no "double borders"
   - consistent forms (no white inputs)
   - nicer messages/warnings
   - mobile: reduce wasted margins + add gap under topbar
   ========================================================= */

:root{
  --bg0:#050608;
  --bg1:#0b1016;

  --fg:#e6eef7;
  --muted:#a5b7cb;

  --accent:#00f5d4;
  --accent2:#00c8ff;

  --line: rgba(255,255,255,.10);
  --line2: rgba(255,255,255,.06);

  --shadow: 0 18px 60px rgba(0,0,0,.62);

  --r-lg: 18px;
  --r-md: 14px;
  --r-sm: 10px;

  --pad-lg: 22px;
  --pad-md: 16px;
  --pad-sm: 12px;
}

/* Box sizing + prevent mobile horizontal scroll */
*, *::before, *::after{ box-sizing: border-box; }
html{ overflow-x: hidden; }
body{ overflow-x: hidden; }
img, svg, video, canvas{ max-width: 100%; height: auto; }

/* Background + base typography */
html, body{
  background:
    radial-gradient(1200px 700px at 70% 15%, rgba(0,245,212,.14), transparent 60%),
    radial-gradient(900px 500px at 25% 75%, rgba(0,200,255,.10), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--fg);
}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .2px;
}
a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* =========================================================
   Layout wrappers
   ========================================================= */
.wrap{
  width: min(1180px, 94vw);
  margin: 0 auto;
}
.wrap--fluid{
  width: min(1600px, 98vw);
  margin: 0 auto;
}

/* Ensure content is not glued to header */
main{ padding: 26px 0 40px; }
header.topbar + main{ padding-top: 22px; }

/* =========================================================
   Topbar / Menu
   ========================================================= */
header.topbar{
  background: rgba(0,0,0,.62);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.topbar__inner{
  width: min(1600px, 98vw);
  margin: 0 auto;
  padding: 12px 0;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
}
.brand__logo{ 
  display: block;
  height: auto;
  max-height: 50px;
  max-width: 100%;
  filter: none;
  opacity: 1;
}

@media (max-width: 520px){
  .topbar .logo img,
  .topbar .logo svg { max-height: 34px; }
}

.menu{
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  justify-content: flex-end;
  gap: 10px;
  color: rgba(230,238,247,.72);
  font-size: 13px;
}

/* menu item – dark pill; hover stays dark (no white) */
.menu__item{
  position: relative;
  display:inline-flex;
  align-items:center;

  padding: 10px 14px 12px;
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r-sm);

  color: rgba(230,238,247,.88);
  text-transform: uppercase;
  letter-spacing: 1.8px;
  font-weight: 850;
  font-size: 12px;
  white-space: nowrap;

  text-decoration: none;
  transition: color .16s ease, transform .12s ease, border-color .16s ease, background .16s ease;
}
.menu__item::after{
  content:"";
  position:absolute;
  left: 12px; right: 12px;
  bottom: 4px;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(0,245,212,0),
    rgba(0,245,212,.95),
    rgba(0,200,255,.85),
    rgba(0,245,212,0)
  );
  opacity: 0;
  transform: scaleX(.45);
  transition: opacity .18s ease, transform .18s ease;
}
.menu__item:hover{
  color: var(--accent);
  background: rgba(0,0,0,.22);
  border-color: rgba(0,245,212,.35);
  text-decoration: none;
  transform: translateY(-1px);
}
.menu__item:hover::after{ opacity: 1; transform: scaleX(1); }
.menu__item:active{ transform: translateY(0); }
.menu__item.is-active{
  color: var(--accent);
  border-color: rgba(0,245,212,.35);
}
.menu__item.is-active::after{ opacity: 1; transform: scaleX(1); }

/* =========================================================
   Panels / Cards
   ========================================================= */
.panel{
  background: rgba(0,0,0,.38);
  border: 0px solid rgba(255,255,255,.08);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 6px;
  position: relative;
  overflow: hidden;
}

/* Results page uses nested panels (results.php -> dashboard.php).
   The inner panel is just a structural wrapper; make it visually flat
   to avoid "multiple frames" and save horizontal space on mobile. */
.panel.results-dashboard{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.panel.results-dashboard::before{ display:none; }
.results-dashboard > .wrap,
.results-dashboard > .wrap--fluid{
  width: 100%;
  margin: 0;
}
.panel::before{
  content:"";
  position:absolute;
  inset:-60px -80px auto -80px;
  height: 220px;
  background: radial-gradient(closest-side, rgba(0,245,212,.18), transparent 70%);
  pointer-events:none;
}
.card{
  background: rgba(0,0,0,.40);
  border: 1px solid rgba(0,245,212,.18);
  border-radius: var(--r-md);
  padding: var(--pad-md);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}

/* Headings */
h1{
  margin: 0 0 14px 0;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: .4px;
  color: rgba(230,238,247,.96);
  text-shadow: 0 0 18px rgba(0,245,212,.10);
}
h2, h3{
  margin: 0 0 12px 0;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
  color: rgba(230,238,247,.82);
}

/* =========================================================
   Forms (force dark – fixes white fields in registration)
   ========================================================= */
.form-row{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items:center;
}

.field
{
    padding: 4px;
}
label.small, .small{
  font-size: 12px;
  color: rgba(230,238,247,.70);
}

body input[type="text"],
body input:not([type]),
body input[type="email"],
body input[type="password"],
body input[type="number"],
body input[type="tel"],
body input[type="date"],
body input[type="file"],
body input[type="search"],
body select,
body textarea{
  background: rgba(0,0,0,.34) !important;
  border: 1px solid rgba(0,245,212,.50) !important;
  color: var(--fg) !important;
  padding: 10px 12px;
  border-radius: 12px;
  outline: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}

body select option{
  color: #111; /* native select dropdown rendering */
}

body input:focus,
body select:focus,
body textarea:focus{
  border-color: rgba(0,245,212,.70) !important;
  box-shadow: 0 0 0 2px rgba(0,245,212,.18) !important;
}

button, .btn{
  appearance: none;
  border: 1px solid rgba(0,245,212,.55);
  background: rgba(0,0,0,.40);
  color: rgba(230,238,247,.92);
  padding: 10px 14px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-weight: 850;
  font-size: 12px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
}
button:hover, .btn:hover{
  border-color: rgba(0,245,212,.85);
  background: rgba(0,245,212,.08);
  box-shadow: 0 0 26px rgba(0,245,212,.12);
  transform: translateY(-1px);
}
button:active, .btn:active{ transform: translateY(0); }

input.bad{
  border-color: rgba(255,80,80,.75) !important;
  box-shadow: 0 0 0 2px rgba(255,80,80,.18) !important;
}

/* =========================================================
   Messages / Warnings (prettier, no ugly blocks)
   ========================================================= */
.message{
  border-radius: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.38);
  color: rgba(230,238,247,.90);
  margin: 12px 0;
}
.message.success{
  border-color: rgba(0,245,212,.45);
  background: rgba(0,245,212,.14);
  color: rgba(235,255,252,.95);
}
.message.info{
  border-color: rgba(0,200,255,.40);
  background: rgba(0,200,255,.12);
  color: rgba(235,248,255,.95);
}
.message.warning{
  border-color: rgba(255,200,0,.35);
  background: rgba(255,200,0,.06);
}
.message.error{
  border-color: rgba(255,80,80,.35);
  background: rgba(255,80,80,.06);
}

/* Boxes created by JS in admin (stats / free start numbers) */
.men-box{
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
  color: rgba(230,238,247,.82);
  font-size: 13px;
}
.men-box strong{ color: rgba(230,238,247,.92); }
.field-error{
  color: rgba(255,120,120,.95);
  font-size: 12px;
  margin-top: 6px;
}

/* =========================================================
   Tables – readable dark, minimal borders (no double border)
   ========================================================= */

/* outer wrapper: only radius + clipping, no border (prevents double border) */
.table-wrap{
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-md);
  background: rgba(0,0,0,.22);
}

/* unified table style (works for table and table.table) */
table,
table.table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(0,0,0,.36) !important;
  color: rgba(230,238,247,.92) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: var(--r-md);
  overflow: hidden;
}

/* header */
thead th{
  background: rgba(255,255,255,.04) !important;
  color: rgba(230,238,247,.82) !important;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-size: 12px;
  font-weight: 800;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line2) !important;
}

/* sticky header only inside table-wrap */
.table-wrap thead th{
  position: sticky;
  top: 0;
  z-index: 2;
}

/* admin: startovní listina – na mobilu umožnit horizontální scroll + vždy vidět akce */
.table--startnumbers{ min-width: 820px; }
.table--startnumbers th:last-child,
.table--startnumbers td:last-child{
  position: sticky;
  right: 0;
  z-index: 3;
  background: rgba(0,0,0,.46) !important;
  box-shadow: -8px 0 12px rgba(0,0,0,.35);
  white-space: nowrap;
}

tbody td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--line2) !important;
  background: transparent !important;
}

/* zebra */
tbody tr{ background: transparent; }
tbody tr:nth-child(even){ background: rgba(255,255,255,.02) !important; }

/* hover */
tbody tr:hover{ background: rgba(0,245,212,.06) !important; }

/* postup (must override zebra) */
tbody tr.postup,
tbody tr.postup:nth-child(even),
tbody tr.postup:hover{
  background: rgba(0,245,212,.25) !important;
}

/* výsledky (dashboard): postup na čas */
tbody tr.qualify-green,
tbody tr.qualify-green:nth-child(even),
tbody tr.qualify-green:hover{
  background: rgba(0,245,212,.25) !important;
}

/* dashboard: kvalifikace na čas (sjednoceno se stylem postupu) */
tbody tr.qualify-green,
tbody tr.qualify-green:nth-child(even),
tbody tr.qualify-green:hover{
  background: rgba(0,245,212,.18) !important;
}

/* podium / positions (override everything) */
.pos_1,
tr.pos_1,
td.pos_1,
th.pos_1{
  background: rgba(255,215,0,.16) !important;
}
.pos_2,
tr.pos_2,
td.pos_2,
th.pos_2{
  background: rgba(192,192,192,.14) !important;
}
.pos_3,
tr.pos_3,
td.pos_3,
th.pos_3{
  background: rgba(205,127,50,.14) !important;
}

/* table links */
table a{ color: var(--accent) !important; }
table a:hover{ text-decoration: underline; }

/* align helpers */
.left{ text-align:left !important; }
.center{ text-align:center !important; }
.right{ text-align:right !important; }

/* =========================================================
   Countdown blocks (landing)
   ========================================================= */
.grid2{
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
}
.kv{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 14px 14px 12px;
  position: relative;
  overflow: hidden;
}
.kv::before{
  content:"";
  position:absolute;
  left:0; top:0; right:0;
  height: 2px;
  background: linear-gradient(90deg, rgba(0,245,212,0), rgba(0,245,212,.75), rgba(0,200,255,.55), rgba(0,245,212,0));
  opacity:.9;
}
.kv .k{
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  color: rgba(230,238,247,.72);
}
.kv .v{
  margin-top: 6px;
  font-size: 38px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--accent);
  text-shadow: 0 0 18px rgba(0,245,212,.22);
}

/* =========================================================
   Footer
   ========================================================= */
footer.footer{
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
}
.footer__inner{
  width: min(1600px, 98vw);
  margin: 0 auto;
  padding: 14px 0;
  display:flex;
  justify-content: space-between;
  align-items:center;
  color: rgba(230,238,247,.70);
}
.footer__env .badge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.35);
  color: rgba(230,238,247,.82);
  letter-spacing: 1px;
  font-size: 12px;
}

.badge--ok{
  border-color: rgba(0,245,212,.65);
  background: rgba(0,245,212,.35);
  color: rgba(235,255,252,.95);
}
.badge--warn{
  border-color: rgba(255,200,0,.65);
  background: rgba(255,200,0,.35);
  color: rgba(255,244,214,.95);
}

/* =========================================================
   Utility classes (replacing inline styles)
   ========================================================= */
.is-hidden{ display:none !important; }

.u-mt10{ margin-top:10px !important; }
.u-mt12{ margin-top:12px !important; }
.u-mb12{ margin-bottom:12px !important; }
.u-mb8{ margin-bottom:8px !important; }
.u-m0{ margin:0 !important; }
.u-mt0{ margin-top:0 !important; }
.u-mt22{ margin-top:22px !important; }
.u-mx-auto{ margin-left:auto !important; margin-right:auto !important; }
.u-maxw520{ max-width:520px !important; }
.u-maxw560{ max-width:560px !important; }
.u-p12{ padding:12px !important; }
.u-flex-row{ display:flex !important; gap:10px !important; align-items:center !important; flex-wrap:wrap !important; }
.u-ml10{ margin-left:10px !important; }
.u-ml14{ margin-left:14px !important; }

.icon-mid{ vertical-align: middle; }

/* =========================================================
   Responsive – reduce wasted margins on mobile
   ========================================================= */
@media (max-width: 980px){
  .grid2{ grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}
@media (max-width: 720px){
  .topbar__inner{ width: 100%; padding: 10px 6px; }
  .wrap, .wrap--fluid{ width: 100%; padding-left: 6px; padding-right: 6px; }
  header.topbar + main{ padding-top: 5px; }
  main{ padding: 5px 0 5px; }
  .panel{ padding: var(--pad-md); border-radius: 16px; }
  .card{ padding: var(--pad-sm); border-radius: 14px; }

  /* Tables + filters: make them fit without feeling cramped */
  h1{ font-size: 24px; }
  thead th{ font-size: 11px; padding: 8px 8px; }
  tbody td{ padding: 8px 8px; }
  table, table.table{ font-size: 13px; }
  .col-rank{ width: 38px; }
  .col-time{ width: 86px; }
  .col-gpx{ width: 76px; }
  .results-filter{ width: 100%; }
  .results-filter select{ width: 100%; max-width: 100%; }
}
@media (max-width: 520px){
  /* minimal side gutters on small phones */
  .wrap, .wrap--fluid{ width: 100%; padding-left: 4px; padding-right: 4px; }
  header.topbar + main{ padding-top: 2px; }
  main{ padding: 2px 0 4px; }

  /* Keep a little breathing room; remove extra "frames" instead */
  .panel{ padding: 8px; border-radius: 14px; }
  .card{
    padding: 10px;
    border: 0;
    box-shadow: none;
    background: rgba(0,0,0,.28);
  }
  .grid2{ grid-template-columns: 1fr; }
  .kv .v{ font-size: 34px; }

  /* Ultra-compact result tables */
  table, table.table{ font-size: 12.5px; }
  thead th{ padding: 7px 7px; letter-spacing: 1.1px; }
  tbody td{ padding: 7px 7px; }
  .col-rank{ width: 34px; }
  .col-time{ width: 78px; }
  .col-gpx{ width: 68px; }

  /* prevent time from wrapping; allow name to wrap naturally */
  td.col-time, th.col-time,
  td:nth-child(3), th:nth-child(3){ white-space: nowrap; }
}

/* =========================================================
   Results dashboard layout
   - if cards don't fit horizontally, wrap to next row
   - prevents clipping/cropping on medium widths
   ========================================================= */
.results-dashboard-grid{
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
}

/* dashboard tables sit in "blocks" – keep them from stretching weirdly */
.results-dashboard-grid > .results-block{
  min-width: 0;
}

.select_320{ min-width:320px; }

.w120{ width:120px; }
.w90{ width:90px; }
.u-mt14{ margin-top:14px !important; }


/* =========================================================
   RESULTS / ADMIN dashboards – always wrap, never clip
   ========================================================= */

/* 1) nedovol uřezání obsahu v panelech (častý viník) */
.panel { overflow: visible; }

/* 2) univerzální “dashboard grid”: když se nevejde, zalom dolů */
.results-dashboard-grid,
.dashboard-grid,
.dashboards,
.dashboard-panels,
.results-grid,
.admin-dashboard-grid {
  display: grid !important;
  gap: 16px !important;
  align-items: start !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
}

/* 3) pokud někde zůstalo flex, tak minimálně wrap */
.results-dashboard-grid.flex,
.dashboard-grid.flex,
.dashboards.flex {
  display: flex !important;
  flex-wrap: wrap !important;
}

/* 4) aby jednotlivé karty neuměly přetéct mimo sloupec */
.results-dashboard-grid > *,
.dashboard-grid > *,
.dashboards > * {
  min-width: 0;
}

/* 5) na “mezisířkách” (jako tvůj screenshot) trochu zmenšíme min šířku */
@media (max-width: 1400px){
  .results-dashboard-grid,
  .dashboard-grid,
  .dashboards,
  .results-grid{
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  }
}

/* 6) mobil: 1 sloupec */
@media (max-width: 760px){
  .results-dashboard-grid,
  .dashboard-grid,
  .dashboards,
  .results-grid{
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   TABLE ROW STATES – priority system
   ========================================================= */

/* 1) ZÁKLAD – zebra (jen pro běžné řádky) */
.table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.02);
}
.table tbody tr:nth-child(odd) {
  background: rgba(0,0,0,0.15);
}

/* =========================================================
   2) POSTUPUJÍCÍ (QF, SF, postup na čas)
   ========================================================= */

.table tbody tr.row-advance {
  background: linear-gradient(
    90deg,
    rgba(0, 120, 80, 0.35),
    rgba(0, 80, 60, 0.25)
  ) !important;
  box-shadow: inset 3px 0 0 rgba(0,255,180,0.8);
}

/* zebra se NESMÍ aplikovat */
.table tbody tr.row-advance:nth-child(even),
.table tbody tr.row-advance:nth-child(odd) {
  background: linear-gradient(
    90deg,
    rgba(0, 120, 80, 0.35),
    rgba(0, 80, 60, 0.25)
  ) !important;
}

/* =========================================================
   3) FINÁLE – MEDAILE
   ========================================================= */

.position_1 {
  background: linear-gradient(
    90deg,
    rgba(180,140,0,0.45),
    rgba(120,90,0,0.35)
  ) !important;
  box-shadow: inset 3px 0 0 rgba(255,215,0,0.9);
}

.position_2 {
  background: linear-gradient(
    90deg,
    rgba(160,160,160,0.4),
    rgba(120,120,120,0.3)
  ) !important;
  box-shadow: inset 3px 0 0 rgba(220,220,220,0.9);
}

.position_3 {
  background: linear-gradient(
    90deg,
    rgba(140,90,40,0.45),
    rgba(100,60,30,0.35)
  ) !important;
  box-shadow: inset 3px 0 0 rgba(205,127,50,0.9);
}

/* zebra se NESMÍ aplikovat ani na medaile */
.table tbody tr.pos_1:nth-child(even),
.table tbody tr.pos_1:nth-child(odd),
.table tbody tr.pos_2:nth-child(even),
.table tbody tr.pos_2:nth-child(odd),
.table tbody tr.pos_3:nth-child(even),
.table tbody tr.pos_3:nth-child(odd) {
  background-clip: padding-box;
}


/* =========================================================
   Messages / Alerts – high contrast, neon-dark friendly
   ========================================================= */

:root{
  --msg-bg: rgba(0,0,0,.42);

  --msg-success-bg: rgba(0, 245, 212, .10);
  --msg-success-br: rgba(0, 245, 212, .45);
  --msg-success-ic: rgba(0, 245, 212, .95);

  --msg-info-bg: rgba(0, 200, 255, .10);
  --msg-info-br: rgba(0, 200, 255, .40);
  --msg-info-ic: rgba(0, 200, 255, .95);

  --msg-warn-bg: rgba(255, 190, 0, .11);
  --msg-warn-br: rgba(255, 190, 0, .40);
  --msg-warn-ic: rgba(255, 190, 0, .95);

  --msg-error-bg: rgba(255, 72, 72, .12);
  --msg-error-br: rgba(255, 72, 72, .45);
  --msg-error-ic: rgba(255, 72, 72, .95);
}

/* base */
.message{
  position: relative;
  border-radius: 14px;
  padding: 12px 14px 12px 44px; /* místo na ikonku */
  border: 1px solid rgba(255,255,255,.14);
  background: var(--msg-bg);
  color: rgba(230,238,247,.92);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  margin: 12px 0;
  line-height: 1.35;
}

/* left accent bar */
.message::before{
  content:"";
  position:absolute;
  left: 10px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 4px;
  background: rgba(255,255,255,.18);
  opacity: .9;
}

/* variants */
.message.success{
  background: var(--msg-success-bg);
  border-color: var(--msg-success-br);
}
.message.success::before{ background: var(--msg-success-ic); }
.message.success::after{
  background: rgba(0,245,212,.18);
  box-shadow: 0 0 0 1px rgba(0,245,212,.35), 0 0 18px rgba(0,245,212,.12);
}

.message.info{
  background: var(--msg-info-bg);
  border-color: var(--msg-info-br);
}
.message.info::before{ background: var(--msg-info-ic); }
.message.info::after{
  background: rgba(0,200,255,.18);
  box-shadow: 0 0 0 1px rgba(0,200,255,.32), 0 0 18px rgba(0,200,255,.10);
}

.message.warning{
  background: var(--msg-warn-bg);
  border-color: var(--msg-warn-br);
  color: rgba(255,245,220,.92);
}
.message.warning::before{ background: var(--msg-warn-ic); }
.message.warning::after{
  background: rgba(255,190,0,.18);
  box-shadow: 0 0 0 1px rgba(255,190,0,.32), 0 0 18px rgba(255,190,0,.10);
}

.message.error{
  background: var(--msg-error-bg);
  border-color: var(--msg-error-br);
  color: rgba(255,230,230,.92);
}
.message.error::before{ background: var(--msg-error-ic); }
.message.error::after{
  background: rgba(255,72,72,.18);
  box-shadow: 0 0 0 1px rgba(255,72,72,.32), 0 0 18px rgba(255,72,72,.10);
}

/* =========================================================
   Inline field errors (e.g. "Jméno je povinné")
   ========================================================= */
.field-error,
.form-error,
.error-text{
  display:block;
  margin: 6px 0 10px;
  padding-left: 2px;
  color: rgba(255,120,120,.95);
  font-size: 12px;
  letter-spacing: .3px;
}

/* highlight invalid inputs */
input.invalid, select.invalid, textarea.invalid,
input:invalid, select:invalid, textarea:invalid{
  border-color: rgba(255,72,72,.55) !important;
  box-shadow: 0 0 0 2px rgba(255,72,72,.12) !important;
}

/* duplicitní startovní číslo */
.table--startnumbers input.bad{
  outline: 2px solid #d33;
  background: rgba(211, 51, 51, 0.12);
}

/* =========================================================
   The capacity/info box in registration – unify style
   (if it has class "message info", this is optional)
   ========================================================= */
.reg-info, .registration-info, .capacity-box{
  background: rgba(0,200,255,.09);
  border: 1px solid rgba(0,200,255,.28);
  border-radius: 14px;
  padding: 14px;
  color: rgba(230,238,247,.92);
}


.results-block .small, .results-note{
    padding-top: 6px
}