/* RESET CSS */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
list-style: none;
text-decoration: none;
box-sizing: border-box;
}

a {
color: inherit;
}

@font-face {
font-family: "Lateral";
src: url("https://d2wxw6ajr7vm3r.cloudfront.net/d0097fd6c4e05d1743d3ec912393dcad.woff2") format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "CommitMono";
src: url("https://d2wxw6ajr7vm3r.cloudfront.net/3d18f733ca5f630c1a489e7ad704cf8f.woff2") format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}

body {
background-color: black;
color: white;
font-family: 'Inter', sans-serif;
font-size: 14px;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
 touch-action: pan-x pan-y;
}

.main-content h2 {
font-family: 'Inter', sans-serif;
font-size: 14px;
opacity: 0.6;
}

.main {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}

.btn-primary {
background-color: white;
color: black;
border-radius: 12px;
font-size: 14px;
font-family: 'Inter', sans-serif !important;
text-transform: none;
font-weight: 600;
padding: 12;
border: none;
cursor: pointer;
display: flex;
align-items: center;
flex-grow: 1;
width: 100%;
justify-content: center;
transition: 0.2s ease;
height: 48px;
}

.btn-primary:hover {
background-color: #F0F0F0;
transition: 0.2s ease;
}

.btn-link {
background-color: black;
color: #A1A4A5;
border-radius: 12px;
font-size: 14px;
font-family: 'Inter', sans-serif;
text-transform: none;
font-weight: 600;
padding: 12;
border: none;
cursor: pointer;
display: flex;
align-items: center;
flex-grow: 1;
justify-content: center;
width: 100%;
transition: 0.2s ease;
}


.btn-link:hover {
background-color: #1A1D1F;
transition: 0.2s ease;

}

.btn-secondary {
background-color: black;
color: #A1A4A5;
border-radius: 12px;
font-size: 14px;
font-family: 'Inter', sans-serif;
text-transform: none;
font-weight: 600;
padding: 12;
border: none;
cursor: pointer;
display: flex;
align-items: center;
flex-grow: 1;
justify-content: center;
width: 100%;
transition: 0.2s ease;
}

.btn-secondary:hover {
background-color: #1A1D1F;
transition: 0.2s ease;

}


.container {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
padding: 100 32 100 32;
max-width: 1300px;
}

.main-content {
border-top: 1px solid #191B1E;
display: flex;
flex-direction: column;
padding-top: 20px;
}

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

.ticket-title-quantity dd {
display: flex;
align-items: center;
border: 1px solid #191B1E;
border-radius: 12px;
overflow: hidden;
}

.ticket-title-quantity label {
font-family: 'CommitMono';
text-transform: uppercase;
font-size: 13px;
line-height: 16px;
}

.price-breakdown {
color: #A1A4A5;
font-family: 'CommitMono';
text-transform: uppercase;
font-size: 13px;
line-height: 16px;
}

.ticket-wrapper {
display: flex;
flex-direction: column;
}

input {
background: #151619;
border-radius: 12px;
border: 1px solid #191B1E;
height: 40px;
color: white !important;
padding: 0 12 0 12;
font-size: 14px;
}

input:placeholder {
color: #191B1E;
}

input:focus {
outline: none;
}

input[name="q-default"] {
color: white;
width: 60px;
text-align: center;
border-radius: 0;
border: none;
}

select {
background: #151619;
border-radius: 12px;
border: 1px solid #191B1E;
height: 40px;
color: white !important;
padding: 0 12 0 12;
font-size: 14px;
cursor: pointer;
}

textarea {
background: #151619;
border-radius: 12px;
border: 1px solid #191B1E;
color: white !important;
padding: 12;
font-size: 14px;
font-family: 'Inter', sans-serif;
field-sizing: content;
resize: none;
}

textarea:focus {
outline: none;
}


.title {
font-family: 'Lateral', sans-serif;
font-size: 120px;
text-transform: uppercase;
line-height: 80%;
}

.order-form {
display: flex;
flex-direction: column;
gap: 40px;
}

