.test-mode-banner {
  font-size: 12px;
  padding: 0;
  position: fixed;
  left: 0;
  right: 0;
}

@font-face {
  font-family: "Heineken Serif 18";
  src: 
    url("https://d2wxw6ajr7vm3r.cloudfront.net/f0c2044e4b384da2cf9b06c43bf4aa30.ttf") format("TrueType"),
    url("https://d2wxw6ajr7vm3r.cloudfront.net/6054cc24633ae6b256444df043879cea.ttf") format("TrueType");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "ABC Favorit Mono";
  src: 
    url("https://d2wxw6ajr7vm3r.cloudfront.net/919a61920641e994ad03f85a6421c985.otf") format("OpenType"),
    url("https://d2wxw6ajr7vm3r.cloudfront.net/9d85edca3235434f517647e32cc8a041.otf") format("OpenType");
  font-weight: 400 600;
  font-display: swap;
}

html {
  background: #003309;
  background: linear-gradient(90deg,rgba(0, 51, 9, 1) 0%, rgba(0, 113, 24, 1) 100%);
}

body {
  background: transparent;
  background-image: none;
  font-family: "Heineken Serif 18", Cambria, serif !important;
}

.main-content article h1,
.main-content article .h1 {
  color: #fff;
  font-family: "Heineken Serif 18", Cambria, serif !important;
  font-size: 2.5rem;
  margin-bottom: 2rem;
  text-transform: uppercase;
}

.main-content article h2 {
  color: #fff;
  font-family: "Heineken Serif 18", Cambria, serif !important;
  font-size: 1.5rem;
  text-transform: uppercase;
}

.flex-container {
  height: auto;
  margin: 0 auto;
  max-width: 1232px;
  min-height: 100dvh;
  padding: 0 1rem;
}

header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  
  & nav ul {
    align-items: center;
    display: flex;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    
    & a {
      color: #fff;
      font-size: 1.125rem;
      text-decoration: none;
      text-transform: uppercase;
    }
  }
}

main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 0 7.5rem;
  width: 100%;
  
  @media only screen and (width >= 768px) {
    align-items: flex-start;
    flex-direction: row;
  }
  
  @media only screen and (width >= 1232px) {
    padding: 1.25rem 3.75rem 7.5rem;
  }
}

nav a, label {
  font-family: "ABC Favorit Mono";
}

label {
  text-transform: uppercase;
}

.main-content {
  border-radius: 3rem;
  box-shadow: none;
  flex: 1;
  max-width: none;
  min-width: 50%;
}

.btn {
  border-radius: 3rem;
  font-family: "ABC Favorit Mono";
  font-size: 1.125rem;
  padding: 0.875rem 2.875rem;
  text-transform: uppercase;
}

.btn.btn-greenlight,
.btn.btn-primary[type=submit] {
  background: #64fa2d;
  border: 1px solid #64fa2d;
  border-radius: 3rem;
  color: #017118;
  font-family: "ABC Favorit Mono";
  font-size: 1.125rem;
  padding: 0.875rem 2.875rem;
  text-transform: uppercase;
  white-space: nowrap;
  
  &:hover,
  &:active,
  &:focus {
    background: #017118;
    color: #fff;
  }
}

footer.page-footer {
  background: #fff;
  color: #017118;
  
  & > div {
    margin: 0 auto;
    max-width: 1200px;
    padding: 3rem 1rem;
    position: relative;
  }
  
  & nav ul {
    align-items: center;
    display: flex;
    font-family: "ABC Favorit Mono";
    gap: 0.75rem;
    line-height: 1.5rem;
    list-style: none;
    margin: 2.5rem 0;
    padding: 0;
    
    & a {
      color: #017118;
      font-size: 1.125rem;
      text-decoration: underline;
    }
  }
  
  & div div {
    align-items: center;
    display: flex;
  }
  
  & .social-icons {
    margin-left: auto;
    & a {
      padding: 0.75rem;
    }
  }
  
  & .enjoy-responsibly {
    position: absolute;
    top: -116px;
    right: 0;
  }
}

.where-and-when {
  display: none;
}

form.order-form {
  & .name-and-email-fields {
    border-color: #62fa2b;
  }
  
  & select {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #017118;
  }
  
  & footer {
    border-color: #62fa2b;
  }
}


