.ticket-variations-form {
  flex-direction: column;
  display: flex;
  gap: 1rem;
}

.ticket-variations-form :is(ul, li) {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ticket-variations-form .dimension-option {
  display: flex;
}

.ticket-variations-form .dimension-option:empty {
  display: none;
}

.ticket-variations-form .options {
  grid-template-columns: 1fr 1fr;
  align-items: start;
  display: grid;
  gap: 1rem;
}

.ticket-variations-form .label {
  padding: calc(0.5rem + 1px) 0;
  font-size: 1.25rem;
  font-weight: bold;
}

.custom-datalist {
  position: relative;
}

.custom-datalist > div {
  background-color: white;
  flex-direction: column;
  position: absolute;
  border: 1px solid;
  display: none;
  z-index: 10;
  right: 0;
  left: 0;
}

.custom-datalist:focus-within > div {
  display: flex;
}

.custom-datalist :is([data-custom-datalist-value], em) {
  padding: 0.25rem 0.5rem;
}

.custom-datalist [data-custom-datalist-value] {
  cursor: pointer;
}

.custom-datalist [data-custom-datalist-value]:hover {
  background-color: var(--primary);
}

.input-bool {
  justify-content: end;
  display: flex;
  gap: 1rem;
}

.hover {
  fill: pink !important;
}

.bacs-ref {
  padding: 1rem;
  background-color: rgba(210, 10, 17, 0.25);
  color: rgb(210, 10, 17);
  border: 1px solid;
  margin: 1rem 0;
}

p + section {
  margin-top: 1rem;
}

#multiprice-selection > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

#multiprice-selection {
  display: none;
}

.variations:has(input:checked) {
  & + #multiprice-selection {
    display: block;
  }
}

#multiprice-selection ~ .options, #multiprice-selection ~ button  {
  display: none;
}

#multiprice-selection:has(input:checked) {
  & ~ .options, & ~ button  {
    display: grid;
  }
}