button[data-action="quantity#decrement"] {
background-color: #151619;
color: #191B1E;
width: 40px;
height: 40px;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: 0.2s ease;
}

button[data-action="quantity#increment"] {
background-color: #151619;
color: #A1A4A5;
width: 40px;
height: 40px;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: 0.2s ease;
}

button[data-action="quantity#decrement"]:hover {
background-color: #1A1D1F;
transition: 0.2s ease;
}

button[data-action="quantity#increment"]:hover {
background-color: #1A1D1F;
transition: 0.2s ease;
}


.fa-solid {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 2px;
background-color: #A1A4A5;
border-radius: 2px;
}

.fa-plus {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 2px;
height: 10px;
background-color: #A1A4A5;
border-radius: 2px;
}

.fa-plus:after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 2px;
background-color: #A1A4A5;
border-radius: 2px;
}

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

.description {

pointer-events: none;
}

footer {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
font-family: 'CommitMono';
text-transform: uppercase;
font-size: 13px;
}

footer table {
font-family: "CommitMono", sans-serif;
font-size: 13px;
text-transform: uppercase;
display: flex;
flex-direction: row;
align-items: center;
flex-grow: 1;
color: #A1A4A5;
}


footer table tr {
display: flex;
flex-direction: row;
align-items: center;
flex-grow: 1;
color: #A1A4A5;
gap: 4px;
}

.field {
display: flex;
flex-direction: column;
gap: 8px;
}

fieldset {
display: flex;
flex-direction: column;
gap: 20px;
}

.fields {
display: flex;
flex-direction: column;
gap: 20px;
}

.field label {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: #A1A4A5;
}

.is-required:after {
content: '*';
color: #FF8A88;
padding-left: 4px;
}

.collapsed.is-required:after {
content: '*';
color: transparent;
}

.checkbox-inline {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 20px;
}

.checkout-form {
display: flex;
flex-direction: column;
gap: 20px;
}

.button-group {
display: flex;
flex-direction: column;
gap: 8px;
}

form[action="/checkout"] {
display: flex;
}

.business-customer-fields {
display: none;
}

.field.checkbox:has(#checkout_form_business_customer:checked)+.business-customer-fields {
display: flex;
flex-direction: column;
gap: 20px;
}

input[type="checkbox"] {
border-radius: 12px;
border: none;
width: 16px;
height: 16px;
cursor: pointer;
}

#cart-summary {
width: 100%;
font-family: 'CommitMono', sans-serif;
font-size: 13px;
text-transform: uppercase;
line-height: 20px;
}

#cart-summary table {
width: 100%;
}

#cart-summary th {
text-align: left;
}

#cart-summary thead {
opacity: 0.6;
}

#cart-summary .amount {
text-align: right;
}

.payment-method {
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
padding: 16 0 16 0;
border-top: 1px solid #191B1E;
}

.payment-method .icon {
width: 24px;
}

.payment-method:first-child .icon path {
fill: white;
}

.payment-method .text {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 14px;
}

.button-group button {
width: 100%;
}

.button-group form {
width: 100%;
}


.button-group {
margin-top: 40px;
}

.checkout-form h2 {
font-family: 'CommitMono', sans-serif;
font-size: 13px;
text-transform: uppercase;
}

.main-content p {
font-family: 'Inter', sans-serif;
font-size: 14px;
opacity: 0.6;
}



.fa-spinner {
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
position: relative;
animation: rotate 1s linear infinite
}

.fa-spinner::before {
content: "";
box-sizing: border-box;
position: absolute;
inset: 0px;
border-radius: 50%;
border: 2px solid #FFF;
animation: prixClipFix 2s linear infinite;
}

@keyframes rotate {
100% {
transform: rotate(360deg)
}
}

@keyframes prixClipFix {
0% {
clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
}

25% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
}

50% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
}

75% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)
}

100% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)
}
}

.processing .fa-solid {
background-color: transparent;
top: auto;
left: auto;
transform: none;
}