form.checkout-form,
.order-confirmation form,
form.order-form,
.invitation-landing form {
  & input[type="text"], 
  & input[type="email"], 
  & input[type="number"], 
  & textarea {
    background-color: #fff;
    border: solid 1px #babbbf;
    border-bottom: solid 4px #babbbf;
    border-radius: 1rem;
    color: #017118;
    padding: 0.5rem 1rem;
  }
  
  & .field.checkbox.checkbox-inline {
    display: none;
  }
  
  & .btn.btn-primary[type=submit] {
    @media only screen and (width >= 600px) {
      max-width: 350px;
    }
  }

  & .field div.checkbox {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
  }

  & .field p a {
    color: #64fa2d;

    &:hover,
    &:active,
    &:focus {
      color: #64fa2d;
      text-decoration: underline;
    }
  }
}

button.btn.btn-link[type=submit],
footer.button-group a.btn.btn-link {
  @media only screen and (width >= 600px) {
    max-width: 350px;
  }
}

form.checkout-form {
  & footer.button-group {
    margin-bottom: 1rem;
  }
}

.main-content {
  & article {
    &  a.collapse-summary,
    &  a.collapse-summary:visited {
      border-left-color: #62fa2b;
      border-right-color: #62fa2b;
      border-top-color: #62fa2b;
      color: #fff;
    }

    & table {
      & th,
      & td {
        color: #ffffff;
      }
    }
  }
}

a.expand-summary, a.expand-summary:visited { color: white !important; }


.main-content:has(.order-confirmation) {
  background-color: transparent;
  
  & .where-and-when-headline {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    
    @media only screen and (width >= 1000px) {
      flex-direction: row;
    }
  }
  
  & .where-and-when,
  & .headline,
  & .qr-wallet {
    border-radius: 3rem;
    padding: 2.5rem;
  }
  
  & .where-and-when {
    background-color: #007118;
    display: block;
    
    & .icon {
      width: auto;
    }
    
    & dl {
      align-items: flex-start;
      display: flex;
      gap: 0.75rem;
      
      & + dl {
        margin-top: 1.25rem;
      }
    }
    
    & dd {
      font-size: 1.5rem;
      text-transform: uppercase;
      
      @media only screen and (width >= 700px) {
        white-space: nowrap;
      }
      
      & a {
        font-size: 1.125rem;
        text-transform: none;
      }
    }
  }
  
  & .headline {
    background-color: #003309;
    border: none;
    margin: 0;
    text-align: left;
    
    & h2 {
      margin-bottom: 1.5rem;
    }
    
    & div {
      border: none;
      margin: 0;
      display: block;
    }
    
    & .main {
      font-size: 1rem;
      line-height: 1.625rem;
      margin-bottom: 1.5rem;
      padding: 0;
    }
    
    & dl {
      display: flex;
      gap: 1.5rem;
      
      & div {
        flex: 1;
      }
      
      & + dl {
        margin-top: 0.25rem;
      }
    }
    
    & dt {
      color: #64fa2d;
      font-family: "ABC Favorit Mono";
      font-size: 0.875rem;
      letter-spacing: 6%;
      line-height: 1.25rem;
      margin-bottom: 0.25rem;
      text-transform: uppercase;
    }
    
    & dd {
      font-size: 1.125rem;
      font-weight: 500;
      line-height: 1.75rem;
    }
    
    & div a,
    & div a:hover,
    & div a:active,
    & div a:focus,
    & div a:visited {
      color: #64fa2d;
    }
  }
  
  & .qr-wallet {
    align-items: center;
    background-color: #64fa2d;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    
    @media only screen and (width >= 700px) {
      flex-direction: row;
    }
    
    & > div {
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }
    
    & .wallet-buttons {
      display: flex;
      gap: 0.75rem;
      
      & img {
        height: 56px;
      }
    }
    
    & .order-links {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      
      @media only screen and (width >= 850px) {
        flex-direction: row;
      }
      
      & a {
        align-items: center;
        color: #007118;
        display: flex;
        font-size: 1.125rem;
        gap: 0.5rem;
        line-height: 1.75rem;
        
        &:hover,
        &:active,
        &:focus {
          color: #0c5a0e;
        }
      }
    }
  }
}

