:root {
  --danger-color: #dc2626;
}

.page-wrapper {
  min-height: 90dvh;
}

.padding-global.mc-padding-nav-space {
  padding-top: var(--primitives--space-navbar);
}

.container-large.mc-columns-grid-50-50 {
  grid-column-gap: var(--primitives--gutter);
  grid-row-gap: var(--primitives--gutter);
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

@media only screen and (width >= 768px) {
  .container-large.mc-columns-grid-50-50 {
    grid-template-columns: 1fr 1fr;
  }
}

.container-large.mc-columns-grid-50-50 {
  grid-column-gap: var(--primitives--36px);
  grid-row-gap: var(--primitives--72px);
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media only screen and (width >= 768px) {
  .container-large.mc-columns-grid-50-50 {
    grid-row-gap: var(--primitives--36px);
    grid-template-columns: 1fr 1fr;
  }
}

.container-large.mc-columns-grid-50-50.add-space-top {
  margin-top: var(--spacing--fluid-margin-120);
  padding-top: 0;
}

a.mc-card {
  h3.mc-card-title svg {
    opacity: 25%;
  }
  
  &:hover, &:active, &:focus {
    h3.mc-card-title svg {
      opacity: 100%;
    }
  }
}

h3.mc-card-title {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 90%;
  
  & svg {
    height: var(--fonts--fluid-24-36);
  }
}

.mc-card-content p {
  margin-bottom: 0;
}

.ticket-global-wrapper {
  background: #fff;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  
  & .where-and-when {
    display: none;
  }
  
  & > table {
    margin: 0 auto 2rem;
    width: 90%;
  }
  
  & .order-form {
    display: flex;
    flex: 1;
    flex-direction: column;
    
    & .ticket-wrapper {
      padding-top: 1rem;
    }
    
    & > dl {
      flex: 1;
    }
    
    & dt {
      padding: 0;
    }
    
    & dt > div {
      display: flex;
      gap: 0.5rem;
      justify-content: space-between;
      width: 100%;
      
      & .price-breakdown {
        margin-top: 0;
        
        & .price-amount {
          font-weight: normal;
        }
      }
    }
    
    & dt label {
      color: #000;
    }
    
    & .ticket-description p {
      margin: 0;
    }
  }

  & footer.expanded {
    background-color: #000;
    color: #fff;
    
    & .btn {
      background-color: #fff;
      color: #000;
    }
    
    & .collapse-summary {
      background-color: #000;
      border-color: #000;
      color: #fff;
    }
    
    & table.summary-total {
      border-color: #fff;
      
      & .description,
      & .amount {
        padding-top: 0.5rem;
      }
    }

    & .io-terms {
      & p {
        color: white;
      }

      & a,
      & a:hover,
      & a:active,
      & a:focus {
        color: white;
      }
    }
  }
  
  & footer {
    & .btn.btn-primary {
      min-height: var(--primitives--52px);
      font-size: var(--fonts--fluid-label);
      letter-spacing: .02em;
      text-transform: uppercase;
      border-radius: 8rem;
      padding: 1.25em 1.5em;
      font-weight: 400;
      line-height: 1;
    }
  }
  
  & .checkout-form {
    & .btn.btn-primary {
      min-height: var(--primitives--52px);
      font-size: var(--fonts--fluid-label);
      letter-spacing: .02em;
      text-transform: uppercase;
      border-radius: 8rem;
      padding: 1.25em 1.5em;
      font-weight: 400;
      line-height: 1;
    }
  }
  
  & .btn.btn-link {
    align-items: center;
    border: 1px solid #D9D9D9;
    border-radius: 8rem;
    display: flex;
    font-size: var(--fonts--fluid-label);
    font-weight: 400;
    justify-content: center;
    letter-spacing: .02em;
    line-height: 1;
    min-height: var(--primitives--52px);
    padding: 1.25em 1.5em;
    text-transform: uppercase;
    width: 100%;
  }
  
  & .promotion-codes > div {
    margin-bottom: 0;
  }

  & .promotion-code-error {
    color: #dc2627;
    font-size: 0.875rem;

    & a {
      color: #dc2627;
    }
  }
  
  & .button-group {
    margin-bottom: var(--primitives--32px);
  }
  
  & .button-group form {
    margin: 0 auto;
    width: 90%;
  }
  
  & .ticket-description p {
    color: var(--custom-text-color-muted);
    font-size: 0.875rem;
  }
  
  & .checkout-form fieldset > p {
    border-bottom: 1px solid var(--text-color--text-primary);
    color: black;
    padding-bottom: 0.5rem;
  }
}

.info-wrapper {
  & h3.mc-card-title {
    margin-bottom: var(--primitives--32px);
  }
  
  & ol li {
    margin-bottom: 1rem;
  }
}

.yste-school-type {
  & p.time-slot-label {
    margin-top: var(--primitives--32px);
  }
}

.yste-btn-group.button-group {
  flex-wrap: nowrap;
  justify-content: normal;
  max-width: calc(50% - 18px);
  
  & .button {
    flex: 1;
    justify-content: center;
  }
}

.io-wrapper--public {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 72px;
  position: relative;
  z-index: 9998;

  @media only screen and (width >= 768px) {
    max-width: calc(756px + 5rem);
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

.yste-btn-group--public.button-group.mc-hero-button-group {
  align-self: center;
  margin-bottom: 2rem;
  max-width: 756px;
  width: 100%;

  & .button {
    width: 100%;
  }
}

section.yste-home-options.container-large.mc-columns-grid-50-50 {
  @media only screen and (width >= 768px) {
    grid-template-columns: 1fr 1fr 1fr;
  }

  & .mc-card {
    & .mc-card-content {
      height: 100%;
      
      & .mc-card-title {
        font-size: 28px;
      }
      
      & .yste-btn-group {
        align-items: flex-end;
        flex: 1;
      }
    }
  }
}

.tickets-faq {
  & h3 {
    margin-bottom: 1rem;
  }
}

.order-form .promotion-codes {
  padding-top: 2rem;
  
  & ul {
    margin-top: 0.5rem;
  }
}

.pt-8 {
  padding-top: 2rem;
}

.checkout-form {
  & .field.field--select {
    & > div {
      display: grid;
      grid-template-columns: repeat(1,minmax(0,1fr));
    }
    
    & select {
      appearance: none;
      color: rgba(0 0 0 0.6);
      grid-row-start: 1;
      grid-column-start: 1;
    }
    
    & svg {
      align-self: center;
      grid-row-start: 1;
      grid-column-start: 1;
      justify-self: flex-end;
      margin-right: 0.25rem;
      pointer-events: none;
      width: 1rem;
    }
  }
}

.ticket-global-wrapper {
  & > p {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
  }
}

.checkout-form--stripe {
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  
  & .payment-element.StripeElement {
    padding: 2rem 0;
  }
}

.py-4 {
  padding-bottom: 1rem;
  padding-top: 1rem;
}

.time-slot-label {
  font-size: 0.875rem;
  text-align: center;

  @media only screen and (width >= 480px) {
    /*display: none;*/
  }
}

.time-slots {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1rem 0;

  @media only screen and (width >= 480px) {
    flex-direction: row;
  }

  & + p {
    margin-top: 2rem;
  }

  & .btn {
    align-items: center;
    background: #000;
    border-radius: 8rem;
    display: flex;
    flex-direction: column;
    font-size: var(--fonts--fluid-label);
    font-weight: 400;
    gap: 0.5rem;
    justify-content: center;
    letter-spacing: .02em;
    line-height: 1;
    min-height: var(--primitives--52px);
    padding: 1.25em 1.5em;
    text-transform: uppercase;
    width: 100%;
    &:hover,
    &:active,
    &:focus {
      background-color: var(--base-color-neutral--neutral-dark);
    }

    & small {
      font-size: var(--fonts--fluid-label);
    }
  }

  & .not-available {
    display: none;
  }

  & .not-selected {
    background-color: #fff;
    color: var(--text-color--text-secondary);

    &:hover,
    &:active,
    &:focus {
      background-color: var(--base-color-neutral--neutral-lighter);
    }
  }
}

h2.time-slot + p {
  margin: 0 0 2rem;
}

.time-slot-description {
  margin: 1rem;
}

form {
  & h2 {
    font-weight: 600;
    font-size: 1.15rem;
  }

  & fieldset {
    border: none;
    padding: 0;
    margin-bottom: 1rem;
  }

  & > fieldset {
    margin-top: 2rem;
  }

  & label {
    font-weight: 500;
    display: block;
    margin-bottom: 0.5rem;

    &.is-required::after {
      content: "*";
      margin-left: 1px;
    }
  }

  & .fields {
    display: flex;
    gap: 1rem;
  }

  & .field {
    flex: 1;
    margin-bottom: 1rem;

    & p {
      font-size: 1rem;
    }
  }

  & .checkbox,
  & .radio-buttons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;

    & label {
      font-weight: normal;
      margin-bottom: 0;
    }
  }

  & input[type="text"],
  & input[type="email"],
  & input[type="number"],
  textarea {
    background-color: var(--custom-text-background-color);
    color: var(--custom-text-color);
    width: 100%;
    border-radius: 0.25rem;
    border: 1px solid var(--custom-border-color);
    padding: 0.5rem;
    margin-bottom: 0.5rem;
  }

  & input[type="number"] {
    max-width: 100px;
  }

  & select {
    display: block;
    background-color: var(--custom-text-background-color);
    border: 1px solid var(--custom-border-color);
    border-radius: 0.25rem;
    color: var(--custom-text-color);
    padding: 0.5rem;
    padding-right: 2rem;
    width: 100%;

    &.custom-appearance {
      appearance: none;
      background-repeat: no-repeat, repeat;
      background-position:
        right 0.7em top 50%,
        0 0;
      background-size:
        0.65em auto,
        100%;
    }
  }

  & .hint {
    font-size: 0.875rem;
    color: var(--custom-text-color-muted);
    margin-bottom: 0.5rem;
  }

  & input[type="submit"] {
    width: 100%;
  }

  & footer {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
}

& form.button_to {
  padding: 0;
}

.btn-primary {
  width: 100%;
}

.order-form {
  padding: 0 0 15rem !important;
  margin-bottom: 0 !important;

  @media only screen and (width >= 600px) {
    padding: 0 !important;
  }

  & dl,
  & fieldset {
    margin: 0 1rem;

    @media (width >= 600px) {
      margin: 0 2rem;
    }
  }

  & dl .ticket-wrapper {
    border-bottom: 1px solid var(--custom-border-color);
    display: flex;
    flex-direction: column;

    &:last-child {
      border-bottom: none;
    }

    & .ticket-title-quantity {
      align-items: center;
      display: flex;
      flex-direction: row;
      gap: 0.5rem;
      justify-content: space-between;
      width: 100%;
    }

    & .ticket-description {
      color: var(--custom-text-color-muted);
      font-size: 0.875rem;
      max-width: 90ch;
      width: 100%;

      @media only screen and (width >= 768px) {
        margin-top: -1rem;
      }
    }
  }

  & dl dt {
    align-items: center;
    color: var(--custom-text-color);
    display: flex;
    flex: 1;
    font-size: 1rem;
    gap: 0.5rem;
    justify-content: space-between;
    padding: 1rem 0;

    & > div {
      display: flex;
      flex: 1;

      & label {
        color: var(--custom-text-color);
        flex: 1;
      }
    }

    & label {
      font-weight: 500;
      margin-bottom: 0;
    }

    & *:not(label) {
      color: var(--custom-text-color-muted);
    }
  }

  & dl dd {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;

    & input {
      margin: 0;
    }

    &.sold-out {
      background: var(--custom-text-background-color-hover);

      & span {
        align-items: center;
        color: var(--custom-text-color-muted);
        display: flex;
        font-size: 0.875rem;
        justify-content: center;
        margin: 0 -2rem;
        padding: 0.5rem;
        width: 8rem;
        z-index: 1;
      }

      & button {
        background-color: inherit;
        cursor: default;
      }
    }
  }

  & dl dd button {
    background: #eee;
    border: none;
    border-radius: 100%;
    cursor: pointer;
    color: #333;
    display: inline-flex;
    font-size: 10px;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;

    &:hover, &:active, &:focus {
      background: #333;
      color: white;
    }
  }

  & input[type="text"] {
    width: 4rem;
    text-align: center;
  }

  & .price-breakdown {
    align-items: baseline;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;

    & > div {
      color: var(--custom-text-color);
    }

    & s {
      text-decoration-line: line-through;
      text-decoration-color: var(--danger-color);
      text-decoration-thickness: 2px;
    }

    & .price-breakdown-tax {
      display: none;
      font-size: 0.875rem;
      color: var(--custom-text-color-muted);
    }
  }

  & footer {
    background-color: var(--custom-text-background-color);
    border-top: 1px solid var(--custom-border-color);
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    gap: 1rem;
    padding: 1rem;

    &.all-sold-out {
      border-top: none;
      padding: 0;
    }

    @media (width >= 600px) {
      position: relative;
      padding: 1rem 2rem;
      margin-top: 0rem;
    }

    &.expanded {
      margin-top: 3rem;
    }
  }

  & tr {
    display: flex;
    gap: 1rem;
  }

  & td {
    padding: 0;
    display: inline-flex;
    align-items: center;
  }

  & td.quantity {
    align-items: start;
  }

  & td.description {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: start;

    &.total {
      align-items: end;

      & em {
        font-size: 0.825rem;
        color: var(--custom-text-color-muted);
      }
    }

    & span {
      color: var(--custom-text-color-muted);
      font-size: 0.875rem;
      font-style: italic;
    }
  }

  & td.amount {
    display: flex;
    justify-content: end;
    min-width: 100px;
  }

  & table.summary-total {
    border-top: 3px double var(--custom-button-background-color, #09090b);
    font-weight: 500;
    padding-top: 0.5rem;

    & .description {
      align-items: flex-end;
    }
  }

  & table tr + tr {
    margin-top: 0.5rem;
  }

  & a.collapse-summary,
  & a.collapse-summary:visited {
    position: absolute;
    left: 0;
    right: 0;
    top: -20px;
    width: 150px;
    border-radius: 0.5rem 0.5rem 0 0 !important;
    height: 20px;
    margin: auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    border: 1px solid #000;
    border-bottom: 1px solid #000;
  }

  & a.expand-summary {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;

    & .title {
      flex: 1;
    }
  }

  & .quantity {
    max-width: 40px;
  }

  & ul.error-list {
    margin-bottom: 1rem;
  }

  & .text-muted {
    color: var(--custom-text-color-muted);
  }
}

.promotion-codes {
  border-top: 1px solid var(--custom-border-color);
  margin: 0 2rem 1rem;
  padding-top: 1rem;

  & > div {
    display: flex;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    padding: 0;

    & label {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      border: 0;
    }

    & input[type="text"] {
      flex: 1;
      margin: 0;
      text-align: left;
    }

    & button {
      border-radius: 8rem;
      flex: 0;
      font-size: var(--fonts--fluid-label);
      font-weight: 400;
      letter-spacing: .02em;
      line-height: 1;
      padding: 0 1rem;
      text-transform: uppercase;

      &[disabled] {
        background-color: var(--custom-text-background-color-hover);
        color: #bbb;
        cursor: default;
      }
    }
  }

  & ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style-type: none;
    padding: 0;

    & li {
      align-items: stretch;
      background-color: #333;
      border-radius: 1rem;
      color: white;
      display: inline-flex;
      font-size: 0.75rem;
      padding: 0 0 0 0.25rem;

      &.not_found {
        background-color: var(--danger-color);
      }

      &.expired {
        background-color: var(--custom-text-color-muted);
      }

      & span {
        padding: 0.25rem;
        word-break: break-all;
      }

      & button {
        background-color: transparent;
        border-radius: 0 1rem 1rem 0;
        display: block;
        padding: 0;
        width: 1.5rem;
      }
    }
  }
}


.btn {
  border: none;
  background-color: var(--custom-button-background-color, #09090b);
  border-radius: 0.25rem;
  color: var(--custom-button-text-color, #fff);
  padding: 0.5rem 1rem;
  text-decoration: none;
  cursor: pointer;
  font-weight: 500;
  text-align: center;

  &:hover {
    background-color: var(--custom-button-background-color-hover, #3f3f46);
  }

  &[disabled] {
    background-color: var(--custom-button-background-color-hover, #3f3f46);
  }
}

.btn.btn-link {
  background-color: inherit;
  color: var(--custom-text-background-color-contrast);

  &:hover {
    background-color: var(--custom-text-background-color-hover);
  }
}

table {
  width: 100%;

  & thead tr th {
    border-bottom: 1px solid var(--text-color--text-primary);
    color: black;
  }

  & th,
  & td {
    padding: 0.5rem;
  }

  & th,
  & td {
    text-align: left;
  }
  
  & tbody td,
  & tfoot td,
  & tfoot th {
    <!--border-top: 1px solid #eee;-->
  }

  & .amount {
    text-align: right;
    
    & b {
      color: black;
    }
  }

  & .number {
    text-align: center;
  }

  & .description {
    text-wrap: balance;
  }

  & s {
    text-decoration-line: line-through;
    text-decoration-color: var(--danger-color);
    text-decoration-thickness: 2px;
  }
}

.io-payment-screen {
  padding: 1rem 1rem 0;

  & .payment-element {
    margin-top: 1rem;
    margin-bottom: 2rem;
  }
}

.ticket-wrapper .button-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;

  & .btn {
    width: 100%;
  }
}

.text-center {
  text-align: center;
}

.order-confirmation {
  align-items: center;
  background: #fff;
  border-radius: 12px;
  color: #000;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
  padding: 4rem 2rem;

  & h1 {
    color: #000;
    font-size: 24px;
    font-weight: bold;
  }

  & .callout {
    background-color: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 0.75rem;
    font-size: 24px;
    max-width: 500px;
    padding: 2rem;
    text-align: center;
    width: 100%;

    & p {
      margin: 0;
    }
  }

  & p {
    color: #000;
  }

  & .prose {
    margin-top: 1rem;
    max-width: 500px;

    & ul {
      margin-bottom: 1rem;
    }
  }

  & .button {
    justify-content: center;
    margin-top: 2rem;
    max-width: 275px;
    width: 100%;
  }
}

.io-terms {
  & p {
    color: var(--custom-text-color-muted);
    font-size: 0.875rem;
  }
}

.express-checkout-container {
  margin: 0 auto;
  text-align: center;
  width: 90%;

  & p {
      font-size: 0.875rem;
      margin-bottom: 0.5rem;
    }
}

& .express-checkout-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 1.5rem 0;

  &::before,
  &::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--custom-border-color);
  }

  & span {
    padding: 0 1rem;
    font-size: 0.875rem;
  }
}

.io-processing-screen {
  padding: 4rem 2rem;
  text-align: center;

  & .btn.btn-primary {
    min-height: var(--primitives--52px);
    font-size: var(--fonts--fluid-label);
    letter-spacing: .02em;
    text-transform: uppercase;
    border-radius: 8rem;
    padding: 1.25em 1.5em;
    font-weight: 400;
    line-height: 1;
  }
}

.nav_container {
  padding: var(--primitives--8px) 10px var(--primitives--8px) var(--primitives--40px);
  
  & .nav_menu_utility {
    grid-column-gap: 12px;
  }
  
  & .nav_menu_button {
    align-items: center;
    background: #000;
    border-radius: 8rem;
    color: #fff;
    display: flex;
    font-family: Söhne Buch, Arial, sans-serif;
    font-size: var(--fonts--p-small);
    font-weight: 400;
    height: 52px;
    justify-content: center;
    letter-spacing: .02em;
    line-height: 1;
    padding: 1.25em 1.5em;
    text-decoration: none;
    text-transform: uppercase;
    
    &:hover,
    &:active,
    &:focus {
      background-color: var(--base-color-neutral--neutral-dark);
    }
  }
}

.footer-content {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.terms-and-conditions {
  margin-bottom: 5rem;
  
  & h3 {
    color: #000;
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  
  & ul {
    margin-bottom: 1rem;
  }
  
  & p, & li {
    color: #000;
  }
}

.email-spell-checker {
  align-items: center;
  background-color: #fefce8;
  border: 1px solid #fdc800;
  border-radius: 0.25rem;
  display: flex;
  color: #a76000;
  font-size: 0.875rem;
  padding: 0.25rem;

  & span {
    flex: 1;
    text-align: center;
  }

  & button {
    background-color: #fdc800;
    border-radius: 1rem;
    color: #000;

    &:hover,
    &:focus,
    &:active {
      background-color: #ffd533;
    }

    & + button {
      margin-left: 0.25rem;
    }
  }
}

.yste-sponsor {
  padding: 4rem 2rem;
  text-align: center;

  & input {
    text-align: center;
  }

  & .btn.btn-primary {
    min-height: var(--primitives--52px);
    font-size: var(--fonts--fluid-label);
    letter-spacing: .02em;
    margin-top: 1rem;
    text-transform: uppercase;
    border-radius: 8rem;
    padding: 1.25em 1.5em;
    font-weight: 400;
    line-height: 1;
  }
}

.field ul.error-list {
  color: #dc2627;
  list-style: none;
  padding: 0 0 0 calc(13px + 0.5rem);
}

fieldset ul.error-list {
  color: #dc2627;
  list-style: none;
  padding: 0;
}

.io-order-confirmation {
  & h2 {
    font-size: 24px;
    font-weight: bold;
  }

  & .headline {
    border: 1px solid var(--custom-text-background-color-hover);
    border-radius: 0.25rem;
    text-align: center;
    margin-bottom: 1rem;

    & .main {
      font-size: 1.25rem;
      padding: 1rem 1rem 0;
    }

    & .sub {
      padding: 0 1rem; 
    }

    & div {
      border-top: 1px solid var(--custom-text-background-color-hover);
      margin-top: 1rem;

      & a {
        display: block;
        font-size: 0.875rem;
        padding: 0.5rem 1rem;

        &:hover,
        &:active,
        &:focus {
          color: var(--custom-link-color, black);
        }
      }
    }
  }

  & .order-invoice-details {
    border: 1px solid var(--custom-text-background-color-hover);
    border-radius: 0.25rem;
    display: flex;
    max-width: 500px;
    text-align: center;
    width: 100%;

    & div {
      display: flex;
      flex: 1;
      flex-direction: column-reverse;
      padding: 0.5rem;

      & + div {
        border-left: 1px solid var(--custom-text-background-color-hover);
      }

      & dd {
        font-size: 1.25rem;
        margin: 0;
      }
    }
  }

  & summary + .order-invoice-bank-info {
    margin-top: 1rem;
  }

  & .order-invoice-bank-info {
    border: 1px solid #e1e1e1;
    border-radius: 0.25rem;
    background: #efefef;
    color: #7e7e7e;
    column-gap: 1rem;
    display: grid;
    grid-template-columns: 1fr;
    max-width: 500px;
    padding: 0.5rem 1rem;
    width: 100%;

    @media only screen and (width >= 600px) {
      grid-template-columns: 1fr auto;
    }

    & dt {
      white-space: nowrap;
    }

    & dt,
    & dd {
      font-size: 0.875rem;
      margin: 0;
    }

    & dd {
      color: #333;
      margin-bottom: 0.5rem;

      @media only screen and (width >= 600px) {
        margin-bottom: 0;
      }
    }
  }

  & h3 {
    font-weight: normal;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
  }
}

.ticket-global-wrapper.yste-sponsor {
  & ul.error-list {
    list-style: none;
    margin-top: 1rem;
  }
}

.ticket-title-quantity button[type="button"] {
  touch-action: manipulation;
}

.ticket-global-wrapper.yste-invite-flow {
  & .prose {
    margin: 2rem auto;
    width: 90%;
  }
  
  & footer.button-group {
    & > a {
      margin: 0 auto;
      width: 90%;
    }
  }

  & article {
    & > * {
      padding: 0 1rem;

      @media only screen and (width >= 600px) {
        padding: 0 2rem;
      }
    }

    & > :first-child {
      margin-top: 1rem;

      @media only screen and (width >= 600px) {
        margin-top: 2rem;
      }
    }

    & > :last-child {
      margin-bottom: 1rem;

      @media only screen and (width >= 600px) {
        margin-bottom: 2rem;
      }
    }

    & > * + * {
      margin-top: 2rem;
    }

    & h1 {
      font-family: "Iowan Old Style", "Palatino Linotype", "URW Palladio L",
        "P052", serif;
      font-weight: 300;
      font-size: 2.25rem;
    }

    h2 {
      font-size: 1.25rem;
    }

    & dl {
      flex: 1;
    }

    & dt {
      color: var(--custom-text-color-muted);
      font-size: 0.875rem;

      & label {
        color: var(--custom-text-color);
      }
    }

    & .icon {
      color: var(--custom-text-color-muted);
      width: 24px;
    }

    & .prose > * + * {
      margin-top: 1rem;
    }

    & .io-attending-button,
    & .io-not-attending-button {
      width: 100%;
      text-align: center;
      display: block;
    }

    & a:not(.btn) {
      text-decoration: none;
      color: var(--custom-link-color, black);
      padding: 0.25rem;
      border-radius: 0.25rem;

      &:visited {
        color: var(--custom-link-color, black);
      }

      &:hover {
        color: var(--custom-link-color-hover, black);
      }
    }

    & .invitation--finished {
      @media only screen and (width >= 600px) {
        display: flex;
      }

      & dd {
        margin: 0 0 0.5rem;
      }
    }

    & .invitation--qr img {
      border: 1px solid var(--custom-border-color);
      border-radius: 4px;
      margin-bottom: 1rem;
      max-width: 150px;
    }

    & .invitation--wallet-button-wrapper {
      display: flex;
      gap: 1rem;
      margin-bottom: 2rem;
    }

    & .tito-digital-pass-button img {
      height: 35px;
    }

    & section form {
      padding: 0;
    }
  }
}

.test-mode-banner {
  align-items: center;
  background: #dc2725;
  color: #fff;
  padding: 0.2rem 0.5rem;
  display: flex;
  font-size: 10px;
  font-weight: bold;
  gap: 0.5rem;
  justify-content: center;
  letter-spacing: 0.1rem;
  text-transform: uppercase;

  & .test-mode-banner-message {
    flex: 1;
    text-align: center;

    @media only screen and (width >= 768px) {
      margin-left: 120px;
    }
  }

  & .btn {
    background-color: transparent;
    border-color: transparent;
    color: white;

    &:hover, &:focus, &:active {
      background-color: transparent;
      border-color: white;
    }
  }
}

.io-wrapper--public:has(.invoice-detail-page) {
  max-width: 1440px;
}

.invoice-detail-page {
  background: #fff;
  border-radius: 12px;
  color: #000;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  overflow: hidden;
  padding: 4rem 2rem;
  width: 100%;

  @media only screen and (width >= 900px) {
    grid-template-columns: 1fr 2fr;
  }
  
  & h1 {
    color: #000;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 1.5rem;
  }

  & h2 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
  }

  & section {
    margin-bottom: 1.5rem;
  }
  
  & > section {
    & .invoice-summary {
      background: var(--custom-text-background-color, #fff);
      border: 1px solid var(--custom-text-background-color-hover, #e1e1e1);
      border-radius: 0.25rem;
      padding: 1rem;
    }
  
    & .invoice-details {
      display: grid;
      gap: 0.25rem 1rem;
      grid-template-columns: auto 1fr;
  
      & dt {
        color: #666;
        font-size: 0.875rem;
      }
  
      & dd {
        font-size: 0.875rem;
        font-weight: 500;
        text-align: right;
      }
    }
  
    & .invoice-download-link {
      display: block;
      margin-top: 1rem;
      text-align: center;
    }
  
    & .invoice-payment-form {
      background: var(--custom-text-background-color, #fff);
      border: 1px solid var(--custom-text-background-color-hover, #e1e1e1);
      border-radius: 0.25rem;
      padding: 1rem;
  
      & .payment-element {
        min-height: 200px;
      }
  
      & .button-group {
        margin-top: 1rem;
      }
  
      & .btn[disabled] {
        cursor: default;
        opacity: 0.4;
      }
    }
  
    & .invoice-bank-transfer {
      background: #f9f9f9;
      border: 1px solid #e1e1e1;
      border-radius: 0.25rem;
      padding: 1rem;
  
      & p {
        color: #666;
        font-size: 0.875rem;
        margin-bottom: 1rem;
      }
  
      & .bank-transfer-details {
        background: #fff;
        border: 1px solid #e1e1e1;
        border-radius: 0.25rem;
        display: grid;
        gap: 0.25rem 1rem;
        grid-template-columns: auto 1fr;
        padding: 0.75rem 1rem;
  
        & dt {
          color: #666;
          font-size: 0.875rem;
        }
  
        & dd {
          font-size: 0.875rem;
          font-weight: 500;
          text-align: right;
        }
      }
  
      & .bank-transfer-addresses {
        background: #fff;
        border: 1px solid #e1e1e1;
        border-radius: 0.25rem;
        display: grid;
        gap: 0.25rem 1rem;
        grid-template-columns: 1fr;
        margin-top: 0;
        padding: 0.75rem 1rem;
  
        & dt {
          color: #666;
          font-size: 0.75rem;
          margin-top: 0.5rem;
  
          &:first-child {
            margin-top: 0;
          }
        }
  
        & dd {
          font-size: 0.75rem;
          margin: 0;
        }
      }
  
      & details {
        margin-top: 1rem;
  
        & summary {
          color: #666;
          cursor: pointer;
          display: list-item;
          list-style: inside disclosure-closed;
          font-size: 0.75rem;
        }
      }
      
      & details[open] {
        & summary {
          list-style: inside disclosure-open;
        }
      }
  
      & .bank-transfer-note {
        color: #999;
        font-size: 0.75rem;
        font-style: italic;
        margin-top: 1rem;
        margin-bottom: 0;
      }
    }
  
    & .invoice-paid {
      background: #d4edda;
      border: 1px solid #c3e6cb;
      border-radius: 0.25rem;
      color: #155724;
      padding: 1rem;
      text-align: center;
  
      & p {
        margin: 0;
      }
    }
  }
  
  & > aside {
    display: none;
  
    @media only screen and (width >= 900px) {
      display: block;
    }
  
    & .invoice-preview-frame {
      background: #fff;
      border: 1px solid #e1e1e1;
      border-radius: 0.25rem;
      height: 100%;
      min-height: 600px;
      width: 100%;
    }
  }
}

.invoice-receipt-links {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  
  @media only screen and (width >= 510px) {
    flex-direction: row;
    gap: 1rem;
  }
  
  & .button {
    white-space: nowrap;
  }
}