.processing {
font-family: 'Inter', sans-serif;
font-size: 14px;
display: flex;
align-items: center;
gap: 20px;
color: #999;
}

.fa-chevron-down {
display: none;
}

.error-list {
font-family: 'Inter', sans-serif;
color: #FE4E54E4;
font-size: 12px;
}

.rsvp-custom-fields--guest-info {
margin-top: 20px;
}

.rsvp-custom-fields--guest-info div {
display: flex;
flex-direction: column;
gap: 8px;
font-family: 'Inter', sans-serif;
font-size: 14px;
}

.rsvp-custom-fields--guest-info label {
opacity: 0.6;
}

#live-summary .btn-primary {
width: auto;
}

.express-checkout-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
font-family: 'Inter', sans-serif;
font-size: 14px;
}


#express-checkout-element {
width: 100%;
}


    button .fa-spinner {
        background-color: transparent;
        }


button .fa-solid {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    }

    button .fa-spinner::before {
        border: 2px solid black;
        }
        
        .rsvp-custom-fields {
          display: flex;
          flex-direction: column;
          gap: 20px;
        }
        
        .checkbox {
          display: flex;
          flex-direction: row;
          align-items: center;
          gap: 8px;
          margin-bottom: 8px;
        }
        
        .field p {
          font-size: 12px;
        }
        
        .email-spell-checker {
          font-family: 'Inter', sans-serif;
          font-size: 14px;
          gap: 12px;
          display: flex;
          flex-direction: row;
          align-items: center;
        }
        
                .email-spell-checker span {
          opacity: 0.6;
        }
        
                .email-spell-checker button {
background-color: black;
color: #A1A4A5;
border-radius: 12px;
font-size: 14px;
font-family: 'Inter', sans-serif;
text-transform: none;
font-weight: 600;
padding: 12;
border: none;
cursor: pointer;
display: flex;
align-items: center;
flex-grow: 1;
justify-content: center;
width: fit-content;
transition: 0.2s ease;
        }
        
                        .email-spell-checker button:hover {
background-color: #1A1D1F;
transition: 0.2s ease;
        }
        
                        .email-spell-checker button[title="Yes"]:after {
            content: 'Yes';
            color: white;
        }
        
                                .email-spell-checker button[title="No"]:after {
            content: 'No';
            color: white;
        }
        
                                .email-spell-checker button i {
            display: none;
        }
        
        
        .promotion-codes div {
          display: flex;
          flex-direction: column;
          font-family: 'Inter', Arial;
          font-size: 14px;
          gap: 12px;
        }
        
                .promotion-codes div label {
          opacity: 0.6;
                }
        
        .promotion-codes .btn {
background-color: #151619;
color: #A1A4A5;
border-radius: 12px;
font-size: 14px;
font-family: 'Inter', sans-serif !important;
text-transform: none;
font-weight: 600;
padding: 12;
border: none;
cursor: pointer;
display: flex;
align-items: center;
flex-grow: 1;
width: 100%;
justify-content: center;
transition: 0.2s ease;
height: 40px;
border: 1px solid #2B3035;
}

        .promotion-codes  .btn:hover {
background-color: #1A1D1F;
transition: 0.2s ease;
}

        .not_found .btn:after {
content: 'Remove';
}


.not_found {
            font-family: 'Inter', Arial;
          font-size: 14px;
                    display: grid;
          grid-template-columns: 1fr 1fr;
          align-items: center;
          gap:12px;
          margin-top: 20px;
}

.not_found span {
            opacity:0.6;
}

.promotion-codes .fa-solid {
  display: none !important;
}

.promotion-codes  .available {
              font-family: 'Inter', Arial;
          font-size: 14px;
                    display: grid;
          grid-template-columns: 1fr 1fr;
          align-items: center;
          gap:12px;
          margin-top: 20px;
}

.promotion-codes  .available .btn:after {
content: 'Remove';
}
        


@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
padding: 80 20 80 20;
}

.title {
font-size: 60px;
}
}