.main-content:has(.invitation-landing) {
  background-color: transparent;
  
  & .where-and-when-headline {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    
    @media only screen and (width >= 1000px) {
      flex-direction: row;
    }
  }
  
  & .headline-banner {
    background: transparent url("https://d31tp9wis4lva3.cloudfront.net/zmDMV87nqpqms2Fl5y8XBG3faeFUwo1spmiIf26BuFA/rs:fit:1200:1200/aHR0cHM6Ly90aXRv/Mi1wcm9kdWN0aW9u/LnMzLmV1LXdlc3Qt/MS5hbWF6b25hd3Mu/Y29tL2ZiNDY3MjRk/ODUxMDM0NzQxNWY3/NmE5NWRmNDZmMDVi/LmpwZw.jpg") no-repeat center center scroll;
    background-size: cover;
    border-radius: 3rem;
    display: none;
    flex: 3;
    overflow: hidden;
    width: 100%;
    
    @media only screen and (width >= 1000px) {
      display: block;
    }
  }
  
  & .where-and-when {
    background-color: #007118;
    border-radius: 3rem;
    display: block;
    flex: 4;
    padding: 2.5rem;
    
    & .icon {
      width: auto;
    }
    
    & dl {
      align-items: flex-start;
      display: flex;
      gap: 0.75rem;
      
      & + dl {
        margin-top: 1.25rem;
      }
    }
    
    & dd {
      font-size: 1.5rem;
      text-transform: uppercase;
      
      @media only screen and (width >= 700px) {
        white-space: nowrap;
      }
      
      & a {
        font-size: 1.125rem;
        text-transform: none;
      }
    }
  }
  
  & .invitation-content {
    background-color: #003309;
    border-radius: 3rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 2.5rem;
  }
}


/* Widget styles */

main:has(.greenlight-widget) {
  & #close {
    background: #fff;
    border-radius: 99rem;
    color: var(--custom-text-background-color);
    left: 1rem;
    right: unset;
    top: 1.5rem;
    
    & svg {
      width: 14px;
    }
  }

  & .main-content {
    background-color: transparent;
  }
  
  & .greenlight-widget-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    
    @media only screen and (width >= 768px) {
      flex-direction: row;
    }
  }
  
  & .greenlight-enter-details {
    background-color: #64fa2d;
    border-radius: 3rem;
    color: #007118;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 9rem 2.5rem;
    position: relative;
    
    @media only screen and (width >= 768px) {
      max-width: 386px;
    }
  }
  
  & .greenlight-widget {
    background-color: #013309;
    border-radius: 3rem;
    flex: 1;
    padding: 2.5rem;
    
    & fieldset {
      margin: 0;
      
      & label,
      & input {
        font-size: 0.875rem;
        line-height: 1.25rem;
        letter-spacing: 6%;
      }
      
      & label.is-required::after {
        display: none;
      }
      
      & input[type="text"], 
      & input[type="email"], 
      & input[type="number"], 
      & textarea {
        background-color: #fff;
        border: solid 1px #babbbf;
        border-bottom: solid 4px #babbbf;
        border-radius: 1rem;
        color: #017118;
        font-family: "ABC Favorit Mono", sans-serif;
        padding: 0.5rem 1rem;
      }
    }
    
    & .btn.btn-primary[type=submit] {
      align-items: center;
      background-color: #017118;
      border-color: #017118;
      color: #fff;
      display: flex;
      font-size: 1rem;
      gap: 0.5rem;
      line-height: 1.5rem;
      margin-top: 2rem;
      min-width: 0;
      padding: 0.75rem 1.5rem;
      white-space: normal;
      width: auto;
      
      &.with-icon {
        padding: 0.75rem 1rem 0.75rem 1.5rem;
      }
      
      &:hover {
        background-color: #63f82c;
        border-color: #63f82c;
        color: #007118;
      }
    }
  }
}

h2.greenlight-complimentary {
  & span {
    display: block;
    font-size: 0.75rem;
    margin-top: 0.5rem;
    font-weight: normal;
  }
}

.desktop-only {
  display: none !important;

  @media (width >= 768px) {
    display: inline !important;
  }
}

.events-list {
  width: 100%;
  li {
    width: 100%;
    border-radius: 48px;
  }
}

.promotion-codes {
  & ul:not(.error-list)
  {
    & li {
      & button {
        color: white; 
      }
    }
  }
}